标签：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script src="../js/jquery-1.11.3.js" type="text/javascript"></script>
<script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script language="javascript">
document.ready(function() {
$("#b1").click(function(){
$("div:first").css("background-color","red");
});
$("#b2").click(function(){
$("div:last").css("background-color","red");
});
$("#b3").click(function(){
$("div:not(.one)").css("background-color","red");
});
$("#b4").click(function(){
$("div:even").css("background-color","red");
});
$("#b5").click(function(){
$("div:odd").css("background-color","red");
});
$("#b6").click(function(){
$("div:gt(3)").css("background-color","red");
});
$("#b7").click(function(){
$("div:eq(3)").css("background-color","red");
});
$("#b8").click(function(){
$("div:it(3)").css("background-color","red");
});
});
</script>
</head>
<body>
<input type="button" value="改变第一个div的背景色" id="b1" />
<input type="button" value="改变最后一个div的背景色" id="b2" />
<input type="button" value="改变class不为one的所有div的背景色" id="b3" />
<input type="button" value="改变索引值为偶数的div的背景色" id="b4" />
<input type="button" value="改变索引值为基数的div的背景色" id="b5" />
<input type="button" value="改变索引值大于3的div的背景色" id="b6" />
<input type="button" value="改变索引值等于3的div的背景色" id="b7" />
<input type="button" value="改变索引值小于3的div的背景色" id="b8" />
<input type="button" value="改变所有标题元素的背景色" id="b9" />
<h2>h2</h2>
<h5>h5</h5>
<h3>h3</h3>
<div class="one">div1</div>
<div class="one">div2</div>
<div>div3</div>
<div>div4</div>
<div>div5</div>
<div>div6</div>
<div>div7</div>
<div class="one">div8</div>
<div>div9</div>
<input type="button" value="增加动画效果" id="b10" />
<br>
<div id="mover">动画</div>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/tingbogiu/p/4691329.html
