<script type="text/javascript">
$(window).ready(function (){
//1.选择 id 为 one 的元素 "background-color","#bbffaa"
$("#btn1").click(function (){
$("#one").css("background-color","#bbffaa");
});
//2.选择 class 为 mini 的所有元素
$("#btn2").click(function (){
$(".mini").css("background-color","#bbffaa");
});
//3.选择 元素名是 div 的所有元素
$("#btn3").click(function (){
$("div").css("background-color","#bbffaa");
});
//4.选择所有的元素
$("#btn4").click(function (){
$("*").css("background-color","#bbffaa");
});
//5.选择所有的 span 元素和id为two的元素
$("#btn5").click(function (){
$("span,#two").css("background-color","#bbffaa");
});
});
</script>
4.2、层次选择器
ancestor descendant 后代选择器
给定的祖先元素下匹配的所有后代元素
parent>child 子元素选择器
给定父元素下匹配的所有子元素
prev+next 相邻兄弟选择器
匹配的紧挨在 prev之后的相邻兄弟元素
prev~siblings 之后兄弟选择器
匹配的在prev之后的兄弟元素
<script type="text/javascript">
$(document).ready(function(){
//1.选择 body 内的所有 div 元素
$("#btn1").click(function(){
$("body div").css("background", "#bbffaa");
});
//2.在 body 内, 选择div子元素
$("#btn2").click(function(){
$("body>div").css("background", "#bbffaa");
});
//3.选择 id 为 one 的下一个 div 元素
$("#btn3").click(function(){
$("#one+div").css("background", "#bbffaa");
});
//4.选择 id 为 two 的元素后面的所有 div 兄弟元素
$("#btn4").click(function(){
$("#two~div").css("background", "#bbffaa");
});
});
</script>
4.3、过滤选择器
基本过滤器：
:first
获取第一个元素
:last
获取最后一个元素
:not(selector)
去除所有与给定选择器匹配的元素
:even
匹配所有索引值为偶数的元素，从 0 开始计数
:odd
匹配所有索引值为奇数的元素，从 0 开始计数
:eq(index)
匹配一个给定索引值的元素
:gt(index)
匹配所有大于给定索引值的元素
:lt(index)
匹配所有小于给定索引值的元素
:header
匹配如h1,h2之类的标题元素
:animated
匹配所有正在执行动画效果的元素
<script type="text/javascript">
$(document).ready(function(){
function anmateIt(){
$("#mover").slideToggle("slow", anmateIt);
}
anmateIt();
});
$(document).ready(function(){
//1.选择第一个 div 元素
$("#btn1").click(function(){
$("div:first").css("background", "#bbffaa");
});
//2.选择最后一个 div 元素
$("#btn2").click(function(){
$("div:last").css("background", "#bbffaa");
});
//3.选择class不为 one 的所有 div 元素
$("#btn3").click(function(){
$("div:not(.one)").css("background", "#bbffaa");
});
//4.选择索引值为偶数的 div 元素
$("#btn4").click(function(){
$("div:even").css("background", "#bbffaa");
});
//5.选择索引值为奇数的 div 元素
$("#btn5").click(function(){
$("div:odd").css("background", "#bbffaa");
});
//6.选择索引值为大于 3 的 div 元素
$("#btn6").click(function(){
$("div:gt(3)").css("background", "#bbffaa");
});
//7.选择索引值为等于 3 的 div 元素
$("#btn7").click(function(){
$("div:eq(3)").css("background", "#bbffaa");
});
//8.选择索引值为小于 3 的 div 元素
$("#btn8").click(function(){
$("div:lt(3)").css("background", "#bbffaa");
});
//9.选择所有的标题元素
$("#btn9").click(function(){
$(":header").css("background", "#bbffaa");
});
//10.选择当前正在执行动画的所有元素
$("#btn10").click(function(){
$(":animated").css("background", "#bbffaa");
});
});
</script>
4.4、内容过滤器
:contains(text)
匹配包含给定文本的元素
:empty
匹配所有不包含子元素或者文本的元素
:parent
匹配含有子元素或者文本的元素
:has(selector)
匹配含有选择器所匹配的元素的元素
$(document).ready(function(){
//1.选择 含有文本 'di' 的 div 元素
$("#btn1").click(function(){
$("div:contains('di')").css("background", "#bbffaa");
});
//2.选择不包含子元素(或者文本元素) 的 div 空元素
$("#btn2").click(function(){
$("div:empty").css("background", "#bbffaa");
});
//3.选择含有 class 为 mini 元素的 div 元素
$("#btn3").click(function(){
$("div:has('.mini')").css("background", "#bbffaa");
});
//4.选择含有子元素(或者文本元素)的div元素
$("#btn4").click(function(){
$("div:parent").css("background", "#bbffaa");
});
});
浙公网安备 33010602011771号