jquery基础知识实例(一)
轮滑
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Insert title here</title> <style type="text/css"> #content{overflow:hidden;padding:0px;position:relative;width:550px;height:240px;border:5px solid orange;margin:100px auto;} #d1,#d2,#d3,#d4{cursor:pointer;background:#abcdef;position:absolute;border:1px solid red;padding:3px 5px;} #d1{bottom:10px;right:90px;} #d2{bottom:10px;right:65px;} #d3{bottom:10px;right:40px;} #d4{bottom:10px;right:15px;} #dong{width:2212px;position:absolute;left:0px;top:0px;} #dong img{float:left;display:block;} </style> <script type="text/javascript" src="../js/jquery.js"></script> <script type="text/javascript"> function showImage(num){ curNum=num; var L=(1-num)*550+"px"; $("#dong").animate({left:L},1000); $("#content>div:gt(0)").css('background',"#abcdef"); $("#d"+num).css("background","yellow"); } var curNum=1; function d(){ curNum++; if(curNum>4){ curNum=1; } showImage(curNum); } var t; $().ready(function(){ t=setInterval(d,2500); $("#content>div:gt(0)").mouseenter(function(){ clearInterval(t); }) $("#content>div:gt(0)").mouseleave(function(){ t=setInterval(d,2500); }) }) </script> </head> <body> <div id="content"> <div id="dong"> <img src="../images/a.jpg"/> <img src="../images/b.jpg"/> <img src="../images/c.jpg"/> <img src="../images/d.jpg"/> </div> <div id='d1' onmouseover="showImage(1)" style="background:yellow;font-weight:bold;">1</div> <div id='d2' onmouseover="showImage(2)">2</div> <div id='d3' onmouseover="showImage(3)">3</div> <div id='d4' onmouseover="showImage(4)">4</div> </div> </body> </html>
鼠标经过时显示坐标位置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Insert title here</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $().ready(function(){ $("#div1").mousemove(function(e){ $(this).html("x:"+e.pageX+"|y:"+e.pageY); }) }) </script> </head> <body> <div style="font-size:30px;width:500px;height:400px;border:5px solid red;" id="div1"></div> </body> </html>
省市联动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Insert title here</title> <script type="text/javascript" src="../js/jquery.js"></script> <script type="text/javascript"> var provinces=[{id:1,name:'北京'},{id:2,name:'河北'},{id:3,name:'山东'}]; var citys={1:[{id:10,name:'海淀'},{id:11,name:'丰台'}],2:[{id:21,name:'石家庄'},{id:22,name:'承德'}],3:[{id:31,name:'济南'},{id:32,name:'青岛'}]} var areas={10:[{id:101,name:'h1'},{id:102,name:'h2'}],11:[{id:111,name:'f1'},{id:112,name:'f2'}]} $().ready(function(){ //给province追加option $("[name='province']").append("<option value='0' selected='selected'>请选择</option>"); for(var k in provinces){ $("[name='province']").append("<option value='"+provinces[k].id+"'>"+provinces[k].name+"</option>"); } getCity(); }) function getCity(){ //得到province的value属性值 var v=$("[name=province]").val(); //获取市数据 var arr=citys[v]; $("[name=city]").empty(); //追加一个请选择 $("[name=city]").append("<option value='0' selected='selected'>请选择</option>"); //遍历jOb,为city产生option for(var k in arr){ $("[name=city]").append("<option value='"+arr[k].id+"'>"+arr[k].name+"</option>"); } getArea(); } function getArea(){ //得到市id var cid=$("[name=city]").val(); //去areas中获取县信息 var arr=areas[cid]; $("[name=area]").empty(); $("[name=area]").append("<option value='0'>请选择</option>"); for(var k in arr){ $("[name=area]").append("<option value='"+arr[k].id+"'>"+arr[k].name+"</option>"); } } </script> </head> <body> <select onchange="getCity();" name="province"></select> <select onchange="getArea();" name="city"></select> <select name="area"></select> </body> </html>