jq（二）

事件

鼠标事件

• click: 鼠标单击时触发；
• dblclick：鼠标双击时触发；
• mouseenter：鼠标进入时触发；
• mouseleave：鼠标移出时触发；
• mousemove：鼠标在DOM内部移动时触发；
• hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。

  键盘事件

• 键盘事件仅作用在当前焦点的DOM上，通常是<input>和<textarea>。
• keydown：键盘按下时触发；
• keyup：键盘松开时触发；
• keypress：按一次键后触发。

  其他事件

• focus：当DOM获得焦点时触发；
• blur：当DOM失去焦点时触发；
• change：当<input>、<select>或<textarea>的内容改变时触发；
• submit：当<form>提交时触发；
• ready：当页面被载入并且DOM树完成初始化后触发。

其中，ready仅作用于document对象。由于ready事件在DOM完成初始化后触发，且只触发一次，所以非常适合用来写其他的初始化代码。

事件参数

有些事件，如mousemove和keypress，我们需要获取鼠标位置和按键的值，否则监听这些事件就没什么意义了。所有事件都会传入Event对象作为参数，可以从Event对象上获取到更多的信息：

• 监听鼠标的坐标参数：

  $(function () {
      $('#testMouseMoveDiv').mousemove(function (e) {
          $('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
      });
  });

其中，pageX和pageY两个方法可以返回鼠标指针的坐标位置，相对于文档的左边缘和上边缘。

取消绑定

一个已被绑定的事件可以解除绑定，通过off(‘event’, function)实现。

动画

• show(),hide(),toggle()
• slideUp(),slideDown(),slide Toggle()
• fadeIn(),fadeOut(),fade Toggle()
• 自定义动画：animate（｛css样式｝，时间参数，结束时执行的函数fun1）
• delay()：可以实现动画的暂停。
  s

  Ajax

• ajax函数：ajax(url,setting)函数需要接收一个URL和一个可选的settings对象，常用的选项如下：

  • async：是否异步执行AJAX请求，默认为true，千万不要指定为false;
  • method：发送的Method，缺省为'GET'，可指定为'POST'、'PUT'等；

  • contentType：发送POST请求的格式，默认值为'application/x-www-form-urlencoded; charset=UTF-8'，也可以指定为text/plain、application/json；

  • data：发送的数据，可以是字符串、数组或object。如果是GET请求，data将被转换成query附加到URL上，如果是POST请求，根据contentType把data序列化成合适的格式；

  • headers：发送的额外的HTTP头，必须是一个object；

  • dataType：接收的数据格式，可以指定为'html'、'xml'、'json'、'text'等，缺省情况下根据响应的Content-Type猜测。

• 回调函数

  • done(function(data){})
  • fail(function(xhr,status){})
  • always(function(){})
  • demo :

      function ajaxLog(s) {
        var txt = $('#test-response-text');
        txt.val(txt.val() + '\n' + s);
    }
    $('#test-response-text').val('');
    
      var jqxhr = $.ajax('/api/categories', {
        dataType: 'json'
    }).done(function (data) {
        ajaxLog('成功, 收到的数据: ' + JSON.stringify(data));
    }).fail(function (xhr, status) {
        ajaxLog('失败: ' + xhr.status + ', 原因: ' + status);
    }).always(function () {
        ajaxLog('请求完成: 无论成功或失败都会调用');
    });

• get(),post(),getJSON()三个方法都是传递两个参数，第一个参数为url，第二个参数为object（里面为要传递的数据）.