HTML代码:
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
<h3>基本选择器.</h3>
<!-- 控制按钮 -->
<input type="button" value="选择 id为 one 的元素." id="btn1" />
<input type="button" value="选择 class 为 mini 的所有元素." id="btn2" />
<input type="button" value="选择 元素名是 div 的所有元素." id="btn3" />
<input type="button" value="选择 所有的元素." id="btn4" /> *
<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5" />
<br /><br />
<!-- 测试的元素 -->
<!-- 测试的元素 -->
<div class="one" id="one">
id为one,class为one的div
<div class="mini">class为mini的div</div>
</div>
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other的div</div>
<div class="mini" title="test">class为mini,title为test的div</div>
</div>
class为one的div
<div class="mini">class为mini的div</div>
<div class="mini">class为mini的div</div>
<div class="mini">class为mini的div</div>
<div class="mini">class为mini的div</div>
</div>
class为one的div
<div class="mini">class为mini的div</div>
<div class="mini">class为mini的div</div>
<div class="mini">class为mini的div</div>
<div class="mini" title="tesst">class为mini,title为tesst的div</div>
</div>
style的display为"none"的div
</div>
class为"hide"的div
</div>
包含input的type为"hidden"的div
<input type="hidden" size="8" />
</div>
</body>
CSS:
div,span,p {
width:200px;
height:230px;
margin:5px;
background:#aaa;
border:#000 1px solid;
float:left;
font-size:17px;
font-family:Arial;
font-family:Verdana;
}
div.mini {
width:80px;
height:80px;
background-color: #aaa;
font-size:12px;
font-family:Arial;
}
div.hide {
display:none;
}
需要选择的标签:
<input type="button" value="选择 id为 one 的元素." id="btn1" />
<input type="button" value="选择 class 为 mini 的所有元素." id="btn2" />
<input type="button" value="选择 元素名是 div 的所有元素." id="btn3" />
<input type="button" value="选择 所有的元素." id="btn4" /> *
<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5" />
JS代码:
$(document).ready(function(){})
$(function () {
$("#btn1").click(function () {
$("#one").css("background-color", "red");
});
$(".mini").css("background-color", "yellow");
});
$("#btn3").click(function () {
$("div").css("background-color", "green");
});
$("#btn4").click(function () {
$("*").css("background-color", "#00FFFF");
});
$("#btn5").click(function () {
$("span,#two").css("background-color", "black");
});