常用jQuery选择器汇总


Posted in Javascript onFebruary 02, 2017

学习【js DOM 编程艺术】,最后面有许多jQuery的选择器,每个都动手敲了一遍。

jQuery 提供了高级选择器的方法。
j

s获取元素的三个基本方法分别是通过标签名,类名和id,即(getElementsByTagName, getElementsByClassName和getElementById)。那么jQuery是如何获取呢?

  1. 通过标签获取:$('tag')
  2. 通过类名获取:$('.className')
  3. 通过id获取:$('#id')

除了上面个三个最基本最简单的,还有下面几个css选择器:

$('*')  选择所有元素
$('tagA tagB')  选择作为tagA后代的tagB元素
$('tagA, tagB, tagC')  选择所有tagA元素,tagB元素和tagC元素
$('tag#id')  选择ID为id的tag元素
$('tag.className')  选择类名为className的tag元素

jQuery支持下列css2.1属性选择器:

$('tag[attr]')  选择所有带有attr属性的tag元素
$('tag[attr*=value]')  选择所有attr属性值中包含字符串value的tag元素

$('tag[attr=value]')  选择所有attr属性值等于value的tag元素
$('tag[attr!=value]')  选择所有attr属性值不等于value的tag元素

$('tag[attr^=value]')  选择所有attr属性值以value开头的tag元素
$('tag[attr$=value]')  选择所有attr属性值以value结尾的tag元素

$('tag[attr~=value]')  选择所有attr属性值 为空格分割的多个字符串且其中一个字符串等于value 的tag元素
$('tag[attr|=value]')  选择所有attr属性值 为连字符分割的字符串切该字符串以value开头的tag元素

子选择器,同辈选择器:

$('tagA > tagB')  选择作为tagA元素子元素的所有tagB元素
$('tagA + tagB')  选择紧邻tagA元素且位于其后的tagB元素
$('tagA ~ tagB')  选择作为tagA同辈元素且位于其后的所有tagB元素

伪类,伪元素选择器:

$('tag: root')  选择作为文档根元素的tag元素
$('tag: nth-child(n)')  选择作为其父元素正数第n个元素的所有tag元素
$('tag: nth-last-child(n)')  选择作为其父元素倒数 第n个元素的所有tag元素
$('tag: nth-of-type(n)')  选择几个同辈tag元素中的正数第n个
$('tag: nth-last-f-type(n)')  选择几个同辈tag元素中的倒数第n个
$('tag: first-child')  选择作为其父元素第一个子元素的tag元素
$('tag: last-child')  选择作为其父元素第一个子元素的tag元素
$('tag: first-of-type')  选择作为同辈tag元素中的第一个
$('tag: last-of-type')  选择作为同辈tag元素中的最后一个
$('tag: only-child')  选择作为其父元素唯一子元素的tag元素
$('tag: only-of-type')  选择作为同辈元素中唯一一个标签为tag的元素
$('tag: empty')  选择所有没有子元素的tag元素
$('tag: enabled')  选择界面元素中所有已经启用的tag元素
$('tag: disabled')  选择界面元素中所有已经禁用的tag元素
$('tag: checked')  选择界面元素中所有已经被选中的tag元素(如:复选框,单选按钮)
$('tag: not(s)')  选择与选择器s不匹配的所有tag元素

其他专有选择器:

$('tag: even')  选择匹配元素集 中偶数序号的元素(适合突出显示表格行)
$('tag: odd')  选择匹配元素集 中奇数序号的元素
$('tag: eq(0)'), $('tag: nth(0)')  选择匹配元素 集中的第一个元素,如页面的第一个段落
$('tag: gt(n)')  选择匹配元素集 中索引值大于n的所有元素
$('tag: lt(n)')  选择匹配元素集 中索引值小于n的所有元素
$('tag: first')  选择匹配元素集 中的第一个元素, 等价于eq(0)
$('tag: last')  选择匹配元素集 中的最后一个元素
$('tag: parent')  选择匹配元素集 中包含子元素(文本节点也算)的所有元素
$('tag: contains('test')')  选择匹配元素集 中包含指定文本的所有元素
$('tag: visible')  选择匹配元素集 中所有可见的元素(包括display属性为block和inline,visibility属性为visible以及type属性不是hidden的表单元素)
$('tag: hidden')  选择匹配元素集 中所有隐藏的元素(包括display属性为none, visibility属性为hidden以及type属性为hidden的表单元素)

一些专门为表单设计的表达式,用于快速访问表单元素:

:input  选择表单中的所有元素
:text  选择所有文本字段
:password  选择所有密码字段
:radio  选择所有单选按钮
:checkbox  选择所有复选框
:submit  选择所有提交按钮
:image  选择所有表单图像
:reset  选择所有重置按钮
:button  选择所有其他按钮
Javascript 相关文章推荐
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 Javascript
AngularJS 遇到的小坑与技巧小结
Jun 07 Javascript
leaflet的开发入门教程
Nov 17 Javascript
深入浅析JavaScript中的RegExp对象
Sep 18 Javascript
微信小程序之蓝牙的链接
Sep 26 Javascript
JS实现可针对算术表达式求值的计算器功能示例
Sep 04 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 Javascript
详解vue使用$http服务端收不到参数
Apr 19 Javascript
vue-model实现简易计算器
Aug 17 Javascript
JavaScript优化以及前段开发小技巧
Feb 02 #Javascript
JavaScript字符集编码与解码详谈
Feb 02 #Javascript
JS实现购物车特效
Feb 02 #Javascript
jQuery实现复选框的全选和反选
Feb 02 #Javascript
jQuery制作图片旋转效果
Feb 02 #Javascript
浅谈javascript中的 “ && ” 和 “ || ”
Feb 02 #Javascript
Javascript中的 “&” 和 “|” 详解
Feb 02 #Javascript
You might like
PHP4 与 MySQL 数据库操作函数详解
2006/10/09 PHP
PHP 登录完成后如何跳转上一访问页面
2014/01/14 PHP
Javascript 篱式条件判断
2008/08/22 Javascript
json 实例详细说明教程
2009/10/31 Javascript
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
2016/07/11 Javascript
JavaScript实现同一个页面打开多张图片
2016/12/29 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
jquery实现抽奖功能
2020/10/22 jQuery
原生JavaScript实现幻灯片效果
2021/02/19 Javascript
[01:52]DOTA2完美大师赛Vega战队趣味视频——kpii老师小课堂
2017/11/25 DOTA
[02:06]2018完美世界全国高校联赛秋季赛开始报名(附彩蛋)
2018/09/03 DOTA
python的三目运算符和not in运算符使用示例
2014/03/03 Python
简单介绍Python中的RSS处理
2015/04/13 Python
Python实现telnet服务器的方法
2015/07/10 Python
python使用mysql数据库示例代码
2017/05/21 Python
Python简单爬虫导出CSV文件的实例讲解
2018/07/06 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
Django中的forms组件实例详解
2018/11/08 Python
python集合是否可变总结
2019/06/20 Python
python中append实例用法总结
2019/07/30 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
Python中six模块基础用法
2019/12/08 Python
pytorch-RNN进行回归曲线预测方式
2020/01/14 Python
详解Scrapy Redis入门实战
2020/11/18 Python
世界上最大的各式箱包网络零售店:eBag
2016/07/21 全球购物
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
2014年物资管理工作总结
2014/12/02 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python
go 实现简易端口扫描的示例
2021/05/22 Golang
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫
USB TYPE-C 或将成为所有智能手机充电标准
2022/04/21 数码科技