jQuery基本选择器,层次选择器,基本过滤选择器
一,基本选择器
<!DOCTYPE<!-- html>
<html>
<head>
<meta charset="utf-8">
<title>基本选择器</title><script type="text/javascript" src="jquery-3.1.0.js"></script>
<script type="text/javascript">
$(function(){//表示页面加载完成之后 相当于onload事件
// //1.id选择器(根据id查找对象)
// $("#1").click(function(){
// $("#m1").css("background-color","red");
// alert("id选择器");
// });
// //2.class选择器(根据class查找对象)
// $(".2").click(function(){
// $(".m2").css("background-color","blue");
// alert("class选择器");
// });
// //3.element选择器(根据标签名查找对象)
// $("div").click(function(){
// alert("查找所有div");
// });
// //4.*(所有元素)
// $("*").click(function(){
// alert("查找所有元素");
// }); -->
//5.组合选择器
$("#4").click(function(){
$("span,#m1").css("background-color","grey");
});
});
</script>
</head>
<body>
<div id="1">
<div id="m1">胡</div>
</div>
<div class="2">
<div class="m2">马</div>
</div>
<div id="3">
<span id="m3">张</span>
</div>
<div id="4">
<span id="m4">王</span>
</div>
</body>
</html>
二,层次选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层次选择器</title>
<script type="text/javascript" src="jquery-3.1.0.js"></script>
<script type="text/javascript">
$(function(){//表示页面加载完成之后 相当于onload事件
//1.选择body里面所有div元素
$("#1").click(function(){
$("body div").css("background-color","red");
alert("选择body里面所有div元素");
});
// //2.选择body内所有div子元素
$(".2").click(function(){
$("body > div").css("background-color","blue");
alert("选择body内所有div子元素");
});
//3.选择id为3得下一个div元素
$("#3").click(function(){
$("#3 + div").css("background-color","yellow");
alert("选择id为3得下一个元素");
});
//4.选择id为4后面得所有div元素
$("#4").click(function(){
$("#4 ~ div").css("background-color","grey");
alert("选择id为4得所有div元素");
});
});
</script>
</head>
<body>
<div id="1">
<div id="m1">胡</div>
</div>
<div class="2">
<div class="m2">马</div>
</div>
<div id="3">
<span id="m3">张</span>
</div>
<div id="4">
<span id="m4">王</span>
</div>
<div id="3">
<span id="m3">张</span>
</div>
<div id="4">
<span id="m4">王</span>
</div>
</body>
<cml>
三,基本过滤选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本过滤选择器</title>
<script type="text/javascript" src="jquery-3.1.0.js"></script>
<script type="text/javascript">
$(function(){//表示页面加载完成之后 相当于onload事件
//1.选择第一个div元素
$("#1").click(function(){
$("div:first").css("background-color","red");
alert("选择第一个div元素");
});
//2.选择最后一个div元素
$(".2").click(function(){
$("div:last").css("background-color","blue");
alert("选择最后一个div元素");
});
//3.选择class不为2得所有div
$("#3").click(function(){
$("div:not(.2)").css("background-color","yellow");
alert("选择class不为2得所有div");
});
//4.选择索引值为偶数得div(从0开始)
$("#4").click(function(){
$("div:even").css("background-color","grey");
alert("选择索引值为偶数得div(从0开始)");
});
//5.选择索引值为奇数得div(从0开始)
$("#5").click(function(){
$("div:odd").css("background-color","grey");
alert("选择索引值为奇数得div(从0开始)");
});
//6.选择索引值大于3得div(从0开始)
$("#6").click(function(){
$("div:gt(3)").css("background-color","grey");
alert("选择索引值大于3得div(从0开始)");
});
//7.选择索引值等于3得div(从0开始)
$("#7").click(function(){
$("div:eq(3)").css("background-color","grey");
alert("选择索引值等于3得div(从0开始)");
});
//8.选择索引值小于3得div(从0开始)
$("#8").click(function(){
$("div:gt(3)").css("background-color","grey");
alert("选择索引值小于3得div(从0开始)");
});
//8.选择所有标题元素
$("#8").click(function(){
$(":header").css("background-color","grey");
alert("选择所有标题元素");
});
//8.选择当前正在执行动画的元素
$("#8").click(function(){
$(":animated").css("background-color","grey");
alert("选择所有标题元素");
});
});
</script>
</head>
<body>
<div id="1">
<span id="m1">胡</span>
</div>
<div class="2">
<span class="m2">马</span>
</div>
<div id="3">
<span id="m3">张</span>
</div>
<div id="4">
<span id="m4">王</span>
</div>
<div id="5">
<span id="m3">张</span>
</div>
<div id="6">
<span id="m4">王</span>
</div>
<div id="7">
<span id="m4">王</span>
</div>
<div id="8">
<span id="m3">张</span>
</div>
<div id="9">
<span id="m4">王</span>
</div>
</body>
<cml>