【js】JQuery选择器、选择集过滤、选择集转移

「爱情、让人受尽委屈。」 2022-11-27 00:42 110阅读 0赞

#### 1.选择器 ####

选择器的的作用就是选取元素，用法与css选择器差不多，大概有以下几种

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>标签选择器</td> 
   <td>直接写标签名</td> 
  </tr> 
  <tr> 
   <td>类选择器</td> 
   <td>以小数点开头</td> 
  </tr> 
  <tr> 
   <td>id选择器</td> 
   <td>以#开头</td> 
  </tr> 
  <tr> 
   <td>层级选择器</td> 
   <td>选择器之间用空格隔开</td> 
  </tr> 
  <tr> 
   <td>属性选择器</td> 
   <td>根据属性来选择</td> 
  </tr> 
 </tbody> 
</table>

<body>
        <div id="div1">
            <ul class="list">
                <li>111</li>
                <li>222</li>
                <li>333</li>
            </ul>
            <input type="text" id="text1" name="userName">
            <input type="button" id="button1" value="点击">
        </div>
    </body>
    <script> $('li') //选择所有li标签 $('.list') //选择class为list的标签 $('#button1') //选择id为button1的标签 $('#div1 #text1') //选择id为div1的元素下面的id为text1的元素 $('input[name=userName]') //选择name属性为userName的input标签 </script>

可以通过length属性来查看是否有选中元素，若length值大于0即有选中元素

#### 2.选择集过滤 ####

有时候使用选择器会选择到很多无关元素，我们可以给选择集过滤，过滤方法有很多种，比如说

*  has()，有指定子元素的元素
 *  eq()，通过下标索引获取第几个元素，类似于列表

<body>
        <div id="div1">
            <ul class="list">
                <li>111</li>
                <li>222</li>
                <li>333</li>
            </ul>
            <ul><li>444</li></ul>
            <input type="text" id="text1" name="userName">
            <input type="button" id="button1" value="点击">
        </div>
    </body>
    <script>
        $div = $('div').has('.list')  // 获取子标签有class为list的div标签
        $div.css({ 'color':'red'})
        $('li').eq(1).css({ 'color':'blue'})  //获取下标为1的元素（下标从0开始）
    </script>

#### 3.选择集转移 ####

<table> 
 <thead> 
  <tr> 
   <th>转移方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$(选择器).prev()</td> 
   <td>选择当前元素的上一个同级元素</td> 
  </tr> 
  <tr> 
   <td>$(选择器).prevAll()</td> 
   <td>选择当前元素上面的全部元素</td> 
  </tr> 
  <tr> 
   <td>$(选择器).next()</td> 
   <td>选择当前元素的下一个同级元素</td> 
  </tr> 
  <tr> 
   <td>$(选择器).nextAll()</td> 
   <td>选择当前元素下面的全部元素</td> 
  </tr> 
  <tr> 
   <td>$(选择器).parent()</td> 
   <td>选择当前元素的父元素</td> 
  </tr> 
  <tr> 
   <td>$(选择器).children()</td> 
   <td>选择当前元素的所有子元素</td> 
  </tr> 
  <tr> 
   <td>$(选择器).siblings()</td> 
   <td>选择当前元素除外的其他所有同级元素</td> 
  </tr> 
  <tr> 
   <td>$(选择器).find(选择器)</td> 
   <td>选择当前元素下的指定选择器的后代元素</td> 
  </tr> 
 </tbody> 
</table>

例如

// 选择除了class为li1之外的其他两个li元素
    $('.li1').siblings().css({ 'color':'red'})  
    
    // 选择id为div1的后代class为li1的元素，即<li class="li1">222</li>
    $('#div1').find('.li1').css({ 'background':'blue'}) 
    
    // 除了指定元素之外，其他兄弟节点全部隐藏
    function subDisplay(name) { 
        $(name).siblings().hide()
        $(name).show()
    }