jQuery之元素筛选
过滤
说明：
在jQuery对象中的元素对象数组中过滤出一部分元素来，并封装成新的jQuery对象返回。
方法：
first()
last()
eq(index|-index)
filter(selector)：对当前元素提要求
not(selector)：对当前元素提要求并取反
has(selector)：对子孙元素提要求
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>筛选_过滤</title> </head> <body> <ul> <li>AAAAA</li> <li title="hello" class="box2">BBBBB</li> <li class="box">CCCCC</li> <li title="hello">DDDDDD</li> <li title="two"><span>BBBBB</span></li> </ul> <li>eeeee</li> <li>EEEEE</li> <br> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript"> /* * 需求： * 1.ul下li标签第一个 * 2.ul下li标签的最后一个 * 3.ul下li标签的第二个 * 4.ul下li标签中title属性为hello的 * 5.ul下li标签中title属性不为hello的 * 6.ul下li标签中有span子标签的 */ $(function (){ var $lis = $('ul>li'); //1.ul下li标签第一个 $lis.first().css('background', 'red'); //2.ul下li标签的最后一个 $lis.last().css('background', 'red'); //3.ul下li标签的第二个 $lis.eq(1).css('background', 'red'); //4.ul下li标签中title属性为hello的 $lis.filter('[title=hello]').css('background', 'red'); //5.ul下li标签中title属性不为hello的 $lis.not('[title=hello]').css('background', 'red'); $lis.filter('[title][title!=hello]').css('background', 'red'); //6.ul下li标签中有span子标签的 $lis.has('span').css('background', 'red'); }); </script> </body> </html>
查找
说明：
在已经匹配出的元素集合中根据选择器查找孩子/父母/兄弟标签，并封装成新的jQuery对象返回。
方法：
children()：子元素
find()：后代元素
parent()：父元素
prevall()：前的所有兄弟
nextall()：后的所有兄弟
siblings()：所有兄弟
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>筛选_查找孩子-父母-兄弟标签</title> </head> <body> <div id="div1" class="box" title="one">class为box的div1</div> <div id="div2" class="box">class为box的div2</div> <div id="div3">div3</div> <span class="box">class为box的span</span> <br/> <div> <ul> <span>span文本1</span> <li>AAAAA</li> <li title="hello" class="box2">BBBBB</li> <li class="box" id='cc'>CCCCC</li> <li title="hello">DDDDDD</li> <li title="two"><span>span文本2</span></li> <span>span文本3</span> </ul> <span>span文本444</span><br> <li>eeeee</li> <li>EEEEE</li> <br> </div> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript"> /* * 需求： * 1.ul标签的第2个span子标签 * 2.ul标签的第2个span后代标签 * 3.ul标签的父标签 * 4.id为cc的li标签的前面的所有li标签 * 5.id为cc的li标签的所有兄弟li标签 */ $(function (){ var $ul = $('ul'); //1.ul标签的第2个span子标签 $ul.children('span:eq(1)').css('background', 'red'); //2.ul标签的第2个span后代标签 $ul.find('span:eq(1)').css('background', 'red'); //3.ul标签的父标签 $ul.parent().css('background', 'red'); //4.id为cc的li标签的前面的所有li标签 $ul.children('#cc').prevAll('li').css('background', 'red'); //5.id为cc的li标签的所有兄弟li标签 $ul.children('#cc').siblings('li').css('background', 'red'); }); </script> </body> </html>
