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 相关文章推荐
jQuery中获取checkbox选中项等操作及注意事项
Nov 24 Javascript
Seajs的学习笔记
Mar 04 Javascript
jQuery中$.each使用详解
Jan 29 Javascript
JavaScript通过prototype给对象定义属性用法实例
Mar 23 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
Jul 05 Javascript
Angular开发实践之服务端渲染
Mar 29 Javascript
浅谈node中的cluster集群
Jun 02 Javascript
Vue extend的基本用法(实例详解)
Dec 09 Javascript
详解Vue 单文件组件的三种写法
Feb 19 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
Aug 06 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
PHPlet在Windows下的安装
2006/10/09 PHP
PHP+DBM的同学录程序(2)
2006/10/09 PHP
各种快递查询--Api接口
2016/04/26 PHP
PHP反射实际应用示例
2019/04/03 PHP
Code: write(s,d) 输出连续字符串
2007/08/19 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
2010/11/11 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
2010/11/11 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
vue使用Axios做ajax请求详解
2017/06/07 Javascript
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
今天,小程序正式支持 SVG
2019/04/20 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
2020/08/19 Javascript
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
django使用admin站点上传图片的实例
2019/07/28 Python
Python网络编程之使用TCP方式传输文件操作示例
2019/11/01 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
JSP和EJB可以共享HttpSession么?EJB里面可以改变session里面的内容
2013/06/05 面试题
跟单文员岗位职责
2014/01/03 职场文书
消防先进事迹材料
2014/02/10 职场文书
副护士长竞聘演讲稿
2014/04/30 职场文书
安全教育月活动总结
2014/05/05 职场文书
人代会标语
2014/06/30 职场文书
法学专业大学生实习自我鉴定
2014/10/05 职场文书
趣味运动会新闻稿
2015/07/17 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android
利用Python实现模拟登录知乎
2022/05/25 Python