常用jQuery选择器总结


Posted in Javascript onJuly 11, 2014

在Dom 编程中我们只能使用有限的函数根据id 或者TagName 获取Dom 对象. 然而在jQuery 中则完全不同,jQuery 提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象以jQuery 包装集的形式返回。本文主要对常用的jQuery 选择器进行一个介绍及归类。

jQuery 选择器大体上可分为 4 类:基本选择器、层次选择器、过滤选择器、表单选择器。
其中过滤选择器可以分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器。

基本选择器:

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

Javascript 相关文章推荐
javascript delete 使用示例代码
Mar 29 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
Jul 04 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
Aug 31 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
Aug 24 Javascript
基于Vuejs框架实现翻页组件
Jun 29 Javascript
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
用npm-run实现自动化任务的方法示例
Jan 14 Javascript
在vue中使用回调函数,this调用无效的解决
Aug 11 Javascript
JavaScript实现简单的音乐播放器
Aug 14 Javascript
基于jQuery的图片不完全按比例自动缩小
Jul 11 #Javascript
js动态改变select选择变更option的index值示例
Jul 10 #Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
Jul 10 #Javascript
js确认删除对话框适用于a标签及submit
Jul 10 #Javascript
JQuery1.8 判断元素是否绑定事件的方法
Jul 10 #Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 #Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
Jul 09 #Javascript
You might like
用php+javascript实现二级级联菜单的制作
2008/05/06 PHP
PHP用户管理中常用接口调用实例及解析(含源码)
2017/03/09 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
JS中style属性
2006/10/11 Javascript
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
js时间戳格式化成日期格式的多种方法
2013/11/11 Javascript
js 获取时间间隔实现代码
2014/05/12 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
Nodejs进阶:基于express+multer的文件上传实例
2016/11/21 NodeJs
jQuery元素选择器实例代码
2017/02/06 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
最实用的JS数组函数整理
2017/12/05 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
原生js实现照片墙效果
2020/10/13 Javascript
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
django实现登录时候输入密码错误5次锁定用户十分钟
2017/11/05 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
员工薪酬福利制度
2014/01/17 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
合同审查法律意见书
2015/06/04 职场文书
python字符串常规操作大全
2021/05/02 Python
python 多态 协议 鸭子类型详解
2021/11/27 Python
Golang并发工具Singleflight
2022/05/06 Golang
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers