我们在上一篇文章中学习了 jQuery 选择器，这一章我们来说说 jQuery 的筛选方法有哪些，其目的仍然是为了获取元素，只不过是站在了父级，子级，兄弟级之间的角度来获取元素，以下便是常见常用的筛选方法：
目录：
筛选方法：
一：parent ()
二：children ('选择器’)
三：find ('选择器‘）
四：siblings ('选择器')
五：nextAll ('选择器')
六：prevAll ('选择器')
七：eq (索引值）
八： hasClass ('类名')
排他思想：
原生 JS 的排他思想：
jQuery 的排他思想：
筛选方法：
语法 用法 说明
parent () $('li').parent() 查找最近的父级
children ('选择器’) $('ul').children(('li') 查找子代（只有儿子）
find ('选择器‘） $('ul').find('li') 查找后代（包括儿子，孙子）
siblings ('选择器') $('ul li:eq(2)').siblings('li') 查找兄弟，不包括自身
nextAll ('选择器') $('ul li:eq(2)').nextAll('li') 查找自身往后的兄弟
prevAll ('选择器') $('ul li:eq(2)').prevAll('li') 查找自身往前的兄弟
eq (索引值） $('ul li').eq(2) 查找索引为2的li
hasClass ('类名') $('ul li:first').hasClass('one') 判断第一个li是否有类名one，放回true/false
一：parent ()
查找最近的父级
此处为获取ul的父级div
<body>
<div>
<ul>
<li></li>
</ul>
</div>
<script>
console.log($('ul').parent());
</script>
</body>
二：children ('选择器’)
查找子代（只有儿子），括号内无选择器则返回所有的子代
此处为在 ul 的子代中找 li
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<script>
console.log( $('ul').children('li') );
</script>
</body>
当后代有多个时，也只能获取到儿子，如此处 div 的后代有 ul 和 li ，但只能获取到子代 ul
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
console.log( $('div').children() );
</script>
</body>
当括号内无选择器时，则可以得到所有的子级，此处 div 的子级为 ul 和另一个 div
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<div></div>
</div>
<script>
console.log( $('div').children() );
</script>
</body>
三：find ('选择器‘）
查找后代，包括儿子，孙子
此处为在 div 的后代中找 li，li 为 div 的孙子级
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<div></div>
</div>
<script>
console.log( $('div').find('li') );
</script>
</body>
四：siblings ('选择器')
查找兄弟级元素，不包括自身，括号内无选择器则获取所有兄弟级
此处为找 ul 的兄弟级 p 元素，不包括自身
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<div></div>
<p></p>
</div>
<script>
console.log( $('ul').siblings('p') );
</script>
</body>
当括号内无选择器，则返回所有的兄弟级，不包括自身
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<div></div>
<p></p>
</div>
<script>
console.log( $('ul').siblings() );
</script>
</body>
五：nextAll ('选择器')
获取到除自身外 自身下面的兄弟级
此处为获取到 ul 下方的兄弟级，不包括自身
<body>
<div>
<div></div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<p></p>
</div>
<script>
console.log( $('ul').nextAll() );
</script>
</body>
六：prevAll ('选择器')
与nextAll相似，这个获取到的是除自身外 自身上方的兄弟级
此处为获取 ul 上方的兄弟级，不包括自身
<body>
<div>
<div></div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<p></p>
</div>
<script>
console.log( $('ul').prevAll() );
</script>
</body>
七：eq (索引值）
用于获取指定索引的元素
此处为获取到 ul 下索引为 1 的子元素，与 ul:eq(1) 等价
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
console.log( $('ul li').eq(1) );
</script>
</body>
八： hasClass ('类名')
判断某元素是否有某个类名，注意括号内要判断的类名不需要加 ‘ . ’有则返回 true，没有则返回 false
此处为判断第一个 li 有没有为 one 的类名
<body>
<div>
<ul>
<li class="one"></li>
<li></li>
<li></li>
</ul>
</div>
<script>
console.log( $('ul li:first').hasClass('one') );
</script>
</body>
排他思想：
在原生JS中我们已经学习了排他思想，例如在点击按钮变色中，即使用 for 循环遍历所有元素添加点击事件，然后是我们经典的 ‘’干掉其他人，留下我自己‘’，既然jQuery中有隐式迭代，既不需要再使用 for 循环绑定，其思想我们来对比一下：
原生 JS 的排他思想：
干掉其他人，留下我自己
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
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'
})
}
</script>
</body>
jQuery 的排他思想：
有隐式迭代，不需要循环绑定事件，只需要使点击元素设置变色，其他兄弟级设置不变色
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
$('button').click(function(){
$(this).css('background','pink') //点击的按钮变色
$(this).siblings('button').css('background','') //点击按钮的兄弟级不变色
})
</script>
</body>
