常用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 相关文章推荐
ScrollDown的基本操作示例
Jun 09 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
Feb 11 Javascript
javascript模拟枚举的简单实例
Mar 06 Javascript
jQuery的基本概念与高级编程
May 14 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
Oct 21 Javascript
详解vue+vueRouter+webpack的简单实例
Jun 17 Javascript
js实现文字列表无缝滚动效果
Jun 23 Javascript
微信小程序 转发功能的实现
Aug 04 Javascript
React-Native左右联动List的示例代码
Sep 21 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 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
PHP获取表单textarea数据中的换行问题
2010/09/10 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
如何判断图片地址是否失效
2007/02/02 Javascript
javascript中的几个运算符
2007/06/29 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
[39:08]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第一场 12.12
2020/12/16 DOTA
浅谈MySQL中的触发器
2015/05/05 Python
小白如何入门Python? 制作一个网站为例
2018/03/06 Python
django框架中ajax的使用及避开CSRF 验证的方式详解
2019/12/11 Python
pytorch数据预处理错误的解决
2020/02/20 Python
Pandas中DataFrame基本函数整理(小结)
2020/07/20 Python
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
岗位竞聘演讲稿
2014/01/10 职场文书
老师给学生的表扬信
2014/01/17 职场文书
超市中秋节活动方案
2014/02/12 职场文书
竞聘演讲稿精彩开头和结尾
2014/05/14 职场文书
离婚协议书样本
2015/01/26 职场文书
置业顾问岗位职责
2015/02/09 职场文书
少年雷锋观后感
2015/06/10 职场文书
贫困生证明范文
2015/06/16 职场文书
2015年秋学期师德师风建设工作总结
2015/10/23 职场文书
简历自我评价范文
2019/04/24 职场文书
编写python程序的90条建议
2021/04/14 Python
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电