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中获取请求的URL参数[正则]
Dec 25 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
Mar 21 Javascript
javascript自定义startWith()和endWith()的两种方法
Nov 11 Javascript
jquery中each方法示例和常用选择器
Jul 08 Javascript
JavaScript tab选项卡插件实例代码
Feb 23 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
Jan 23 Javascript
vue element项目引入icon图标的方法
Jun 06 Javascript
Vue props 单向数据流的实现
Nov 06 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
详解datagrid使用方法(重要)
Nov 06 Javascript
Canvas三种动态画圆实现方法说明(小结)
Apr 16 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和ACCESS写聊天室(八)
2006/10/09 PHP
PHP输出当前进程所有变量/常量/模块/函数/类的示例
2013/11/07 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
js改变css样式的三种方法推荐
2016/06/28 Javascript
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
JavaScript Canvas实现验证码
2020/08/02 Javascript
使用Angular Cli如何创建Angular私有库详解
2019/01/30 Javascript
JS数据类型判断的几种常用方法
2020/07/07 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
js实现滚动条自动滚动
2020/12/13 Javascript
[04:03]DOTA2肉山黑名单梦之声 风暴之灵中文配音鉴赏
2013/07/03 DOTA
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
Python导出数据到Excel可读取的CSV文件的方法
2015/05/12 Python
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
python逆序打印各位数字的方法
2018/06/25 Python
django session完成状态保持的方法
2018/11/27 Python
python opencv 图像拼接的实现方法
2019/06/27 Python
python 环境搭建 及python-3.4.4的下载和安装过程
2019/07/20 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
如何基于Python实现数字类型转换
2020/02/07 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
Python numpy大矩阵运算内存不足如何解决
2020/11/19 Python
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
奖金申请报告模板
2015/05/15 职场文书
详解CSS伪元素的妙用单标签之美
2021/05/25 HTML / CSS
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python