jQuery基本筛选器-表单筛选器-关系筛选器
一、基本筛选器
:first // 第一个 :last // 最后一个 :eq(index)// 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素,从 0 开始计数 :odd // 匹配所有索引值为奇数的元素,从 0 开始计数 :gt(index)// 匹配所有大于给定索引值的元素 :lt(index)// 匹配所有小于给定索引值的元素 :not(元素选择器)// 移除所有满足not条件的标签 :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <title>基本筛选器</title> </head> <body> <ul id="ul1"> <li>1</li> <li>2</li> <li id="li3">3</li> <li>4</li> <li>5</li> </ul> <script src="jquery-3.3.1.js"></script> <script type="text/javascript"> var ulfirst = $("#ul1>li:first"); // 第一个标签 console.log(ulfirst); //最后一个li标签 var ullast = $("#ul1>li:last"); console.log(ullast); //eq(index) 索引等于index的那个元素 var uleq = $("#ul1>li:eq(2)"); // 索引是从0开始的 console.log(uleq); //匹配索引是偶数的元素 var uleven = $("#ul1>li:even"); console.log(uleven); //匹配索引是奇数的元素 var ulodd = $("#ul1>li:odd"); console.log(ulodd); //匹配所有大于给定值的元素 var ulgt = $("#ul1>li:gt(3)");//不包括3 console.log(ulgt); //匹配所有小于给定值的元素 var ullt = $("#ul1>li:lt(3)");//不包括3 console.log(ullt); // 移除所有满足not条件的标签 var ulnot = $("#ul1>li:not(#li3)"); console.log(ulnot); // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找) var ulhas = $("#ul1:has(li)"); //返回包含li标签的ul,本页面就是一个ul console.log(ulhas); </script> </body> </html>
二、表单常用筛选器
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <title>表单基本筛选器</title> </head> <body> <form> <input type="radio" name="sex" value="男" checked="checked">男 <input type="radio" name="sex" value="女">女 <select> <option>1</option> <option>2</option> <option selected="selected">3</option> <option>4</option> </select> <input type="checkbox" name="" value="" checked="checked" />足球 <input type="checkbox" name="" value="" />篮球 <input type="checkbox" name="" value="" />乒乓球 </form> <script src="jquery-3.3.1.js"></script> <script type="text/javascript"> // 获取所有checked var checkinpu = $("input:checked"); var selectedinpu = $(":selected"); console.log(checkinpu); console.log(selectedinpu); var checkinpu = $(":checked"); //将会把select也命中 console.log(checkinpu); </script> </body> </html>
三、 关系筛选器
下一个元素
$("#id").next() $("#id").nextAll() $("#id").nextUntil("#i2")
上一个元素
$("#id").prev() $("#id").prevAll() $("#id").prevUntil("#i2")
父亲元素
$("#id").parent() $("#id").parents() // 查找当前元素的所有的父辈元素 $("#id").parentsUntil() // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。
儿子和兄弟元素
$("#id").children();// 儿子们 $("#id").siblings();// 兄弟们
查找元素
$("#id").find()// 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
补充:
.first()// 获取匹配的第一个元素 .last()// 获取匹配的最后一个元素 .not()// 从匹配元素的集合中删除与指定表达式匹配的元素 .has()// 保留包含特定后代的元素,去掉那些不含有指定后代的元素。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <title>关系筛选器</title> </head> <body> <ul id="ul1"> <li id="li1">1</li> <li>2</li> <li id="li3">3</li> <li>4</li> <li id="li5">5</li> </ul> <script src="jquery-3.3.1.js"></script> <script type="text/javascript"> // 下一个元素 var li3 = $("#li3"); console.log(li3.next()); // 下一个元素 console.log(li3.nextAll());//下面所有的元素 console.log(li3.nextUntil("#li5"))//下面所有的元素直到xx停止,只有一个<li>4</li> //上一个元素 console.log(li3.prev()); console.log(li3.prevAll()); console.log(li3.prevUntil("#li1")); console.log("============父亲======================="); //父亲元素 console.log(li3.parent()); // ul console.log(li3.parents());// 一直往上 ul body html console.log(li3.parentsUntil("body")); //就只会得到ul。因为到body就终止了 console.log("============儿子和兄弟======================"); //儿子和兄弟元素 console.log(li3.parent().children()); // 获取所有父亲的子元素 console.log(li3.siblings()); // 除他本身外,上面下面全部获取 console.log("============补充======================"); console.log(li3.parent().children().first()); // 获取第一个 console.log(li3.parent().children().last()); // 获取最后一个 console.log(li3.parent().children().not("#li3")); // 从匹配元素的集合中(结果)删除与指定表达式匹配的元素 把#li3过滤掉 console.log(li3.parent().children().has("#li3"));//保留包含特定后代的元素,去掉那些不含有指定后代的元素. </script> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <title>find以jQuery对象为基准,查找子节点</title> </head> <body> <ul class="lang"> <li class="js dy">JavaScript</li> <li class="dy">Python</li> <li id="swift">Swift</li> <li class="dy">Scheme</li> <li name="haskell">Haskell</li> </ul> <script src="jquery-3.3.1.js"></script> <script type="text/javascript"> //使用find()查找 var ul1 = $(".lang"); console.log(ul1); console.log(ul1.find(".dy")); // 以ul1为基准,查找子节点中包含类dy的节点 console.log(ul1.find("#swift")); console.log(ul1.find("[name='haskell']")); // 如果要想从当前节点向上查找,使用parent()方法; var swf = $("#swift"); console.log(swf.parent()); // 得到父标签ul console.log(swf.parent(".red")); // 同时可以传入条件,如果不符合条件的话,返回空 //同级的话使用next()和prev() var swf = $("#swift"); console.log(swf.prev()); // <li class="dy">Python</li> console.log(swf.next());// <li class="dy">Scheme</li> </script> </body> </html>
完