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 ui dialog里调用datepicker的问题
Aug 06 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
Dec 17 Javascript
常用的Javascript设计模式小结
Dec 09 Javascript
创建一个类Person的简单实例
May 17 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
angularJS实现动态添加,删除div方法
Feb 27 Javascript
Vue 页面跳转不用router-link的实现代码
Apr 12 Javascript
解决layui的input独占一行的问题
Sep 10 Javascript
基于VUE的v-charts的曲线显示功能
Oct 01 Javascript
vue a标签点击实现赋值方式
Sep 07 Javascript
JS数组去重详情
Nov 07 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中GET变量的使用
2006/10/09 PHP
php ios推送(代码)
2013/07/01 PHP
PHP操作mysql数据库分表的方法
2016/06/09 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
TP3.2框架分页相关实现方法分析
2020/06/03 PHP
JS特权方法定义作用以及与公有方法的区别
2013/03/18 Javascript
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
jQuery自定义添加"$"与解决"$"冲突的方法
2015/01/19 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
jQuery实现用户输入自动完成功能
2017/02/13 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
ReactNative实现图片上传功能的示例代码
2017/07/11 Javascript
微信小程序表单验证form提交错误提示效果
2020/06/19 Javascript
npm配置国内镜像资源+淘宝镜像的方法
2018/09/07 Javascript
Vue Prop属性功能与用法实例详解
2019/02/23 Javascript
vue.js 实现a标签href里添加参数
2019/11/12 Javascript
详解微信小程序之提高应用速度小技巧
2020/01/07 Javascript
JavaScript cookie原理及使用实例
2020/05/08 Javascript
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
Python求解平方根的方法
2015/03/11 Python
python导出hive数据表的schema实例代码
2018/01/22 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
python中操作文件的模块的方法总结
2021/02/04 Python
塑料制成的可水洗的编织平底鞋和鞋子:Rothy’s
2018/09/16 全球购物
Marlies Dekkers内衣荷兰官方网店:荷兰奢侈内衣品牌
2020/03/27 全球购物
六一节目主持词
2014/04/01 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
2015年社区精神文明工作总结
2015/05/26 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js