首先简单的了解下CSS选择器和jQuery选择器：
- 利用CSS(Cascading Style Sheet)选择器可以轻松的的对某个元素添加样式而不改变HTML结构，只需添加不同的CSS规则，就可得到各种不同样式的网页
- CSS选择器是找到元素后添加样式，而jQuery选择器找到元素前后是添加行为，并且拥有跨浏览器的兼容性
以下是从jQuery书籍中整理出来的可用的jQuery选择器
?基本选择器
| 选择器 | 描述 | 示例 |
|---|---|---|
| #id | 根据给定的id匹配一个元素 | $("#test")选取id为test的元素 |
| .class | 根据给定的类名匹配元素 | $(".test")选取所有class为test的元素 |
| element | 根据给定的元素名匹配元素 | $(“p”)选取所有的 p标签元素 |
| * | 匹配所有元素 | $("*")选取所有元素 |
| selector1,selector2，···,selectorN | 将每一个选择器匹配到的元素合并后一起返回 | $(“div,span,p.myClass”)选取所有
,span标签元素和拥有class为myClass的p标签的一组元素
|
? 层次选择器
补充：
- 可以使用 next() 方法来代替 $(“prev+next”) 选择器
- 可以使用 nextAll() 方法来代替 $(“prev+siblings”) 选择器
- $(“prev+siblings”) 选择器只能选择"prev"元素后面的同辈
元素。 sibling() 方法与前后位置无关，只要是同辈节点都能匹配
| 选择器 | 描述 | 示例 |
|---|---|---|
| $(“ancestor descendant”) | 选取ancestor元素里的所有descendant（后代）元素 | $(“div span”)选取div标签里所有的span标签元素 |
| $(“parent>child”) | 选取 parent元素下的child(子)元素 | $(“div>span”)选取的是
元素下的元素名是span标签的子元素
|
| $(“prev+next”) | 选取连接在prev元素后的next元素 | $(".one+div")选取class为one的下一个div标签同辈元素 |
| $(“prev~siblings”) | 选取prev元素之后的所有siblings元素 | $("#two~div")选取id为two的元素后面的所有div标签同辈元素 |
——过滤选择器——
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号(:)开头
?基本过滤选择器
| 选择器 | 描述 | 示例 |
|---|---|---|
| :first | 选取第1个元素 | $(“div:first”)选取所有
元素中第1个div标签
|
| :last | 选取最后一个元素 | $(“div:last”)选取所有
元素中最后一个div标签元素
|
| :not(selector) | 去除所有与给定选择器匹配的元素 | $(“input:not(.myClass)”)选取class不是myClass的input标签元素 |
| :even | 选取索引是偶数的所有元素，索引从0开始 | $(“input:even”)选取索引是偶数的input标签元素 |
| :odd | 选取索引是奇数的所有元素，索引从0开始 | $(“input:odd”)选取索引是奇数的input标签元素 |
| :eq(index) | 选取索引等于index的元素(index从0开始) | $(“input:eq(1)”)选取索引等于1的input标签元素 |
| :gt(index) | 选取索引大于index的元素（index从0开始） | $(“iinput:gt(1)”)选取索引大于1的input标签元素（注：大于1，而不包括1） |
| :lt(index) | 选取索引小于index的元素（index从0开始） | $(“iinput:lt(1)”)选取索引小于1的input标签元素（注：小于1，而不包括1） |
| :header | 选取所有的标题元素，例如h1,h2,h3等 | $(":header")选取网页中所有的标题元素 |
| :animated | 选取当前正在执行的动画的所有元素 | $(“div:animated”)选取正在执行动画的div标签元素 |
| :focus | 选取当前获取焦点的元素 | $(":focus")选取当前获取焦点的元素 |
? 内容过滤选择器
过滤规则主要体现在它所包含的子元素或文本内容上
| 选择器 | 描述 | 示例 |
|---|---|---|
| :contains(text) | 选取含有文本内容为"text"的元素 | $(“div:contanis(‘我’)”)选取含有文本"我"的div标签元素 |
| :empty | 选取不包含子元素或者文本的空元素 | $(“div:empty”)选取不包含子元素（包括文本元素）的div标签空元素 |
| :parent | 选取含有子元素或者文本的元素 | $(“div:parent”)选取拥有子元素（包括文本元素）的div标签元素 |
| :has(selector) | 选取含有选择器所匹配的元素的元素 | $(“div:has§”)选取含有p标签元素的div标签元素 |
?可见性过滤选择器
根据元素的可见性和不可见状态来选择相应的元素
| 选择器 | 描述 | 示例 |
|---|---|---|
| :hidden | 选取所有不可见元素 | $(":hidden"):选取所有不可见元素 |
| :visible | 选取所有可见元素 | $(":visible")选取所有可见元素 |
?属性过滤选择器
过滤规则是通过元素的属性来获取相应的元素
| 选择器 | 描述 | 示例 |
|---|---|---|
| [attribute] | 选取拥有此属性的元素 | $(“div[id]”)选取所有拥有id的div标签元素 |
| [attribute=value] | 选取属性的值为value的元素 | $(“div[title=test]”)选取属性title为"test"的div元素 |
| [attribute!=value] | 选取属性的值不等于value的元素 | $(“div[title!=test]”)选取属性title不等于"test"的div元素（注意：没有属性title的div元素也会被选取） |
| [attribute^=value] | 选取属性的值以value开始的元素 | $(“div[title^=test]”)选取属性title以"test"开始的div标签元素 |
| [attribute$=value] | 取属性的值以value结束的元素 | ( " d i v [ t i t l e ("div[title ("div[title=test]")选取属性title以"test"结束的div标签元素 |
| [attribute *= value] | 选取属性的值含有value的元素 | $(“div[title*=test]”)选取属性title含有"test"的div标签元素 |
| [attribute I=value] | 选取属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符"-"）的元素 | $(“div[title I=‘en’]”)选取属性title等于en或以en为前缀（该字符后跟一个连字符"-"的元素） |
| [attribute ~= value] | 选取属性用空格分隔的值中包含一个给定值的元素 | $(“div[title~=‘uk’]”)选取属性title用空格分隔的值中包含字符uk的div标签元素 |
| [attribute1][attribute2][attributeN] | 用属性选择器合并成一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围 | ( " d i v [ i d ] [ t i t l e ("div[id][title ("div[id][title=‘test’]")选取拥有属性id，并且属性title以"test"结束的div标签元素 |
?子元素过滤选选择器
| 选择器 | 描述 | 示例 |
|---|---|---|
| :nth-child(index/even/odd | 选取每个父元素下的第index个子元素或者奇偶元素（index从1算起） | $(".uLlist:nth-child(3)")选取class为ulList的子元素中索引值为3的元素（index从1开始） |
| : first-child | 选取每个父元素的第一个子元素 | $(“ul li:first-child”);选择每个
|
| :last-child | 选取每个父元素的最后一个子元素 | $(“ul li:last-child”);选择每个
|
| :only-child | 如果某个元素是它父元素中唯一的一个子元素，那么它将会被匹配。如果父元素中含有其他元素，则不会被匹配 | $(“ul li:only-child”)在
|
- 详解nth-child()选择器
@-1： nth-child(even) 能选取每个父元素下的索引值是偶数的元素
@-2 ： nth-child(odd) 能选取每个父元素下的索引值是奇数的元素
@-3： nth-child(n) 能选取每个父元素下的索引值是等于n的元素
@-4: nth-child(3n) 能选取每个父元素下的索引值是3的倍数的元素（n从1开始）
@-5 nth-child(3n+1) 能选取每个父元素下的索引值是(3n+1)的元素(n从1开始）
注意： nth-child的index是从1开始的，而:eq(index)的index是从0开始的
?表单对象属性过滤选择器
| 选择器 | 描述 | 示例 |
|---|---|---|
| :enabled | 选取所有可用元素$("#form1:enabled") | $("#form1:enabled");选取id为form1的表单内的所有可用元素 |
| :disabled | 选取所有不可用元素 | $("#form1:disabled");选取id为form1的表单内的所有不可用元素 |
| :checked | 选取所有被选中元素（单选框、复选框） | $(“input:checked”);选取所有被选中的input标签元素 |
| :selected | 选取所有被选中的选项元素（下拉列表） | $(“slect option:selected”);选取所有被选中的选项元素 |
?表单选择器
| 选择器 | 描述 |
|---|---|
| :input | 选取所有的input,textarea,button,和select标签元素 |
| :text | 选取所有的单行文本框 |
| :pasdword | 选取所有的密码框 |
| :radio | 选取所有的单选框 |
| :checkbox | 选取所有的复选框 |
| :submit | 选取所有的提交按钮 |
| :image | 选取所有的图像按钮 |
| :reset | 选取所有的重置按钮 |
| :button | 选取所有的按钮 |
| :file | 选取所有的上传域 |
| :hidden | 选取所有不可见元素 |
扫一扫
159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
