第二章 jQuery选择器
- CSS选择器
选择器 语法 描述 示例 标签选择器 E{
CSS规则
}以文档元素作为选择器 td {
font-size:14px;
width:120px;
}
a {
text-decoration:none;
}ID选择器 #ID{
CSS规则
}以文档元素的唯一标识符ID作为选择器 #note {
font-size:14px;
width:120px;
}类选择器 E.className{
CSS规则
}以文档元素的class作为选择器 div.note {
font-size:14px;
}
.dream {
font-size:14px;
}群组选择器 E1,E2,E3{
CSS规则
}多个选择符应用同样的样式规则 td,p,div.a {
font-size:14px;
}后代选择器 E,F{
CSS规则
}元素E的任意后代元素F #links a {
font-size:14px;
}通配符选择器 *{
CSS规则
}以文档的所有元素作为选择符 * - 基本选择器
选择器 描述 返回 示例 #id 根据给定的id匹配一个元素 单个元素 $("#test")选取id为test的元素 .class 根据给定的类名匹配元素 集合元素 $(".test")选取所有class为test的元素 element 根据给定的元素名匹配元素 集合元素 $("p")选取所有的<p>元素 * 匹配所有元素 集合元素 选取所有的元素 selector1,selector2,
……,selectorN将每一个选择器匹配到的元素
合并后一起返回集合元素 &("div,span,p.myClass")选取所有<div>，
<span>和拥有class为myClass的<p>
标签的一组元素 - 层次选择器
选择器 描述 返回 示例 $("ancestor descendant") 选取ancestor元素里的所有
descendant元素集合元素 $("div span")选取div>里的
所有<span>元素&("parent>child") 选取parent元素下的child元素，与
$("ancestor descendant")有区别，
$("ancestor descendant")选择的是
后代元素集合元素 $("div>span")选取<div>元素下
元素名是<span>的子元素$("prev+next")或
$("prev").next("next")选取紧接在prev元素后的next元素 集合元素 $(".one+div")或$(".one").next("div")选取
class为one的下一个<div>元素$("prev~siblings")或
$("prev").nextAll("siblings")选取prev元素之后的所有siblings元素 集合元素 $("#two~div")或$("#two").nextAll("div")
选取id为two的元素后面的所有<div>兄弟
元素$("prev").siblings("siblings") 选取prev元素的所有siblings元素 集合元素 $("#two").siblings("div")选取id为two的
元素的所有<div>兄弟元素，不分前后位置 - 过滤选择器
Ⅰ.基本过滤选择器
选择器 描述 返回 示例 :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:odd")选取索引是奇数的
<input>元素:eq(index) 选取索引等于index的元素
(索引从0开始)单个元素 $("input:eq(1)")选取索引等于1的
<input>元素:gt(index) 选取索引大于index的元素
(索引从0开始)集合元素 $("input:gt(1)")选取索引大于1的
<input>元素(不包括1):lt(index) 选取索引小于index的元素
(索引从0开始)集合元素 $("input:lt(1)")选取索引小于1的
<input>元素(不包括1):header 选取所有的标题元素，例
如 h1,h2,h3等集合元素 $(":header")选取所有的 <h1>,
<h2>,<h3>,:animated 选取当前正在执行动画的
所有元素集合元素 $("div:animated")选取正在执行
动画的<div>元素
Ⅱ.内容过滤选择器
选择器 描述 返回 示例 :contains(text) 选取含有文本内容为“text”元素 集合元素 $("div:contains('我')")选取含有文本“我”的<div>元素 :empty 选取不包含子元素或者文本的空元素 集合元素 $("div:empty")选取不包含子元素(包括文本元素)的
<div>元素:has(selector) 选取含有选择器所匹配的元素的元素 集合元素 $("div:has(p)")选取含有 <p>元素的<div>元素 :parent 选取含有子元素或者文本的元素 集合元素 $("div:parent")选取拥有子元素(包括文本元素)的
<div>元素
Ⅲ.可见性过滤器
选择器 描述 返回 示例 :hidden 选取所有不可见的元素 集合元素 $(":hidden")选取所有不可见的元素。 包括<input type="hidden">,
<div style="display:none">和<div style="visibility:hidden">等元素。:visible 选取所有可见的元素 集合元素 $("div:visible")选取所有可见的<div>元素
IIII.属性过滤选择期
选择器 描述 返回 示例 [attribute] 选取拥有此属性的元素 集合元素 $("div[id]")选取拥有属性id的元素 [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结束的元素 集合元素 $("div[title$=test]")选取属性title以"test"结束的<div>元素 [attribute=*value] 选取属性的值含有value的元素 集合元素 $("div[title*=test]")选取属性title含有"test"的<div>元素
