jQuery筛选方法（jQuery选择器）

1.查找父级  $('选择器').parent();

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <script>
    $(function () {
      console.log($('li').parent());
    })
  </script>

2.查找最近一级子元素（亲儿子）  $('选择器').children('选择器')

<style>
    li,
    span {
      color: yellow;
    }
</style>

<ul>
    <li>这里是li<span>这里是span</span></li>
  </ul>
  <script>
    $(function () {
      $('ul').children().css('color', 'pink')
    })
  </script>

 

     可以看到原本设置的li和span的文字颜色都是黄色，在使用该原则器将颜色更改后，只有ul的直接子元素li发生改变

3.后代选择器     $('选择器').find('选择器')

更改2中代码

$(function () {
      $('ul').find('li,span').css('color', 'pink')
})

 

   ul的后代中的所有li和span都会被选出

4.查找兄弟节点（不包括自己本身）  $('选择器').siblings('选择器')

<ul>
    <li>第一个</li>
    <li class="two">第二个</li>
    <li>第三个</li>
    <li>第四个</li>
  </ul>
  <script>
    $(function () {
      $('.two').siblings().css('backgroundColor', 'pink')
    })
  </script>

5.查找当前元素之后的所有同辈元素      $('选择器').nextAll()

<span>这里是span</span>
  <div>这里是div</div>
  <h3>这里是h3</h3>
  <ul>
    哈哈哈
    <li>这里是ul中的li</li>
    <li>这里是ul中的li</li>
  </ul>
  <script>
    $(function () {
      $('span').nextAll().css('backgroundColor', 'pink')
    })
  </script>

 

 注意：这里查找的是所有同辈元素，可以看到ul这一块是将ul中所有内容都都改变了背景颜色，而不是设置了li的样式

6.查找当前元素之前的所有元素      $('选择器').prevAll()

更改5中的代码如下

 $('ul').prevAll().css('backgroundColor', 'pink')

 

7.检查当前的元素是否含有某个特定的类   $('选择器').hasClass('类名')

<span>这里是span</span>
  <div class="protected">这里是div</div>
  <h3>这里是h3</h3>
  <ul>
    哈哈哈
    <li>这里是ul中的li</li>
    <li>这里是ul中的li</li>
  </ul>
  <script>
    $(function () {
      console.log($('div').hasClass('protected'))
    })
  </script>

   检测到div含有该类，则返回true

8.$('选择器').eq(序号)

<ul>
    <li>这里是第0个li</li>
    <li>这里是第1个li</li>
    <li>这里是第2个li</li>
    <li>这里是第3个li</li>
  </ul>
  <script>
    $(function () {
      $('li').eq(2).css('color', 'pink')
    })
  </script>

 相当于：$('li:eq(2)')