我个人感觉jQuery中最大的好处就是选择Dom元素方面了。选择Dom中除了选择器、过滤,当然还有遍历了。
总结一下遍历中的过滤
目录
eq()
描述:减少匹配元素的集合为指定的索引的哪一个元素
索引值可以是负值,也可以是正值,
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<script>
$(function(){
$("p").eq(1) //p1
$("p").eq(-1) //p3
})
</script>
filter()
描述:筛选元素集合中匹配表达式,或通过传递函数测试的那些元素的集合。
参数可以是选择器、函数、元素、以及jQuery对象
<p>0</p>
<p class="box">1</p>
<p>2</p>
<p>3</p>
<script>
$(function(){
$("p").filter(":even");
$("p").filter(".box");
$("p").filter(function(){
return $(this).html() == 3;
})
})
</script>
first()
描述:获取匹配元素集合中的第一个元素
不接受任何参数
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<script>
$(function(){
$("p").first();
})
</script>
last()
描述:获取匹配元素集合中的最后一个元素
不接受任何参数
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<script>
$(function(){
$("p").last();
})
</script>
has()
描述:筛选匹配集合元素中的有相匹配的选择器或Dom元素的后代元素
以子元素或选择器为匹配条件选择Dom元素
<ul>
<li></li>
<li><strong></strong></li>
<li></li>
<li></li>
</ul>
<script>
$(function(){
$("ul li").has("strong") //选择子元素为strong元素的li元素
})
</script>
is()
描述:判断当前匹配集合中的元素是否是一个选择器、Dom元素、或者jQuery对象
如果这些元素至少一个匹配给定的参数,那么返回true
<div>
<p class="box"></p>
<p></p>
</div>
<script>
$(function(){
$("div p").is(".box") //true
$("div p").is(function(){
$(this).hasClass("box");
})
})
</script>
not()
描述:从匹配元素集合中移除指定的元素
<div>
<p class="box"></p>
<p></p>
</div>
<script>
$(function(){
$("div p").not(".box")
})
</script>
map()
描述:通过一个函数匹配当前集合中的每个元素,产生一个新的jQuery对象
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function(){
$("div").map(function(){
return $(this).html($(this).html + 1);
})
})
<script>
slice()
描述:根据指定的下标范围,过滤匹配的元素集合,并产生一个新的jQuery对象
接受两个参数:start:起始坐标(从零开始)、终止坐标。匹配规则包括首部但不包括尾部
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function(){
$("div").slice(1,3); //div1 div2
})
</script>