jQuery进阶前言

前言：

在《jQuery入门》一文中，记录了jQuery选择器、属性与样式和DOM操作等内容，本文将对jQuery的事件以及Ajax相关知识点进行讲解。接下来就一起来学习一下。

一、鼠标事件：

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，这都是项目中用得较多的。更多其他用法，请在实践中感受。