时间戳

首页 > 技术文章 > jquery常见的选择器

jquery常见的选择器

guyanv 2018-04-08 21:07 原文

jquery常见的选择器

具体参考官方API:http://jquery.cuishifeng.cn/

1. 基本选择器


1.通配符选择器 *  用于选择所有元素

2.元素选择器 选择文档的元素 如html,body,p等

3.ID选择器 ID是页面唯一标值,ID只能用一次.以#ID标值.如#firstname是以ID为firstname的元素

4.class选择器.选择器仅可以选择同时包含这些类名的元素。以.class标值。如.intro是以选择class为intro的元素

5.群组选择器 如div,p,.info，选取<div>元素和<p>元素和class为info的元素

2.层级选择器

1.后代选择器 如div p,选取</p><div>元素下所有<p>元素

2.相邻兄弟元素选择器 如div+p,选择所有紧接着</p><div>元素之后的<p>元素
	
3.子元素选择器 如div>p,选择所有父级是</p><div>元素内的所有<p>元素

4.通用兄弟选择器 如p~ul ,选择p元素之后的每一个ul元素

3. 筛选器

1. 基本筛选器

1. :first  获取第一个元素
2. :not(selector) 去除所有与给定选择器匹配的元素
3. :even 匹配所有索引值为偶数的元素，从 0 开始计数
4. :odd  匹配所有索引值为奇数的元素，从 0 开始计数
5. :eq(index) 匹配一个给定索引值的元素
6. :gt(index) 匹配所有大于给定索引值的元素
7. :It(index) 匹配所有小于给定索引值的元素
8. :last 获取最后个元素
9. :header 选择所有标题元素（h1 - h6）
10. :animated 匹配所有正在执行动画效果的元素
11. :focus 匹配当前获取焦点的元素
12. :root 选择该文档的根元素 在HTML中，文档的根元素,和$(":root")选择的元素一样,永远是<html>元素
13  :target 选择由文档URI的格式化识别码表示的目标元素

2. 内容筛选器

1.:contains(text) 匹配包含给定文本的元素
2.:empty 匹配所有不包含子元素或者文本的空元素
3.:has(selector) 匹配含有选择器所匹配的元素的元素
4.:parent 匹配含有子元素或者文本的元素

3. 可见性

:hidden  匹配所有不可见元素，或者type为hidden的元素
:visible 匹配所有的可见元素

4.属性选择器

1.[attr],如[target],选择所有带有target属性元素（常用）

2.[attr="value"],如[target="blank"],选择选择所有使用target="blank"的元素（常用）

3.[attr~="value"],如[target~="blank"]，选择属性包含单词含有blank的元素

4.[attr|="value"],如[target|="blank],选择target|属性的起始值="blank"的所有元素

5.[arttr^="value"],如a[src^="https"],选择每一个src属性的值以"https"开头的元素

6.[arttr$="value"],如a[src$=".pdf"],选择每一个src属性的值以".pdf"结尾的元素

7.[arttr*="value"],如a[src*="runoob"],选择每一个src属性的值包含子字符串"runoob"的元素

5.表单对象属性

1.:input 匹配所有 input, textarea, select 和 button 元素
2. :text 匹配所有的单行文本框
3. :password 匹配所有密码框
4. :radio 匹配所有单选按钮
5. :checkbox 匹配所有复选框
6. :submit 匹配所有提交按钮，理论上只匹配 type="submit" 的input或者button,但是现在的很多浏览器,button元素默认的type即为submit,所以很多情况下,不设置type的button也会成为筛选结果.为了防止歧义或者误操作,建议所有的button在使用时都添加type属性. 
7. :image 匹配所有图像域
8. :reset 匹配所有重置按钮
9. :button 匹配所有按钮
10. :file 匹配所有文件域
11. :enabled 匹配所有可用元素
12. :disabled 匹配所有不可用元素
13. :checked 匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来说，获取选中推荐使用 :selected
14. :selected 匹配所有选中的option元素

6.子元素

1. :first-child 匹配所给选择器( :之前的选择器)的第一个子元素
类似的:first匹配第一个元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)
2. :first-of-type 结构化伪类，匹配E的父元素的第一个E类型的孩子。等价于:nth-of-type(1) 选择器.
3. :last-child 匹配最后一个子元素
4. :last-of-type 结构化伪类，匹配E的父元素的最后一个E类型的孩子
5.:nth-child(index) 匹配其父元素下的第N个子或奇偶元素
6. :nth-of-type(n|even|odd|formula) 选择同属于一个父元素之下，并且标签名相同的子元素中的第n个。
7. :only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配
8. :only-of-type  选择所有没有兄弟元素，且具有相同的元素名称的元素.如果父元素有相同的元素名称的其他子元素，那么没有元素会被匹配。

推荐阅读