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 相关文章推荐
js中将多个语句写成一个语句的两种方法小结
Dec 08 Javascript
JavaScript函数详解
Nov 17 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
BootStrap和jQuery相结合实现可编辑表格
Apr 21 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
May 26 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
Sep 04 Javascript
jQuery中slidedown与slideup方法用法示例
Sep 16 Javascript
Angularjs的键盘事件的绑定
Jul 27 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 Javascript
解决layer弹出层自适应页面大小的问题
Sep 16 Javascript
swiperjs实现导航与tab页的联动
Dec 13 Javascript
javascript遍历对象的五种方式实例代码
Oct 24 Javascript
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模拟post提交数据的方法
2015/02/12 PHP
js null undefined 空区别说明
2010/06/13 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
JavaScript Ajax编程 应用篇
2016/07/02 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
jQuery取得元素标签名称小结(附代码)
2017/08/16 jQuery
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
python中 logging的使用详解
2017/10/25 Python
详解Python map函数及Python map()函数的用法
2017/11/16 Python
python网络爬虫之如何伪装逃过反爬虫程序的方法
2017/11/23 Python
浅析Python数据处理
2018/05/02 Python
总结python中pass的作用
2019/02/27 Python
详解python中的数据类型和控制流
2019/08/08 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
Java里面如何创建一个内部类的实例
2015/01/19 面试题
迟到检讨书800字
2014/01/13 职场文书
中国梦演讲稿3分钟
2014/08/19 职场文书
中学生检讨书范文
2014/11/03 职场文书
2014年度思想工作总结
2014/11/27 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫
Elasticsearch 聚合查询和排序
2022/04/19 Python