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 相关文章推荐
发布一个基于javascript的动画类 Fx.js
Nov 05 Javascript
jQuery代码优化之基本事件
Nov 01 Javascript
浅谈checkbox的一些操作(实战经验)
Nov 20 Javascript
js实现的简单radio背景颜色选择器代码
Aug 18 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
js 连续赋值的简单实现
Jun 13 Javascript
JSP防止网页刷新重复提交数据的几种方法
Nov 19 Javascript
vue.js声明式渲染和条件与循环基础知识
Jul 31 Javascript
实例学习JavaScript读取和写入cookie
Jan 29 Javascript
详解react-redux插件入门
Apr 19 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
Mar 31 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
Sep 18 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
让你同时上传 1000 个文件 (二)
2006/10/09 PHP
PHP ajax 分页类代码
2008/11/13 PHP
php AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
php防止伪造的数据从URL提交方法
2014/06/27 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
JavaScript入门学习书籍推荐
2008/06/12 Javascript
js直接编辑当前cookie的脚本
2008/09/14 Javascript
js的闭包的一个示例说明
2008/11/18 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
2015/04/16 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
jQuery窗口拖动功能的实现代码
2017/02/04 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
ES6新特性之函数的扩展实例详解
2017/04/01 Javascript
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
详解React 的几种条件渲染以及选择
2018/10/23 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
跟老齐学Python之使用Python查询更新数据库
2014/11/25 Python
Ubuntu 下 vim 搭建python 环境 配置
2017/06/12 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
python scipy求解非线性方程的方法(fsolve/root)
2018/11/12 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
Python中栈、队列与优先级队列的实现方法
2019/06/30 Python
django 消息框架 message使用详解
2019/07/22 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
2020/08/20 HTML / CSS
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
军训考核自我鉴定
2014/02/13 职场文书
乡镇党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python