一、鼠标事件：
1、点击事件click()和dbclick():
点击事件，就是当用户点击鼠标时该响应的动作，click是单击，dbclick是双击。下面看看它们的用法：
<div id="test">点击触发<div> $("#test").click(function() { alert("div被点击了"); });
当点击了id为test的div时，就会弹出alert的内容，这就是点击事件，dbclick用法类似。
2、mousedown()和mouseup()：
顾名思义，这两个方法是鼠标按下和鼠标弹起时触发的事件。
<div id="test">点击触发<div> $("#test").mousedown(function() { alert("鼠标按下去了"); }); $("#test").mouseup(function() { alert("鼠标弹起来了"); });
当鼠标在“点击触发”上按下去的时候，会弹出mousedown的内容，松手的时候会弹出mouseup的内容。
3、mousemove()事件：
这个方法是监听鼠标移动的。用法如下：
<div id="test">滑动触发<div> $("#test").mousemove(function() { alert("鼠标移动了"); });
只要鼠标移动了，就会弹出“鼠标移动了”这几个字。类似的方法还有mouseover()、mouseenter()和mouseout()、mouseleave()，前两个是鼠标移入，后两个是鼠标离开，用法类似。
4、hover()事件：
这个方法可以同时绑定鼠标一如和离开事件，比如：
<p>触发hover事件</p> // hover()方法是同时绑定 mouseenter和 mouseleave事件。 // 我们可以用它来简单地应用在 鼠标在元素上行为 $("p").hover( function() { $(this).css("background", 'red'); }, function() { $(this).css("background", 'blue'); } );
当鼠标移入p标签区域时，该区域背景颜色变为红色，鼠标离开时该区域背景颜色变为蓝色。
5、focusin()和focusout()事件:
focusin()是获取焦点事件。比如有一个输入框，要在该输入框输入文字，我们首先得用鼠标点一下该输入框，这就叫获取焦点。用法如下：
点击聚焦：<input type="text" /> $("input:first").focusin(function() { $(this).css('border','2px solid red') })
点击了输入框后，输入框的边框就会变为红色。focusout()相反，就是失去焦点，用法和focusin()类似。
二、表单事件：
1、blur()和focus():
这两个就是处理表单焦点的事件，blur()是失去焦点，focus是聚焦。与focusin()和focusout()的区别就是这两个不支持冒泡处理。
2、change()事件：
<input>元素，<textarea>和<select>元素的值都是可以发生改变的，我们就可以通过change事件去监听这些改变的动作。当这些元素的值发生变化后，就会触发change()事件。
输出结果： <div id="result"></div> <div class="aaron">input： <input class="target1" type="text" value="监听input的改变" /> </div> $('.target1').change(function(e) { $("#result").html(e.target.value) });
当输入框中的内容改变后，就会触发change()事件，输入框中改变后的内容就会输出到“输出结果”这个div种中。
3、select()事件：
当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
<input id="test" value="嘻嘻"></input> $("#test").select(function(e) { //响应文字选中回调 alert("e.target.value"); });
选中“嘻嘻”后，就会弹出选中的内容。
4、submit()事件：
这个是表单提交事件，提交表单时触发。
三、键盘事件：
1、keydown()、keyup()和keypress():
keydown类似于mousedown，按下键盘时的事件；keyup就类似于mouseup，按下键盘再松开的那个时候触发的事件；keypress事件只能捕获单个字符，不能捕获组合键，无法响应系统功能键（如delete，backspace），不区分小键盘和主键盘的数字字符。
四、其他：
1、事件的绑定和解绑：
绑定事件用on()方法，解绑用off()。
<div id="test"></div> //多事件绑定二 $("#test").on({ mousedown: function(e) { $(this).text('触发事件：' + e.type) }, mouseup: function(e) { $(this).text('触发事件：' + e.type) } })
当鼠标在div区域按下去，就触发了mousedown事件，松开时就触发了mouseup事件。
$("button:first").click(function() { $(".aaron:first").off('mousedown') })
这就是销毁mousedown事件。
2、envent.target:
vent.target代表当前触发事件的元素。看案例：
<div class="left"> <div class="aaron"> <ul> <li>刘亦菲</li> <li>林青霞</li> <li>张韶涵</li> <li>范玮琪</li> </ul> </div> </div> <script type="text/javascript"> //多事件绑定 $("ul").on('click',function(e){ alert('触发的元素是内容是: ' + e.target.textContent) }) </script>
这里的e.target表示的就是你所点击的li，当点击“范玮琪”时，就会弹出“范玮琪”。
类似的event.currentTarget : 在事件冒泡过程中的当前DOM元素，等同于this。
五、Ajax的应用：
Ajax是一种无需重新加载整个网页的情况下，能够更新部分网页的技术，也就是异步更新。比如一般的网站登录的时候要输验证码，当你输完验证码，就会立即提示验证码正确还是错误，而不需要点击“登录”按钮后再去判断，这就用到了Ajax。接下来就看看如何使用。
1、load()异步请求：
语法：$("#id").load(url,data,function(){...})
注意，$就是jQuery的简写。url表示要异步请求的url；data是连同请求一起发送到服务器的数据，可选；function就是当请求完执行的函数，可选。案例：
<div class="title"> <span class="fl">我最爱吃的水果</span> <span class="fr"> <input id="btnShow" type="button" value="加载" /> </span> </div> <ul></ul><!--用于接收fruit页面的数据--> <script> $("#btnShow").click(function () { $("ul").load("static/page/fruit.html" ,function(){ }); }) </script>
这段代码就表示当点击了加载按钮后，就会异步请求fruit.html这个页面，然后会把fruit这个页面的内容填充到本页的<ul>中。
2、$.getJSON()异步请求:
语法：$.getJSON(url,data,function(){...})
三个参数还是和上面的load一样，不过url必须是为请求加载json格式文件的服务器地址，也就是说，请求的url必须返回json格式的数据。
<script type="text/javascript"> $("#btnShow").click(function () { $.getJSON("static/json/sport.json",function(data){ $.each(data, function (index, sport) { $("ul").append("<li>" + sport["name"] + "</li>"); }); }); }) </script>
比如sport.json中保存的是json格式数据，那么上面的代码就会请求获取到这些数据，然后填充到本页的<ul>中。
3、$.getScript():
用法和$.getJSON()基本一样，区别在于url不是返回json格式数据的url，而是指向一个js文件，比如statis/js/sport.js，还有就是没有data这个参数。
4、$.get():
使用get()方法时，采用GET方式向服务器请求数据，并通过方法中回调函数的参数返回请求的数据，它的调用格式如下：
$.get(url,function(data){...})
5、$.post()：
与get()方法相比，post()方法多用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面，调用格式如下：
$.post(url,data,function(){...})
和get的不同之处就是post方式可以像服务器传参，这个data可以是一个参数，也可以是多个参数，多个参数的时候用大括号包起来，例如：$.post(url,
{data1,data2},function(data){...})。
6、$.ajax():
使用ajax()方法是最底层、功能最强大的请求服务器数据的方法，它不仅可以获取服务器返回的数据，还能向服务器发送请求并传递数值，也是最常用的。它的调用格式如下：
$.ajax([settings])
其中参数settings为发送ajax请求时的配置对象，在该对象中，url表示服务器请求的路径，data为请求时传递的数据，dataType为服务器返回的数据类型，success为请求成功的执行的回调函数，type为发送数据请求的方式，默认为get。
常用的格式如下:
$.ajax({ url: "http://www.baidu.com", data: { num: $("#text").val() }, dataType: "text", success: function (data) { } });
总结：
以上就是本文的全部内容，介绍了事件以及Ajax，这都是项目中用得较多的。更多其他用法，请在实践中感受。
