一、本课目标
- 掌握jQuery的过滤选择器
问题提出：如何实现同一个列表不同样式？
image.png
二、过滤选择器
2.1简介
1、通过特定的过滤规则来筛选出所需的元素
2、主要分类：
- 基本过滤选择器
- 可见性过滤选择器
- 表单对象过滤选择器
- 内容过滤选择器、子元素过滤选择器
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>仿冬奥列表内容</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> 你喜欢哪些冬季运动项目？(点击进入调查页)</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");
// 选择偶数行
$(".contain li:even").css("background", "grey");
// 选择奇数行
$(".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、特殊符号的转义
image.png
2、选择器中的空格
选择器的书写规范很严格，多一个空格或者少一个空格，都会影响选择器的效果。
image.png
三、总结
