Jquery基本、层次选择器

时间:2021-07-25 16:44:35

基本选择器:

 $("#none").css("background","#bbffaa");

改变id为none的所有元素的背景色

 $(".mini").css("background","#bbffaa"); 

改变class为mini的所有元素的背景色

 $("*").css("background","#bbffaa"); 

改变所有元素的背景色

 $("span,#two").css("background","#ddffaa"); 

改变所有<span>元素和id 为two的元素的背景色



层次选择器

 $("ancestor descendant") 

选取ancestor元素里的所有descendant(后代)元素

$("div span")选取<div>里所有的<span>元素

 $("parent>child") 

选取parent元素下的child(子)元素,与$("ancestor descendant")有区别,$("ancestor descendant")选择的是后代元素

$("div>span")选取<div>元素下元素名是<span>的子元素

 $("prev + next") 

选取紧接在prev元素后的next元素

$(".one+div")选取class为none的下一个<div>同辈元素

 $("prev~siblings") 

选取prev元素之后的所有siblings元素

$("#two~div")选取id为two的元素后面的所有的<div>同辈元素

 $("body div").css("background","#bfa"); 

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

 $("body>div").css("background"."#bfa"); 

改变<body>内子<div>元素的背景色

 $(".one+div").css("background","#bfa"); 

改变class为one的下一个<div>同辈元素背景色

 $("#two - div").css("background","#bfa"); 

改变id为two的元素后面的所有<div>同辈元素的背景色

等价关系

$(".one+div")    与    $(".one").next("div")   相等

$("#prev~div")    与   $("#prev").nextAll("div")   相等


摘自《锋利的JQuery》 第二章  2.31 基本选择器  2.3.2 层次选择器