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 相关文章推荐
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
深入理解JavaScript是如何实现继承的
Dec 12 Javascript
jquery sortable的拖动方法示例详解
Jan 16 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
详解vue项目的构建,打包,发布全过程
Nov 23 Javascript
Angular实现的table表格排序功能完整示例
Dec 22 Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 Javascript
vue slot与传参实例代码讲解
Apr 28 Javascript
vue+django实现一对一聊天功能的实例代码
Jul 17 Javascript
新手入门js闭包学习过程解析
Oct 08 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
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
php中HTTP_REFERER函数用法实例
2014/11/21 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
php实用代码片段整理
2016/11/12 PHP
Array.slice()与Array.splice()的返回值类型
2006/10/09 Javascript
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
2009/08/09 Javascript
javascript实现日历控件(年月日关闭按钮)
2012/12/12 Javascript
js防止表单重复提交的两种方法
2013/09/30 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
jquery代码实现简单的随机图片瀑布流效果
2015/04/20 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
2018/08/06 Javascript
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
[14:36]2014 DOTA2国际邀请赛中国区预选赛5.21 Orenda VS NE
2014/05/22 DOTA
Python使用redis pool的一种单例实现方式
2016/04/16 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
基于python实现学生管理系统
2018/10/17 Python
Python面向对象编程基础实例分析
2020/01/17 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
Keras: model实现固定部分layer,训练部分layer操作
2020/06/28 Python
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
阳光体育:Sunny Sports(购买露营和远足设备)
2018/08/07 全球购物
商务日语专业毕业生求职信
2013/10/26 职场文书
学院领导推荐信
2013/10/30 职场文书
商务日语专业毕业生自荐信
2014/03/27 职场文书
妇联主席先进事迹
2014/05/18 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书