04-jQuery-选择器

一、基本选择器

1、标签选择器（元素选择器）

元素选择器可以选取HTML文档中所有匹配的元素。例如，如果要选取所有段落元素（p）

$("p")
//这将返回页面中所有的段落元素。

2、id选择器

id选择器根据元素的id属性来选取该元素。

$("#myDiv")

3、类选择器

类选择器可以用于通过元素的类名称来选取元素。

$(".myClass")

4、并集选择器

并集选择器是指同时选取多个不同的元素，例如选取所有段落和标题元素。在jQuery中，可以使用逗号（,）将多个选择器组合在一起，形成并集选择器。

$("p, h1, h2, h3")

二、层级选择器

1、后代选择器：使用空格来表示后代选择器。

使用后代选择器选择所有p元素内部的strong元素：

$("p strong")

2、子代选择器：使用大于号（>）来表示子代选择器。

仅选择直接子元素。例如，要选取ul元素下面的所有直接子元素li

$("ul > li")

三、属性选择器

1、选择所有具有 href 属性的元素。

$("[href]") 

2、选择所有 href 属性值等于 “#” 的元素。

$("[href='#']")

3、选择所有 href 属性值不等于 “#” 的元素。

$("[href!='#']")

4、选择所有 href 属性值以 “https://” 开头的元素。

$("[href^='https://']")

5、选择所有 img 元素 src 属性值以 “.png” 结尾的元素。

$("img[src$='.png']") 

6、选择所有 input 元素 name 属性值包含 “email” 的元素。

$("input[name*='email']")

四、过滤选择器

1 :first：选择第一个匹配的元素。

$("p:first") // 选择第一个 <p&gt; 元素。

2  :last：选择最后一个匹配的元素。

$("p:last") // 选择最后一个 <p&gt; 元素。

3  :odd：选择所有奇数位置的元素，从0开始计数。

$("tr:odd") // 选择表格中所有奇数行的 <tr&gt; 元素。

4  :even：选择所有偶数位置的元素，从0开始计数。

$("tr:even") // 选择表格中所有偶数行的 <tr&gt; 元素。

5  :eq(index)：选择与给定索引号相符的元素，索引号从0开始计数。

$("ul li:eq(2)") // 选择 ul 元素下第三个 <li&gt; 元素。
 

6  :gt(index)：选择所有大于给定索引号的元素，索引号从0开始计数。

$("ul li:gt(2)") // 选择 ul 元素下索引号大于2的 <li> 元素。
 

7  :lt(index)：选择所有小于给定索引号的元素，索引号从0开始计数。

$("ul li:lt(2)") // 选择 ul 元素下索引号小于2的 <li> 元素。

8  :has(selector)：选择具有匹配选择器的元素。

$("div:has(p)") // 选择所有包含 <p> 元素的 <div> 元素。

9  :contains(text)：选择包含指定文本的元素。

$("p:contains('Hello')") // 选择所有包含文本 "Hello" 的 <p> 元素。

10  :empty：选择没有子元素或文本内容的元素。

$("div:empty") // 选择所有空的 <div> 元素。
 

jQuery 选择器：

代码007普通

打赏 收藏 海报 链接