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>