jQuery的选择器全解读(1)

最新推荐文章于 2022-03-10 15:53:20 发布

技术与健康

最新推荐文章于 2022-03-10 15:53:20 发布

阅读量475

点赞数

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/Practicer2015/article/details/44993247

版权

jQuery的选择器主要有三大类，即CSS3的基本选择器，CSS3的位置选择器和过滤选择器。

基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标记名来查找 DOM 元素

改变 id 为 one 的元素的背景色为红色

$("#one").css("backgroundColor","red");

改变元素名为 <p> 的所有元素的背景色为 # bbffaa，字体颜色为红色

$("p").css({color:"red",backgroundColor:"#bbffaa"});

改变第一个<p>元素的背景色为红色

$("p").eq(0).css("backgroundColor","red");

改变所有<h1>元素和 id 为 one 的元素的背景色为 # bbffaa

$("h1,#one").css("backgroundColor","#bbffaa");

层次选择器如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器

改变 <body> 内所有<div> 的背景色为 #bbffaa

$(“body div")

改变 <body> 内子<div> 的背景色为 #bbffaa

$(“body>div")

改变 id 为one的下一个<div> 的背景色为 #bbffaa

$("#one+div")

改变 id 为two的元素后面的所有兄弟<div>的元素的背景色为 #bbffaa

$("#two~div")

改变 id 为two的元素所有 <p>兄弟元素的背景色为 #bbffaa $("#two").siblings("p")

过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头
按照不同的过滤规则, 过滤选择器又可分为

基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器