1.jQuery的級聯菜單:在做下拉選單時，一個下拉項的改變常常會引起其他下拉列表中的選項發生變化，例如地域選擇 的省市縣聯動改變
A:首先在標籤中引入jQuery,注意路徑問題
<script type="text/javascript" src="jquery.js"></script><select>
<option value="0">請選擇省</option>
<option value="1">陝西省</option>
<option value="2">河南省</option>
<option value="3">江蘇省</option>
</select>
<select>
</select> C:編寫jQuery代碼實現級聯功能
<script type="text/javascript">
window.onload=function(){//這裏也可以使用$(document).ready，
//但window.onload是把dom樹加載完後再把所有文件加載完畢纔開始執行
$("select:eq(0)").change(function(){
$("select:eq(1)").empty();//每次選擇前清空市列表
switch($(this).val()){
case "0":
break;//及時退出防止case穿透
case "1":
$("select:eq(1)").append($("<option>西安市</option>"));
$("select:eq(1)").append($("<option>咸陽市</option>"));
$("select:eq(1)").append($("<option>榆林市</option>"));
break;
case "2":
$("select:eq(1)").append($("<option>洛陽市</option>"));
$("select:eq(1)").append($("<option>鄭州市</option>"));
$("select:eq(1)").append($("<option>開封市</option>"));
$("select:eq(1)").append($("<option>濮陽市</option>"));
break;
case "3":
$("select:eq(1)").append($("<option>南京市</option>"));
$("select:eq(1)").append($("<option>無錫市</option>"));
break;
}
});
}
</script>2.鍵盤事件:通過特定的鍵盤按鍵觸發事件，例如通過wsad控制一個標籤的移動
A:定義一個標籤，作爲操作對象
<div style="width: 50px;height: 50px;border-style: solid;
border-color: black;border-width: 3px;"></div>
B:編寫jQuery代碼控制標籤移動
<script type="text/javascript">
window.onload=function(){
$(document).keydown(function(){
document.title="按下";
});
$(document).keyup(function(){
document.title="釋放";
});//定義鍵盤的按下和釋放方法並記錄
var left=false,right=false,up=false,down=false;//給出四個移動方向,無按鍵時全部爲false
$(document).keydown(function(e){//有特定按鍵按下時激活事件
switch(e.keyCode){//判斷按鍵對應的asc碼
case 65:
left=true;
break;
case 68:
right=true;
break;
case 87:
up=true;
break;
case 83:
down=true;
break;
}
});
$(document).keyup(function(e){
switch(e.keyCode){//判斷按鍵對應的asc碼
case 65:
left=false;
break;
case 68:
right=false;
break;
case 87:
up=false;
break;
case 83:
down=false;
break;
}
});
var x=0,y=0;//定義初始座標
function move(){//本質就是有按鍵按下改變其css屬性
if(left){
x--;
$("div:eq(0)").css("margin-left",x);
}
if(right){
x++;
$("div:eq(0)").css("margin-left",x);
}
if(up){
y--;
$("div:eq(0)").css("margin-top",y);
}
if(down){
y++;
$("div:eq(0)").css("margin-top",y);
}
}
setInterval(move, 1);
}
</script>3.鼠標事件:在鼠標進行操作時可以觸發事件
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
$("div:eq(0)").click(function(){
$(this).append("鼠標單擊");
});
$("div:eq(0)").dblclick(function(){
$(this).append("鼠標雙擊");
});
$("div:eq(0)").mousedown(function(){
$(this).append("<marquee>鼠標按下</marquee>");
});
$("div:eq(0)").mouseup(function(){
$(this).append("<marquee>鼠標釋放</marquee>");
});
$("div:eq(0)").mouseover(function(){
$(this).append("<marquee>鼠標進入</marquee>");
});
$("div:eq(0)").mouseout(function(){
$(this).append("<marquee>鼠標移出</marquee>");
});
}
</script>
<div style="width: 300px;height: 200px;border-style: solid;border-width: 5px">
</div>
</body>
</html>