首页 > 代码库 > 选择器，$("A+B") 和$("A~B") 的理解

选择器，$("A+B") 和$("A~B") 的理解

2024-07-16 22:26:13   225人阅读

　　在我发表这个理解之前，我有看过博客园 永恒浪子 大神的 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=http://www.mamicode.com/"name0" />    <label>Here are Names:</label>    <input name="name1" type="text" value=http://www.mamicode.com/"name1" /><span>插入一个标签间隔一下</span>    <input name="name2" type="text" value=http://www.mamicode.com/"name2" />    <input name="name3" type="text" value=http://www.mamicode.com/"name3" />    <fieldset>          <input name="newsletter1" type="text" value=http://www.mamicode.com/"name11" />          <label>Newsletter:</label>          <input name="newsletter2" type="text" value=http://www.mamicode.com/"name12" />    </fieldset>    <fieldset>          <input name="newsletter1" type="text" value=http://www.mamicode.com/"name21" />          <input name="newsletter2" type="text" value=http://www.mamicode.com/"name22" />    </fieldset>    <input name="name4" type="text" value=http://www.mamicode.com/"name4" />    <input type="button" id="del_names" value=http://www.mamicode.com/"Name Deleted ~" /><input type="button" id="Button1" value=http://www.mamicode.com/"Name Deleted +" />  </form>  <input name="name5" type="text" value=http://www.mamicode.com/"name5" /></body>
Html代码

 


联系
我们