JQuery学习笔记（2）- jQuery选择器
1. 基础选择器
| 选择器 | 名称 | 描述 | 返回 | 示例 |
|---|---|---|---|---|
| #id | id选择器 | 根据给定的id匹配一个元素 | 单个元素 | $("#box"); 选取id为box的元素 |
| .class | 类选择器 | 根据给定的类名匹配元素 | 集合元素 | $(".box");选取所有类名为box的元素 |
| element | 元素选择器 | 根据给定的元素名称匹配元素 | 集合元素 | $(“p”);选取所有<p>元素 |
| * | 通配符选择器 | 匹配所有元素 | 集合元素 | $("*");选取所有元素 |
| selector1,selector2,selectorN | 并集选择器 | 将所有选择器匹配到的元素合并后一起返回 | 集合元素 | $(“div,p,.box”);选取所有<div>元素,所有<p>元素和所有类名为box元素 |
2. 层级选择器
| 选择器 | 名称 | 描述 | 返回 | 示例 |
|---|---|---|---|---|
| $(“ancestor descendant”) | 后代选择器 | 选取ancestor元素的所有descendant后代标签(不光是儿子,包括孙子/重孙子等) | 集合元素 | $(“div span”);选取<div>元素里所有的<span>元素 |
| $(“parent > child”) | 子元素选择器 | 找到选取parent 元素中所有直接子元素child(只有儿子,不包括孙子/重孙子等) | 集合元素 | $(“div>span”);选取<div>元素下元素名称是<span>的子元素 |
| $(“prev + next”) | 相邻兄弟选择器 | 选取prev元素后面紧跟的那个next元素 | 集合元素 | $(".one+div");选取类名为one的下一个同级的<div>元素 |
| $(“prev ~ siblings”) | 通用兄弟选择器 | 选取prev元素后面的所有next元素 | 集合元素 | $("#two~div");选取id名为two元素后面所有同级的<div>元素 |
3. 基本选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :first | 获取匹配的第一个元素) | 单个元素 | $(‘li:first’);选取<li>元素列表中的第一个<li>元素 |
| :last() | 获取匹配的最后一个元素 | 单个元素 | $(‘li:last’) ;选取<li>元素列表中的最后一个<li>元素 |
| :not(selector) | 去除所有与给定选择器匹配的元素 | 集合元素 | $(“input:not(:checked)”);选取<input>中没有"checked"属性的元素 |
| :even | 匹配所有索引值为偶数的元素，从 0 开始计数 | 集合元素 | $(“tr:even”)；选取<tr>的第1、3、5…个元素 |
| :odd | 匹配所有索引值为奇数的元素，从 0 开始计数 | 集合元素 | $(“tr:odd”) ；选取<tr>的第2、4、6…个元素 |
| :eq(index) | 匹配一个给定索引值的元素，从 0 开始计数 | 单个元素 | $(“tr:eq(1)”)；选取<tr>的第2个元素 |
| :gt(index) | 匹配所有大于给定索引值的元素，从 0 开始计数 | 集合元素 | $(“tr:gt(0)”)；选取<tr>的第2、3、4…个元素 |
| :lt(index) | 匹配所有小于给定索引值的元素，从 0 开始计数 | 集合元素 | $(“tr:lt(2)”)；选取<tr>的第1、2个元素 |
| :lang(language) | 选择指定语言的所有元素 | 集合元素 | $(“p:lang(it)”)；选取<p>元素中lang属性值等于“it（Italian）”的元素 |
| :header | 匹配所有的标题元素 | 集合元素 | $(":header").css(“background”, “#EEE”)；为页面内的标题加上背景色 |
| :animated | 匹配所有正在执行动画效果的元素 | 集合元素 | $(":animated").css(“background-color”,“blue”)；选择当前正在执行动画效果的元素并为其增加背景色 |
| :focus | 匹配当前获取焦点的元素 | 单个元素 | $(":focus").css(“background-color”,“yellow”)；设置焦点所在元素的背景颜色为黄色 |
| :root | 选择文档的根元素；在HTML中，文档的根元素和$(":root")选择的元素一样，永远是元素 | 单个元素 | $(":root").css(“background-color”,“yellow”)；设置<html>背景颜色为黄色 |
| :target | 选择由文档URI的格式化识别码表示的目标元素 | 集合元素 | $( “:target” ) |
4. 内容过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :empty | 选取不包含子元素或文本为空的元素 | 集合元素 | $(“td:empty”) |
| :parent | 选取含有子元素或文本的元素 | 集合元素 | $(“td:parent”) |
| :contains(text) | 选取含有文本内容为text的元素 | 集合元素 | $(“div:contains(‘John’)”)；查找所有文本字段包含 “John” 的 div 元素 |
| :has(selector) | 选取含有选择器所匹配的元素的元素 | 集合元素 | $(“div:has(p)”).addClass(“test”)；给所有包含 p 元素的 div 元素添加一个 text 类 |
5. 属性选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| [attribute] | 匹配包含给定属性的元素 | 集合元素 | $(“div[id]”)；查找所有含有 id 属性的 <div>元素 |
| [attribute = value] | 匹配给定的属性是某个特定值的元素 | 集合元素 | $(“input[name=‘note’]”) ；查找所有name属性是note的<input>元素 |
| [attribute!=value] | 匹配所有不含有指定的属性，或者属性不等于特定值的元素 | 集合元素 | $(“input[name!=‘notepad’]”) |
| [attribute^=value] | 匹配给定的属性是以某些值开始的元素 | 集合元素 | $(“input[name^=‘note’]”) |
| [attribute$=value] | 匹配给定的属性是以某些值结尾的元素 | 集合元素 | $(“input[name$=‘pad’]”) |
| [attribute*=value] | 匹配给定的属性是以包含某些值的元素 | 集合元素 | $(“input[id][name$=‘note’]”) |
| [selector1][selector2][selectorN] | 复合属性选择器，需要同时满足多个条件时使用 | 集合元素 | $(“input[id][name$=‘note’]”) ；找到所有含有 id 属性，并且 name 属性是以 note结尾的<input>元素 |
6. 可见性选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :hidden | 匹配所有不可见元素，或者type为hidden的元素 | 集合元素 | $(“tr:hidden”)；查找隐藏的<tr>元素 |
| :visible | 匹配所有的可见元素 | 集合元素 | $(“tr:visible”) ；查找可见的<tr>元素 |
7. 子元素选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :first-child | 匹配第一个子元素 | 集合元素 | $(“ul li:first-child”)；在每个<ul>中查找第一个<li> |
| :first-of-type | 选择所有相同的元素名称的第一个兄弟元素 | 集合元素 | $(“div:first-of-type”) |
| :last-child | 匹配最后一个子元素 | 集合元素 | $(“ul li:last-child”) |
| :last-of-type | 选择的所有元素之间具有相同元素名称的最后一个兄弟元素 | 集合元素 | $(“p:last-of-type”) |
| :nth-child | 匹配其父元素下的第N个子或奇偶元素，从1开始计数 | 单个元素 | $(“ul li:nth-child(2)”) |
| :nth-last-child(n|even|odd|formula) | 选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个 | 单个元素 | $(“ul li:nth-last-child(2)”); |
| :nth-last-of-type(n|even|odd|formula) | 选择的所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个 | 集合元素 | $(“ul li:nth-last-of-type(2)”); |
| :nth-of-type(n|even|odd|formula) | 选择同属于一个父元素之下，并且标签名相同的子元素中的第n个，从1开始计数 | 集合元素 | $(“span:nth-of-type(2)”); |
| :only-child | 如果某个元素是父元素中唯一的子元素，那将会被匹配 | 集合元素 | $(“ul li:only-child”) |
| :only-of-type | 选择所有没有兄弟元素，且具有相同的元素名称的元素 | 集合元素 | $(“button:only-of-type”) |
8. 表单选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :input | 匹配所有的<input>元素 | 集合元素 | $(":input") |
| :text | 匹配所有的单行文本框 | 集合元素 | $(":text") |
| :password | 匹配所有密码框 | 集合元素 | $(":password") |
| :radio | 匹配所有单选按钮 | 集合元素 | $(":radio") |
| :checkbox | 匹配所有复选框 | 集合元素 | $(":checkbox") |
| :submit | 匹配所有提交按钮 | 集合元素 | $(":submit") |
| :image | 匹配所有图像域 | 集合元素 | $(":image") |
| :reset | 匹配所有重置按钮 | 集合元素 | $(":reset") |
| :button | 匹配所有按钮 | 集合元素 | $(":button") |
| :file | 匹配所有文件域 | 集合元素 | $(":file") |
| :hidden | 匹配所有不可见元素，或者type为hidden的元素 | 集合元素 | $(“input:hidden”) |
9. 表单对象选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :enabled | 匹配所有可用元素 | 集合元素 | $(“input:enabled”) |
| :disabled | 匹配所有不可用元素 | 集合元素 | $(“input:disabled”) |
| :checked | 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option) | 集合元素 | $(“input:checked”) |
| :selected | 匹配所有选中的option元素 | 集合元素 | $(“select option:selected”) |
1615
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
