<!--
案例一：
改變 id 為 one 的元素的背景色為 # bbffaa
改變 class 為 mini 的所有元素的背景色為 # bbffaa
改變元素名為 <div> 的所有元素的背景色為 # bbffaa
改變所有元素的背景色為 # bbffaa
改變所有的<span>元素和 id 為 two 的元素的背景色為 # bbffaa
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>seletor_work1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- 引入js類庫 -->
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/* //改變 id 為 one 的元素的背景色
$("#one").css("background-color","#bbffaa");//屬性名稱，屬性值
//改變 class 為 mini 的所有元素的背景色
$(".mini").css("background-color","#bbffaa");
//改變元素名為 <div> 的所有元素的背景色
$("div").css("background-color","#bbffaa");
*/
//改變所有元素的背景色;html跟body的效果一樣
// $("html").css("background-color","#bbffaa");
// $("body").css("background-color","#bbffaa");
$("*").css("background-color","#bbffaa");
//改變所有的<span>元素和 id 為 two 的元素的背景色
//$("span,#two").css("background-color","#bbffaa");
});
</script>
</head>
<body>
<div id="one" style="width: 100px; height:60px; background-color: red; "></div>
<div class="mini" style="width: 60px; height:30px; background-color: blue; "></div>
<div style="width: 60px; height:100px; background-color: yellow; "></div>
<span style="width: 100px; height:60px; background-color: teal; "></span>
<p id="two" style="width: 100px; height:60px; background-color: green; "></p>
</body>
</html>
<!—
案例二：
改變 <body> 內所有 <div> 的背景色為 # bbffaa
改變 <body> 內子 <div> 的背景色為 # bbffaa
改變 id 為 one 的下一個 <div> 的背景色為 # bbffaa
改變 id 為 two 的元素後面的所有兄弟<div>的元素的背景色為 # bbffaa
改變 id 為 two 的元素所有 <div> 兄弟元素的背景色為 # bbffaa
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>work2.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//說明一點：在js中顏色的屬性加不加#都可以顯示出來；比如bbffaa 跟 #bbffaa效果一樣
//改變 <body> 內所有 <div> 的背景色
//$("body div").css("background-color","bbffaa");
//改變 <body> 內子 <div> 的背景色
//$("body>div").css("background-color","bbffaa");
//改變 id 為 one 的下一個 <div> 的背景色
//$("#one+div").css("background-color", "bbffaa");
//改變 id 為 two 的元素後面的所有兄弟<div>的元素的背景色
//$("#two~div").css("background-color", "bbffaa");
//改變 id 為 two 的元素所有 <div> 兄弟元素的背景色,不論順序，前後都算
$("#two").siblings().css("background-color", "bbffaa");
});
</script>
</head>
<body>
<div>
<div id="one"
style="width: 300px; height:300px; background-color: teal; ">
<div style="width: 260px; height:100px; background-color: pink; "></div>
<div id="two"
style="width: 90px; height:20px; background-color: yellow; "></div>
<div style="width: 100px; height:100px; background-color: red; "></div>
<div style="width: 200px; height:60px; background-color: green; "></div>
</div>
<div style="width: 100px; height:60px; background-color: blue; "></div>
</div>
</body>
</html>
<!--
案例三：
改變第一個 div 元素的背景色為 # bbffaa
改變最後一個 div 元素的背景色為 # bbffaa
改變class不為 one 的所有 div 元素的背景色為 # bbffaa
改變索引值為偶數的 div 元素的背景色為 # bbffaa
改變索引值為奇數的 div 元素的背景色為 # bbffaa
改變索引值為大於 3 的 div 元素的背景色為 # bbffaa
改變索引值為等於 3 的 div 元素的背景色為 # bbffaa
改變索引值為小於 3 的 div 元素的背景色為 # bbffaa
改變所有的標題元素的背景色為 # bbffaa
改變當前正在執行動畫的所有元素的背景色為 # bbffaa
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>work3.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 改變第一個 div 元素的背景色為
// $("div:first").css("background-color","#bbffaa");
//改變最後一個 div 元素的背景色為
// $("div:last").css("background-color","#bbffaa");
//改變class不為 one 的所有 div 元素的背景色
//$("div:not('.one')").css("background-color", "#bbffaa");
//改變索引值為偶數的 div 元素的背景色
//$("div:even").css("background-color", "#bbffaa");
//改變索引值為奇數的 div 元素的背景色
//$("div:odd").css("background-color", "#bbffaa");
//改變索引值為大於 3 的 div 元素的背景色
//$("div:gt(3)").css("background-color", "#bbffaa");
//改變索引值為等於 3 的 div 元素的背景色
//$("div:eq(3)").css("background-color", "#bbffaa");
//改變索引值為小於 3 的 div 元素的背景色
//$("div:lt(3)").css("background-color", "#bbffaa");
//改變所有的標題元素的背景色;這裡注意：如果h1標題沒有在div裡，那麼切記去掉:之前的元素範圍div
$(":header").css("background-color", "#bbffaa");
//改變當前正在執行動畫的所有元素的背景色
$(":animated").css("background-color", "#bbffaa");
});
</script>
</head>
<body>
<h1 style="width: 500px; height:100px; background-color: green; ">jQuery過濾選擇器之變色龍</h1>
<div class="one"
style="width: 260px; height:60px; background-color: pink; "></div>
<div class="one"
style="width: 260px; height:60px; background-color: blue; "></div>
<div style="width: 260px; height:60px; background-color: red; "></div>
<div style="width: 260px; height:60px; background-color: yellow; "></div>
<div class="one"
style="width: 260px; height:60px; background-color: teal; "></div>
<embed src="../video/1.3gp">
</body>
</html>
<!--
案例四：
改變含有文字 ‘di’ 的 div 元素的背景色為 # bbffaa
改變不包含子元素(或者文字元素) 的 div 空元素的背景色為 # bbffaa
改變含有 class 為 mini 元素的 div 元素的背景色為 # bbffaa
改變含有子元素(或者文字元素)的div元素的背景色為 # bbffaa
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>work4.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//改變含有文字 ‘di’ 的 div 元素的背景色為 # bbffaa
//$("div:contains(di)").css("background-color","#bbffaa");
//改變不包含子元素(或者文字元素) 的 div 空元素的背景色為 # bbffaa
//$("div:empty").css("background-color","#bbffaa");
//改變含有 class 為 mini 元素的 div 元素的背景色為 # bbffaa
$("div.mini").css("background-color","#bbffaa");
//改變含有子元素(或者文字元素)的div元素的背景色為 # bbffaa
//$("div:parent").css("background-color","#bbffaa");
});
</script>
</head>
<body>
<div class="mini"
style="width: 260px; height:60px; background-color: blue; ">div</div>
<div style="width: 260px; height:60px; background-color: red; ">di</div>
<div style="width: 260px; height:60px; background-color: yellow; ">dd</div>
<div class="mini"
style="width: 260px; height:60px; background-color: teal; "></div>
</body>
</html>
<!--
案例五：
改變所有可見的div元素的背景色為 # bbffaa
選取所有不可見的元素, 利用 jQuery 中的 show() 方法將它們顯示出來, 並設定其背景色為 # bbffaa
選取所有的文字隱藏域, 並列印它們的值
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>work5.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 改變所有可見的div元素的背景色
//$("div:visible").css("background-color","#bbffaa");
//選取所有不可見的元素, 利用 jQuery 中的 show() 方法將它們顯示出來
$(":hidden").show().css("background-color","#bbffaa");
//選取所有的文字隱藏域
var $divs = $("div:hidden");
for(var i=0;i<$divs.length;i++){
alert($($divs[i]).val());
}
alert($("input:hidden").val());
});
</script>
</head>
<body>
<div style="width: 260px; height:60px; background-color: red; ">di</div>
<div style="width: 260px; height:60px; background-color: yellow; visibility: hidden;" value="yang">fff</div>
<div style="width: 260px; height:60px; background-color: yellow; display: none" value="kai">dd</div>
<input style="width: 260px; height:60px; background-color: yellow;" type="hidden" value="eeee" />
</body>
</html>
<!—
案例六：
選取下列元素,改變其背景色為 # bbffaa
含有屬性title 的div元素.
屬性title值等於"test"的div元素.
屬性title值不等於"test"的div元素(沒有屬性title的也將被選中).
屬性title值 以"te"開始 的div元素.
屬性title值 以"est"結束 的div元素.
屬性title值 含有"es"的div元素.
選取有屬性id的div元素，然後在結果中選取屬性title值含有“es”的 div 元素.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>work6.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//含有屬性title 的div元素
//$("div[title]").css("background-color","#bbffaa");
//屬性title值等於"test"的div元素
//$("div[title='test']").css("background-color","#bbffaa");
//屬性title值不等於"test"的div元素(沒有屬性title的也將被選中).
//$("div[title!='test']").css("background-color","#bbffaa");
//屬性title值 以"te"開始 的div元素.
//$("div[title^='te']").css("background-color","#bbffaa");
//屬性title值 以"est"介紹的div元素.
//$("div[title$='est']").css("background-color","#bbffaa");
//屬性title值 含有"es"的div元素.
//$("div[title*='es']").css("background-color","#bbffaa");
//屬性title值 含有"es"的div元素.
$("div[id][title*='es']").css("background-color","#bbffaa");
});
</script>
</head>
<body>
<div title="test" style="width: 260px; height:60px; background-color: red; ">di</div>
<div title="te" style="width: 260px; height:60px; background-color: yellow;">fff</div>
<div title="est" id="ee" style="width: 260px; height:60px; background-color: yellow;">dd</div>
<div title="es" id="e" style="width: 260px; height:60px; background-color: red; ">di</div>
<div style="width: 260px; height:60px; background-color: teal; ">di</div>
</body>
</html>
<!—
案例七：
選取下列元素,改變其背景色為 # bbffaa
每個class為one的div父元素下的第2個子元素.
每個class為one的div父元素下的第一個子元素
每個class為one的div父元素下的最後一個子元素
如果class為one的div父元素下的僅僅只有一個子元素，那麼選中這個子元素
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>work7.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 每個class為one的div父元素下的第2個子元素
//$(".one>:nth-child(2)").css("background-color","#bbffaa");
//每個class為one的div父元素下的第一個子元素
//$(".one>:first-child").css("background-color","#bbffaa");
//每個class為one的div父元素下的最後一個子元素
//$(".one>:last-child").css("background-color","#bbffaa");
//如果class為one的div父元素下的僅僅只有一個子元素，那麼選中這個子元素
$(".one>:only-child").css("background-color", "#bbffaa");
});
</script>
</head>
<body>
<div class="one"
style="width: 300px; height:60px; background-color: red; ">
<div style="width: 200px; height:60px; background-color: yellow;">fff</div>
<div style="width: 100px; height:60px; background-color: teal;">dd</div>
<div style="width: 500px; height:60px; background-color: red;">ddqq</div>
</div>
<div class="one"
style="width: 300px; height:60px; background-color: yellow; ">
<div style="width: 200px; height:60px; background-color: teal;">fff</div>
</div>
<div class="two"
style="width: 300px; height:60px; background-color: green; ">
<div style="width: 200px; height:60px; background-color: yellow;">fff</div>
<div style="width: 100px; height:60px; background-color: teal;">dd</div>
<div style="width: 500px; height:60px; background-color: green;">ddqq</div>
</div>
</body>
</html>