本文只是我学习《锋利的JQuery》一书的笔记而已
首先看总结一下常用的CSS选择器
选择器 | 语法 | 描述 | 示例 |
标签选择器 | E{CSS规则} | 以文档元素作为选择符 | td{font:14px;width:120px;} a{text-decoration:none} |
ID选择器 | #ID{CSS规则} | 以文档元素唯一标示符ID作为选择符 | #note{font:14px;width:120px;} |
类选择器 | E.className{CSS规则} | 以文档标示符class作为选择符 | div.note{font:14px;} .dream{font:14px;} |
群组选择器 | E1,E2,E3{CSS规则} | 多个选择符应用同样的样式规则 | td,p,div,a{font:14px;} |
后代选择器 | E F{CSS规则} | 元素E的任意后代F | #link a{color:red;} |
通配选择器 | *{CSS规则} | 以文档的所有元素作为选择符 | *{font:14px;} |
JQuery选择器分为,基本选择器,层次选择器,过滤选择器,表单选择器
基本选择器:通过id,class,标签名等来查找DOM元素
选择器 | 描述 | 返回 | 示例 |
#id | 根据给定的id匹配一个元素 | 单个元素 | ${"#test"}选取id为test的元素 |
.class | 根据给定的类名匹配元素 | 集合元素 | ${".test"}选取所有class为test的元素 |
element | 根据给定的元素名匹配元素 | 集合元素 | $("p")选取所有<p>的元素 |
* | 匹配所有元素 | 集合元素 | $("*")选取所有元素 |
selector1,selector2, ...,selectorN | 将每一个选择器匹配到的元素合并后一起返回 | 集合元素 | $("div,span,p.myClass")选取所有<div><span>和拥有class为myClass的<p>标签的一组元素 |
层次选择器:如果想通过DOM元素之间的层次关系来获取特定元素,例如后代元素子元素,相邻元素和兄弟元素等,那么层次选择器是个非常好的选择
选择器 | 描述 | 返回 | 示例 |
$("ancestor descendant") | 选取ancestor元素里的所有descendant后代元素 | 集合元素 | $(div span)选取所有div里的所有span元素 |
$("paremt>child") | 子元素,上面是后代元素 | 集合元素 | $(div>span)选取所有div里的所有span子元素 |
$("prev+next") | 选取紧跟在prev元素后的next元素 | 集合元素 | $(".one+div")选取class为one的下一个div元素 |
$("prev+siblings") | 选取prev元素后的所有siblings元素 | 集合元素 | $("#two~div")选取id为two的元素后面所有的div元素 |
$("prev+next")等价于 $("prev").next("div")
$("prev+siblings")等价于 $("prev").nextAll("div")
过滤器选择器:与CSS中的伪类选择器语法相同,即选择器都以一个冒号开头,
按照不同的过滤规则,可以分为,基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤,表单对象属性过滤
选择器 | 描述 | 返回 | 示例 |
:first | 选取第一个元素 | 单个元素 | $("div:first"),选取所有div中第一个div元素 |
:last | 选取最后一个元素 | 单个元素 | $("div:last"),选取所有div中最后一个div元素 |
:not(selector) | 去除所有给定选择器匹配的元素 | 集合元素 | $("input:not(.myClass)")选取class不是myClass的所有input元素 |
:even | 选取索引是偶数的所有元素,索引从0开始 | 集合元素 | $("input:even")选取索引是偶数的input元素 |
:odd | 选取索引是奇数的所有元素,索引从0开始 | 集合元素 | $("input:eq(1)")选取索引是奇数的input元素 |
:eq(index) | 选取等于index的元素,index从0开始 | 集合元素 | 略 |
:gt(index) | 选取大于index的元素 | 集合元素 | 略 |
:lt(index) | 选取小于index的元素 | 集合元素 | 略 |
:header | 选取所有标题元素,例如<h1><h2><h3> | 集合元素 | 略 |
:animated | 选取当前正在执行动画的所有元素 | 集合元素 | 略 |
内容过滤器
选择器 | 描述 | 返回 | 示例 |
:contains(text) | 选取内容文本为text的元素 | 集合元素 | $(”div:contains('我')“)选取含有文本'我'的div元素 |
:empty | 选取不包含子元素或文本的空元素 | 集合元素 | $("div :empty")选取不包含子元素(包括文本元素)的<div>元素 |
:has(selector) | 选取含有选择器所匹配的元素的元素 | 集合元素 | $("div:has(p)")选取包含<p>元素的<div>元素 |
:parent | 选取含有子元素或者文本的元素 | 集合元素 | $("div:parent")选取拥有子元素(包括文本元素)的<div>元素 |
选择器 | 描述 | 返回 | 示例 |
:hidden | 选取所有不可见的元素 | 集合元素 | $(":hidden")选取所有不可见的元素 $("input:hidden")选取所有不可见的<input>元素 |
:visible | 选取所有可见的元素 | 集合元素 | $("div:visible")选取所有可见的div元素 |
选择器 | 描述 | 返回 | 示例 |
[attrubute] | 选取拥有此属性的元素 | 集合元素 | $("div[id]")选择拥有属性id的元素 |
[attrubute=value] | 选取属性值为value的元素 | 集合元素 | $("div[title=test]")选取属性为test的div元素 |
[attrubute!=value] | 选取属性值不等于value的元素 | 集合元素 | 下略 |
[attrubute^=value] | 选取属性值value开始的元素 | 集合元素 | |
[attrubute$=value] | 选取属性值value结束的元素 | 集合元素 | |
[attrubute*=value] | 选取属性值包含value的元素 | 集合元素 | |
[selector1][selector2],...,[selectorN] | 复合属性选择器,每选择一次缩小一次范围 | 集合元素 |