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 相关文章推荐
Prototype使用指南之enumerable.js
Jan 10 Javascript
jQuery checkbox全选/取消全选实现代码
Nov 14 Javascript
JavaScript控制Session操作方法
Jan 17 Javascript
用js实现小球的自由移动代码
Apr 22 Javascript
从数组中随机取x条不重复数据的JS代码
Dec 24 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
Javascript中的Callback方法浅析
Mar 15 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 Javascript
全新打包工具parcel零配置vue开发脚手架
Jan 11 Javascript
Js经典案例的实例代码
May 10 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 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程序中的常见漏洞进行攻击(下)
2006/10/09 PHP
PHP Class&Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
wampserver改变默认网站目录的办法
2015/08/05 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
yii去掉必填项中星号的方法
2015/12/28 PHP
非常经典的PHP文件上传类分享
2016/05/15 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
又一个小巧的图片预加载类
2007/05/05 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
2018/12/05 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
2019/07/16 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
2020/05/21 Javascript
Python使用minidom读写xml的方法
2015/06/03 Python
Python 异常处理的实例详解
2017/09/11 Python
Python面向对象之继承代码详解
2018/01/29 Python
python之DataFrame实现excel合并单元格
2021/02/22 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
荷兰浴室和卫浴网上商店:Badkamerxxl.nl
2020/10/06 全球购物
大学生饮食连锁店创业计划书
2014/01/17 职场文书
企业年会主持词
2014/03/27 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
项目申请汇报材料
2014/08/16 职场文书
大学生党员批评与自我批评范文
2014/10/14 职场文书
2015大学生实训报告
2014/11/05 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书