jquery选择器使用详解


Posted in Javascript onApril 08, 2014

jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法

$("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素
$("div")           选择所有的div标签元素,返回div元素数组
$(".myClass")      选择使用myClass类的css的所有元素
$("*")             选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$("#myELement,div,.myclass")

层叠选择器:
$("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" /> ]
Javascript 相关文章推荐
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
Jun 28 Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
jQuery遍历Form示例代码
Sep 03 Javascript
详解jQuery插件开发中的extend方法
Nov 19 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
Jun 16 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
Nov 08 Javascript
微信小程序实现禁止分享代码实例
Oct 19 Javascript
微信小程序页面渲染实现方法
Nov 06 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
Apr 08 #Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 #Javascript
javascript跨域的4种方法和原理详解
Apr 08 #Javascript
通过Javascript读取本地Excel文件内容的代码示例
Apr 08 #Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
Apr 07 #Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
Apr 06 #Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
Apr 06 #Javascript
You might like
基于php编程规范(详解)
2017/08/17 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
javascript之Partial Application学习
2013/01/10 Javascript
JavaScript函数模式详解
2014/11/07 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
jQuery判断checkbox选中状态
2016/05/12 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
tracking.js页面人脸识别插件使用方法
2020/04/16 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
Vue Router中应用中间件的方法
2020/08/06 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
[01:52]DOTA2完美大师赛Vega战队趣味视频——kpii老师小课堂
2017/11/25 DOTA
python pandas中对Series数据进行轴向连接的实例
2018/06/08 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
简单的Python调度器Schedule详解
2019/08/30 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
python redis存入字典序列化存储教程
2020/07/16 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
巴西本土电商平台:Americanas
2020/06/21 全球购物
什么叫做SQL注入,如何防止
2016/10/04 面试题
服装设计专业毕业生推荐信
2013/11/09 职场文书
物业电工岗位职责
2013/11/20 职场文书
总经理职责
2013/12/22 职场文书
老公爱的承诺书
2014/03/31 职场文书
公司档案管理制度
2015/08/05 职场文书
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis
pytorch 中nn.Dropout的使用说明
2021/05/20 Python
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL
高并发下Redis如何保持数据一致性(避免读后写)
2022/03/18 Redis