jquery筛选器
Posted 孔扎根
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery筛选器相关的知识,希望对你有一定的参考价值。
1、过滤
eq(index|-index) 获取当前链式操作中第N个jquery对象,正数从0开始,负数从-1开始。
first 获取当前链式操作中第1个jquery对象
last 获取当前链式操作中最后一个jquery对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>this is a test</p> <p>so it is</p> <p>this just a test</p> <div class="div"></div> <script src="jquery-3.1.0.js"></script> <script type="text/javascript"> // 获取所有返回的p元素中第一个和第-2个元素 $("p").eq(1).text() $("p").eq(-2).text() $("p").first() $("p").last() console.log(objs) </script> </body> </html>
2、查找
children([expre]) 所选元素下的所有子元素,
find(e|o|e) 搜索所有与指定表达式匹配的元素,包括子元素、孙元素等
next(expr) 所有匹配的元素紧临的下一个同辈元素的集合
nextAll([expr]) 所有匹配元素后面紧临的所有同辈元素的集合
prev([expr]) 所有匹配的元素紧临的前一个同辈元素的集合
prevAll([expr]) 所有匹配元素前面紧临的所有同辈元素的集合
parent([expr]) 所有匹配元素的唯一父元素,即上一级元素,而不包括上上级元素
siblings([expr]) 所有匹配元素的前后同辈元素集合
示例代码
<!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 class="dp">家用电器价格</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> <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> <ul> <div class="ul_div"></div> <li class="lizi_ws_fruit" name="zhuang_guo"> <div class="test">test</div> 梨</li> <li class="ws_pingguo_fruit" name="zhuan_wang">苹果</li> <li id="elpsq" name="zhuang_dang"></li> </ul> <div class="secord_screen"> <div></div> </div> <div class="third_screen"></div> </div> <!--jquery区域--> <script src="jquery-3.1.0.js"></script> <script> // 匹配id为electronic元素的所有子元素,即下一级元素,孙元素不包括在内 $("#electronic").children() $("#electronic").children("[class$=screen]") // 匹配所有ul标签下的所有div标签,包括子元素及孙元素等 $("ul").find("div") // 匹配id为firstScreen的元素的下一个同辈元素,即ul元素 $("#firstScreen").next() // 匹配span标签的下一个同辈元素中属性为chr的元素 $("span").next(".chr") // 匹配id为firstScreen的元素后面的所有紧临同辈元素 $("#firstScreen").nextAll() // 匹配div标签中class值为test的父元素 $("div .test").parent() // 匹配class属性名为switch的前一个同辈元素 $(".ui-switch-next").prev() // 匹配class属性名为switch的前面所有同辈元素 $(".ui-switch-sub").prevAll() // 匹配class值为ui-switch-next的元素前后所有同辈元素 $(".ui-switch-next").siblings() // 匹配class值为categorys的元素的前后所有同辈元素中,span标签元素 $(".categorys").siblings("span") console.log(objs) </script> </body> </html>
以上是关于jquery筛选器的主要内容,如果未能解决你的问题,请参考以下文章