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 相关文章推荐
Array.slice()与Array.splice()的返回值类型
Oct 09 Javascript
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 Javascript
Javascript 通过json自动生成Dom的代码
Apr 01 Javascript
jQuery判断元素是否是隐藏的代码
Apr 24 Javascript
如何在指定的地方插入html内容和文本内容
Dec 23 Javascript
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
JavaScript中变量提升与函数提升经典实例分析
Jul 26 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
微信小程序如何实现radio单选框单击打勾和取消
Jan 21 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
Mar 10 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性能优化 产生高度优化代码
2011/07/22 PHP
PHP 验证登陆类分享
2015/03/13 PHP
php数组生成html下拉列表的方法
2015/07/20 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
javascript中onmouse事件在div中失效问题的解决方法
2012/01/09 Javascript
DOM 中的事件处理介绍
2012/01/18 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
javascript 中__proto__和prototype详解
2014/11/25 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
Vuex mutitons和actions初使用详解
2019/03/04 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
JavaScript Event Loop相关原理解析
2020/06/10 Javascript
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
python获取外网IP并发邮件的实现方法
2017/10/01 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
调试Django时打印SQL语句的日志代码实例
2019/09/12 Python
简单了解Python write writelines区别
2020/02/27 Python
详解Python中import机制
2020/09/11 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
CSS3+js实现简单的时钟特效
2015/03/18 HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
护理专业应届毕业生推荐信
2013/11/15 职场文书
教师研修随笔感言
2014/01/23 职场文书
2014年商场超市庆元旦活动方案
2014/02/14 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
大学生党员个人对照检查材料范文
2014/09/25 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
企业内部管理控制:采购授权审批制度范本
2020/01/19 职场文书