jquery中的筛选
1.过滤
1.1 eq 查找元素从0开始
<script type="text/javascript" src="../jquery-1.7.2.min.js">
</script>
<script type="text/javascript">
$(function(){
$("li").eq(1).css("background","red");//注意此处css的写法
})
</script>
</head>
<body>
<ul>
<li>00000000</li>
<li>11111111</li>
</ul>
</body>
1.2 first()和 last() 选取第一个和最后一个元素 $("div").first()
1.3 filter(expr),筛选有该类的第一个节点,例如: alert($("p").filter(".selected ).html()); (记住:expr 包括:标签名 ,类名 , id)
1.3 has(expr)同筛选
1.4 hasClass(类名) 检查当前的元素是否含有某个特定的类,如果有,则返回true。
1.5 is(expr)
用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。
$("input[type='checkbox']").parent().is("form")
如果没有元素符合,或者表达式无效,都返回'false'。
1.6 map(function(){} )
将一组元素转换成其他数组(不论是否是元素数组) (补充:get(),取得所有匹配的 DOM 元素集合。
选择文档中所有图像作为元素数组,并用数组内建的 reverse 方法将数组反向。 $("img").get().reverse()
)
$("input").map(function(){ return $(this).val(); }).get().join(", ") );
删除与指定表达式匹配的元素
1.7 not(expr)
1.8 slice() (js 用于字符串和数组 slice(index,-1)或者-1省略,表示到结尾)
slice(index1,index2) 选取的是index1-----(index2-1)的节点
2.查找
2.1 children() parent() prev()[找到每个段落紧邻的前一个同辈元素。] next() offsetParent() siblings()[找到该元素的所有同辈元素] parents()找到所有的祖先元素
2.2 nextUntil() prevUntil() parentUntil()
<script>
$(function(){
$('li.item-a').parentsUntil('.level-1')
.css('background-color', 'red');
})
</script>
</head>
<body>
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
2.3 find() 用于查找某个节点 $("p span")这样写可以
2.4 closest() 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素。
事件委托
$(function(){
$(document).bind("click", function (e) {
$(e.target).closest("li").toggleClass("hilight");
});
})
3.串联
3.1 end()
回到最近的一个"破坏性"操作之前。即,将匹配的元素列表变为前一次的状态。
3.2 andself()
选取所有div以及内部的p,并加上border类
$("div").find("p").andSelf().addClass("border");
<div class="border"> <p class="border">First Paragraph</p> <p class="border">Second Paragraph</p> </div>
3.3 contents()
查找匹配元素内部所有的子节点(包括文本节点)。如果元素是一个iframe,则查找文档内容
$("iframe").contents().find("body") .append("I'm in an iframe!");