jquery 选择器的总结
元素选择
$("input")
id选择
$('#id')
class选择
$('.id')
属性选择
$('[prop]')或者$('[prop=“value1”]')或者$('input[prop=“value1”]')
选择所有
$(
"*"
)
层叠选择器:
$("form input") 选择所有的form元素中的input元素
$("#main > *") 选择id值为main的所有的子元素
$("label + input") 选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
$("#prev ~ div") 同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签 基本过滤选择器:
$("tr:first") 选择所有tr元素的第一个
$("tr:last") 选择所有tr元素的最后一个
$("input:not(:checked) + span") 过滤掉:checked的选择器的所有的input元素 $("tr:even") 选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始) $("tr:odd") 选择所有的tr元素的第1,3,5... ...个元素
$("td:eq(2)") 选择所有的td元素中序号为2的那个td元素
$("td:gt(4)") 选择td元素中序号大于4的所有td元素
$("td:ll(4)") 选择td元素中序号小于4的所有的td元素
$(":header")
$("div:animated")
内容过滤选择器: $("div:contains('John')") 选择所有div中含有John文本的元素
$("td:empty") 选择所有的为空(也不包括文本节点)的td元素的数组
$("div:has(p)") 选择所有含有p标签的div元素
$("td:parent") 选择所有的以td为父节点的元素数组
可视化过滤选择器: $("div:hidden") 选择所有的被hidden的div元素
$("div:visible") 选择所有的可视化的div元素
属性过滤选择器: $("div[id]") 选择所有含有id属性的div元素
$("input[name='newsletter']") 选择所有的name属性等于'newsletter'的input元素 $("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素 $("input[name^='news']") 选择所有的name属性以'news'开头的input元素
$("input[name$='news']") 选择所有的name属性以'news'结尾的input元素
$("input[name*='man']") 选择所有的name属性包含'news'的input元素 $("input[id][name$='man']") 可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素 子元素过滤选择器: $("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)") $("div span:first-child") 返回所有的div元素的第一个子节点的数组
$("div span:last-child") 返回所有的div元素的最后一个节点的数组
$("div button:only-child") 返回所有的div中只有唯一一个子节点的所有子节点的数组 表单元素选择器: $(":input") 选择所有的表单输入元素,包括input, textarea, select 和 button $(":text") 选择所有的text input元素
$(":password") 选择所有的password input元素
$(":radio") 选择所有的radio input元素
$(":checkbox") 选择所有的checkbox input元素
$(":submit") 选择所有的submit input元素
$(":image") 选择所有的image input元素
$(":reset") 选择所有的reset input元素
$(":button") 选择所有的button input元素
$(":file") 选择所有的file input元素
$(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域 表单元素过滤选择器: $(":enabled") 选择所有的可操作的表单元素
$(":disabled") 选择所有的不可操作的表单元素
$(":checked") 选择所有的被checked的表单元素
$("select option:selected") 选择所有的select 的子元素中被selected的元素 选取一个 name 为”S_03_22″的input text框的上一个td的text值
$(”input[@ name =S_03_22]“).parent().prev().text() 名字以”S_”开始,并且不是以”_R”结尾的
$(”input[@ name ^='S_']“).not(”[@ name $='_R']“) 一个名为 radio_01的radio所选的值
$(”input[@ name =radio_01][@checked]“).val(); $("A B") 查找A元素下面的所有子节点,包括非直接子节点
$("A>B") 查找A元素下面的直接子节点
$("A+B") 查找A元素后面的兄弟节点,包括非直接子节点
$("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点 1. $("A B") 查找A元素下面的所有子节点,包括非直接子节点 例子:找到表单中所有的 input 元素 HTML 代码: <form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码: $("form input")
结果: [ <input name="name" />, <input name="newsletter" /> ] 2. $("A>B") 查找A元素下面的直接子节点
例子:匹配表单中所有的子级input元素。 HTML 代码: <form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码: $("form > input")
结果: [ <input name="name" /> ] 3. $("A+B") 查找A元素后面的兄弟节点,包括非直接子节点
例子:匹配所有跟在 label 后面的 input 元素 HTML 代码: <form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码: $("label + input")
结果: [ <input name="name" />, <input name="newsletter" /> ] 4. $("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点
例子:找到所有与表单同辈的 input 元素 HTML 代码: <form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码: $("form ~ input")
结果: [ <input name="none" /> ]
在选择器中的几种符号
1,(逗号)
2 (空格)
3.(英文句号)
4>(大于号)
5+(加号)
6~(波浪号)
- 逗号
各选择器之间用逗号分开 匹配查询的时候 之间是 “或”的关系
- 空格
在用空格前的selector匹配的結果里面 用空格后面的selector 做結果的全局匹配
- 英文句号
匹配的是class(class='style')
- 大于号
用大于号后面的selector对前面的結果在子內容 做同维度匹配
- 加号
匹配結果 用加号后面的
selector 對前面的結果同一級的內容做全局匹配
- 波浪号
匹配結果 用加号后面的
selector 对前面的結果同一級的內容做同级匹配
特別說明的
1 空格与大于号
“空格”和“大于号”都是对前面的匹配结果的子内容做匹配。 不同的是“空格”做的是子内容和孙内容匹配,而“大于号”只对子内容做匹配
2 加号与波浪号
“加号”和“波浪号” 都是对前面匹配结果的同一级内容做匹配。 不同的跟上面的差别一样,“加号”是子孙内容,而“波浪号”只是子内容
这只是部分jquery的selector 后面看完后觉得jquery的selector很好很强大 说的太绕口了。 以免误人子弟,请自查阅文档。
jquery 选择器的总结的更多相关文章
- JQuery 选择器
选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...
- jQuery的案例及必知重要的jQuery选择器
Jquery能做什么 访问和操作DOM元素 控制页面样式 对页面事件进行处理 扩展新的jQuery插件 与Ajax技术完美结合 Jquery的优势 体积小,压缩后只有100KB左右 l强大的选择器 出 ...
- 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器
× 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...
- jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html
我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮草案定义 ...
- 《锋利的jQuery(第2版)》笔记-第2章-jQuery选择器
选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.熟练使用选择器,不仅可以简化代码,而且可以达到事半功倍的效果. 2.1 jQuery选择器是什么 1. ...
- 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...
- 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器
× 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...
- 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...
- jQuery-1.9.1源码分析系列(二)jQuery选择器
1.选择器结构 jQuery的选择器根据源码可以分为几块 init: function( selector, context, rootjQuery ) { ... // HANDLE: $(&quo ...
- jQuery-1.9.1源码分析系列(二)jQuery选择器续1
在分析之前说一点题外话. ownerDocument和 documentElement的区别 ownerDocument是Node对象的一个属性,返回的是某个元素的根节点文档对象:即document对 ...
随机推荐
- _CRT_SECURE_NO_WARNINGS
在新版编程器的编译过程中我们常常会遇到一些过时或者不安全的函数 举一个简单的例子: 很多带"_s"后缀的函数是为了让原版函数更安全,传入一个和参数有关的大小值,避免引用到不存在的元 ...
- stack-铁轨问题
每辆火车都从A方向驶入车站,再从B方向驶出车站,同时它的车厢可以进行某种形式的重新组合.假设从A方向驶来的火车有n节车厢(n<1000),分别按顺序编号为1,2,...,n.假定在进入车站之前每 ...
- hadoop集群增加新节点
上次hadoop集群一块数据盘报警, 提交工单后维修人员更换硬盘 服务器是dell r720的, 8盘位, 蛋疼的是这些硬盘都是做的单盘raid1,维修人员说必须关机导入硬盘才能正常使用 (服务器就这 ...
- /dev/sda
/dev/sda这是Linux系统下的设备文件,类似Windows系统上面的本地磁盘.U盘.光驱等设备.Linux系统访问设备文件需要mount命令挂载映射成文件,查看: 1.建一个目录(挂载磁盘分区 ...
- 2.微信小程序-B站:需要先知道这些
文件结构 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page.一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: 文件 必须 作用 app.js 是 小程序逻辑 app. ...
- C++拷贝构造函数(深拷贝,浅拷贝)
http://www.cnblogs.com/BlueTzar/articles/1223313.html C++拷贝构造函数(深拷贝,浅拷贝) 对于普通类型的对象来说,它们之间的复制是很简单的,例如 ...
- LUA学习之一 初次接触
对于一个开源工程,开始学习它的第一步自然是编译工程. 使用vc编译lua,在网上已有许多介绍,但“纸上得来终觉浅”,自己走一遍还是有必要的. 步骤如下: 1.下载源代码,从lua.org下载最新源代码 ...
- Linux课程---5、常用文件命令和目录命令(创建文件命令)
Linux课程---5.常用文件命令和目录命令(创建文件命令) 一.总结 一句话总结: touch file1 1.管道符|有什么用? 将前一个命令的结果作为后一个命令的输入:比如查看文件前3行:ca ...
- QToolBox
QToolBox类似与以前qq好友分组的那种控件.每个分组是一个Item. 一.添加分组: 其中每个分组是通过一下函数添加的: int addItem(QWidget * w, const QIcon ...
- codeforces 637D D. Running with Obstacles(dp,水题,贪心)
题目链接: D. Running with Obstacles time limit per test 2 seconds memory limit per test 256 megabytes in ...