您的位置：首页 > Web前端 > JQuery

jquery基础知识实例(一)

2015-09-06 09:44 519 查看

轮滑

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航