1、.eq():
减少匹配元素的集合为指定的索的哪一个元素。(定位一个元素)
法一
<script>
$(document).ready(function(){
$("li").eq(1).css("background","red");
})
</script>
法二
<script>
$(document).ready(function(){
$("li").eq(-3).css("background","red");
})
</script>
2、.filter():
筛选元素集合中匹配表达式或通过传递函数测试的那些元素集合(定位多个元素)
例一:(even、odd)
<script>
$(document).ready(function(){
$("li").filter(":even").css("background","red");
// $("li").filter(":odd").css("background","red");
})
</script>
例二:通过类筛选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jQuery.js"></script>
<style>
div{
width: 50px;
height: 50px;
background-color: green;
float: left; /* 排成一排 */
margin-left: 10px;
}
</style>
</head>
<body>
<!-- <ul>
<li> li 1</li>
<li> li 2</li>
<li> li 3</li>
<li> li 4</li>
</ul> -->
<div>123</div>
<div class="middle">123</div>
<div>123</div>
<div>123</div>
</body>
<script>
$(document).ready(function(){
$("div").filter(".middle").css("background","red");
// $("li").filter(":odd").css("background","red");
})
</script>
</html>
例三:函数
<script>
$(document).ready(function(){
$("li").filter(function(){
return $("strong",this).length==1
}).css("background-color","yellow");
})
</script>
3、.frst():
获取匹配元素集合中第一个元素。不接受任何参数
$("li").first().css("background-color","yellow");
4、.last():
获取匹配元素集合中最后一个元素。
$("li").last().css("background-color","yellow");
5、.has():
筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素
<script>
$(document).ready(function(){
$("li").has("strong").css("background-color","yellow");
})
</script>
6、is():
判断当前匹配的元素集合中的元素,是否为一个选择器,DOM元素,或者iQuery对象,如
果这些元素至少一个匹配给定的参数,那么返回true。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jQuery.js"></script>
</head>
<body>
<ul>
<li>list <strong>item 1 </strong></li>
<li>list <span>list item 2</span></li>
<li>list item 3</li>
</ul>
</body>
<script>
$(document).ready(function(){
$("ul").click(function(event){
var target=$(event.target);
if(target.is("li")){
target.css("background","yellow")
}
})
})
</script>
</html>
is方法
7、.not():
从匹配的元素集合中移除指定的元素。
接收一个参数,可以是元素,对象,选择器等
<script>
$(document).ready(function(){
$("li").not(":odd").css("background-color","yellow")
})
</script>
8、.map():
通过一个函数匹配当前集合中的每个元素,产生一个包含新的jQuery对象
例一:
<script>
$(document).ready(function(){
$("div").map(function(){
console.log(this.id)
})
})
</script>
例二:
<script>
$(document).ready(function(){
var arr=[0,1,2];
console.log(arr.map(function(n){
return n+4;
}))
})
</script>
9、.slice():
根据指定的下标范围,过滤匹配的元素集合,并生成一个新的jQuery 对象。
<script>
$(document).ready(function(){
$("li").slice(1,4).css("background-color","yellow");
// start:起始下标为0
// end:终止下标 包含首 不包含尾
})
</script>