Jsp頁面
<%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <metahttp-equiv="Content-Type"content="text/html; charset=GB18030"> <scripttype="text/javascript"src="js/jquery-1.3.2.js"></script> <scripttype="text/javascript"src="js/testJquer1.js"></script> <styletype="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{ width: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } </style> <title>Insert title here</title> </head> <body> <inputtype="button"value="保存"class="mini"name="ok"class="mini"/> <inputtype="button"value="改變 <body> 內所有 <div> 的背景色爲 #0000FF" id="b1"/> <inputtype="button"value=" 改變 <body> 內子 <div> 的背景色爲 #FF0033" id="b2"/> <inputtype="button"value=" 改變 id 爲 one 的下一個 <div> 的背景色爲 #0000FF" id="b3"/> <inputtype="button"value=" 改變 id 爲 two 的元素後面的所有兄弟<div>的元素的背景色爲 # #0000FF" id="b4"/> <inputtype="button"value=" 改變 id 爲 two 的元素所有 <div> 兄弟元素的背景色爲 #0000FF" id="b5"/> <h1>天氣冷了</h1> <h2>天氣又冷了</h2> <divid="one">id爲one</div> <divid="two"class="mini"> id爲two class是 mini <divclass="mini">class是 mini</div> </div> <divclass="one"> class是 one <divclass="mini">class是 mini</div> <divclass="mini">class是 mini</div> </div> <divclass="one"> class是 one <divclass="mini01">class是 mini01</div> <divclass="mini">class是 mini</div> </div><br> <divid="mover">動畫</div><br> <spanclass="spanone">span</span> </body> </html>
Js代碼
$(document).ready(function(){ //<input type="button" value="改變 <body> 內所有 <div> 的背景色爲 #0000FF" id="b1"/> $("#b1").click(function(){ $("body div").css("background", "red"); }); //<input type="button" value=" 改變 <body> 內子 <div> 的背景色爲 #FF0033" id="b2"/> $("#b2").click(function(){ $("body > div").css("background", "red"); }); //<input type="button" value=" 改變 id 爲 one 的下一個 <div> 的背景色爲 #0000FF" id="b3"/> $("#b3").click(function(){ //id爲one的下一個緊鄰div節點(兄弟節點) $("#one+div").css("background", "red"); //沒有選取到節點,因爲id爲one的元素下一個節點不是span $("#one+span").css("background", "red"); //id爲one的下一個元素 $("#one+*").css("background", "red"); }); //<input type="button" value=" 改變 id 爲 two 的元素後面的所有兄弟<div>的元素的背景色爲 # #0000FF" id="b4"/> $("#b4").click(function(){ //$("#two~div").css("background", "red"); //id爲two的元素後所有兄弟元素 $("#two~*").css("background", "red"); }); //<input type="button" value=" 改變 id 爲 two 的元素所有 <div> 兄弟元素的背景色爲 #0000FF" id="b5"/> $("#b5").click(function(){ $("#two").siblings("div").css("background", "red"); }); });