Posted in Javascript onMarch 03, 2015
基本选择器
基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素id、class和标签名等来查找DOM元素。在网页中,每个id名称只能使用一次,class允许重复使用。
选择器 | 描述 | 返回 | 示例 |
#id | 根据给定的id匹配一个元素 | 单个元素 | $("#test")选取id为test的元素 |
.class | 根据给定的类名匹配元素 | 集合元素 | $(".test")选取所有class为test的元素 |
element | 根据给定的元素名称匹配元素 | 集合元素 | $("p")选取所有的 元素 |
* | 匹配所有的元素 | 集合元素 | $("*")选取所有的元素 |
selector1,selector2,...selectorN | 将每一个选择器匹配到的元素合并后一起返回 | 集合元素 | $("div,span,p.myclass")选取所有 ,和拥有class为myclass的
标签的一组元素 |
层次选择器
如果想通过DOM元素之间的层次关系来获取特定元素,例如后代元素、子元素、相邻元素和同辈元素等,那么层次选择器是一个非常好的选择。
选择器 | 描述 | 返回 | 示例 |
$("ancestor descendant") | 选取ancestor元素里的所有 descendant(后代)元素 | 集合元素 | $("div span")选取 里
所有元素
|
$("parent>child") | 选取parent元素下的child元素, 与$("ancestor descendant")有区别, $("ancestor descendant")选择的是后代元素 | 集合元素 | $("div>span")选取 元素下
元素名是的子元素
|
$("prev+next") | 选取紧邻在prev元素之后 的next元素 | 集合元素 | $(".one+div")选取class为one的
下一个 同辈元素
|
$("prev~siblings") | 选取prev元素之后的所有 siblings元素 | 集合元素 | $("#two~div")选取id为two的
元素后面的所有 同辈元素
|
$("prev+next")选择器与next()方法的等价关系
选择器 | 方法 | |
等价关系 | $(".one+div") | $(".one").next("div") |
$("prev~siblings")选择器与nextAll()方法的等价关系
选择器 | 方法 | |
等价关系 | $("prev~div") | $("#prev").nextAll("div") |
以上就是本文的全部内容了,希望大家能够喜欢
jQuery选择器之基本选择器与层次选择器
- Author -
hebedich声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@