选择器是jQuery的根基，jQuery选择器的种类有很多，大体上可以分为：类CSS选择器和过滤选择器。
常用的类CSS选择器有：基本选择器、层次选择器、属性选择器。
1.基本选择器，
标签选择器：$("h2")选择所有 h2元素，
类选择器：$(".dong")选取所有 class="dong"的元素，
ID选择器：$("#myDog")选取 id="myDog"的元素，
并集选择器：$("div , .title")选取 所有div和拥有class="title"的元素，
交集选择器：$("div.title")选取所有拥有 class="title"的div元素，
全局选择器：$("*")选取所有元素。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>jQuery库</title>
<script src="js/jquery-3.2.1.js"></script><!--引入jQuery库-->
<script>
$(document).ready(function(){
//选取div标签和class="key"元素的并集，并将背景颜色设置为黄色
$("div.key").css("background","yellow");
});
</script>
</head>
<body>
<div class="tile">hello world</div><br/>
<div class="key">你好世界</div><br/>
<span class="first">我们是英雄</span>
</body>
</html>
2.层次选择器：
相邻元素选择器：$("h1 +div") 选取紧邻<h1>元素之后的同辈元素<div>，最多只选中一个，
同辈元素选择器：$("h1 ~div") 选取<h1>元素之后所有的同辈元素<div>，可能选中多个元素，
后代选择器：$("#dog span") 选取id="dog"的所有<span>元素，
子选择器：$("#dog >span")选取id="dog"的子元素<span>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="js/jquery-3.2.1.js"></script>
<style>
#se{list-style: none;}
</style>
<script>
$(document).ready(function(){
$("#he >span").css("background","blue");
});
</script>
</head>
<body>
<div id="he">
<ul id="se">
<li><span>12</span></li><br/>
<li><span>34</span></li><br/>
<li><span>56</span></li>
</ul>
<span>89745</span>
</div>
</body>
</html>
3.属性选择器：
$("[name]")选取含有 name属性的元素，
$("[name='stuName']")选取name属性值为 stuName的元素，
$("[name!=''stuAge]")选取name属性不等于stuName的元素，
$("[name $='me']")选取name属性值以me结尾的元素，
$("[name *='nw']")选取name属性值中含有nw的元素。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="js/jquery-3.2.1.js"></script>
<script>
$(document).ready(function(){
//将name属性值以Me结尾的元素的背景颜色设置为黄色
$("[name $='Me']").css("background-color","yellow");
});
</script>
</head>
<body>
学号：<input type="text" name="xueMe"/><br/>
姓名：<input type="text" name="xinge" /><br/>
年龄：<input type="text" name="lingMe"/>
</body>
</html>
2.过滤选择器，常用的过滤选择器有基本过滤选择器、可见性过滤选择器等。
基本过滤选择器：
：first， $("li:first")选取所有<li>元素的第一个<li>元素，
：last , $("li:last")选取所有<li>元素的最后一个<li>元素，
：even, $("li:even")选取索引是偶数的所有<li>元素，
：odd, $("li:odd")选取索引是奇数的所有<li>元素，
：eq(index), $("li:eq(1)")选取索引等于1的<li>元素，
：gt(index), $("li:gt(1)")选取索引大于1的<li>元素（不包括1），
：lt(index), $("li:lt(4)")选取索引小于4的<li>元素（不包括4），
：not(选择器)， $("li:not(#myDog)")选取id值不是myDog的<li>元素，
：header, $(":header")选取网页中所有标题元素，
：focus, $(":focus")选取当前获取焦点的元素。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="js/jquery-3.2.1.js"></script>
<script>
$(document).ready(function(){
//改变索引值大于1的<li>元素的背景颜色
$("li:gt(1)").css("background-color","yellow");
});
</script>
</head>
<body>
<ul>
<li>蓝色</li>
<li>黄色</li>
<li>红色</li>
<li>蓝色</li>
</ul>
</body>
</html>
2.可见性过滤选择器：
：visible , $(":visible")选取所有可见的元素，
：hidden , $(":hidden")选取所有隐藏的元素。
例如$("p:hidden").show()表示将所有隐藏的<p>元素的状态变为显示；$("p:visible").hide()表示将所有可见的<p>元素的状态变为隐藏。show()的功能是显示，hide()的功能是隐藏。
扫一扫
911
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
