選擇器,$("A+B") 和$("A~B") 的理解


  在我發表這個理解之前,我有看過博客園 永恆浪子 大神的 JQuery選擇器大全(http://www.cnblogs.com/hulang/archive/2011/01/12/1933771.html)。

一開始,我對以上參考文獻的一些講解理解有偏差。例如,$("A+B") 和$("A~B"),在以上參考文獻中,對此的部分解釋是這樣的:

$("A+B") 查找A元素后面的兄弟節點,包括非直接子節點

$("A~B") 查找A元素后面的兄弟節點,不包括非直接子節點

以及文獻中所列舉的例子。

  我對文獻中所提到的“直接子節點”一開始理解不透徹,有偏差。我誤解為“子節點”和“孫子節點”的區別。經我個人的測試,我得到了更准確的理解:

$("A+B") 就是查找A元素面的第一個兄弟B節點

$("A~B") 查找A元素后面的所有兄弟B節點

對於同一個代碼,同一個對象,每個人的理解可能都不一樣的。對於同一個對象,也不僅僅是只有一種理解才是正確的。上代碼:

jQuery:

            $("#del_names").click(function () {
                $("label ~ input").remove();
            });
            $("#Button1").click(function () {
                $("label + input").remove();
            });    

Html:

<body>
  <form id="form1" runat="server">
    <input name="name0" type="text" value="name0" />
    <label>Here are Names:</label>
    <input name="name1" type="text" value="name1" /><span>插入一個標簽間隔一下</span>
    <input name="name2" type="text" value="name2" />
    <input name="name3" type="text" value="name3" />
    <fieldset>
          <input name="newsletter1" type="text" value="name11" />
          <label>Newsletter:</label>
          <input name="newsletter2" type="text" value="name12" />
    </fieldset>
    <fieldset>
          <input name="newsletter1" type="text" value="name21" />
          <input name="newsletter2" type="text" value="name22" />
    </fieldset>
    <input name="name4" type="text" value="name4" />
    <input type="button" id="del_names" value="Name Deleted ~" /><input type="button" id="Button1" value="Name Deleted +" />
  </form>
  <input name="name5" type="text" value="name5" />
</body>
Html代碼

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM