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 :first选择器使用介绍
Aug 09 Javascript
使用jquery实现以post打开新窗口
Mar 19 Javascript
JavaScript数组常用方法
Mar 02 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 Javascript
js 获取站点应用名的简单实例
Aug 18 Javascript
学习掌握JavaScript中this的使用技巧
Aug 29 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 Javascript
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
node和vue实现商城用户地址模块
Dec 05 Javascript
js实现窗口全屏示例详解
Sep 17 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
PHP 命令行参数详解及应用
2011/05/18 PHP
自定义session存储机制避免会话保持问题
2014/10/08 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
事件绑定之小测试  onclick && addEventListener
2011/07/31 Javascript
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
12条写出高质量JS代码的方法
2018/01/07 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
Vue 进阶之路(三)
2019/04/18 Javascript
详解关于Vue单元测试的几个坑
2020/04/26 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
python之import机制详解
2014/07/03 Python
Python全局变量用法实例分析
2016/07/19 Python
TensorFlow如何实现反向传播
2018/02/06 Python
python执行CMD指令,并获取返回的方法
2018/12/19 Python
pandas去除重复列的实现方法
2019/01/29 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
对Python中 \r, \n, \r\n的彻底理解
2020/03/06 Python
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
weblogic面试题
2016/03/07 面试题
小学生暑假感言
2014/02/06 职场文书
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
《理想的风筝》教学反思
2014/04/11 职场文书
《荷花》教学反思
2014/04/16 职场文书
预防传染病方案
2014/06/14 职场文书
助学贷款贫困证明
2014/09/23 职场文书
党支部先进事迹材料
2014/12/24 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书