jQuery选择器
基本选择器
基本选择器:#id, .class,element ,*, selector1,selector2....,selectoN
#id 根据id匹配一个元素
$("#choose").css("background-color","#B2E0FF");
//选取id为 choose的元素背景颜色.class 根据给定的类名匹配元素 遍历css元素
$("#choose").css("background-color","#B2E0FF");
//选取id为 choose的元素背景颜色
与 id 选择器不同，class 选择器常用于多个元素。element 选取带有指定标签名的元素 (遍历html元素)
$("p").css("background-color","#B2E0FF");
//选取所有的p元素* 匹配所有元素
$("*")选取所有的元素层次选择器
$("ancestor descendant")选取ancestor 元素里所有descendant后代元素
$("body div").css("background"."#bbffaa")
改变<body>内所有的<div>的背景色$("parent>child")选取parent元素下的child子元素
$('div > span').css('color', '#FF0000');
//选取div下的第一代span元素，将字体颜色设为红色$("prev+next")选取紧接在prev元素后的next元素
$('.item + div').css('color', '#FF0000');
});
<p class="item"></p>
<div>123</div>
<div>456</div>
<span class="item"></span>
<div>789</div>
只有123 789变色
//选取class为item的下一个div兄弟元素$("prev~siblings")选取prev元素之后的所有siblings元素
$('.inside ~ div').css('color', '#FF0000');
});
<div class="inside">123</div>
<div>456</div>
<span>789</span>
<div>10 11 12</div>
456 10 11 12会变色
/// 选取class为inside之后的所有div同辈元素过滤选择器: :first :last :not(selector) :even :odd :eq(index) :gt(index) :lt(index) :header :animated :focus
:first :last 取第一个和最后一个元素
$('div:first').css('color', '#FF0000');
$('div:last').css('color', '#FF0000');
});
<div>123</div>
<div>456</div>
<div>789</div>
//选取所有<div>元素第一个<div>元素和最后一个<div>元素
// 123 789会变色:not(selector)去除所有与给定选择器匹配的元素
$(document).ready(function () {
$('div:not(.wrap)').css('color', '#FF0000');
});
<div>123</div>
<div class="wrap">456</div>
//选取class不为wrap的 <div>
//123变色:even 选取索引是偶数的所有元素 ,索引从0开始 :odd选取索引是奇数的所有元素
$('tr:even').css('background', '#EEE'); // 偶数行颜色
$('tr:odd').css('background', '#DADADA'); // 奇数行颜色:eq(index)取指定索引的元素
$('tr:eq(2)').css('background', '#FF0000');
//从第三个背景色变色:gt(x)取大于x索引的元素 :lt(x)小于x索引的元素
$('ul li:gt(2)').css('color', '#FF0000');
$('ul li:lt(2)').css('color', '#0000FF');
<ul>
<li>L1</li>
<li>L2</li>
<li>L3</li>
<li>L4</li>
<li>L5</li>
</ul>
L4和L5会是红色，L1和L2会是蓝色，L3是默认颜色
相关推荐
牵手白首 2020-06-14
donghongbz 2020-05-15
83510998 2020-08-08
tthappyer 2020-07-25
tztzyzyz 2020-07-05
87281248 2020-07-04
82244951 2020-06-28
89510194 2020-06-27
开心就好 2020-06-10
89510194 2020-06-06
Web全栈笔记 2020-06-04
tztzyzyz 2020-05-31
开心就好 2020-05-27
牵手白首 2020-05-19
牵手白首 2020-05-16
tztzyzyz 2020-05-15
hehekai 2020-05-08