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的trim,ltrim,rtrim自定义函数
Sep 21 Javascript
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
js修改table中Td的值(定义td的单击事件)
Jan 10 Javascript
EasyUi datagrid 实现表格分页
Feb 10 Javascript
详解JavaScript的while循环的使用
Jun 03 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
利用JS轻松实现获取表单数据
Dec 06 Javascript
js实现功能比较全面的全选和多选
Mar 02 Javascript
Vuex之理解Getters的用法实例
Apr 19 Javascript
Angular2使用jQuery的方法教程
May 28 jQuery
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
JS如何实现动态添加的元素绑定事件
Nov 12 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 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
深入理解 PHP7 中全新的 zval 容器和引用计数机制
2018/10/15 PHP
php PDO属性设置与操作方法分析
2018/12/27 PHP
一些技巧性实用js代码小结
2009/10/14 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
2015/09/06 Javascript
详解vue嵌套路由-params传递参数
2017/05/23 Javascript
一个有意思的鼠标点击文字特效jquery代码
2017/09/23 jQuery
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
JS使用new操作符创建对象的方法分析
2019/05/30 Javascript
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
Python random模块常用方法
2014/11/03 Python
python实现决策树、随机森林的简单原理
2018/03/26 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
matplotlib实现热成像图colorbar和极坐标图的方法
2018/12/13 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
Booking.com缤客中国:全球酒店在线预订网站
2020/05/03 全球购物
Oracle性能调优原则
2012/05/03 面试题
2014年迎新年活动方案
2014/02/19 职场文书
2014社区三八妇女节活动总结
2014/03/01 职场文书
股东授权委托书
2014/10/15 职场文书
党建工作整改措施
2014/10/28 职场文书
2014年英语教研组工作总结
2014/12/06 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
胡桃夹子观后感
2015/06/11 职场文书
学习十八大的感悟
2015/08/11 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
Oracle中update和select 关联操作
2022/01/18 Oracle