我们在上一篇文章中学习了 jQuery 选择器，这一章我们来说说 jQuery 的筛选方法有哪些，其目的仍然是为了获取元素，只不过是站在了父级，子级，兄弟级之间的角度来获取元素，以下便是常见常用的筛选方法：

目录：

筛选方法：  

 一：parent ()

 二：children ('选择器’)

 三：find ('选择器‘）

 四：siblings ('选择器')

 五：nextAll ('选择器') 

 六：prevAll ('选择器') 

 七：eq (索引值） 

 八： hasClass ('类名')

排他思想： 

原生 JS 的排他思想：

jQuery 的排他思想：

筛选方法：  

 一：parent ()

查找最近的父级

此处为获取ul的父级div

    
 
    
 
    
      console.log($('ul').parent());    

 二：children ('选择器’)

查找子代（只有儿子），括号内无选择器则返回所有的子代

此处为在 ul 的子代中找 li

 
    
    
    
 
          console.log( $('ul').children('li') );    

 当后代有多个时，也只能获取到儿子，如此处 div 的后代有 ul 和 li ，但只能获取到子代 ul

  
 
    
    
    
 
  
           console.log( $('div').children() );    

 当括号内无选择器时，则可以得到所有的子级，此处 div 的子级为 ul 和另一个 div

  
 
    
    
    
 
 
  
           console.log( $('div').children() );    

 三：find ('选择器‘）

查找后代，包括儿子，孙子

此处为在 div 的后代中找 li，li 为 div 的孙子级

  
 
    
    
    
 
 
  
           console.log( $('div').find('li') );    

四：siblings ('选择器')

查找兄弟级元素，不包括自身，括号内无选择器则获取所有兄弟级

此处为找 ul 的兄弟级 p 元素，不包括自身

  
 
    
    
    
 
 
 
  
           console.log( $('ul').siblings('p') );    

当括号内无选择器，则返回所有的兄弟级，不包括自身

  
 
    
    
    
 
 
 
  
           console.log( $('ul').siblings() );    

 五：nextAll ('选择器') 

获取到除自身外 自身下面的兄弟级

此处为获取到 ul 下方的兄弟级，不包括自身 

  
 
 
    
    
    
 
 
  
           console.log( $('ul').nextAll() );    

六：prevAll ('选择器') 

 与nextAll相似，这个获取到的是除自身外 自身上方的兄弟级

此处为获取 ul 上方的兄弟级，不包括自身

  
 
 
    
    
    
 
 
  
           console.log( $('ul').prevAll() );    

七：eq (索引值） 

用于获取指定索引的元素

此处为获取到 ul 下索引为 1 的子元素，与 ul:eq(1) 等价

  
 
    
    
    
 
  
           console.log( $('ul li').eq(1) );    

八： hasClass ('类名')

判断某元素是否有某个类名，注意括号内要判断的类名不需要加 ‘ . ’有则返回 true，没有则返回 false

此处为判断第一个 li 有没有为 one 的类名

  
 
    
    
    
 
  
           console.log( $('ul li:first').hasClass('one') );    

排他思想： 

       在原生JS中我们已经学习了排他思想，例如在点击按钮变色中，即使用 for 循环遍历所有元素添加点击事件，然后是我们经典的 ‘’干掉其他人，留下我自己‘’，既然jQuery中有隐式迭代，既不需要再使用 for 循环绑定，其思想我们来对比一下：

原生 JS 的排他思想：

 干掉其他人，留下我自己

  按钮   按钮  按钮  按钮  按钮    var btns=document.querySelectorAll('button');for(var i=0;i<btns.length;i++){   btns[i].addEventListener('click',function(){      for(var j=0;j<btns.length;j++){ btns[j].style.backgroundColor=''      }      this.style.backgroundColor='pink'   })}    

jQuery 的排他思想：

有隐式迭代，不需要循环绑定事件，只需要使点击元素设置变色，其他兄弟级设置不变色

  按钮   按钮  按钮  按钮  按钮    $('button').click(function(){    $(this).css('background','pink')  //点击的按钮变色    $(this).siblings('button').css('background','')  //点击按钮的兄弟级不变色})