目录jQuery工具、属性、CSS笔记来源：尚硅谷jQuery教程(jquery从入门到精通)
jQuery对象的过滤与查找
1、对象的过滤
| 过滤方法 | 描述 |
|---|---|
eq() |
获取第N个元素 |
first() |
获取第一个元素 |
last() |
获取最后一个元素 |
hasClass() |
检查当前的元素是否含有某个特定的类，如果有，则返回true |
filter() |
筛选出与指定表达式匹配的元素集合 |
not() |
删除与指定表达式匹配的元素 |
is() |
根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true |
has() |
保留包含特定后代的元素，去掉那些不含有指定后代的元素 |
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() |
取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合 |
find() |
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法 |
siblings() |
取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合 |
next() |
取得一个包含匹配的元素集合中每一个元素紧邻的后一个同辈元素的元素集合 |
nextAll() |
查找当前元素之后所有的同辈元素 |
nextUntil() |
查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止 |
prev() |
取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合 |
prevAll() |
查找当前元素之前所有的同辈元素 |
prevUntil() |
查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止 |
offsetParent() |
返回第一个匹配元素用于定位的父节点 |
parent() |
取得一个包含着所有匹配元素的唯一父元素的元素集合 |
parentsUntil() |
查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止 |
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);
});
效果