jQuery常用选择器详解
一、什么是jQuery选择器
1、jQuery选择器完全继承了CSS风格。利用jQuery选择器，可以非常便捷和快速地找出特定的DOM元素，然后为它们添加相应的行为，而无需担心浏览器是否支持这一选择器。
二、jQuery选择器的优势
1、简洁的写法
查找id为aa的元素：$("#aa")
DOM写法，document.getElementById("aa")
2、支持CSS1到CSS3
3、完善的处理机制
获取网页中不存在的元素不会报错，容错机制
4、jQuery选择器是学习jQuery的基础。可见，jQuery选择器的重要性。当然想一下子掌握所有选择器也是困难的，这个得靠实践和积累。
三、常用的基本选择器
1、#id
根据给定的id匹配一个元素
例子：
$("#test") //选取id为test的那个元素2、.classname
根据给定的类名匹配一个元素
例子：
$(".test") //选取所有class为test的元素3、classname
根据给定的元素名匹配元素
例子：
$("p") //选取所有的p元素4、*
匹配所有元素
例子：
$("*") //选取页面上的所有元素5、select1,select2
将每一个匹配到的元素合并后一起返回
例子：
$("div,span") //查找页面里所有的div元素和所有的span元素，把找到的元素拼起来一起返回6、常用的基本选择器.html
<html>
<head>
<script type="text/javascript" src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function() {
alert($("#ID").val()); //根据id选择
alert($("a").html()); //查找a标签
alert($(".classname").val()); //查找class等于classname的所有元素
alert($("*").length); //查找页面上所有元素，共8个，所有开标签
alert($("input,a").length); //查找input元素和a元素，返回组合
});
</script>
</head>
<body>
<input type="text" id="ID" value="根据ID选择" />
<a>根据元素名称选择</a>
<input type="text" class="classname" value="根据元素css类名选择" />
</body>
</html>四、常用的层次选择器
1、ancestor descendant
元素之间用空格隔开
选取ancestor元素里的所有descendant元素
例子：
$("div span") //选取div标签里的所有span元素，包括它的后代元素（包括孙子、孙子的孙子。。。）2、parent>child
元素之间用大于号隔开
获取parent元素下的child元素，匹配指定元素的第一级子元素，而不是所有的后代元素
例子：
$("div>span") //选取div元素下，元素名是span的子元素3、prev+next
元素之间用加号隔开
选取紧接在prev元素后next元素
例子：
$(".one+div") //选取class属性为one的下一个div的同辈元素，紧挨着它后面的4、prev~siblings
元素之间用波浪号隔开
选取prev元素之后的所有siblings元素
例子：
$(".one~div") //找之后的所有同辈元素5、常用的层次选择器.html
<html>
<head>
<script type="text/javascript" src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function() {
alert($("#ID").val()); //根据id选择
alert($("a").html()); //查找a标签
alert($(".classname").val()); //查找class等于classname的所有元素
alert($("*").length); //查找页面上所有元素，共8个，所有开标签
alert($("input,a").length); //查找input元素和a元素，返回组合
});
</script>
</head>
<body>
<input type="text" id="ID" value="根据ID选择" />
<a>根据元素名称选择</a>
<input type="text" class="classname" value="根据元素css类名选择" />
</body>
</html>五、常用的基本过滤选择器
1、与css中伪类选择器类似
a:hover
2、:first
选取第一个元素
例子：
$("div:first") //找出所有的div，过滤取第一个3、:last
选取最后一个元素
4、:not(selector)
去除所有与给定选择器匹配的元素
例子：
$("input:not(.myclass)") //查找所有input元素，过滤出class属性不是myclass的元素5、:even
选取索引值为偶数的所有元素，从0开始计数
例子：
$("div:even") //把div元素都选出来，去除奇数的元素6、:odd
选取索引值为奇数的所有元素，从0开始计数
7、:eq(index)
匹配一个给定索引值的元素，从0开始
例子：
$("div:eq(1)") //找到所有div元素，取出下标为1的那个8、:gt(index)
匹配大于给定索引值的元素，从0开始
例子：
$("div:gt(1)") //找到所有div元素，取出索引值大于1的，去除了0和19、:lt(index)
匹配小于给定索引值的元素，从0开始
10、:header
选择h1，h2，h3一类的标签，就是标题标签
11、:animated
匹配正执行动画效果的元素
12、常用的基本过滤选择器.html
<html>
<head>
<script type="text/javascript" src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function() {
alert($("li:first").html()); //查找所有li元素，过滤选择第一个
alert($("li:last").html()); //查找所有li元素，过滤选择最后一个
alert($("ul input:not(:checked)").val()); //查找ul里面所有input元素，过滤出没有checked的元素
alert($("li:even").length); //取出所有li元素的偶数项
alert($("li:even").get(1).innerHTML); //打印成熟，取出数组下标0和2，然后再取第二个
alert($("li:odd").get(1).innerHTML); //打印担当
alert($("li:eq(2)").html()); //打印成熟
alert($("li:gt(1)").length); //取出大于下标1的li元素
alert($("li:lt(3)").length);
alert($(":header").length); //查找标题标签
});
</script>
</head>
<body>
<div id="divTest">
<ul>
<li>投资</li>
<li>理财</li>
<li>成熟</li>
<li>担当</li>
<input type="radio" value="学习" checked="checked" />学习
<input type="radio" value="不学习" />不学习
<h1>Header 1</h1>
<h2>Header 2</h2>
</ul>
</div>
</body>
</html>六、常用的内容过滤选择器
1、内容过滤选择器，它的过滤规则主要体现在它所包含的子元素，或者文本内容上
2、:contains(text)
匹配包含给定文本的元素
3、:empty
匹配所有不包含子元素或者不包含文本的空元素
4、:has(selector)
匹配含有选择器所匹配元素的元素
5、:parent
选取含有子元素或者文本的元素
我要查的元素内部，必须包含一个子元素或者一个文本元素
6、常用的内容过滤选择器.html
<html>
<head>
<script type="text/javascript" src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function() {
alert($("li:contains('chenhao')").html()); //查找li元素，过滤出包含chenhao的
alert($("li:empty").length); //查找li元素，过滤出没有子元素没有文本元素的
alert($("li:has(a)").html()); //查找li元素，过滤出包含a元素的
alert($("li:parent").length); //查找li元素，过滤出包含子元素或包含文本元素的
});
</script>
</head>
<body>
<div id="Test">
<ul>
<li>chenhao投资</li>
<li>zhangsan</li>
<li></li>
<li>理财</li>
<li><a>投资</a></li>
</ul>
</div>
</body>
</html>七、常用的可见性过滤选择器
1、:hidden
选取所有不可见的元素
2、:visible
选取所有可见的元素
3、常用的可见性过滤选择器.html
<html>
<head>
<script type="text/javascript" src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function() {
alert($("li:hidden").html()); //查找li元素，里面的隐藏的那个元素
alert($("li:visible").html()); //查找li元素，里面的可见的那个元素
});
</script>
</head>
<body>
<ul>
<li>可见</li>
<li style="display:none;">不可见</li>
</ul>
</body>
</html>八、常用的属性过滤选择器
1、过滤规则是通过元素的属性来获取响应的元素
2、[attribute]
选取拥有此属性的元素
3、[attribute=value]
选取属性值等于value的元素
4、[attribute!=value]
选取属性值不等于value的元素
5、[attribute^=value]
选取属性值以value开始的元素
6、[attribute$=value]
选取属性值以value结尾的元素
7、[attribute*=value]
选取属性值包含value的元素
8、[attribute~=value]
选取属性值包含value且以空格隔开的元素
9、[attribute1][attribute2]...
多个属性选择器合并成一个复合属性选择器
10、常用的属性过滤选择器.html
<html>
<head>
<script type="text/javascript" src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function() {
alert($("input[name]").length); //查找所有input元素，过滤出包含name属性的input
alert($("input[type='text']").length); //查找所有input元素，过滤出type等于text的input
alert($("input[type!='text']").length);
alert($("input[name^='s']").length); //查找所有input元素，过滤出name以s开头的input
alert($("input[name$='hu']").val()); //查找所有input元素，过滤出name以hu结尾的input
alert($("input[name*='o']").length); //所有包含o的元素
alert($("input[name~='tong']").val()); //必须包含tong，并且tong前面或后面用空格隔开
alert($("input[type^='b'][name~='hai']").val()); //type以b开头，name必须包含hai，并且有空格隔开
});
</script>
</head>
<body>
<input type="text" name="baidu" value="百度" /><br/>
<input type="text" name="sohu" value="搜狐" /><br/>
<input type="text" name="google" value="谷歌" /><br/>
<input type="text" name="sogou" value="搜狗" /><br/>
<input type="text" name="sina" value="新浪" /><br/>
<input type="button" name="hai tong" value="海通科技"/>
</body>
</html>九、常用的子元素过滤选择器
1、区分清楚父元素和子元素，与普通的过滤选择器的区别
2、:first-child
选取每个父元素下的第一个子元素
3、:first-of-type
选取同名兄妹节点的第一个子元素的所有元素
4、:last-child
选取每个父元素下的最后一个子元素
5、:last-of-type
选取同名兄妹节点的最后一个子元素的所有元素
6、:only-child
选取父元素中具有唯一的子元素的所有元素
7、:only-of-type
选取前后没有同名兄妹节点的子元素的所有元素
8、:nth-child(index/even/odd)
选取每个父元素下的第index个子元素或奇偶元素（index从1开始算起）
9、:nth-last-child(index/even/odd)
取每个父元素下的第index个子元素，从最后一个往第一个数（index从1开始算起）
10、常用的子元素过滤选择器.html
<html>
<head>
<script type="text/javascript" src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function() {
alert($("div :first-child").text()); //取出所有div里，第一个子元素的文本
alert($("div span:first-child").text()); //取出所有div里，第一个子元素为span的元素
alert($("div span:last-child").text()); //查找div元素下面的，最后一个子元素为span的元素
alert($("div span:first-of-type").text()); //查找div元素下面，第一个span元素，前后有同名兄妹节点的元素
alert($("div b:only-child").text()); //选取div下面，只具有唯一一个b元素的那个元素，不能有其他元素
alert($("div span:nth-child(2)").text()); //选取div下面，第二个元素是span元素的集合
alert($("div span:nth-child(1)").text());
alert($("div b:only-of-type").text()); //查找div下面，前后没有同名兄妹节点的b元素
alert($("div span:nth-child(even)").text()); //选取div下面，偶数行的span元素的集合
alert($("div span:nth-child(odd)").text());
});
</script>
</head>
<body>
<div>
<span>Corey,</span>
<span>Yehuda,</span>
<span>Adam,</span>
<span>Todd</span>
</div>
<div>
<b>Nobody,</b>
<span>Jorn,</span>
<span>Scott,</span>
<span>Timo</span>
</div>
<div>
<b>chenhao</b>
</div>
<div>
<b>zhangsan</b>
<b>xiaoqiang</b>
<i>wangwu</i>
</div>
</body>
</html>十、常用的表单选择器
1、:input
选取所有<input>、<textarea>、<select>和<button>元素
2、:text
选取所有的单行文本框
3、:password
选取所有密码框
4、:radio
选取所有单选按钮
5、:checkbox
选取所有复选框
6、:submit
选取所有提交按钮
7、:image
选取所有图像按钮
8、:reset
选取所有重置按钮
9、:button
选取所有按钮
10、:file
选取所有上传域
11、常用的表单选择器.html
<html>
<head>
<script type="text/javascript" src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function() {
alert($(":input").length); //15个，不包含img标签
alert($(":text").length); //单行文本框
alert($(":password").length); //密码文本框
alert($(":radio").val()); //单选按钮
alert($(":checkbox").val()); //复选框
alert($(":submit").val()); //提交按钮
alert($(":reset").val()); //重置按钮
alert($(":image").length); //图片按钮，不是图片框
alert($(":button").length); //普通按钮
alert($(":file").length); //文件域
});
</script>
</head>
<body>
<form name="myform">
<input type="button" value="Input Button" /><br/>
<input type="checkbox" value="footbail" /><br/>
<input type="file" name="upload" /><br/>
<input type="hidden" value="ok" /><br/>
<input type="image" src="a.jpg" /><br/>
<input type="password" name="pass" value="111" /><br/>
<input type="radio" value="male"/>male<br/>
<input type="reset" value="重置" /><br/>
<input type="submit" value="提交" /><br/>
<input type="text" name="name" value="chenhao" /><br/>
<input type="text" name="age" value="age" /><br/>
<select>
<option>Option1</option>
<option>Option2</option>
</select><br/>
<textarea cols="10" rows="5">多行文本框</textarea><br/>
<button type="button">Button</button><br/>
<input type="image" src="b.jpg" /><br/>
<img src="b.jpg" />
</form>
</body>
</html>十一、常用的表单对象属性过滤选择器
1、:disabled
选取所有不可用的元素
2、:enabled
选取所有可用的元素
3、:checked
选取所有被选中的元素（单选框和复选框）
4、:selected
选取所有被选中的选项元素（下拉列表）
5、常用的表单对象属性过滤选择器.html
<html>
<head>
<script type="text/javascript" src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function() {
alert($(":text:disabled").length); //查找所有text文本框，过滤出为disabled的
alert($(":text:enabled").length);
alert($(":input:checked").length); //查找所有input元素，过滤出为checked的
alert($("select :selected").text()); //查找所有select表单元素，过滤出为selected的
});
</script>
</head>
<body>
<form name="myform">
<input type="text" name="myname" value="chenhao" /><br/>
<input type="text" name="myage" value="34" disabled="disabled" /><br/>
<input type="text" name="pass" value="123" /><br/>
<input type="text" name="dog" value="阿旺" disabled="disabled" /><br/>
<input type="checkbox" name="hobby" value="football" checked="checked" />足球<br/>
<input type="checkbox" name="hobby" value="basketball" />篮球<br/>
<input type="checkbox" name="hobby" value="tennis" />网球<br/>
<select name="test" multiple="multiple">
<option selected="selected">浙江</option>
<option>湖南</option>
<option>北京</option>
<option>天津</option>
<option selected="selected">上海</option>
</select>
</form>
</body>
</html>十二、选择器中含有空格的注意事项
1、例子
var $t1=$(.test :hidden)
var $t2=$(.test:hidden)
两者区别是：
第一种写法代表选取class为“test”的元素内的所有隐藏元素。
第二种写法代表选取所有隐藏元素中class为“test”的元素。
412
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
