jQuery筛选–查找,串联
查找
<A>
<B>
<C></C>
<D></D>
<E></E>
<F></F>
</B>
</A>
B.children([…]) 获得所有的子元素。CDEF
A.find(D) 从指定的区域查询指定元素。D
D.next() 下一个兄弟。E
D.nextAll() 后面的所有兄弟。EF
E.prev() 上一个兄弟。D (previous)
E.prevAll() 前面的所有兄弟。CD
E.siblings() 所有兄弟。CDF
E.parent() 父元素。B
E.closest(A) 向上获得指定的父元素(含自己),如果获得返回一个对象,如果没有没有对象。
C.nextUntil(E) 获得后面所有兄弟,直到指定条件位置。DE
F.prevUntil(D) 获得前面所有兄弟,直到指定条件位置。DE
E.parents() 获得所有的父元素。AB
closest和parents的主要区别是:
1,前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找;
2,前者逐级向上查找,直到发现匹配的元素后就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤;
3,前者返回0或1个元素,后者可能包含0个,1个,或者多个元素。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>05-可见性过滤选择器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="./script/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script type="text/javascript">
$(document).ready(function(){
//<input type="button" value=" 选择 id=two 所有子元素" id="b1"/>
$("#b1").click(function(){
alert($("#two").children().size());
$("#two").children().css("background-color","red");
});
//<input type="button" value=" 选择 id=two 子元素title=other 元素 " id="b2"/>
$("#b2").click(function(){
$("#two").children("[title='other']").css("background-color","red");
});
//<input type="button" value=" 选择 id=two 下一个兄弟" id="b3"/>
$("#b3").click(function(){
$("#two").next().css("background-color","red");
});
//<input type="button" value=" 选择 id=two 后面的所有兄弟" id="b4"/>
$("#b4").click(function(){
$("#two").nextAll().css("background-color"<