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 1.4 15个你应该知道的新特性(译)
Jan 24 Javascript
JS小游戏之仙剑翻牌源码详解
Sep 25 Javascript
js实现跨域的4种实用方法原理分析
Oct 29 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
原生js实现淘宝购物车功能
Jun 23 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
JS实现图片手风琴效果
Apr 17 Javascript
vue如何通过id从列表页跳转到对应的详情页
May 01 Javascript
javascriptvoid(0)含义以及与"#"的区别讲解
Jan 19 Javascript
简单了解vue.js数组的常用操作
Jun 17 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 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中的CMS的涵义
2007/03/11 PHP
php中文字母数字验证码实现代码
2008/04/25 PHP
php中计算未知长度的字符串哪个字符出现的次数最多的代码
2012/08/14 PHP
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
PHP实现链式操作的核心思想
2015/06/23 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
jquery 图片截取工具jquery.imagecropper.js
2010/04/09 Javascript
js时间日期和毫秒的相互转换
2013/02/22 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
Python 爬虫图片简单实现
2017/06/01 Python
Python代码缩进和测试模块示例详解
2018/05/07 Python
浅谈python常用程序算法
2019/03/22 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
机电专业个人自荐信格式模板
2013/09/23 职场文书
药品采购员岗位职责
2014/02/08 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
Django cookie和session的应用场景及如何使用
2021/04/29 Python
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android