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
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个，或者多个元素。

<script>
$(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","red");
 });
   //<input type="button" value=" 选择 id=two 上一个兄弟"  id="b5"/>
  $("#b5").click(function(){
      $("#two").prev().css("background-color","red");
 });
    //<input type="button" value=" 选择 id=two 前面的所有兄弟"  id="b6"/>
  $("#b6").click(function(){
      $("#two").prevAll().css("background-color","red");
 });
    //<input type="button" value=" 选择 id=two 所有兄弟"  id="b7"/>
  $("#b7").click(function(){
      $("#two").siblings().css("background-color","red");
  });
     //<input type="button" value=" 选择 id=two 父元素"  id="b8"/>
  $("#b8").click(function(){
      $("#two").parents().css("background-color","red");
  });
   //$("#b8").click(function(){
       //$("#two").closest("body").css("background-color","red");
  //});
 });
</script>

串联

将多条语句，改成一条。
A.add(B) 将A和B组合一个对象 。类型 $(“A,B”)
end() ：回到最近的一个”破坏性”操作之前
A.children().children().end() .end()
A 孩子 孙子 孩子 A
contents() 获得所有的子节点（子元素 和 文本）

<script>
$(function(){
  //<input type="button" value="选择id=one和two的div" id="b1"/>
  $("#b1").click(function(){
    $("#one").add("#two").css("background-color","red");
 });
  //<input type="button" value=" 选择id=one 所有的孩子，以及one自己"  id="b2"/>
  $("#b2").click(function(){
    $("#one").children().andSelf().css("background-color","red");
 });
  //<input type="button" value=" 选择id=one 所有的孩子，设置颜色为红，设置one自己为黄"  id="b3"/>
  $("#b3").click(function(){
  //$("#one").children().css("background-color","red").end().css("background-color","yellow");
  //$("#one").children().css("background-color","red").parent().css("background-color","yellow");
  $("#one").css("background-color","yellow").children().css("background-color","red")
  });
  //<input type="button" value=" 获得id=two 子节点个数"  id="b4"/>
  $("#b4").click(function(){
     alert($("#two").contents().size());
    });
 });
 </script>