jquery选择器之基本筛选器
Posted 孔扎根
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery选择器之基本筛选器相关的知识,希望对你有一定的参考价值。
html示例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--HTML区域--> <h1>第一个标题</h1> <div class="nav-2014"> <div class="w"> <div class="w-spacer"></div> <div class="categorys"> <div class="dt">家用电器分类</div> </div> <span class="hr"></span> <div class="navitems-2014"> <div id="treasure"></div> <span class="clr"></span> <span class="chr"></span> 男:<input type="checkbox" checked="checked" value="nan"> 女:<input type="checkbox" value="nv"> </div> </div> </div> <h2>第二个标题</h2> <div id="electronic"> <div id="firstScreen">1 <div class="w">2</div> </div> <ul> <div class="u_c" lang="en-us"></div> <li class="ui-switch-curr"></li> <li class="ui-switch-item"></li> <li class="ui-switch-next"></li> <li class="ui-switch-sub"></li> </ul> <div class="secord_screen"></div> <div class="third_screen"></div> </div> </body> </html>
伪类选择器:即以:开头的
:first 获取第一个元素
:not(selector) 去除所有选定的元素
:even 匹配索引为偶数的元素
:odd 匹配索引为奇数的元素
:eq(index) 匹配给定的索引
:gt(index) 大于指定的索引
:lt(index) 小于指定的索引
:last 匹配获取的最后一个元素
:header 匹配所有标题元素
示例:
<!--jquery区域--> <script src="jquery-3.1.0.js"></script> <script> // 获取id为electronic下所有孩子div中的第一个,即id为firstScreen的div $("#electronic > div:first") // 获取所有li元素中最后一个元素 $("li:last") // 获取所有input元素中非checked的元素,即女:<input type="checkbox" value="nv"> $("input:not(:checked)") // 获取所有li元素中索引为0,2,4...的元素 $("li:even") // 获取所有li元素中索引为1,3,5...的元素 $("li:odd") // 获取所有li元素中索引为1的元素 $("li:eq(1)") // 获取所有li元素中索引大于1的元素 $("li:gt(1)") // 获取所有li元素中索引小于1的元素 $("li:lt(1)") // 给所有标题加上背景色 $(":header").css("background","red") console.log(cls) </script>
以上是关于jquery选择器之基本筛选器的主要内容,如果未能解决你的问题,请参考以下文章