jQuery选择器的写法和CSS选择器的写法类似，我觉得不同的就是CSS是在选择到元素以后为其添加样式， jQuery选择器是在找到元素以后为其添加行为。主要包含以下几种：

（1）基本选择器

选择器 描述 返回 示例
#id 根据给定的id匹配一个元素 单个元素 $(“#imok”)选取id为imok的元素
.class 根据给定的class匹配元素 元素集合 $(“.imok”)选取class值为imok的元素
element 根据给定的元素名匹配 元素集合 $(“p”)选取所有的<p>元素
* 匹配所有元素 元素集合 $(“*”)选取所有元素

（2）层次选择器

选择器 描述 返回 示例
$(“ancestor  descendant”) 选择ancestor元素里所有的descendant（后代）元素 元素集合

$(“div span”)选择<div>中所有的<span>元素
$(“parent > child”) 选择parent下的直属child元素，直属就是第一级子元素，不是所有 元素集合 $(“div > span”)选取<div>下元素名为<span>且是直属关系的元素
$(“prev + next”) 选取紧接在prev后的next元素 元素集合 $(“.imok + div”)选取class为imok元素的下一个同辈的<div>元素
$(“prev + siblings”) 选取prev元素之后的所有siblings元素 元素集合 $(“#imok ~ div”)选取id为imok的元素后面的所有同辈<div>元素

还有几点需要注意的，就是后面两种层次选择器和next()和nextAll()的等价关系,以下两种方式是等价的：

$(“#imok + div”) $(“#imok”).next(“div”)
$(“prev + div”) $(“#imok”).nextAll(“div”)

 

（3）过滤选择器

过滤选择器是按照一定的过滤规则来筛选出所要的DOM元素

选择器（基础） 描述 返回 示例
：first 选取第一个元素 单个元素

$(“div:first”)选取所有的<div>元素中的第一个<div>元素
：last 选取最后一个元素 单个元素 $(“div:first”)选取所有的<div>元素中的最后一个<div>元素
：not（selector） 去除selector的其他元素 元素集合 $(“div:not（.myClass）”)选取class不是myClass的<div>元素
：even 选取索引是偶数的所有元素，索引从0开始 元素集合

$(“input:even”)选取索引是偶数的<input>元素
：odd 选取索引是奇数的所有元素，索引从0开始 元素集合 $(“input:odd”)选取索引是奇数的<input>元素

：eq（index）

：gt（index）

：lt（index）

 选取索引等于/大于/小于index的元素，索引从0开始 单个元素

$(“input:eq（1）”)选取索引等于1的<input>元素

$(“input:gt（1）”)选取索引大于1的<input>元素

$(“input:lt（1）”)选取索引小于1的<input>元素
：header

选取所有的标题元素，例如<h1>,<h2>等

 元素集合 $(“:header”)选取网页中所有的<h1>,<h2>
：animated 选择当前正在执行动画的所有元素 元素集合 $(“div：animated”)选取正在执行动画的<div>元素
：focus 选取当前获得焦点的元素 元素集合 $(‘:focus’)选取当前获取焦点的元素
选择器（内容） 描述 返回 示例
：contains（next） 选取含有文本内容为“text”的元素 集合元素

$(“div:contains（‘我’）”)选取含有文本“我”的<div>元素
：empty 选取不包含子元素或文本的空元素 元素集合 $(“div:empty”)选取不包含子元素或文本的空的<div>元素
：has（selector） 选取含有selector匹配元素的元素 元素集合 $(“div:has（p）”)选取含有<p>的<div>元素
：parent 选取含有子元素或子文本的元素 元素集合

$(“div:parent”)选取有的子元素或子文本的<div>元素
选择器（可见性） 描述 返回 示例
：hidden 选取所有不可见的元素 集合元素

$(“:hidden”)选取含有文本“我”的<div>元素
：visible 选取所有可见的元素 元素集合 $(“:visible”)选取不包含子元素或文本的空的<div>元素
选择器（表单） 描述 返回 示例
：enabled 选取所有可用的元素 集合元素

$(“#imok:enabled”)选取id为imok的表单内的所有可用元素
：disabled 选取所有不可用的元素 元素集合 $(“#imok:disabled”)选取id为imok的表单内的所有不可用元素
：checked 选取所有被选中的元素（单选框、复选框） 元素集合 $(“input:checked”)选取所有被选中的<input>元素
：selected 选取所有被选中的选项元素（下拉列表） 元素集合

$(“select option：selected”)选取所有被选中的选项元素

 

版权声明：本文为沙滩de流沙原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/imok520/p/16411466.html