第二章 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 >和<div >等元素。
: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>元素
