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 相关文章推荐
IE中的File域无法清空使用jQuery重设File域
Apr 24 Javascript
在父页面得到zTree已选中的节点的方法
Feb 12 Javascript
Shell脚本实现Linux系统和进程资源监控
Mar 05 Javascript
自制微信公众号一键排版工具
Sep 22 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
Feb 15 Javascript
react native带索引的城市列表组件的实例代码
Aug 08 Javascript
JavaScript实现图片切换效果
Aug 12 Javascript
Vue实现active点击切换方法
Mar 16 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 Javascript
vue 移动端记录页面浏览位置的方法
Mar 11 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
Sep 29 Javascript
vue 计算属性和侦听器的使用小结
Jan 25 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
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
php使用cookie显示用户上次访问网站日期的方法
2015/01/26 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
PHP中session跨子域的三种实现方法
2016/07/25 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
PHP常用的类封装小结【4个工具类】
2019/06/28 PHP
jQuery checkbox全选/取消全选实现代码
2009/11/14 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
javascript实用方法总结
2015/02/06 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
2015/04/16 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
小程序日历控件使用方法详解
2018/12/29 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
2019/09/02 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
Python二分查找详解
2015/09/13 Python
对pandas通过索引提取dataframe的行方法详解
2019/02/01 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
用python做游戏的细节详解
2019/06/25 Python
python利用JMeter测试Tornado的多线程
2020/01/12 Python
美国钻石商店:Zales
2016/11/20 全球购物
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
澳大利亚购买太阳镜和眼镜网站:Glamoureyes
2020/09/22 全球购物
实习生自荐信范文分享
2013/11/27 职场文书
高中毕业自我评价
2014/02/08 职场文书
高中竞选班长演讲稿
2014/04/24 职场文书
励志演讲稿范文
2014/04/29 职场文书
培训师岗位职责
2015/02/14 职场文书
新教师教学工作总结
2015/08/14 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers
Opencv中cv2.floodFill算法的使用
2021/06/18 Python