首页 前端知识 04-jQuery-选择器

04-jQuery-选择器

2024-06-16 01:06:08 前端知识 前端哥 98 238 我要收藏

一、基本选择器

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> 元素。

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

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

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

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

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

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

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

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

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

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

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

$("ul li:lt(2)
转载请注明出处或者链接地址:https://www.qianduange.cn//article/12246.html
标签
评论
发布的文章

前端——12.表单标签

2024-06-21 00:06:57

src、href和url含义及区别

2024-06-21 00:06:56

CSS知识点大全

2024-06-21 00:06:16

JS垃圾回收机制(GC)

2024-06-21 00:06:03

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!