jQuery 工具、属性、CSS 笔记来源：尚硅谷 jQuery 教程(jquery 从入门到精通)

[TOC]

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);
});

效果