jquery选择器(常用选择器说明)


Posted in Javascript onSeptember 28, 2010

基本选择器:

$("#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属性的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[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 学习之旅 (1)
Feb 05 Javascript
基于Jquery的仿照flash放大图片效果代码
Mar 16 Javascript
javascript检测浏览器flash版本的实现代码
Dec 06 Javascript
对jQuery的事件绑定的一些思考(补充)
Apr 20 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
Jun 26 Javascript
javascript格式化指定日期对象的方法
Apr 21 Javascript
javascript断点调试心得分享
Apr 23 Javascript
老生常谈JavaScript数组的用法
Jun 10 Javascript
Vue自定义指令拖拽功能示例
Feb 17 Javascript
python爬取安居客二手房网站数据(实例讲解)
Oct 19 Javascript
基于layPage插件实现两种分页方式浅析
Jul 27 Javascript
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 #Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
Sep 28 #Javascript
jquery控制listbox中项的移动并排序的实现代码
Sep 28 #Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
Sep 28 #Javascript
13个绚丽的Jquery 界面设计网站推荐
Sep 28 #Javascript
基于Jquery的动态添加控件并取值的实现代码
Sep 24 #Javascript
封装的原生javascript弹出层代码
Sep 24 #Javascript
You might like
PHP中ADODB类详解
2008/03/25 PHP
php记录日志的实现代码
2011/08/08 PHP
使用JSON实现数据的跨域传输的php代码
2011/12/20 PHP
PHP+Apache环境中如何隐藏Apache版本
2017/11/24 PHP
FCK调用方法..
2006/12/21 Javascript
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
微信小程序封装http访问网络库实例代码
2017/05/24 Javascript
js弹性势能动画之抛物线运动实例详解
2017/07/27 Javascript
Node.js 基础教程之全局对象
2017/08/06 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
2018/05/28 Javascript
JS实现数组的增删改查操作示例
2018/08/29 Javascript
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
如何实现小程序与小程序之间的跳转
2020/11/04 Javascript
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
bpython 功能强大的Python shell
2016/02/16 Python
Python编程之string相关操作实例详解
2017/07/22 Python
详解Python进阶之切片的误区与高级用法
2018/12/24 Python
Python骚操作之动态定义函数
2019/03/26 Python
python3实现高效的端口扫描
2019/08/31 Python
Python 中 -m 的典型用法、原理解析与发展演变
2019/11/11 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
介绍下static、final、abstract区别
2015/01/30 面试题
办理退休介绍信
2014/01/09 职场文书
小学红领巾中秋节广播稿
2014/01/13 职场文书
青年文明号事迹材料
2014/01/18 职场文书
干部培训自我鉴定
2014/01/22 职场文书
社区清明节活动总结
2014/07/04 职场文书
会议通知
2015/04/15 职场文书
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python