选择器，$("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代码
选择器，$("A+B") 和$("A~B") 的理解的更多相关文章
- CSS之旅——第二站 如何更深入的理解各种选择器
上篇我们说了为什么要使用css,这篇我们就从选择器说起,大家都知道浏览器会把远端过来的html解析成dom模型,有了dom模型,html就变成 了xml格式,否则的话就是一堆“杂乱无章”的string ...
- 理解CSS中的三种选择器>+~
1. p~ul p和ul有相同的父元素,选择出p元素之后的所有ul元素,其中,p和ul不一定是紧随,但是必须有相同的父元素 E+F 相邻兄弟选择器.选择匹配F的元素,且该元素位于 ...
- 理解css相邻兄弟选择器
今天在菜鸟教程看到了css组合选择符的“相邻兄弟选择器”,刚开始对这个概念有些不太理解,通过查阅资料并且经过一些试验总算有了些头绪. 原文解释是“相邻兄弟选择器(Adjacent sibling se ...
- 简单理解Ext.DomQuery操作CSS3选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 深入理解javascript选择器API系列第一篇——4种元素选择器
× 目录 [1]id属性 [2]标签名 [3]name属性[4]all 前面的话 说到最常见的DOM应用,恐怕就要数取得特定的某个或某组元素的引用了.DOM定义了许多方式来选取元素,包括getElem ...
- CSS选择器有哪几种？举例轻松理解CSS选择器
CSS选择器汇总(清爽版) 1.元素选择器 标签名{ } 2.id选择器 #id属性值{ } 3.类选择器 ·class属性值{ } 4.选择器分组(并集选择器) 作用:通过它可以同时选中多个选择器对 ...
- 理解CSS视觉格式化
前面的话 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
- 彻底理解AC多模式匹配算法
(本文尤其适合遍览网上的讲解而仍百思不得姐的同学) 一.原理 AC自动机首先将模式组记录为Trie字典树的形式,以节点表示不同状态,边上标以字母表中的字符,表示状态的转移.根节点状态记为0状态,表示起 ...
- 理解加密算法（三）——创建CA机构，签发证书并开始TLS通信
接理解加密算法(一)--加密算法分类.理解加密算法(二)--TLS/SSL 1 不安全的TCP通信 普通的TCP通信数据是明文传输的,所以存在数据泄露和被篡改的风险,我们可以写一段测试代码试验一下. ...
- node.js学习（三）简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理
一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...
随机推荐
- 全国计算机等级考试二级教程-C语言程序设计_第9章_数组
四维数组,可用于航天卫星,三维+时间 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> ...
- Linux Kernel系列一：开篇和Kernel启动概要
前言 近期几个月将Linux Kernel的大概研究了一下,以下须要进行深入具体的分析.主要将以S3C2440的一块开发板为硬件实体.大概包含例如以下内容: 1 bootloader分析,以uboot ...
- cocos2d-x for wp8 设置横竖屏
在主project文件(xxx.cpp , xxx为你的项目名)中, 函数名为void xxx::SetWindow(CoreWindow^ window) 相关代码片例如以下: <pre na ...
- 使用c#获取access中所有表的表名与内容
以前在网上查过,似乎也可以通过读取access系统表的方法来获得,但是实在想不想来是什么,今天又在网上找了找,终于发现更加方便的方法,更重要的是,这种方法也可以通用所有OLEDB数据源. 这里用到了O ...
- 使用ionic与cordova（phonegap）进行轻量级app开发前的环境配置与打包安卓apk过程记录
前言 有人说:"如果你恨一个人,就让ta去接触cordova(phonegap)",这是因为这里面的水很深,坑很多,真让人不是一般地发狂.或许有幸运的人儿基本顺顺利利就配置完环境 ...
- sql server存储过程分页
Create PROCEDURE [dbo].[Table_GetList] ) = '', -- 查询条件(注意: 不要加 WHERE) ) = '', -- 设置排序 , -- 页尺寸 , -- ...
- 关于JPA多数据源的部署persistence.xml文件配置以及对应实现类注入
<?xml version="1.0" encoding="UTF-8"?> <persistence xmlns="http: ...
- 定时器——Cocos2d-x学习历程(十一)
1.定时器 利用场景.层和精灵等游戏元素,我们可以构建游戏的框架,但是此时的游戏仍然是静止不动的.在一切游戏中,游戏的状态都会随着时间的流逝而改变,同时我们还需要定时进行一些逻辑判断,例如鱼和子弹的碰 ...
- ie6,ie7,ie8 css bug汇总以及兼容解决方法
1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是 ...
- mysql函数操作(3)
<?php $dbh = new PDO('mysql:dbname=testdb;host=localhost', 'mysql_user', 'mysql_pwd'); $dbh->s ...