过滤：过滤的结果是原集合的子集
查找：查找，查找的是子孙、后代、兄弟。
过滤
eq(index|-index)：获取第N个元素,(获取的元素仍然是jQuery对象)first()：获取第一个元素last()：获取最后个元素hasClass(class)：检查当前的元素是否含有某个特定的类，如果有，则返回true。filter(expr|obj|ele|fn)：筛选出与指定表达式匹配的元素集合。
这个方法用于缩小匹配的范围。用逗号分隔多个表达式is(expr|obj|ele|fn)：根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。map(callback)：将一组元素转换成其他数组（不论是否是元素数组）has(expr|ele)：保留包含特定后代的元素，去掉那些不含有指定后代的元素。not(expr|ele|fn)：删除与指定表达式匹配的元素slice(start, [end])：选取一个匹配的子集
与原生的slice方法类似。
注意：
- $lis.first()是一个jQuery对象，$lis[0]是一个Dom元素对象
- jQuery对象的一些方法的返回值一般都是一个jQuery对象。
eg:
需求：
- ul 下 li 标签第一个
- ul 下 li 标签的最后一个
- ul 下 li 标签的第二个
- ul 下 li 标签中title属性为hello的
- ul 下 li 标签中title属性不为hello的
- ul 下 li 标签中有span子标签的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<ul>
<li>AAAAA</li>
<li title="hello" class="box2">BBBBB</li>
<li class="box">ccccc</li>
<li title="hello">DDDDDD</li>
<li title="two"><span>BBBBB</span></li>
</ul>
<li>eeeee</li>
<li>EEEEE</li>
<br />
<script type='text/javascript' src='./jquery库/jquery-1.12.4.js'></script>
<script>
var $lis = $('ul>li')
// 1. ul 下 li 标签第一个
// 注意：$lis.first()是一个jQuery对象，$lis[0]是一个Dom元素对象
$lis.first().css('background','red')
// 2. ul 下 li 标签的最后一个
$lis.last().css('background','red')
// 3. ul 下 li 标签的第二个
$lis.eq(1).css('background','red')
// 4. ul 下 li 标签中title属性为hello的
$lis.filter('[title=hello]').css('background','yellow')
// 5. ul 下 li 标签中title属性不为hello的
// 没有title的也会被选中
$lis.not('[title=hello]').css('background','green')
$lis.filter('[title!=hello]').css('background','green')
// 有title属性但title属性不为hello的也会被选中
$lis.filter('[title][title!=hello]').css('background','blue')
$lis.filter('[title]').not('[title=hello]').css('background','blue')
// 6. ul 下 li 标签中有span子标签的
$lis.has('span').css('background','purple')
</script>
</body>
</html>
小结
- filter(selector):对当前元素提要求
- not(selector):对当前元素提要求，并取反
- has(selector):对子孙元素提要求
查找
children([expr])：取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。closest(expr,[con]|obj|ele)：从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素。find(expr|obj|ele)：搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。next([expr])：取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。nextAll([expr])：查找当前元素之后所有的同辈元素。nextUntil([exp|ele]\[,fil])：查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。offsetParent()：返回第一个匹配元素用于定位的父节点。parent([expr])：取得一个包含着所有匹配元素的唯一父元素的元素集合。parents([expr])：取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。parentsUntil([exp|ele]\[,fil])：查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。prev([expr]):取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。prevAll([expr])：查找当前元素之前所有的同辈元素prevUntil([exp|ele]\[,fil])：查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。siblings([expr]):取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
eg：
需求:
- ul 标签的第2个span子标签
- ul 标签的第2个span后代标签
- ul 标签的父标签
- id 为 cc 的 li 标签的前面的所有 li 标签
- id 为 cc 的 li 标签的所有兄弟 li 标签
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>查找</title>
</head>
<body>
<div>
<ul>
<span>span文本1</span>
<li>AAAAA</li>
<li title="hello" class="box2">BBBBB</li>
<li class="box" id='cc'>CCCCC</li>
<li title="hello">DDDDDD</li>
<li title="two"><span>span文本2</span></li>
<span>span文本3</span>
</ul>
<span>span文本4</span>
<li>eeeee</li>
<li>EEEEE</li>
<br />
</div>
<script type='text/javascript' src='./jquery库/jquery-1.12.4.js'></script>
<script>
var $ul =$('ul')
// 1. ul 标签的第2个span子标签
$ul.children('span:eq(1)').css('background','red')
// 2. ul 标签的第2个span后代标签
$ul.find('span:eq(1)').css('background','yellow')
// 3. ul 标签的父标签
$ul.parent().css('background','lightblue')
// 4. id 为 cc 的 li 标签的前面的所有 li 标签
var $li = $('#cc')
$li.prevAll('li').css('background','lightpink')
// 5. id 为 cc 的 li 标签的所有兄弟 li 标签
$li.siblings('li').css('background','lightyellow')
</script>
</body>
</html>
串联
add(expr|ele|html|obj[,con])：把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。andSelf()：加入先前所选的加入当前元素中
对于筛选或查找后的元素，要加入先前所选元素时将会很有用。contents()：查找匹配元素内部所有的子节点（包括文本节点）。
如果元素是一个iframe，则查找文档内容end()：回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。
练习：爱好选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form method="post" action="">
你爱好的运动是?<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="checkedA11Btn" value="全选"/>
<input type="button" id="checkedNoBtn" value="全不选"/>
<input type="button" id="checkedRevBtn" value="反选"/>
<input type="button" id="sendBtn" value="提交"/>
</form>
<script type='text/javascript' src='./jquery库/jquery-1.12.4.js'></script>
<script>
var $checkedAllBox = $('#checkedAllBox')
var $items = $(':checkbox[name=items]')
// 全选
$('#checkedA11Btn').click(function (){
$items.prop('checked',true)
$('#checkedAllBox').prop('checked',true)
})
// 全不选
$('#checkedNoBtn').click(function (){
$items.prop('checked',false)
$('#checkedAllBox').prop('checked',false)
})
// 反选
$('#checkedRevBtn').click(function (){
$items.each(function (){
this.checked = !this.checked
})
// 未选中的长度 == 0，表示全选
// $items.filter(':not(:checked)').length==0
$('#checkedAllBox').prop('checked',$items.filter(':not(:checked)').length==0)
})
// 提交
$('#sendBtn').click(function (){
$items.filter(':checked').each(function (){
alert(this.value)
})
})
// 上部全选
$('#checkedAllBox').click(function (){
$items.prop('checked',this.checked)
})
// 点击某个爱好的时候更新"全选/全不选"状态
$items.click(function (){
$checkedAllBox.prop('checked',$items.filter(':not(:checked)').length==0)
})
</script>
</body>
</html>
360
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
