一 基本选择器: id选择器 $(" #d1") class选择器 $(".d1")
二 层级选择器:
1 后代选择器
$(" body div") 选择body里所有div选择素 所有的后代
2 父子选择器
$("body>div") 选择body的子元素 body是父 div是子, 不包括孙子辈的 div
3 改变id为one的下一个div
$("#one+div").ccs("color","red") divID为one 他的下一个兄弟div的css属性
4 改变id为one的下边所有div
$("#one~div").ccs("color","red") divID为one 他的下一个兄弟 所有div的css属性 只选择id为one下边的的兄弟元素
三 过滤选择器
1 基本过滤选择器 所有选择器前都有 : 符号 10种
:first :last :even :odd :gr :lt : eq :not :header :animated
:first
$("#btn1").click(function(){
//获取div元素中的第一个
$("div:first").css("background","red");
});
:last
$("#btn2").click(function(){
//获取div元素中的最后一个
$("div:last").css("background","red");
});
:even
$("#btn3").click(function(){
//获取索引值为偶数的div元素
//索引值从0开始，索引值可以理解为下标
$("div:even").css("background","red");
});
:odd
$("#btn4").click(function(){
//获取索引值为奇数的div元素
//索引值从0开始，索引值可以理解为下标
$("div:odd").css("background","red");
});
:gt
$("#btn5").click(function(){
//索引值大于1的div元素
//下标 0 1 2(包括2之后所有背景为红色)
$("div:gt(1)").css("background","red");
});
:lt
$("#btn5").click(function(){
//索引值小于2的div元素
//下标 0 1 2(下标 0 1 的div背景为红色)
$("div:gt(2)").css("background","red");
});
:eq
$("#btn5").click(function(){
//索引值等于1的div元素
//下标 0 1 2(下标 1 的div背景为红色)
$("div:eq(1)").css("background","red");
});
以上几种 同一个body中的兄弟div 可以按顺序理解为下标 0 1 2 3 4 用那个选择器对应下标颜色改变
:not
$("#btn6").click(function(){
//获取class不为mini的div元素(包含没有class属性的div元素)
$("div:not('.mini')").css("background","red");
});
:header 此方法不常用
$("#btn7").click(function(){
//获取所有标题元素(h1--h6)
//所有的标题 h1-h6改变颜色
$("div:header").css("background","red");
});
:animated
$("#btn8").click(function(){
//获取当前正在执行动画的元素
$("div:animated").css("background","red");
});
2子元素过滤选择器 四种
:nth-child :first-child :last-child :only-child
:nth-child
$("#btn9").click(function(){
//获取div元素的子元素 是第二个 的div元素
//下标从1开始数 注意！
//nth-child选择器 索引值是从1开始
$("div:nth-child(2)").css("background","red");
});
:first-child
$("#btn9").click(function(){
//获取div元素的第一个子元素
$("div:first-child").css("background","red");
});
:last-child
$("#btn9").click(function(){
//获取div元素的最后一个子元素
$("div:last-child").css("background","red");
});