31、jQuery 进阶：事件处理、Ajax 与交互设计

jQuery 进阶：事件处理、Ajax 与交互设计

1. jQuery 事件管理基础

1.1 绑定点击事件示例

以下代码将点击事件绑定到定义列表中的所有 <dt> 元素上，当点击 <dt> 元素时，使用 $().toggle() 方法滑下关联的 <dd> 元素：

$( document ).ready( function(){
  $( "dt" ).on( "click" , function(){
    $( this ).next().slideToggle();
  })
});

在这个点击函数中有两个新特性：
- this 关键字：在绑定到 HTML 元素的函数体内， this 指的是绑定的 HTML 元素，即当前点击的 <dt> 元素。将 this 传入 jQuery 后，就可以对该元素使用所有 jQuery 特性。
- $().next() 方法：返回 DOM 中的下一个 HTML 元素，在此例中即关联的 <dd> 元素。

1.2 事件管理方法：$().on() 和 $().off()

jQuery 有两个主要的事件管理方法：