页面上的任何元素都能触发事件，在使用jQuery的时候，可以动态的为对象添加事件的绑定。基本的语法如下：
$obj. bind(事件类型，事件处理函数)；
例如：为一个jQuery对象绑定单击事件的代码实现为 $obj.bind(‘click’,fn);
也可以简写为 $obj.click(fn);完整代码如下所示:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function(){
$('#a1').bind('click',function(){
$('#d1').html('hello java');
});
});
</script>
</head>
<body style="font-size:30px;">
<div id="d1">hello jQuery</div>
<a href="javascript:;" id="a1">ClickMe</a>
</body>
</html>
在添加绑定事件的时候，还需要同时提供一个事件响应函数，而有些时候在这个事件响应函数中是需要获取和事件一些相关的信息的，如事件的源头是哪个对象，如果是鼠标单击事件那么当前鼠标所在的位置在哪里等，这些信息由系统封装成了一个对象，只要在响应函数的参数位置上任意传递一个变量就代表了对底层事件对象的封装。而之所以要进行这样的封装，其根本原因还是想保证兼容各种浏览器。
事件对象不仅包含着与事件有关的信息，也提供了可以用来影响事件在DOM中传递进程的一些方法。
获取事件源使用事件对象的target属性。获取发生事件时的鼠标坐标使用pageX和pageY属性。
详细代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function(){
$('a').click(function(e){
//通过事件对象找到事件源
//var obj = e.target; //返回值是一个dom对象
//alert(obj.innerHTML);
//获得鼠标点击的坐标
alert(e.pageX + ' ' + e.pageY);
});
});
</script>
</head>
<body style="font-size:30px;">
<a href="javascript:;">Click1</a><br/>
<a href="javascript:;">Click2</a>
</body>
</html>
当页面上发生一个事件时，每个层次上的DOM元素都有机会处理这个事件。一旦页面中的元素有嵌套的关系，那么最内层的元素有单击事件时，那么它之外的外层元素也应该得到这次单击的机会，毕竟嵌套元素都在鼠标的操作之下。
允许多个元素响应单击事件的一种策略叫做事件捕获。在事件捕获的过程中，事件首先会交给最外层的元素，接着再交给更具体的元素。即从外层依次向内部传递。
另一种相反的策略叫做事件冒泡。即当事件发生时，会首先发送给最内层的元素，在这个元素获得响应机会之后，事件会向上冒泡给更外层的元素，即从内层向外层依次传递。
不奇怪的是，不同的浏览器开发者最初采用的是不同的事件传播模型，因而最终出台的DOM标准规定应该同时使用这两种celue：首先事件从外向内捕获，然后事件再通过冒泡返回DOM树的顶层。
并不是所有浏览器都有与新标准保持一致而进行了更新，为了提供跨浏览器的一致性，jQuery始终会在模型的冒泡阶段注册事件处理程序。因此我们总是可以假定最具体的内部的元素会首先获得响应事件的机会。
通过target属性判断是否是当前元素而不是后代元素。然后调用事件对象的stopPropagation方法来阻止事件冒泡。其实这个方法与target一样，都是纯JavaScript特效，但在跨浏览器的环境中无法安全的使用。不过，只要我们通过jQuery来注册所有的事件处理程序，就可以放心使用这个方法。
代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function(){
$('div').click(function(e){
alert('你点击了一个div');
});
$('a').click(function(e){
alert('你点击了一个链接');
//取消事件冒泡
e.stopPropagation();
});
});
</script>
</head>
<body style="font-size:30px;">
<div style="width:200px;height:200px;
border:1px solid red;">
<a href="javascript:;">hello jQuery</a>
</div>
</body>
</html>
jQuery中的多数事件处理方法会直接影响JavaScript的本地事件。但是也有少数由于跨浏览器优化和方便性考虑而添加的自定义处理程序。.toggle（）和 .hover（）方法就是两个自定义的事件处理程序。对于这两个方法，由于他们截取组合的用户操作。并且以多个函数作为响应，因此被称为合成事件。
具体代码如下：
$(document).ready(function(){
$('div').toggle(function(){
$('div button').addClass('hidden');
},function(){
$('div button').removeClass('hidden');
});
});
//hover
$(document).ready(function(){
$('div').hover(function(){
$(this).addClass('hover');
},function(){
$(this).removeClass('hover');
});
});
有时候，即使某个事件没有真正发生，但如果能执行绑定到该事件的代码会很方便。例如，假设我们想让样式转化器在一开始处于一个状态，那么通过样式隐藏按钮，或者在页面加载时调用hide方法。另一种解决方法就是使用模拟单击动作，以触发设定的单击事件的响应。
通过trigger（）方法可以完成模拟事件的操作。注意的是，通过jQuery这种方式触发事件时，不会发生事件传播；只会执行直接添加到元素的处理程序。
trigger（）方法提供了一组与 .bind 方法相同的简写方法。当使用这些方法而不带参数时，结果就是触发操作而不是绑定行为。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function(){
$('#b1').click(function(){
//$('#username').trigger('focus');
$('#username').focus();
});
});
</script>
</head>
<body style="font-size:30px;">
username:<input name="username"
id="username"/><br/>
name:<input name="name"/>
<input type="button" value="ClickMe" id="b1"/>
</body>
</html>
如果说使用jQuery时，对元素的操作更加突出，那么在JavaScript世界中，效果则会让操作更上一层楼。通过jQuery我们不仅可以轻松地为页面操作添加简单的视觉效果，甚至能创建更精致的动画。
.hide() 和 .show()方法是对display的属性的操作。如果添加一个速度参数，就会产生动画效果。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
div{
width:450px;
height:40px;
background-color:#fff8dc;
border:1px solid black;
display:none;
}
</style>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function(){
$('a').toggle(function(){
$('div').show('slow');
},function(){
$('div').hide(500);
});
});
</script>
</head>
<body style="font-size:30px;">
<a href="javascript:;">不明觉厉是什么意思?</a>
<div>虽然听不懂，感觉很厉害的样子</div>
</body>
</html>
通过控制元素的高，出现动画效果。代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
div{
width:450px;
height:40px;
background-color:#fff8dc;
border:1px solid black;
display:none;
}
</style>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function(){
$('a').toggle(function(){
$('div').slideDown(800);
},function(){
$('div').slideUp('fast');
});
});
</script>
</head>
<body style="font-size:30px;">
<a href="javascript:;">不明觉厉是什么意思?</a>
<div>虽然听不懂，感觉很厉害的样子</div>
</body>
</html>
如果针对一个元素，只是逐渐增大其不透明度，那么使用.fadeIn（‘slow’）;
fadeOut是逐渐减少不透明度，可以使用.fadeOut();
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
#d1{
width:200px;
height:200px;
background-color:green;
display:none;
}
</style>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function(){
$('a').toggle(function(){
$('#d1').fadeIn('slow');
},function(){
$('#d1').fadeOut();
});
});
</script>
</head>
<body style="font-size:30px;">
<a href="javascript:;">ClickMe</a>
<div id="d1"></div>
</body>
</html>
用法：animate（js对象，执行时间，回调函数）；
js对象：{ }描述动画执行之后元素的样式
执行时间：毫秒数
回调函数：动画执行结束后要执行的函数
jQuery对象封装的DOM对象。
length属性
each（fn）遍历类数组，fn用来处理DOM对象。在fn中this表示正在被遍历的那个DOM对象。fn函数可以添加一个参数i用于表示正在被遍历的DOM对象的下标（从0开始）
eq(index)：将下标等于index的DOM对象取出来
get（）：返回一个DOM对象组成的数组
index（obj）：返回DOM或jQuery对象在类数组中的下标
代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function(){
$('#b1').click(function(){
/*
var $obj = $('ul li');
//alert($obj.length);
$obj.each(function(i){
//i:正在被遍历的dom对象的下标
if(i == 1){
//this:正在被遍历的dom对象
$(this).css('font-size','80px');
}
});
*/
//var $obj = $('ul li');
//var $o = $obj.eq(1);
//$o.css('font-size','60px');
//var o = $obj.get(1);
//o.innerHTML = 'hello jQuery';
//var $obj = $('ul li');
//var o = $obj.get(1);
//var index = $obj.index(o);
//alert(index);
var $obj = $('ul li');
var arr = $obj.get();
alert(arr[1].innerHTML);
});
});
</script>
</head>
<body style="font-size:30px;">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<input type="button" value="ClickMe" id="b1"/>
</body>
</html>
作用：将服务器返回的数据字节添加到符合要求的节点之上
用法：
$obj.load ( 请求地址，请求参数）；
请求参数
“username=tom & age=22”
{‘username’：‘tom’，‘age’：22 }
有请求参数时，load方法发送POST请求，否则发送GET请求
代码如下：
<script type="text/javascript">
$(function(){
$('.s1').click(function(){
var flight =
$(this).parent().siblings().eq(0).text();
$(this).next().load('price.do','flight=' + flight);
});
});
</script>
作用：发送GET类型的请求
用法：$.get(请求地址，请求参数，回调函数，服务器返回的数据类型） 说明：
回调数据：data是服务器返回的数据
服务器返回的数据类型：
html：HTML文本
text：text文本
JSON：JSON字符串
xml：XML文档
script：JavaScript脚本
代码如下：
<script type="text/javascript">
$(function(){
setInterval(quoto,4000);
});
function quoto(){
$.post('quoto.do',function(data){
//data:服务器返回的数据,如果
//是json字符串，会自动转换成相应的
//javascript对象。
$('#tb1').empty();
for(i=0;i<data.length;i++){
var s = data[i];
$('#tb1').append(
'<tr><td>' + s.code
+ '</td><td>' + s.name
+ '</td><td>' + s.price
+ '</td></tr>');
}
},'json');
}
</script>
<script type="text/javascript">
$(function(){
setInterval(quoto,4000);
});
function quoto(){
$.ajax({
'url':'quoto.do',
'type':'post',
'dataType':'json',
'success':function(data){
$('#tb1').empty();
for(i=0;i<data.length;i++){
var s = data[i];
$('#tb1').append(
'<tr><td>' + s.code
+ '</td><td>' + s.name
+ '</td><td>' + s.price
+ '</td></tr>');
},
error:function(){
//服务器出错之后的处理逻辑。
}
}
});
}
</script>