JQuery选择器练习<!DOCTYPE>
<html>
<head>
<title>基本选择器练习</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body{
font-family: "微软雅⿊"
}
div,span {
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman;
}
div.mini {
width: 40px;
height: 43px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family: Roman;
}
input{ margin: 5px 5px; }
</style>
<!--引⼊jquery的js库-->
<script src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
/* $(function(){
}) */
//让整个页⾯加载完成
$(document).ready(function() {
/* ---------基本选择器练习--------- */
//改变元素名为 <div> 的所有元素的背景⾊为 #FF69B4"  id="b1"
$("#b1").click(function(){
$("div").css("background-color","#FF69B4");
})
//改变 id 为 one 的元素的背景⾊为 #9ACD32"  id="b2"
$("#b2").click(function(){
$("#one").css("background-color",
"#9ACD32");
});
//改变 class 为 mini 的所有元素的背景⾊为 #FF0033"  id="b3"
$("#b3").click(function(){
$(".mini").css("background-color",
"#FF0033");
});
//改变所有元素的背景⾊为 #FDF5E6"  id="b4"
$("#b4").click(function(){
$("*").css("background-color",
"#FDF5E6");
});
//改变所有的<span>元素和 id 为 two 的元素的背景⾊为 #FF1493"  id="b5"
$("#b5").click(function(){
$("span,#two").css("background-color",
"#FF1493");
});
//改变所有的<span>元素和 id 为 two 的,id为one的，class为 mini的所有的元素的背景⾊为 #006400"  id="b6"        $("#b6").click(function(){
$("span,#two,#one,.mini").css("background-color",
"#006400");
});
});
</script>
</head>
<body>
<input type="button" value=" 改变元素名为 <div> 的所有元素的背景⾊为 #FF69B4" id="b1"/>
<input type="button" value=" 改变 id 为 one 的元素的背景⾊为 #9ACD32" id="b2"/>
<input type="button" value=" 改变 class 为 mini 的所有元素的背景⾊为 #FF0033" id="b3"/>
<input type="button" value=" 改变所有元素的背景⾊为 #FDF5E6" id="b4"/>
<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景⾊为 #FF1493"
id="b5"/>
<input type="button"
value=" 改变所有的<span>元素和 id 为 two 的,id为one的，class为 mini的所有的元素的背景⾊为 #006400"        id="b6"/>
<h1>天⽓冷了</h1>
<h2>天⽓⼜冷了</h2>
<div id="one">id为one</div>
<div id="two" class="mini">
id为two class是 mini
<div class="mini"> class是 mini</div>
</div>
<div class="one">
class是 one
<div class="mini"> class是 mini</div>
<div class="mini"> class是 mini</div>
</div>
<div class="one">
class是 one
<div class="mini01"> class是 mini01</div>
<div class="mini"> class是 mini</div>
</div>
<br>
<div id="mover">动画</div>
<br>
<span class="spanone"> span </span>
<span class="mini"> span class是mini </span>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>层级选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span {
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman;
}
div.mini {
font-size: 14px;
height: 53px;
width: 47px;
background: #CC66FF;
border: #000 1px solid;
font-family: Roman;
}
input{ margin: 5px 5px; }
</style>
<!--引⼊jquery的js库-->
<script src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$().ready(function() {
/* ---------层级选择器练习--------- */
/
/改变 <body> 内所有 <div> 的背景⾊为 #F08080"  id="b1"
$("#b1").click(function(){
$("body div").css("background-color",
"#F08080");
});
//改变 <body> 内⼦ <div> 的背景⾊为 #FF0033"  id="b2"
$("#b2").click(function(){
$("body>div").css("background-color",
"#FF0033");
});
//改变 id 为 one 的下⼀个 <div> 的背景⾊为 #0000FF"  id="b3"
$("#b3").click(function(){
$("#one").next("div").css("background-color",
"#0000FF");
});
//改变 id 为 two 的元素后⾯的所有兄弟<div>的元素的背景⾊为 #9ACD32"  id="b4"
$("#b4").click(function(){
$("#two").nextAll("div").css("background-color",
"#9ACD32");
});
//改变 id 为 two 的元素所有 <div> 兄弟元素的背景⾊为 #FF6347"  id="b5"
$("#b5").click(function(){
$("#two").siblings("div").css("background-color",
"#FF6347");
});
})
</script>
</head>
<body>
<input type="button" value=" 改变 <body> 内所有 <div> 的背景⾊为 #F08080" id="b1" onclick="fn()"/> <input type="button" value=" 改变 <body> 内⼦ <div> 的背景⾊为 #FF0033" id="b2"/>
<input type="button" value=" 改变 id 为 one 的下⼀个 <div> 的背景⾊为 #0000FF"
id="b3"/>
<input type="button"
value=" 改变 id 为 two 的元素后⾯的所有兄弟<div>的元素的背景⾊为 #9ACD32" id="b4"/>
<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景⾊为 #FF6347"
id="b5"/>
<h1>天⽓冷了</h1>
<div id="one">id为one</div>
<div id="two">
id为two
<div class="mini"> class是 mini</div>
</div>
<div class="one">
class是 one
<div class="mini"> class是 mini</div>
<div class="mini"> class是 mini</div>
</div>
<div class="one">
class是 one
<div class="mini01"> class是 mini01</div>
<div class="mini"> class是 mini</div>
</div>
<br>
<div id="mover">动画</div>
<br>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>基本过滤选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span {
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman;
}
div.mini {
font-size: 14px;
height: 53px;
width: 47px;
background: #CC66FF;
border: #000 1px solid;
font-family: Roman;
}
input{ margin: 5px 5px; }
</style>
<!--引⼊jquery的js库-->
<script src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function() {
/* ---------基本过滤选择器练习--------- */
/
/改变第⼀个 div 元素的背景⾊为 #FF6347"  id="b1"
$("#b1").click(function(){
$("div:first").css("background-color",
"#FF6347");
});
//改变最后⼀个 div 元素的背景⾊为 #9ACD32" id="b2"
$("#b2").click(function(){
$("div:last").css("background-color",
"#9ACD32");
});
//改变class不为 one 的所有 div 元素的背景⾊为 #FF0033" id="b3"
$("#b3").click(function(){
$("div:not(.one)").css("background-color",
"#FF0033");
});
//改变索引值为等于 3 的 div 元素的背景⾊为 #006400"  id="b4"
$("#b4").click(function(){
$("div:eq(3)").css("background-color",
"#006400");
});
//改变索引值为⼩于 3 的 div 元素的背景⾊为 #FF69B4"  id="b5"/>
$("#b5").click(function(){
$("div:lt(3)").css("background-color",
"#FF69B4");
});
//改变索引值为⼤于 3 的 div 元素的背景⾊为 #F08080"  id="b6"
$("#b6").click(function(){
$("div:gt(3)").css("background-color",
"#F08080");
});
//改变索引值为偶数的 div 元素的背景⾊为 #FF6347" id="b7"
$("#b7").click(function(){
$("div:even").css("background-color",
"#FF6347");
});
//改变索引值为奇数的 div 元素的背景⾊为 #FF1493" id="b8"
$("#b8").click(function(){
$("div:odd").css("background-color",
"#FF1493");
});
})
</script>
</head>
<body>
<input type="button" value=" 改变第⼀个 div 元素的背景⾊为 #FF6347" id="b1"/>
<input type="button" value=" 改变最后⼀个 div 元素的背景⾊为 #9ACD32" id="b2"/>
<input type="button" value=" 改变class不为 one 的所有 div 元素的背景⾊为 #FF0033" id="b3"/> <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景⾊为 #006400" id="b4"/>
<input type="button" value=" 改变索引值为⼩于 3 的 div 元素的背景⾊为 #FF69B4" id="b5"/> <input type="button" value=" 改变索引值为⼤于 3 的 div 元素的背景⾊为 #F08080" id="b6"/>
<input type="button" value=" 改变索引值为偶数的 div 元素的背景⾊为 #FF6347" id="b7"/>
<input type="button" value=" 改变索引值为奇数的 div 元素的背景⾊为 #FF1493" id="b8"/>
<h1>天⽓冷了</h1>
<div id="one">id为one</div>
<div id="two">
id为two
<div class="mini"> class是 mini</div>
</div>
<div class="one" title="aa">
class是 one
<div class="mini"> class是 mini</div>
<div class="mini"> class是 mini</div>
</div>
<div class="one">
class是 one
<div class="mini01"> class是 mini01</div>
<div class="mini"> class是 mini</div>
</div>
<br>
<div id="mover">动画</div>
<br>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>内容选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span {
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman;
}
div.mini {
font-size: 14px;
height: 53px;
width: 47px;
background: #CC66FF;
border: #000 1px solid;
font-family: Roman;
}
input{ margin: 5px 5px; }
</style>
<!--引⼊jquery的js库-->
<script src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function() {
/* ---------内容选择器--------- */
//改变含有⽂本 ‘id’ 的 div 元素的背景⾊为 #FF6347" id="b1" <div>xxidxx</div>        $("#b1").click(function(){
$("div:contains('id')").css("background-color",
"#FF6347");
});
//改变空元素div(既不包含⽂本也不包含⼦元素)的背景⾊为 #9ACD32" id="b2"        $("#b2").click(function(){
$("div:empty").css("background-color",
"#9ACD32");
});
//改变包含div⼦元素的div元素的背景⾊为 #FF0033" id="b3"
$("#b3").click(function(){
$("div:has(div)").css("background-color",
"#FF0033");
});
//改变⾮空div元素的背景⾊为 #006400" id="b4"
$("#b4").click(function(){
$("div:parent").css("background-color",
"#006400");
});
//====================================================
/* ---------可见选择器练习--------- */
//改变所有可见 div 元素背景⾊为 #F08080" id="b5"
jquery选择器和css选择器的区别
$("#b5").click(function(){
$("div:visible").css("background-color",
"#F08080");
});
//让所有隐藏的div元素显⽰, 并改变背景⾊为 #FF69B4" id="b6"
$("#b6").click(function(){
$("div:hidden").show().css("background-color",
"#FF69B4");
});
})
</script>
</head>