笔记来源：尚硅谷jQuery教程(jquery从入门到精通)

jQuery对象的过滤与查找

1、对象的过滤

first()

var $li = $('ul>li');
// 1.ul下li标签第一个
// $li[0].style.backgroundColor = 'red';
$li.first().css('background-color', 'red');

last()

// 2.ul下li标签的最后一个
// $li[$li.length - 1].style.backgroundColor = 'red';
$li.last().css('background-color', 'red');

eq()

// 3.ul下li标签的第二个
// $li[1].style.backgroundColor = 'red';
$li.eq(1).css('background-color', 'red');

filter()

// 4.ul下li标签中title属性为hello的
$li.filter('[title=hello]').css('background-color', 'red');

not()

// 5.ul下li标签中title属性不为hello的
// $li.filter('[title!=hello]').css('background-color', 'red');
$li.not('[title=hello]').css('background-color', 'red');

但上述的写法，将没有 title 属性的 li 元素也查询了出来，更符合题意的写法如下：

// $li.filter('[title]').filter('[title!=hello]').css('background-color', 'red');
// $li.filter('[title!=hello]').filter('[title]').css('background-color', 'red');
$li.filter('[title][title!=hello]').css('background-color', 'red');

has()

// 6.ul下li标签中有span子标签的
$li.has('span').css('background-color', 'red');

hasClass()、is()

// 7.ul下li标签中class属性为box2的
// if ($li.filter('[class=box2]').hasClass('box2')) {
//     $li.filter('[class=box2]').css('background-color', 'red');
// }
if ($li.filter('[class=box2]').is('.box2')) {
    $li.filter('[class=box2]').css('background-color', 'red');
}

2、对象的查找

children()

var $ul = $('ul');
// 1.ul标签的第2个span子标签
$ul.children('span:eq(1)').css('background-color', 'red');

find()

// 2.ul标签的第2个span后代标签
$ul.find('span:eq(1)').css('background-color', 'red');

parent()、offsetParent()

// 3.ul标签的父标签
$ul.parent().css('background-color', 'red');

// 3.ul标签的定位父标签
$ul.offsetParent().css('background-color', 'red');

prev()、prevAll()、next()、nextAll()

// 4.id为cc的li标签的前一个li标签
$('#cc').prev('li').css('background-color', 'red');

// 4.id为cc的li标签的前面所有li标签
$('#cc').prevAll('li').css('background-color', 'red');

// 4.id为cc的li标签的后一个li标签
$('#cc').next('li').css('background-color', 'red');

// 4.id为cc的li标签的后面所有li标签
$('#cc').nextAll('li').css('background-color', 'red');

siblings()

// 6.id为cc的li标签的所有兄弟li标签
$('#cc').siblings('li').css('background-color', 'red');

练习：爱好选择器

HTML 代码

<form>
    你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选
    <br/>
    <input type="checkbox" name="items" value="足球"/>足球
    <input type="checkbox" name="items" value="篮球"/>篮球
    <input type="checkbox" name="items" value="羽毛球"/>羽毛球
    <input type="checkbox" name="items" value="乒乓球"/>乒乓球
    <br/>
    <input type="button" id="checkedAllBtn" value="全选"/>
    <input type="button" id="checkedNoBtn" value="全不选"/>
    <input type="button" id="checkedRevBtn" value="反选"/>
    <input type="button" id="sendBtn" value="提交"/>
</form>

jQuery 代码

var $checkedAllBox = $('#checkedAllBox'); // ID选择器
var $items = $(':checkbox[name=items]'); // 表单选择器、过滤选择器、交集选择器
// 1.点击'全选'：选中所有爱好
var $checkedAllBtn = $('#checkedAllBtn');
$checkedAllBtn.click(function () { // click函数
    $items.prop('checked', true); // prop操作属性
    $checkedAllBox.prop('checked', true);
});

// 2.点击'全不选'：所有爱好都不勾选
var $checkedNoBtn = $('#checkedNoBtn');
$checkedNoBtn.click(function () {
    $items.prop('checked', false);
    $checkedAllBox.prop('checked', false);
});

// 3.点击'反选'：改变所有爱好的匀选状态
var $checkedRevBtn = $('#checkedRevBtn');
$checkedRevBtn.click(function () {
    $items.each(function () { // each函数
        this.checked = !this.checked;
    });
    $checkedAllBox.prop('checked', $items.not(':checked').length === 0); // not过滤方法
});

// 4.点击'提交'：提示所有勾送的爱好
var $sendBtn = $('#sendBtn');
$sendBtn.click(function () {
    var arr = [];
    $items.filter(':checked').each(function () { // filter过滤方法
        arr.push(this.value); // 数组push方法
    });
    alert(arr.join(',')); // 数组join方法
});

// 5.点击'全选/全不选'：选中所有爱好，或者全不选中
var $checkedAllBox = $('#checkedAllBox');
$checkedAllBox.click(function () {
    $items.prop('checked', this.checked);
});

// 6.点击某个爱好时，必要时更新'全选/全不选'的选中状态
$items.click(function () {
    $checkedAllBox.prop('checked', $items.not(':checked').length === 0);
});

效果