jQuery选择器简明总结(含用法实例,一目了然)


Posted in Javascript onApril 25, 2014

本文现在对所有已知的 jquery 选择器做一个总结,深刻而熟练的掌握这些选择器,对我们快速的写各种 jquery 效果大有帮助!下面就对 jquery 各种选择做一个罗列吧!由于 jquery 用法非常简单,这里就不再举各种例子加深理解了。

元素 元素
选择器 实例 选取
* $("#item *") 选择 id 属性为 item 下的所有元素
#id $("#lastname") id="lastname" 的元素
.class $(".intro") 所有 class="intro" 的元素
element $("p") 所有

元素

.class.class $(".intro.demo") 所有 class="intro" 且 class="demo" 的元素
     
:first $("p:first") 第一个

元素

:last $("p:last") 最后一个

元素

:even $("tr:even") 所有偶数
:odd $("tr:odd") 所有奇数
:next $('.item').next('div') class为 item 的下一个 div 兄弟元素,等价于 $('.item + div')
:prev $('.item').prev('div') class为 item 的上一个 div 兄弟元素
:nextAll $('.item').nextAll('div') class 为 item 之后的所有的 div 兄弟元素,等价于 $('.inside ~ div')
:parent > child $('div > span') 选取 div 下的第一代 span 元素,又称直系子元素
:parent $('.item:parent') 选取 class 为 item 的元素的父级元素
     
:eq(index) $("ul li:eq(3)") 列表中的第四个元素(index 从 0 开始)
:gt(no) $("ul li:gt(3)") 列出 index 大于 3 的元素
:lt(no) $("ul li:lt(3)") 列出 index 小于 3 的元素
:not(selector) $("input:not(:empty)") $("input:not(.must)") 所有不为空的 input 元素;所有 class 属性不为 must 的元素
     
:header $(":header") 所有标题元素

-

:animated   所有动画元素
     
:contains(text) $("div:contains('www.phpernote.com')") 所有 div 元素中包含 www.phpernote.com 字符串的所有元素
:empty $(".item:empty") 所有 class 属性为 item 的元素中无子(元素)节点的所有元素
:hidden $("p:hidden") 所有隐藏的

元素

:has $('.item:has(span)') 所有 class 属性为 item 的元素中包含有 span 的所有元素(不分是否直系)
:visible $("table:visible") 所有可见的表格
     
s1,s2,s3 $("th,td,.intro") 所有带有匹配选择的元素
     
[attribute] $("a[href]") 所有带有 href 属性的 a 标签元素
[attribute=value] $("[href='#']") 所有 href 属性的值等于 "#" 的元素
[attribute!=value] $("[href!='#']") 所有 href 属性的值不等于 "#" 的元素
[attribute$=value] $("[href$='.jpg']") 所有 href 属性的值包含以 ".jpg" 结尾的元素
     
:input $(":input") 所有 元素
:text $(":text") 所有 type="text" 的 元素
:password $(":password") 所有 type="password" 的 元素
:radio $(":radio") 所有 type="radio" 的 元素
:checkbox $(":checkbox") 所有 type="checkbox" 的 元素
:submit $(":submit") 所有 type="submit" 的 元素
:reset $(":reset") 所有 type="reset" 的 元素
:button $(":button") 所有 type="button" 的 元素
:image $(":image") 所有 type="image" 的 元素
:file $(":file") 所有 type="file" 的 元素
     
:enabled $(":enabled") 所有激活的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有被选取的 input 元素
:checked $(":checked") 所有被选中的 input 元素
Javascript 相关文章推荐
jQuery 学习入门篇附实例代码
Mar 16 Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
Nov 17 Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
Node.js返回JSONP详解
May 18 Javascript
angular实现商品筛选功能
Feb 01 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
Mar 09 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 Javascript
javascript数组includes、reduce的基本使用
Jul 02 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
Apr 25 #Javascript
js动态移动滚动条至底部示例代码
Apr 24 #Javascript
javaScript如何处理从java后台返回的list
Apr 24 #Javascript
jquery如何扑捉回车键触发的事件
Apr 24 #Javascript
用unescape反编码得出汉字示例
Apr 24 #Javascript
标题过长使用javascript按字节截取字符串
Apr 24 #Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 #Javascript
You might like
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
老生常谈javascript中逻辑运算符&&和||的返回值问题
2017/04/13 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
为Python程序添加图形化界面的教程
2015/04/29 Python
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
浅析Python中的for 循环
2016/06/09 Python
python中requests小技巧
2017/05/10 Python
django中模板的html自动转意方法
2018/05/27 Python
python实现合并两个排序的链表
2019/03/03 Python
pytorch之添加BN的实现
2020/01/06 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
python re模块常见用法例举
2021/03/01 Python
美国受欢迎的眼影品牌:BH Cosmetics
2016/10/25 全球购物
英语专业个人求职自荐信
2013/09/21 职场文书
员工晚婚的请假条
2014/02/08 职场文书
学校标语大全
2014/06/19 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
群众路线教育实践活动实施方案
2014/10/31 职场文书
Python语言内置数据类型
2022/02/24 Python