1.加载DOM
jQuery中，在$(document).ready()方法内注册的事件，只要DOM就绪就会被执行，此时可能元素的关联文件未下载完。
jQuery中的 load()方法，会在元素的onload事件中绑定一个处理函数。比如$(window).load(function(){...}),等价于JavaScript中的window.onload=function(){...}，该方法需要等网页所有元素都加载完（包括管理文件）。
2.事件绑定
在文档装载完之后，可以为元素绑定事件来完成一些操作。可以使用bind()方法来对匹配元素进行特定的事件绑定。
语法： bind(type,[data],fn);
<!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>--</title>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../../css/style.css" />
<script type="text/javascript">
$(function(){
$("#panel h5.head").bind("click",function(){
var $content = $(this).next();
if($content.is(":visible")){
$content.hide();
}else{
$content.show();
}
})
})
</script>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</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>--</title>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../../css/style.css" />
<script type="text/javascript">
$(function(){
$("#panel h5.head").bind("mouseover",function(){
$(this).next().show();
});
$("#panel h5.head").bind("mouseout",function(){
$(this).next().hide();
})
})
</script>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div>
</div>
</body>
</html>
3.合成事件
jQuery中有2个合成事件，hover()方法与toggle()方法。
hover() 语法：hover(enter,leave); 用来模拟光标悬停事件。
<!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>--</title>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../../css/style.css" />
<script type="text/javascript">
$(function(){
$("#panel h5.head").hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
})
</script>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div>
</div>
</body>
</html>
toggle()语法：toggle(fn1,fn2,...fnN); 用来模拟鼠标连续单击事件。
<!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>--</title>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../../css/style.css" />
<script type="text/javascript"> $(function(){
$("#panel h5.head").toggle(function(){
$(this).next().toggle();
},function(){
$(this).next().toggle();
})
}) /*$(function(){
$("#panel h5.head").click(function(){
$(this).next().toggle();
})
})*/ </script>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div>
</div>
</body>
</html>
4.事件冒泡
意思就是说，页面上有多个元素响应同一个事件。事件会按照DOM的层次结构像水泡一样不断往上至顶。
<!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>4-4-1</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
font-size: 13px;
line-height: 130%;
padding: 60px;
}
#content
{
width: 220px;
border: 1px solid #0050D0;
background: #96E555;
}
span
{
width: 200px;
margin: 10px;
background: #666666;
cursor: pointer;
color: white;
display: block;
}
p
{
width: 200px;
background: #888;
color: white;
height: 16px;
}
</style>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// 为span元素绑定click事件
$('span').bind("click", function () {
var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
$('#msg').html(txt);
});
// 为div元素绑定click事件
$('#content').bind("click", function () {
var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
$('#msg').html(txt);
});
// 为body元素绑定click事件
$("body").bind("click", function () {
var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
$('#msg').html(txt);
});
})
</script>
</head>
<body>
<div id="content">
外层div元素 <span>内层span元素</span> 外层div元素
</div>
<div id="msg">
</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>Panel</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
font-size: 13px;
line-height: 130%;
padding: 60px;
}
#content
{
width: 220px;
border: 1px solid #0050D0;
background: #96E555;
}
span
{
width: 200px;
margin: 10px;
background: #666666;
cursor: pointer;
color: white;
display: block;
}
p
{
width: 200px;
background: #888;
color: white;
height: 16px;
}
</style>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// 为span元素绑定click事件
$('span').bind("click", function (event) {
var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
$('#msg').html(txt);
event.stopPropagation(); // 阻止事件冒泡
});
// 为div元素绑定click事件
$('#content').bind("click", function (event) {
var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
$('#msg').html(txt);
event.stopPropagation(); // 阻止事件冒泡
});
// 为body元素绑定click事件
$("body").bind("click", function () {
var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
$('#msg').html(txt);
});
})
</script>
</head>
<body>
<div id="content">
外层div元素 <span>内层span元素</span> 外层div元素
</div>
<div id="msg">
</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>4-4-4</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
font-size: 13px;
line-height: 130%;
padding: 60px;
}
#content
{
width: 220px;
border: 1px solid #0050D0;
background: #96E555;
}
span
{
width: 200px;
margin: 10px;
background: #666666;
cursor: pointer;
color: white;
display: block;
}
p
{
width: 200px;
background: #888;
color: white;
height: 16px;
}
</style>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// 为span元素绑定click事件
$('span').bind("click", function (event) {
var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
$('#msg').html(txt);
return false;
});
// 为div元素绑定click事件
$('#content').bind("click", function (event) {
var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
$('#msg').html(txt);
return false;
});
// 为body元素绑定click事件
$("body").bind("click", function () {
var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
$('#msg').html(txt);
});
})
</script>
</head>
<body>
<div id="content">
外层div元素 <span>内层span元素</span> 外层div元素
</div>
<div id="msg">
</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></title>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#sub").bind("click", function (event) {
var username = $("#username").val(); //获取元素的值
if (username == "") { //判断值是否为空
$("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息
event.preventDefault(); //阻止默认行为 ( 表单提交 )
}
})
})
</script>
</head>
<body>
<form action="test.html">
用户名：<input type="text" id="username" />
<br />
<input type="submit" value="提交" id="sub" />
</form>
<div id="msg">
</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></title>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#sub").bind("click", function (event) {
var username = $("#username").val(); //获取元素的值
if (username == "") { //判断值是否为空
$("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息
return false;
}
})
})
</script>
</head>
<body>
<form action="test.html">
用户名：<input type="text" id="username" />
<br />
<input type="submit" value="提交" id="sub" />
</form>
<div id="msg">
</div>
</body>
</html>
5.事件对象的属性
jQuery对事件对象常用的属性进行了封装。
(1)event.type 可以获取事件的类型
<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 引入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script>
$(function () {
$("a").click(function (event) {
alert(event.type); //获取事件类型
return false; //阻止链接跳转
});
})
</script>
</head>
<body>
<a href='http://google.com'>click me .</a>
</body>
</html>
(2)event.target 可以获取出发事件的元素
<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 引入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script>
$(function () {
$("a[href=http://google.com]").click(function (event) {
alert(event.target.href); //获取触发事件的<a>元素的href属性值
return false; //阻止链接跳转
});
})
</script>
</head>
<body>
<a href='http://google.com'>click me .</a>
</body>
</html>
(3)event.pageX和event.pageY 可以获取光标相对于页面的x坐标与y坐标。
<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 引入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script>
$(function () {
$("a").click(function (event) {
alert("Current mouse position: " + event.pageX + ", " + event.pageY); //获取鼠标当前相对于页面的坐标
return false; //阻止链接跳转
});
})
</script>
</head>
<body>
<a href='http://google.com'>click me .</a>
</body>
</html>
(4)event.which 可以在鼠标单击事件中获取鼠标的左中右键，也可以获取键盘键。
<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 引入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script>
$(function(){
$("a").mousedown(function(e){
alert(e.which) // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键
return false;//阻止链接跳转
})
})
</script>
</head>
<body>
<a href='http://google.com'>click me .</a>
</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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 引入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script>
$(function () {
$("input").keyup(function (e) {
alert(e.which);
})
})
</script>
</head>
<body>
<input />
</body>
</html>
6.移除事件
unbind([type],[data])方法用来移除事件。
<!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>4-6-2</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
font-size: 13px;
line-height: 130%;
padding: 60px;
}
p
{
width: 200px;
background: #888;
color: white;
height: 16px;
}
</style>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').bind("click", function () {
$('#test').append("<p>我的绑定函数1</p>");
}).bind("click", function () {
$('#test').append("<p>我的绑定函数2</p>");
}).bind("click", function () {
$('#test').append("<p>我的绑定函数3</p>");
});
$('#delAll').click(function () {
$('#btn').unbind("click");
});
})
</script>
</head>
<body>
<button id="btn">
点击我</button>
<div id="test">
</div>
<button id="delAll">
删除所有事件</button>
</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>Panel</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
font-size: 13px;
line-height: 130%;
padding: 60px;
}
p
{
width: 200px;
background: #888;
color: white;
height: 16px;
}
</style>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').bind("click", myFun1 = function () {
$('#test').append("<p>我的绑定函数1</p>");
}).bind("click", myFun2 = function () {
$('#test').append("<p>我的绑定函数2</p>");
}).bind("click", myFun3 = function () {
$('#test').append("<p>我的绑定函数3</p>");
});
$('#delTwo').click(function () {
$('#btn').unbind("click", myFun2);
});
})
</script>
</head>
<body>
<button id="btn">
点击我</button>
<div id="test">
</div>
<button id="delTwo">
删除第二个事件</button>
</body>
</html>
one(type,[data],fn)方法可以为元素绑定处理函数，当处理函数触发一次后立即删除。
<!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>4-6-4</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
font-size: 13px;
line-height: 130%;
padding: 60px;
}
p
{
width: 200px;
background: #888;
color: white;
height: 16px;
}
</style>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').one("click", function () {
$('#test').append("<p>我的绑定函数1</p>");
}).one("click", function () {
$('#test').append("<p>我的绑定函数2</p>");
}).one("click", function () {
$('#test').append("<p>我的绑定函数3</p>");
});
})
</script>
</head>
<body>
<button id="btn">
点击我</button>
<div id="test">
</div>
</body>
</html>
7.模拟操作
jQuery中可以使用trigger()方法完成模拟操作。
<!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></title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
font-size: 13px;
line-height: 130%;
padding: 60px;
}
p
{
width: 200px;
background: #888;
color: white;
height: 16px;
}
</style>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').bind("click", function () {
$('#test').append("<p>我的绑定函数1</p>");
}).bind("click", function () {
$('#test').append("<p>我的绑定函数2</p>");
}).bind("click", function () {
$('#test').append("<p>我的绑定函数3</p>");
});
$('#btn').trigger("click");
})
</script>
</head>
<body>
<button id="btn">
点击我</button>
<div id="test">
</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></title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
font-size: 13px;
line-height: 130%;
padding: 60px;
}
p
{
width: 200px;
background: #888;
color: white;
height: 16px;
}
</style>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').bind("myClick", function (event, message1, message2) {
$('#test').append("<p>" + message1 + message2 + "</p>");
});
$('#btn').click(function () {
$(this).trigger("myClick", ["我的自定义", "事件"]);
}).trigger("myClick", ["我的自定义", "事件"]);
})
</script>
</head>
<body>
<button id="btn">
点击我</button>
<div id="test">
</div>
</body>
</html>
PS：参考文献《锋利的jQuery》