在我发表这个理解之前，我有看过博客园 永恒浪子 大神的 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代码

选择器，$("A+B") 和$("A~B") 的理解的更多相关文章

  1. CSS之旅——第二站 如何更深入的理解各种选择器

    上篇我们说了为什么要使用css,这篇我们就从选择器说起,大家都知道浏览器会把远端过来的html解析成dom模型,有了dom模型,html就变成 了xml格式,否则的话就是一堆“杂乱无章”的string ...

  2. 理解CSS中的三种选择器>+~

    1. p~ul p和ul有相同的父元素,选择出p元素之后的所有ul元素,其中,p和ul不一定是紧随,但是必须有相同的父元素 E+F            相邻兄弟选择器.选择匹配F的元素,且该元素位于 ...

  3. 理解css相邻兄弟选择器

    今天在菜鸟教程看到了css组合选择符的“相邻兄弟选择器”,刚开始对这个概念有些不太理解,通过查阅资料并且经过一些试验总算有了些头绪. 原文解释是“相邻兄弟选择器(Adjacent sibling se ...

  4. 简单理解Ext.DomQuery操作CSS3选择器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 深入理解javascript选择器API系列第一篇——4种元素选择器

    × 目录 [1]id属性 [2]标签名 [3]name属性[4]all 前面的话 说到最常见的DOM应用,恐怕就要数取得特定的某个或某组元素的引用了.DOM定义了许多方式来选取元素,包括getElem ...

  6. CSS选择器有哪几种？举例轻松理解CSS选择器

    CSS选择器汇总(清爽版) 1.元素选择器 标签名{ } 2.id选择器 #id属性值{ } 3.类选择器 ·class属性值{ } 4.选择器分组(并集选择器) 作用:通过它可以同时选中多个选择器对 ...

  7. 理解CSS视觉格式化

    前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...

  8. 彻底理解AC多模式匹配算法

    (本文尤其适合遍览网上的讲解而仍百思不得姐的同学) 一.原理 AC自动机首先将模式组记录为Trie字典树的形式,以节点表示不同状态,边上标以字母表中的字符,表示状态的转移.根节点状态记为0状态,表示起 ...

  9. 理解加密算法（三）——创建CA机构，签发证书并开始TLS通信

    接理解加密算法(一)--加密算法分类.理解加密算法(二)--TLS/SSL 1 不安全的TCP通信 普通的TCP通信数据是明文传输的,所以存在数据泄露和被篡改的风险,我们可以写一段测试代码试验一下. ...

  10. node.js学习（三）简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

随机推荐

  1. 日本語N1文法まとめ

    1.v连用形+ものの:虽然~但是(201212-32) -(の)かというと/かといえば(201412-38)a动词ます辞書形・た形/イ形+~ な形語幹/名+~a,"至于是否・・・・・・&qu ...

  2. hdu 4597 Play Game(区间dp,记忆化搜索)

    Problem Description Alice and Bob are playing a game. There are two piles of cards. There are N card ...

  3. ios常用的框架（源自知乎上的回答）

    首先,学习这类开源项目的主要目的是为了实现产品汪需求,如果不是这个目的,完全可以看Explore GitHub,当前最火的开源项目都在这里,当然你需要过滤一下语言. 好了,介绍几个希望能帮助到你. 普 ...

  4. sdut 3-5 学生成绩统计

    3-5 学生成绩统计 Time Limit: 1000MS Memory limit: 65536K 题目描写叙述 通过本题目练习能够掌握对象数组的使用方法,主要是对象数组中数据的输入输出操作. 设计 ...

  5. android_Intent对象初步(Activity传统的价值观念)

    说明:初步Intent物.主要使用Intent对象在Activity之间传递数据的方法. 样例:由MainActivity→OtherActivity的跳转过程中,把数据传递给OtherActivit ...

  6. 对浏览器css兼容性的学习理解及问题解决汇总

    一.从浏览器内核的角度 来看,浏览器兼容性问题可分为以下三类: 1. 渲染相关:和样式相关的问题,即体现在布局效果上的问题. 2. 脚本相关:和脚本相关的问题,包括JavaScript和DOM.BOM ...

  7. bat文件自动编译InnoSetup脚本

    今天想制作一个bat文件,打包多个innosetup脚本,参考链接:http://www.cnblogs.com/joean/p/4870428.html 流程: 新建文本文档,将.txt改为.bat ...

  8. MySqL触发器以及常用转换函数注意事项

    1,触发器(http://www.cnblogs.com/zzwlovegfj/archive/2012/07/04/2576989.html)       1.MYSQL中触发器中不能对本表进行 i ...

  9. 原来你是个这样的JVM

    第一节 本文将与其它文章不同,我们采用章节制来讲述每个知识点,但每个章节之间只有较低的耦合度,只要了解大概主线思路,一般都能看懂! OK啦,进入主题!虚拟机的发展史就不讲啦,和java之间的关系也不言 ...

  10. 关于EJB 时间注解与oracle数据库时间格式

    EJB中Temporal是时间注解,其中TemporalType是时间注解的枚举类型其中包括 TemporalType类型,请看源码/*** Type used to indicate a speci ...