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 相关文章推荐
非常好用的JsonToString 方法 简单实例
Jul 18 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
jQuery实现的Div窗口震动特效
Jun 09 Javascript
jQuery设置和获取HTML、文本和值示例
Jul 08 Javascript
对Js OOP编程 创建对象的一些全面理解
Jul 26 Javascript
微信小程序 Storage API实例详解
Oct 02 Javascript
Vue实现自带的过滤器实例
Mar 09 Javascript
JS实现多物体运动的方法详解
Jan 23 Javascript
JavaScript运行原理分析
Feb 09 Javascript
vue.js系列中的vue-fontawesome使用
Feb 10 Javascript
javaScript动态添加Li元素的实例
Feb 24 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 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
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
javascript document.images实例
2008/05/27 Javascript
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
js图片自动切换效果处理代码
2013/05/07 Javascript
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
python运行时间的几种方法
2016/06/17 Python
Python常用库推荐
2016/12/04 Python
Python实现Youku视频批量下载功能
2017/03/14 Python
浅谈python中的占位符
2017/11/09 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
Python实现序列化及csv文件读取
2020/01/19 Python
如何在sublime编辑器中安装python
2020/05/20 Python
win10安装python3.6的常见问题
2020/07/01 Python
移动端Html5中百度地图的点击事件
2019/01/31 HTML / CSS
Prototype如何实现页面局部定时刷新
2013/08/06 面试题
Prototype如何更新局部页面
2013/03/03 面试题
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
员工拾金不昧表扬信
2014/01/09 职场文书
《植物妈妈有办法》教学反思
2014/02/25 职场文书
美术毕业生求职信
2014/02/25 职场文书
婚庆司仪主持词
2014/03/15 职场文书
大学同学会活动方案
2014/08/20 职场文书
个人欠款协议书范本2014
2014/11/02 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
检讨书怎么写
2015/05/07 职场文书
golang在GRPC中设置client的超时时间
2021/04/27 Golang