jQuery对象的筛选

我就是我 2022-05-16 06:21 197阅读 0赞

## 一、筛选之过滤 ##

1，概述

在jQuery对象中的元素对象数组中过滤出一部分元素来

*  first()
 *  last()
 *  eq(index | -index)
 *  filter(selector)
 *  not(selector)
 *  has(selector)

2，使用示例  
操作区域：

<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>

需求：

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!=hello]').filter('[title]').css('background', 'red')
6.  ul下li标签中有span子标签的  
    $lis.has(‘span’).css(‘background’, ‘red’)

## 二、筛选之查找 ##

1，概述

在已经匹配出的元素集合中根据选择器查找孩子/父母/兄弟标签

*  children(): 子标签中找
 *  find() : 后代标签中找
 *  parent() : 父标签
 *  prevAll() : 前面所有的兄弟标签
 *  nextAll() : 后面所有的兄弟标签
 *  siblings() : 前后所有的兄弟标签

2，使用示例  
操作区域：

<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>

需求：

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标签
    
        var $li = $('#cc')
            $li.prevAll('li').css('background', 'red')
5.  id为cc的li标签的所有兄弟li标签
    
        var $li = $('#cc')
        $li.siblings('li').css('background', 'red')