JQuery选择器
选择器是JQuery的根基，在JQuery中，对事件处理，遍历DOM和Ajax操作都依赖于选择器。
JQuery选择器的优点：
· 简介的写法
$("#id") 等价于 document.getElementById(“id”);
· 完善的事件处理机制
2，JQuery选择器类似于CSS选择器，用来选取网页中的元素
JQuery选择器的分类：
类CSS选择器：基本选择器、层次选择器、属性选择器
过滤选择器：基本过滤选择器、可见性过滤选择器
基本选择器
基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本选择器</title>
<script type="text/javascript" src="js/jquery-1.8.3.js">
//src=""引号里写的是jquery-1.8.3.js的路径
</script>
</head>
<body>
<script type="text/javascript">
$(function() {
//标签选择器
$("h2").css("background-color","red"); //设置所有h2标签的背景颜色
//类选择器
$(".t").css("background-color","blue"); //设置所有类名为t的背景颜色
//id选择器
$("#a").css("background-color","black"); //设置所有id名为a的背景颜色
//并集选择器
$("h1,h3,.t").css("background-color","pink"); //设置所有h1、h3、类名为t的元素的背景颜色
//交集选择器
$("h2.s").css("background-color","orange");//设置所有类名为s的h2元素的背景颜色
//全局选择器
$("*").css("background-color","blue"); //设置所有元素的背景颜色
})
</script>
<h1>我</h1>
<h2>爱</h2>
<h2 class="s">好</h2>
<h3 class="t">你</h3>
<h4>哈</h4>
<h5 class="t">呵</h5>
<h6 id="a">滚</h6>
</body>
</html>
属性选择器
属性选择器通过HTML元素的属性来选择元素
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
//属性选择器
$("[title]").css("background-color","coral") //改变含义title属性的li标签的背景颜色
$("[title=s]").css("background-color","coral") //改变title属性值为s的li标签的背景颜色
})
</script>
<ul>
<li title="#">喜洋洋</li>
<li>汤姆</li>
<li title="a">福禄娃</li>
<li>黑猫警长</li>
<li>天线宝宝</li>
<li title="s">奥特曼</li>
<li>阿童木</li>
</ul>
</body>
</html>
基本过滤选择器
基本过滤选择器可以选取第一个元素、最后一个元素、索引为偶数或奇数的元素
基本过滤选择器可以根据索引的值选取元素
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本过滤选择器</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$(function(){
//基本过滤选择器
//选择第一个
$("li:first").css("background-color","coral")
//选择最后一个
$("li:last").css("background-color","red")
//选择下标为偶数 下标从0开始
$("li:even").css("background-color","red")
//选择下标为奇数 下标从0开始
$("li:odd").css("background-color","blue")
//选取下标为3的元素 下标从0开始
$("li:eq(3)").css("background-color","red")
//选取下标大于2的元素，不包括下标为2的元素
$("li:gt(2)").css("background-color","red")
//选取下标小于3的元素，不包括下标为3的元素
$("li:lt(3)").css("background-color","red")
})
</script>
</head>
<body>
<ul>
<li>喜洋洋</li>
<li>汤姆</li>
<li>福禄娃</li>
<li>黑猫警长</li>
<li>天线宝宝</li>
<li>奥特曼</li>
<li>阿童木</li>
</ul>
</body>
</html>
可见性过滤选择的器
可见性选择器可以通过元素显示状态来获取元素
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可见性过滤选择器</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$(function(){
$("[name=show]").click(function(){
$("p:hidden").show();
});
$("[name=hidd]").click(function(){
$("p:visible").hide();
});
});
</script>
</head>
<body>
<p>落霞与孤鹜齐飞</p>
<p style="display: none;">秋水共长天一色</p>
<input type="button" name="show" value="点我显示"/>
<input type="button" name="hidd" value="点我隐藏" />
</body>
</html>