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 相关文章推荐
Javascript操纵Cookie实现购物车程序
Feb 15 Javascript
javascript 操作cookies及正确使用cookies的属性
Oct 15 Javascript
javascript中使用css需要注意的地方小结
Sep 01 Javascript
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
jQuery新闻滚动插件 jquery.roller.js
Jun 27 Javascript
javascript与cookie 的问题详解
Nov 11 Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
解决js图片加载时出现404的问题
Nov 30 Javascript
JavaScript Ajax实现异步通信
Dec 14 Javascript
vue脚手架及vue-router基本使用
Apr 09 Javascript
ES5新增数组的实现方法
May 12 Javascript
vant 时间选择器--开始时间和结束时间实例
Nov 04 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
php5编程中的异常处理详细方法介绍
2008/07/29 PHP
php gd2 上传图片/文字水印/图片水印/等比例缩略图/实现代码
2010/05/15 PHP
PHP 验证身份证是否合法的函数
2017/02/09 PHP
javascript demo 基本技巧
2009/12/18 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
AngularJS基础 ng-show 指令简单示例
2016/08/03 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
checkbox在vue中的用法小结
2018/11/13 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
JS为什么说async/await是generator的语法糖详解
2019/07/11 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
React实现类似淘宝tab居中切换效果的示例代码
2020/06/02 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
python basemap 画出经纬度并标定的实例
2019/07/09 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用自动传回?
2012/02/21 面试题
自考生自我鉴定范文
2013/10/01 职场文书
高中班长自我鉴定
2013/12/20 职场文书
宣传策划类求职信范文
2014/01/31 职场文书
前厅部经理岗位职责范文
2014/02/04 职场文书
民间借贷协议书范本
2014/10/01 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
党员个人查摆剖析材料
2014/10/16 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
python本地文件服务器实例教程
2021/05/02 Python
如何判断pytorch是否支持GPU加速
2021/06/01 Python
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android