1. 基本选择器
基本选择器是JQuery中最常用的选择器,也是最简单的选择器,它通过元素id、class和标签名等来查找DOM元素。在网页中,没个id名称只能使用一次,class允许重复使用。
基本选择器的介绍说明图
选择器 | 描述 | 返回 | 示列 |
#id | 根据给定的id匹配一个元素 | 单个元素 | $(“#test”)选取id为test的元素 |
.class | 根据给定的类名匹配元素 | 集合元素 | $(“.test”)选取所有class为test的元素 |
Element | 根据给定的元素明匹配元素 | 集合元素 | $(“p”)选取所有的<p>元素 |
* | 匹配所有元素 | 集合元素 | $(“*”)选取所有的元素 |
select1,select2, ……,selectN | 将每一个选择器匹配到的元素合并后一起返回 | 集合元素 | $(“div,span,p.myClass”)选取所有<div>,<span>和所有class为myClass的<P>标签的一组元素 |
2. 层次选择器
如果想通过DOM元素之间的层次关系来获取特定元素,如后代元素、子元素、相邻元素和兄弟元素等,那么层次选择器是一个非常好的选择
层次选择器的介绍说明图
选择器 | 描述 | 返回 | 示列 |
#(“ancestor descendant”) | 选取ancestor元素后的所有descendant(后代)元素 | 单个元素 | $(“div span”) |
$(“parent > child”) | 选取parent元素下的child(子)元素 | 集合元素 | $(“div > span”) |
$(‘prev + next’) | 选取紧接在prev元素后的next元素 | 集合元素 | $(‘.one > div’) $(‘.one’).next(“div”) |
$(‘prev~sibings’) | 选取在prev元素后的所有siblings元素 | 集合元素 | $(‘#two > div’) $(‘.one’).nextAll(“div”) |
3. 过滤选择器
通过特定的过滤规则来筛选出所需的DOM元素,过滤规则于css中的伪类选择器语法相同。可分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器
a) 基本过滤选择器
选择器 | 描述 | 返回 | 示列 |
:fist | 选取第一个元素 | 单个元素 | $(“div:first”)选取所有<div>元素中第一个<div>元素 |
:last | 选取最后一个元素 | 单个元素 | $(“div:last”)选取所有<div>元素中最后一个<div>元素 |
:not(selector) | 去除所有于给定选择匹配的元素 | 集合元素 | $(“input:not(.myClass)”)选取class不是myClass的<input>元素 |
:even | 选取索引是偶数的所有元素 | 集合元素 | $(“input:even”) |
:odd | 选取索引是奇数的所有元素 | 集合元素 | $(“input:odd”) |
:eq(index) | 选取索引等于index的元素 | 单个元素 | $(“input:eq(1)”) |
:gt(index) | 选取索引大于index的元素 | 集合元素 | $(“input:gt(1)”) |
:lt(index) | 选取索引小于index的元素 | 集合元素 | $(“input:了t(1)”) |
:header | 选取所有的标题元素,如h1,h2,h3 | 集合元素 | $(“header”) |
:animated | 选取所有的当前正在执行动画的元素 | 集合元素 | $(“div:animated”)选取正在执行动画的<div>元素 |
b) 内容过滤选择器
选择器 | 描述 | 返回 | 示列 |
:contains(text) | 选取包含文本内容为”text”的元素 | 集合元素 | $(“div:contains(‘我’)”) |
:empty | 选取不包含子元素或者文本的空元素 | 集合元素 | $(“div:empty”) |
:has(selector) | 选取含有选择器所匹配的元素的元素 | 集合元素 | $(“div:has(p)”) |
:parent | 选取含有子元素或者文本的元素 | 集合元素 | $(“div:parent”) |
c) 可见性过滤选择器
选择器 | 描述 | 返回 | 示列 |
:hidden | 选取所有不可见元素 | 集合元素 | $(“:hidden”) $(“div:hidden”) |
:visible | 选取所有可见元素 | 集合元素 | $(“:visible”) $(“div:visible”) |
d) 属性过滤选择器
选择器 | 描述 | 返回 | 示列 |
[attribute] | 选取拥有此属性的元素 | 集合元素 | $(“div[id]”) |
[attribute=value] | 选取属性的值为value的元素 | 集合元素 | $(“div[title=test]”) |
[attribute!=value] | 选取属性的值不等于value的元素 | 集合元素 | $(“div[title!=test]”) |
[attribute^=value] | 选取属性的值以value开始的元素 | 集合元素 | $(“div[title^=test]”) |
[attribute$=value] | 选取属性的值以value结束的元素 | 集合元素 | $(“div[title$=test]”) |
[attribute*=value] | 选取属性的值含有value的元素 | 集合元素 | $(“div[title*=test]”) |
[selector1][select2] | 用属性选择器合并成一个复合属性的选择器 | 集合元素 | $(“div[id][title$=’test’]”) |
e) 表单对象属性过滤选择器
选择器 | 描述 | 返回 | 示列 |
:enabled | 选取所有可用元素 | 集合元素 | $(“#form1 :enabled”) |
:disabled | 选取所有不可用元素 | 集合元素 | $(“#form1 :disabled”) |
:checked | 选取所有被选中的元素(单选框、复选框) | 集合元素 | $(“input:checked”) |
:selected | 选取所有被选中的选项元素(下拉列表) | 集合元素 | $(“select:selected”) |
4. 表单选择器
为了使用户能灵活的操作表单,JQuery中专门加入了表单选择器。能及其方便的获取表单的某个或某类型的元素
选择器 | 描述 | 返回 | 示列 |
:input | 选取所有的<input><textarea><select><button元素 | 集合元素 | $(“:input”) |
:text | 单行文本框 | 集合元素 | … … |
:radio | 单选框 | 集合元素 | … … |
… … | … … | … … | … … |