您好,登錄后才能下訂單哦!
最近看看JQuery,整理下學(xué)習(xí)的內(nèi)容
jsp頁(yè)面
<%@ 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/testJquer.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> <!-- 練習(xí)JQuery --> <inputtype="button"value="保存"class="mini"name="ok"class="mini"/> <inputtype="button"value="改變 id 為 one 的元素的背景色為 #0000FF"id="b1"/> <inputtype="button"value=" 改變?cè)孛麨?<div> 的所有元素的背景色為 #00FFFF" id="b2" /> <inputtype="button"value=" 改變 class 為 mini 的所有元素的背景色為 #FF0033"id="b3"/> <inputtype="button"value=" 改變所有元素的背景色為 #00FF33"id="b4"/> <inputtype="button"value=" 改變所有的<span>元素和 id 為 two 的元素的背景色為 #3399FF" id="b5" /> <inputtype="button"value=" id為mover的div實(shí)現(xiàn)動(dòng)畫效果"id="b6"/> <h2>天氣冷了</h2> <h3>天氣又冷了</h3> <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">動(dòng)畫</div><br> <spanclass="spanone"> span </span> <spanclass="mini"> span </span> </body> </html>
Js代碼
$(document).ready(function(){ //<input type="button" value="改變 id 為 one 的元素的背景色為 #0000FF" id="b1" /> $("#b1").click(function(){ //為b1按鈕添加點(diǎn)擊事件 $("#one").css("background", "#0000FF"); }); //<input type="button" value=" 改變?cè)孛麨?<div> 的所有元素的背景色為 #00FFFF" id="b2" /> $("#b2").click(function(){ $("div").css("background", "#0000FF"); }); //<input type="button" value=" 改變 class 為 mini 的所有元素的背景色為 #FF0033" id="b3" /> $("#b3").click(function(){ $(".mini").css("background", "#0000FF"); }); //<input type="button" value=" 改變所有元素的背景色為 #00FF33" id="b4" /> $("#b4").click(function(){ $("*").css("background", "#0000FF"); }); //<input type="button" value=" 改變所有的<span>元素和 id 為 two 的元素的背景色為 #3399FF" id="b5" /> $("#b5").click(function(){ $("span,#two").css("background", "#0000FF"); }); //<input type="button" value=" id為mover的div實(shí)現(xiàn)動(dòng)畫效果" id="b6" /> $("#b6").click(function(){ $("#mover").toggle("slow", function(){ //動(dòng)畫結(jié)束后的回調(diào)函數(shù) alert("動(dòng)畫結(jié)束"); }); }); });
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。