一、本課目標
- 掌握jQuery的過濾選擇器
問題提出：如何實現(xiàn)同一個列表不同樣式？
image.png
二、過濾選擇器
2.1簡介
1、通過特定的過濾規(guī)則來篩選出所需的元素
2、主要分類：
- 基本過濾選擇器
- 可見性過濾選擇器
- 表單對象過濾選擇器
- 內(nèi)容過濾選擇器、子元素過濾選擇器
2.2基本過濾選擇器
image.png
image.png
示例代碼：
html文件：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>仿冬奧列表內(nèi)容</title>
<link rel="stylesheet" href="css/games.css">
</head>
<body>
<div class="contain">
<h2>祝福冬奧</h2>
<ul>
<li> 貝克漢姆：衷心希望北京能夠申辦成功！</li>
<li> 姚明：北京申冬奧是個非常棒的機會！加油！</li>
<li> 張虹：北京辦冬奧，大家的熱情定超乎想象！ </li>
<li> 肖恩懷特：我愛北京，支持北京申辦冬奧會！</li>
<li> 趙宏博：北京申辦冬奧會是再合適不過了！</li>
<li> 你喜歡哪些冬季運動項目？(點擊進入調(diào)查頁)</li>
</ul>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/games.js"></script>
</body>
</html>
css文件：
*{padding:0;margin:0;}
html,body{font-family:"微軟雅黑";}
.contain{width:320px;margin:5px auto; border: 1px solid #2a65ba;}
ul{list-style:none;}
li{padding-left:15px;line-height:40px;font-size:12px;color:#000;border-bottom:1px #aaaaaa dashed;}
h2{font-size:16px;padding-left:20px;line-height:40px;}
js文件：
$(document).ready(function(){
// 獲取標題元素
$(".contain :header").css({"background":"red", "color":"blue"});
// 獲取第一個li元素
$(".contain li:first").css({"font-size":"15px", "color":"blue"});
// 獲取最后一個li元素
$(".contain li:last").css("border", "none");
// 選擇偶數(shù)行
$(".contain li:even").css("background", "grey");
// 選擇奇數(shù)行
$(".contain li:odd").css("background", "green");
// 獲取前兩個li
$(".contain li:lt(2)").css("background", "red");
// 獲取最后兩個li
$(".contain li:gt(3)").css("background", "yellow");
// 獲取第三個li元素
$(".contain li:eq(2)").css("background", "white");
});
2.3可見性過濾選擇器
image.png
示例代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>可見性過濾選擇器</title>
<style type="text/css">
#txt_show {display:none; color:#00C;}
#txt_hide {display:block; color:#F30;}
</style>
</head>
<body>
<p id="txt_hide">點擊按鈕，我會被隱藏哦~</p>
<p id="txt_show">隱藏的我，被顯示了，嘿嘿^^</p>
<input name="show" type="button" value="顯示隱藏的P元素" id="show"/>
<input name="hide" type="button" value="隱藏顯示的P元素" id="hide" />
<script src="js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
$("#show").click(function(){
$("p:hidden").show();
})
$("#hide").click(function(){
$("p:visible").hide();
})
})
</script>
</body>
</html>
2.4jQuery選擇器注意事項
1、特殊符號的轉(zhuǎn)義
image.png
2、選擇器中的空格
選擇器的書寫規(guī)范很嚴格，多一個空格或者少一個空格，都會影響選擇器的效果。
image.png
三、總結(jié)
