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 基于原型的对象(创建、调用)
Oct 16 Javascript
通过location.replace禁止浏览器后退防止重复提交
Sep 04 Javascript
javascript结合fileReader 实现上传图片
Jan 30 Javascript
Angular 2应用的8个主要构造块有哪些
Oct 17 Javascript
jQuery实现拖动剪裁图片作为头像
Dec 28 Javascript
JavaScript中各数制转换全面总结
Aug 21 Javascript
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
详解.vue文件解析的实现
Jun 11 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 Javascript
js 实现碰撞检测的示例
Oct 28 Javascript
浅谈克隆 JavaScript
Nov 02 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
如何设置mysql允许外网访问
2013/06/04 PHP
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
linux下安装php的memcached客户端
2014/08/03 PHP
php格式化日期实例分析
2014/11/12 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
2015/08/11 Javascript
javascript中去除数组重复元素的实现方法【实例】
2016/04/12 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
2016/05/30 Javascript
javascript实现抽奖程序的简单实例
2016/06/07 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
2016/12/22 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
Vue单文件组件基础模板小结
2017/08/10 Javascript
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
详解Vue.js iview实现树形权限表(可扩展表)
2018/09/30 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
js根据需要计算数组中重复出现某个元素的个数
2019/01/18 Javascript
vue多个元素的样式选择器问题
2019/11/29 Javascript
基于better-scroll 实现歌词联动功能的代码
2020/05/07 Javascript
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
js实现网页随机验证码
2020/10/19 Javascript
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
详解Python2.x中对Unicode编码的使用
2015/04/03 Python
python 把数据 json格式输出的实例代码
2016/10/31 Python
解决webdriver.Chrome()报错:Message:'chromedriver' executable needs to be in Path
2019/06/12 Python
python dataframe NaN处理方式
2019/12/26 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
2015年办公室文秘工作总结
2015/04/30 职场文书
2019年XX公司的晨会制度及流程!
2019/07/23 职场文书
Win10鼠标轨迹怎么开 Win10显示鼠标轨迹方法
2022/04/06 数码科技