JQuery选择器简述

JQuery选择器

选择器作用：
jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。

选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。

语法:
$(“css选择器”)
注：css 选择器是一个字符串格式

基本选择器

标签选择器：直接使用标签名作为选择器的名字，例如：$(“div”)

id选择器：选择一个具有给定id属性的单个元素，$("#id")

类名选择器：选择给定样式类名的所有元素，$(".class")

通配符选择器：匹配所有元素 ，$("*")

常用的JQuery选择器与js选择器的对比：

JQuery选择器	js选择器
$(“div”)	getElementsByTagName(“div”)
$("#id"))	getElementById(“id”)
$(".class")	getElementsByClassName(“class”)

属性选择器

$( “[attribute]” ) ：选择所有具有指定属性的元素，该属性可以是任何值

返回值：Array<Element(s)>

html代码：

<div>
	<p>Hello!</p>
</div>
<div id="box"></div>

jQuery 代码：

$("div[box]")//输出结果：[ <div id="box"></div> ]

$( “[attribute=‘value’]” ) ：选中 属性名为value 或者属性名以 value- 开头的属性
html代码：

<input type="checkbox" name="inp1" />
<input type="checkbox" name="inp2" />

jQuery 代码：

$("input[name='inp1']").attr("checked", true);

$( "[attribute!='value']" ) ：对与$( "[attribute='value']" )取反

$( “[attribute^=‘value’]” )：选中 attribute以 value开头的元素

$( “[attribute!$=‘value’]” )：选中 attribute以 value结尾的元素

$( “[attribute*=‘value’]” )：选中attribute的值中包含 value的元素

$( “[attribute~=‘value’]” )：选中attribute属性值 包含 value单词的元素

$( “[attribute|=‘value’]” )： 选择指定属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-” ）的元素

[…][…]：and 两个属性选择器必须同时满足

后代选择器

特点：多个选择器，以空格进行分割

子选择器

特点：多个选择器， 以 > 进行分割
描述：选择所有指定"parent"元素中指定的"child"的直接子元素

html代码：

<div>
	<p>hello!</p>
</div>

jQuery 代码：

$("div> p")//输出结果：[<p>hello!</p>]

同胞选择器

$( “prev + next” )

特点：以 + 进行分割、选中紧邻的兄弟元素
描述：选择所有紧接在 "prev"元素后的 "next"元素

html代码：

<div>
	<p>hello!</p>
	<div>
		<p>中国</p>
	</div>
</div>

jQuery 代码：

$("div + p")//输出结果：[<p>hello!</p>,<p>中国</p>]

$( “prev ~ siblings” )
特点：以 ~ 进行分割、选中后面的所有兄弟元素
描述：匹配 “prev” 元素之后的所有 兄弟元素。具有相同的父元素，并匹配过滤"siblings"选择器

html代码：

<div>
	<p>hello!</p>
	<p>中国</p>
</div>

jQuery 代码：

$("div ~ p")//输出结果：[<p>hello!</p>,<p>中国</p>]

分组选择器

特点：以逗号进行分割、同时选中多个元素

子元素选择器

选择器	概述
:first-child / :last-child	选中父级元素下第一个/最后一个子元素
:first-of-type / :last-of-type	选中父级元素下的同类型的第一个/最后一个子元素
:nth-child(n) / :nth-last-child(n)	选中父级元素下第n个/倒数第n个子元素
:nth-of-type(n)/ :nth-last-of-type(n)	选中父级元素下的同类型的第n个/倒数第n个子元素
:only-child	获取父元素中的唯一一个子元素

其他选择器

选择器	概述
:first/:last	获取选择器 选中的多个元素中的 第一个/最后一个元素
:eq(index)	选中指定索引位置的元素（index 从 0 开始）
lt(index) / gt(index)	选中 <index / >index 索引的元素
:not(seletor)	排除 selector选中的元素
:odd /:even	获取奇/偶对应的元素
:focus	获取 聚焦的元素
:target	获取URL对应的锚点的元素

内容相关选择器

选择器	概述
:contains(text)	获取选中的元素中包含指定的文本 元素
:empty	获取标签体中内容为空的元素单标签代表 标签体内容为 空
:parent	和 :empty选择器相反
:has(selector)	查找元素中是否包含 指定选择器的元素

可见性

选择器	概述
:hidden	可以处理 display:none 可以处理 input:hidden内容不可见的标签 例如 script, style, title, meta
:visible	选择所有可见的元素

表格相关选择器

选择器	概述
:checked	获取所有被勾选的元素
:selected	获取被选中的元素
:disabled	获取所有被禁用的元素
:enabled	获取所有被启用的元素

选择器中的特殊字符

如：# ， . + > ~ \
如果 ID , class 属性的值 中包含 特殊字符，
需要对特殊字符进行转义  , 例如  \\#

$.escapeSeletor(selector)
对存在特殊字符的内容进行转义
返回转义后的结果

施工中……