jq中的几种选择器方式

最新推荐文章于 2022-08-15 15:52:03 发布

Gypsophila 、

最新推荐文章于 2022-08-15 15:52:03 发布

阅读量394

点赞数

文章标签： jquery

本文链接：https://blog.youkuaiyun.com/O_326326/article/details/108935809

版权

本文详细介绍了CSS选择器的各类用法，包括基础选择器（id、class、标签、通配符和群组）、层次选择器（子选择器、后代选择器、同级下一个节点选择器和下面所有同级节点选择器）、过滤选择器（first、last、not、even、odd、eq、gt和lt）以及内容过滤和属性选择器。通过实例展示了如何查找和设置元素的样式，帮助读者深入理解CSS选择器在网页样式控制中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1：基础选择器
id #
class .
标签 div
* 通配符
群组 #box,p
css() 一个值的时候是找这个元素的值，两个值的时候是设置样式
举例找元素的值：
alert($(‘p’).css(‘color’))
举例设置元素的样式：
$KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲txt').css('colo\dots$ (‘p’).size())
2：层次选择器
$(‘p>span’) 子选择器
$(‘p span a’) 后代选择器
$(‘div+p’) 同级下一个节点选择器
$(‘div~p’) 下面所有的同级节点选择器
3:过滤选择器
:first 选中第一个元素
:last 选中最后一个元素
:not() 不选中某一个元素
:even 选中是偶数的元素（从零开始计算,第一个元素是0）
:odd 选中是奇数的元素
:eq(数字) 选中相等数字的元素（从零开始计算,第一个元素是0）
:gt(index) 选中大于数字的元素
:lt(index) 选中小于数字的元素
4：内容过滤选择器
p:contains(‘文本’) 匹配包含给定文本的元素（找到p标签中包含指定文本内容的p标签）
p:has(’.red’) 有没有包含特定属性值的元素（找到p标签中包含指定文本内容的p标签）
p:parent() 返回该元素的父元素
5：属性选择器
[attrbute] 匹配包含给定属性的元素
[attribute=value] 匹配input框里属性
选取所有被选中的元素 $(‘input:checked’)