jQuery的选择器全解读(1)

来源：互联网发布：程序员个人评价编辑：程序博客网时间：2024/04/30 08:12

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 元素, 该选择器都以 “:” 开头
按照不同的过滤规则, 过滤选择器又可分为
基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器

0 0