最近看看JQuery，整理下学习的内容
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/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> <!-- 练习JQuery --><inputtype="button"value="保存"class="mini"name="ok"class="mini"/> <inputtype="button"value="改变 id 为 one 的元素的背景色为 #0000FF"id="b1"/> <inputtype="button"value=" 改变元素名为 <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实现动画效果"id="b6"/> <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> <spanclass="mini"> span </span> </body> </html>Js代码
$(document).ready(function(){ //<input type="button" value="改变 id 为 one 的元素的背景色为 #0000FF" id="b1" /> $("#b1").click(function(){ //为b1按钮添加点击事件 $("#one").css("background", "#0000FF"); }); //<input type="button" value=" 改变元素名为 <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实现动画效果" id="b6" /> $("#b6").click(function(){ $("#mover").toggle("slow", function(){ //动画结束后的回调函数 alert("动画结束"); }); }); });
随时随地看视频
