jQuery笔记

淩亂°似流年 2022-06-03 23:23 162阅读 0赞

### 1. 简介 ###

jQuery是一个JavaScript库，它通过封装原生的JavaScript函数得到一整套定义好的方法。

优点：

*  操作起来非常方便
 *  浏览器的兼容性很好
 *  有大量基于jQuery的插件

#### 1.1. 代码风格 ####

在jQuery中，不管是页面元素的选择还是内置功能函数的使用，都是用美元符号“$”来起始的。

$(function(){  });      //执行一个匿名函数
    $('#box');       //对id=box的页面元素进行选择
    $('#box').css('color','red');  //执行功能函数

由于$本身就是jQuery对象的缩写形式，因此上例中的$都可以替换为jQuery，即 $===jQuery。

jQuery对象执行某一功能函数后，返回的还是jQuery对象，故jQuery可以采用连缀的代码模式。

#### 1.2. 加载模式 ####

文档的加载顺序是以文档流的方式从上到下加载的，如果jQuery代码写在DOM元素之前，就会出现无法获取到DOM元素的问题。

为了防止此问题，jQuery中有一个延迟加载jQuery代码的技巧：

$(function(){
    ... //内部写jQuery代码，就会等待网页中的DOM结构加载完毕之后，再来加载此处的jQuery代码。可以执行多次。
    });

js中类似作用的写法是：

window.onload=function(){
    ... //内部写js代码，需要等待网页全部加载完毕（包括图片），才会加载内部的js代码。只能执行一次。
    };

#### 1.3. 对象转换 ####

jQuery对象转换为DOM对象，主要有两种方法：

*  get()方法。如：$(‘\#box’).get(0)
 *  数组下标。如：$(‘\#box’)\[0\]

DOM对象转换为jQuery对象：

*  用$()将DOM对象包裹起来即可

#### 1.4. 多个库之间的冲突 ####

当一个项目中引入了多个第三方库的时候，可能出现命名冲突。比如prototype、Base库，他们都使用“$”作为起始符，这时就会产生冲突。

解决方法有两个：

*  将jQuery库在Base库之前引入，那么$的所有权就归Base库所有，而jQuery库可以直接用jQuery对象调用，或者创建一个“\\$\\$”起始符给jQuery使用。

var $$=jQuery;	// 创建一个$$的jQuery对象

*  如果将jQuery库在Base库之后引入，那么$的所有权归jQuery所有，而Base库就会失去作用。这里，jQuery提供了一个方法：

jQuery.noConflict();    // 将jQuery的$符所有权剔除
    var $$=jQuery;

### 2. 常规选择器 ###

#### 2.1. 简单选择器 ####

使用“$()”函数来包裹CSS选择器后，就可以返回页面中对应元素的jQuery对象。

*  标签选择器 $(‘div’)
 *  ID选择器 $(‘\#box’)
 *  类选择器 $(‘.box’)

其中，ID选择器返回的是单个jQuery对象，而标签选择器和类选择器返回的可能是多个。我们可以使用jQuery对象的length属性或size()方法来查看返回的jQuery对象的个数。

#### 2.2. 进阶选择器 ####

*  后代选择器 $(‘\#box p’) 等同于 $(‘\#box’).find(‘p’) 只要p元素是后代，不论是儿子还是孙子、重孙子，都会被选择。（后一种形式效率更高）
 *  子代选择器 $(‘\#box > p’) 等同于 $(‘\#box’).children(‘p’) 只有当p元素是儿子时，才会被选择。（后一种形式效率更高）
 *  群组选择器 $(‘div,p,.box’)
 *  通配选择器 $(‘\*’) 获取所有元素的jQuery对象
 *  组合选择器 $(‘div.box’)
 *  next选择器 $(‘\#box + p’) 等同于 $(‘\#box’).next(‘p’) 只获取某节点后的一个同级节点p
 *  nextAll选择器 $(‘\#box ~ p’) 等同于 $(‘\#box’).nextAll(‘p’) 获取某节点后所有的同级节点p

如果find()、children()、next()、nextAll()方法中，没有传递参数，就相当于传递了参数”\*”，即所有元素。

和next()方法功能相反的方法是prev()方法，和nextAll()功能相反的方法是prevAll()方法。

nextUntil()方法，选定某节点后面的所有同级节点，直到遇到某个指定的元素就停止。

prevUntil()方法，选定某节点前面的所有同级节点，直到遇到某个指定的元素就停止。

siblings()方法，正好集成了preAll()和nextAll()两个方法的功能。

**注意：** 在构造选择器时，有一个通用的优化原则：只追求必要的确定性。jQuery提供的方法的效率要高于选择器的效率。推荐优先使用方法进行选择。

#### 2.3. 高级选择器 ####

*  属性选择器

$('a[title]')      获取具有这个属性的DOM对象
    $('a[title=num1]') 获取具有这个属性，且属性值等于指定值的DOM对象
    $('a[title^=num]') 获取具有这个属性，且属性值以指定值开头的DOM对象
    $('a[title$=num]')    获取具有这个属性，且属性值以指定值结尾的DOM对象
    $('a[title|=num]') 获取具有这个属性，且属性值以指定值后面跟一个“-”号的DOM对象
    $('a[title!=num1]')    获取具有这个属性，且属性值不等于指定值的DOM对象
    $('a[title~=num]')    获取具有这个属性，且属性值以指定值后面跟一个空格分割的列表的DOM对象
    $('a[title*=num]') 获取具有这个属性，且属性值中包含指定值的DOM对象
    $('a[name][title=num1]') 获取具有多个属性，且属性值等于指定值的DOM对象

### 3. 过滤选择器 ###

过滤器主要通过特定的过滤规则来筛选所需的DOM元素，和CSS中的伪类的语法类似，以冒号“:”开头。

#### 3.1. 基本过滤器 ####

<table> 
 <thead> 
  <tr> 
   <th>过滤器名</th> 
   <th>jQuery语法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:first</td> 
   <td>$(‘li:first’)</td> 
   <td>选取第一个元素</td> 
  </tr> 
  <tr> 
   <td>:last</td> 
   <td>$(‘li:last’)</td> 
   <td>选取最后一个元素</td> 
  </tr> 
  <tr> 
   <td>:not(selector)</td> 
   <td>$(‘li:not(.red)’)</td> 
   <td>选取class不是red的li元素</td> 
  </tr> 
  <tr> 
   <td>:even</td> 
   <td>$(‘li:even’)</td> 
   <td>选取索引（0开始）是偶数的元素</td> 
  </tr> 
  <tr> 
   <td>:odd</td> 
   <td>$(‘li:odd’)</td> 
   <td>选取索引（0开始）是奇数的元素</td> 
  </tr> 
  <tr> 
   <td>eq(index)</td> 
   <td>$(‘li:eq(2)’)</td> 
   <td>选取索引等于index的元素</td> 
  </tr> 
  <tr> 
   <td>:gt(index)</td> 
   <td>$(‘li:gt(2)’)</td> 
   <td>选取索引大于index的元素</td> 
  </tr> 
  <tr> 
   <td>:lt(index)</td> 
   <td>$(‘li:lt(2)’)</td> 
   <td>选取索引小于index的元素</td> 
  </tr> 
  <tr> 
   <td>:header</td> 
   <td>$(‘:header’)</td> 
   <td>选取标题元素，h1-h6</td> 
  </tr> 
  <tr> 
   <td>:animated</td> 
   <td>$(‘:animated’)</td> 
   <td>选取正在执行动画的元素</td> 
  </tr> 
  <tr> 
   <td>:focus</td> 
   <td>$(‘:focus’)</td> 
   <td>选取当前获取焦点的元素</td> 
  </tr> 
 </tbody> 
</table>

jQuery为常用的过滤器提供了对应的方法，以便提升性能和效率。

first()方法   如：$('li').first()
    last()方法    如：$('li').last()
    not()方法 如：$('li').not('.red')
    eq()方法  如：$('li').eq(2)

#### 3.2. 内容过滤器 ####

内容过滤器的过滤规则主要是对包含的子元素或文本内容。

<table> 
 <thead> 
  <tr> 
   <th>过滤器名</th> 
   <th>jQuery语法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:contains(text)</td> 
   <td>$(‘div:contains(“abc”)’)</td> 
   <td>选取文本内容中包含abc的div元素</td> 
  </tr> 
  <tr> 
   <td>:empty</td> 
   <td>$(‘div:empty’)</td> 
   <td>选取不包含子元素和文本内容的div元素</td> 
  </tr> 
  <tr> 
   <td>:has(selector)</td> 
   <td>$(‘div:has(.red)’)</td> 
   <td>选取div的子元素中包含class等于red的div元素 等同于 $(‘div’).has(‘.red’)</td> 
  </tr> 
  <tr> 
   <td>:parent</td> 
   <td>$(‘div:parent’)</td> 
   <td>选取包含子元素或文本内容的div元素</td> 
  </tr> 
 </tbody> 
</table>

jQuery提供了三个和:parent功能不同的方法：

*  parent()方法。$(‘div’).parent() 只选取div元素的父元素（就一个jQuery对象）。
 *  parents()方法。$(‘div’).parents() 选取div元素的父元素及所有的祖先元素。
 *  parentsUntil()方法。$(‘div’).parentsUntil(‘body’) 选取div元素的父元素和祖先元素，直到遇见body元素停止（但不包括body元素）。

#### 3.3. 可见性过滤器 ####

可见性过滤器根据元素的可见性和不可见性来筛选元素。

<table> 
 <thead> 
  <tr> 
   <th>过滤器名</th> 
   <th>jQuery语法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:hidden</td> 
   <td>$(‘p:hidden’)</td> 
   <td>选取所有不可见的p元素</td> 
  </tr> 
  <tr> 
   <td>:visible</td> 
   <td>$(‘p:visible’)</td> 
   <td>选取所有可见的p元素</td> 
  </tr> 
 </tbody> 
</table>

hidden过滤器指的不可见性，包含三种情况：

*  CSS样式为display:none
 *  CSS样式为visibility:hidden
 *  input表单类型为type=”hidden”

#### 3.4. 子元素过滤器 ####

子元素过滤器的过滤规则是通过父元素和子元素的关系来筛选元素。

<table> 
 <thead> 
  <tr> 
   <th>过滤器名</th> 
   <th>jQuery语法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:first-child</td> 
   <td>$(‘li:first-child’)</td> 
   <td>先找所有的li元素，再找到对应的父元素，最后从每个父元素中获取第一个li子元素</td> 
  </tr> 
  <tr> 
   <td>:last-child</td> 
   <td>$(‘li:last-child’)</td> 
   <td>先找所有的li元素，再找到对应的父元素，最后从每个父元素中获取最后一个li子元素</td> 
  </tr> 
  <tr> 
   <td>:only-child</td> 
   <td>$(‘li:only-child’)</td> 
   <td>先找所有的li元素，再找到对应的父元素，最后从只有一个li子元素的父元素中获取li元素</td> 
  </tr> 
  <tr> 
   <td>:nth-child(odd/even/index)</td> 
   <td></td> 
   <td>先找所有的li元素，再找到对应的父元素，最后从每个父元素中获取指定规则的li子元素（索引从1开始）</td> 
  </tr> 
 </tbody> 
</table>

#### 3.5. 其他方法 ####

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>jQuery语法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>is()</td> 
   <td>$(‘li’).is(‘.red’)</td> 
   <td>参数可以是选择器、DOM、jQuery对象和匿名函数，返回值为boolean</td> 
  </tr> 
  <tr> 
   <td>hasClass()</td> 
   <td>$(‘li’).hasClass(‘red’)</td> 
   <td>参数是类名，返回值也是boolean</td> 
  </tr> 
  <tr> 
   <td>slice()</td> 
   <td>$(‘li’).slice(2,4)</td> 
   <td>两个参数，起始位置和结束位置（可选），但不包含结束位置。返回值为jQuery对象集合</td> 
  </tr> 
  <tr> 
   <td>end()</td> 
   <td>$(‘div’).find(‘p’).end()</td> 
   <td>获取当前jQuery对象的上一次状态，即相当于返回$(‘div’)</td> 
  </tr> 
  <tr> 
   <td>contents()</td> 
   <td>$(‘div’).contents()</td> 
   <td>获取某元素下面的所有节点，包括文本节点。</td> 
  </tr> 
  <tr> 
   <td>filter()</td> 
   <td>$(‘li’).filter(‘.red’)</td> 
   <td>参数可以是选择器和匿名函数，如果参数是选择器，则可以传递多个参数，来筛选出多个jQuery对象。</td> 
  </tr> 
 </tbody> 
</table>

### 4. 基础DOM和CSS操作 ###

#### 4.1. 元素内容操作 ####

*  html() 获取或设置元素中的HTML内容
 *  text() 获取或设置元素中的文本内容
 *  val() 获取或设置表单元素中的文本内容

**注意：** 上述方法如果没加参数，表示获取值；如果加了参数，表示设置值。

val()方法中传递的值如果是一个数组，则可以设置表单元素的首选状态（默认选中状态）。如：$(‘input’).val(\[‘男’,’湖北’,’乒乓球’\]);

#### 4.2. 元素属性操作 ####

*  attr(key) 获取某个元素的指定属性的属性值。
 *  attr(key,value) 设置某个元素的指定属性的属性值，其中value也可以是一个匿名函数。
    
        $('div').attr('title','我是标题'); 
        等同于
        $('div').attr('title',function(){ return '我是标题';});
 *  attr(\{key1:value1,key2:value2 …\}) 传递一个json，设置某个元素多个属性的属性值
 *  attr(key,function(index,value)\{ \}) 通过元素集合中的索引值（从0开始），来设置多个元素的指定属性的属性值。其实，在jQuery中有很多方法的参数都可以用匿名函数function()\{ \}，比如html()、text()、val()、is()、filter()等等。如果调用这些方法的jQuery对象是元素集合的话，还可以传递index参数来获取当前元素的索引值，并且可以使用第二个参数value。
    
        attr()方法里的第二个参数是匿名函数时，该匿名函数的用法有三种情况：
            a. 不传递参数，直接在函数体返回一个字符串作为属性值。
            b. 只传递一个参数index，它表示当前元素的索引（从0开始）。
                如：$('div').attr('title',function(index){
             return '我是第'+(index+1)+'个div元素';};
            c. 传递两个参数index、value。 index表示当前元素的索引，value表示当前元素属性的原本的值。
 *  removeAttr(key) 删除某个元素的指定属性。如：$(‘div’).removeAttr(‘title’); 这个方法的参数不可以是匿名函数。

**说明：** 元素的class属性值，不建议用attr()方法来设置，后面有专门的方法来操作class。

#### 4.3. 元素样式操作 ####

*  css(name) 获取某个元素的指定样式值。
 *  css(name,value) 设置某个元素的内联样式中的指定样式值，第二个参数可以为匿名函数。
 *  css(\[name1,name2 …\]) 获取某个元素的多个样式值。
 *  css(\{name1:value1,name2:value2 …\}) 设置某个元素的内联样式中的多个样式值。

**注意：** 如果获取的是多个CSS样式值，返回的是一个对象数组，虽然我们可以用js原生的遍历对象的for()方法来遍历。但jQuery提供了一个专门的方法$.each()来遍历这种对象数组。

*  addClass(class) 给某个元素添加class类名。
 *  removeClass(class) 删除某个元素的class类名。
 *  toggleClass(class) 来回切换指定样式和默认样式（需要配合事件才能看到效果）。
 *  toggleClass(class,switch) 来回切换样式的时候，设置切换频率。
 *  toggleClass(function()\{ \}) 通过匿名函数来设置切换样式的规则。
 *  toggleClass(function()\{ \},switch) 通过匿名函数设置时，同时指定切换频率。

#### 4.4. CSS方法 ####

*  width() 获取某个元素的宽度。返回值是number。
 *  width(value) 设置某个元素的宽度，该参数可以是一个匿名函数。匿名函数本身可以有两个可选参数：index元素的索引、value元素本身的值。
 *  height() 获取某个元素的高度。返回值是number。
 *  height(value) 设置某个元素的高度，该参数可以是一个匿名函数。
 *  innerWidth() 获取元素的宽度，包含内边距padding。
 *  innerHeight() 获取元素的高度，包含内边距padding。
 *  outerWidth() 获取元素的宽度，包含内边距padding和边框border。
 *  outerHeight() 获取元素的高度，包含内边距padding和边框border。
 *  outerWidth(true) 获取元素的宽度，包含内边距padding和边框border和外边距margin。
 *  outerHeight(true) 获取元素的高度，包含内边距padding和边框border和外边距margin。
 *  offset() 获取某个元素相对于浏览器视口的位置，返回值是一个对象。offset().left，水平位置；offset().top，垂直位置。
 *  position() 获取某个元素相对于父元素的位置，返回值是一个对象。position().left，水平位置；position().top，垂直位置。
 *  scrollTop() 获取垂直滚动条距离顶部的距离。
 *  scrollTop(value) 设置垂直滚动条距离顶部的距离。
 *  scrollLeft() 获取水平滚动条距离左侧的距离。
 *  scrollLeft(value) 设置水平滚动条距离左侧的距离。

### 5. DOM节点操作 ###

#### 5.1. 创建节点 ####

$(‘HTML代码’)

var box = $('<div id="box">节点</div>');     
    // 创建一个节点，创建的节点保存在内存中

#### 5.2. 插入节点 ####

**内部操作**

*  append(content) 向指定元素内部的后面插入节点。参数可以是节点对象、HTML代码或匿名函数。
    
        $('body').append('<p>代码</p>');
 *  prepend(content) 向指定元素内部的前面插入节点。
 *  appendTo(‘选择器’) 把指定元素移入到某个元素内部的后面。移入操作是对本身就存在的节点进行操作，不需要创建节点。
 *  prependTo(‘选择器’) 把指定元素移入到某个元素内部的前面。

**同级操作**

*  after(content) 向指定元素的后面插入节点。
 *  before(content) 向指定元素的前面插入节点。
 *  insertAfter(‘选择器’) 把指定元素移到某个元素的后面。不需要创建节点。
 *  insertBefore(‘选择器’) 把指定元素移到某个元素的前面。

#### 5.3. 包裹节点 ####

*  wrap(html) 给指定元素包裹一层HTML代码。参数可以是HTML代码、原生的DOM对象或匿名函数。如果指定元素是元素的集合，则每个元素都会被单独包裹。
 *  wrapAll(html) 给所有的元素包裹一层HTML代码。如果指定的元素是集合，则为元素集合统一包裹一层HTML代码。
 *  unwrap() 移除一层包裹代码。
 *  wrapInner(html) 给指定元素的内部包裹一层HTML代码。

#### 5.4. 节点操作 ####

*  clone() 复制元素。
 *  clone(true) 复制元素，包括元素的事件一起复制。
 *  remove() 删除元素。
 *  detach() 删除元素（保留事件）。
 *  empty() 删除元素里面包含的内容。
 *  replaceWith(html) 替换元素，前者被后者替换。
 *  replaceAll(‘选择器’) 替换元素，前者替换后者。

### 6. 表单选择器和过滤器 ###

jQuery为表单提供了专门的选择器和过滤器。

#### 6.1. 表单选择器 ####

*  :input 获取所有的input、textarea、select、button元素，即所有的表单元素 如：$(‘:input’)
 *  :text 获取所有的单行文本框，即type=text。
 *  :password 获取所有的密码框，即type=password。
 *  :radio 获取所有的单选框，即type=radio。
 *  :checkbox 获取所有的复选框，即type=checkbox。
 *  :submit 获取所有的提交按钮，即type=submit。
 *  :reset 获取所有的重置按钮，即type=reset。
 *  :image 获取所有的图像按钮，即type=image。
 *  :button 获取所有的普通按钮，即button元素。
 *  :file 获取所有的文件上传按钮，即type=file。
 *  :hidden 获取所有的隐藏元素，即type=hidden。

**注意：** 对于:hidden选择器，单独使用可能会出现一些问题，可以结合其他选择器一块使用来解决。 如 $(‘form :hidden’)。

#### 6.2. 表单过滤器 ####

*  :enabled 获取所有的可用元素，如：$(‘:enabled’)。
 *  :disabled 获取所有的不可用元素。
 *  :checked 获取所有被选中的元素，单选按钮和复选框。
 *  :selected 获取所有被选中的元素，下拉列表中option元素。

### 7. 基础事件 ###

#### 7.1. 绑定事件 ####

*  bind(type,\[data\],fn)
    
        参数说明：
            第一个参数，表示事件的类型，如click、focus、blur等。若要绑定多个事件，事件名之间用空格隔开。
            第二个参数，是可选参数，作为event.data的属性值，来传递额外的数据
            第三个参数，表示事件触发时的处理函数。可以是普通函数名或匿名函数。
        
        $(':submit').bind('click',function(){ 
            alert('点击了');
        });
        
        bind()的参数，还可以是一个json。
 *  unbind() 删除元素的所有事件。
 *  unbind(‘click’) 删除元素的指定事件。

**bind()和unbind()**，可以为当前的匹配元素绑定（或解绑）事件。

**live()和die()**，可以为当前的或未来的匹配元素绑定（或解绑）事件。

**on()和off()**，可以为当前的或未来的匹配元素绑定（或解绑）事件。

#### 7.2. 简写事件 ####

为了更方便地为元素绑定事件，jQuery封装了常用的事件。

*  click() 鼠标单击事件。
 *  dblclick() 鼠标双击事件。
 *  mousedown() 鼠标按下事件。
 *  mouseup() 鼠标抬起事件。
 *  mouseover() 鼠标移入事件，移入子元素时也会触发，可能触发多次。
 *  mouseout() 鼠标移出事件，移出子元素时也会触发，可能触发多次。
 *  mousemove() 鼠标移动事件。
 *  mouseenter() 鼠标穿过事件，穿过子元素时不会重复触发，只触发一次。
 *  mouseleave() 鼠标穿出事件，穿出子元素时不会重复触发，只触发一次。
 *  keydown() 键盘按下事件，通过e.keyCode可以得到键码。
 *  keyup() 键盘抬起事件，通过e.keyCode可以得到键码。
 *  keypress() 键盘按下事件，通过e.charCode可以得到字符编码。
 *  unload() 文档关闭事件。
 *  resize() 大小改变事件。
 *  scroll() 滚动条滚动事件。
 *  focus() 获取焦点事件，只在当前元素触发。
 *  blur() 失去焦点事件，只在当前元素触发。
 *  focusin() 获取焦点事件，可在子元素上触发。
 *  focusout() 失去焦点事件，可在子元素上触发。
 *  select() 文本选定事件。
 *  change() 值改变事件。
 *  submit() 表单提交事件，必须绑定在form元素上。
 *  ready() 文档就绪事件（当 HTML 文档完成加载时）。
    
        $(document).ready(function);
 *  load() 指定元素的加载事件。
 *  touch() 触摸事件。（移动端）
 *  touchstart() 触摸开始事件。（移动端）
 *  touchend() 触摸结束事件。（移动端）
 *  touchmove() 触摸按住移动事件。（移动端）

#### 7.3. 复合事件 ####

jQuery将一些功能组合，形成了复合事件。

*  ready(fn) 当DOM结构加载完毕后触发。
 *  hover(fn1\[,fn2\]) 当光标移入元素时，触发fn1；移出元素时触发fn2。
 *  toggle(fn1,fn2\[,fn2 …\] 当鼠标第一次点击元素时，触发fn1；第二次点击时触发fn2 …。

toggle() 在1.8版本已经废弃，1.9及以上版本删除掉了。 如果想在1.10版本使用toggle()，可以再引入一个jquery-migrate.js文件，来向下兼容被删除的方法。还有一种方式，就是自己定义一个和该功能相同的方法即可。

toggle() 的用法有多种，具体可查看手册。

#### 7.4. 触发事件 ####

*  trigger() 触发匹配元素的指定事件（标准事件或自定义事件都行）。
    
        // 触发 input 元素的 select 事件：
        $("button").click(function(){ 
            $("input").trigger("select");
        });
 *  triggerHandler() 触发第一个被匹配元素的指定事件。但不会执行浏览器的默认行为，也不会产生事件冒泡，只影响第一个匹配元素，返回的不是jQuery对象。

#### 7.5. 自定义事件 ####

自定义事件是指预先给被选元素绑定一个自定义的事件名称，然后通过 trigger() 或 triggerHandler() 来触发该事件，以达到方便快捷的目的。

$('#id').on('myEvent', function(event,arg1,arg2) { 
        alert("我的自定义事件");
     });
    
    $('#id').trigger('myEvent', param1, param2);

### 8. 高级事件 ###

#### 8.1. 模拟操作 ####

有时，我们需要模拟用户的事件操作，也就是说自动触发一个事件，而不需要用户主动去操作触发。

**trigger(‘事件名’)** 自动触发指定的事件。

$(':submit').trigger('click');

另一种自动触发事件的写法：**直接再调用一个空的同名事件方法**。

$(':submit').click(function(){ 
        alert('自动触发');
    }).click();     // 这里的click()可以替换为trigger('click')

#### 8.2. 命名空间 ####

有时，我们想对事件进行移除。但对于同元素绑定的多个相同事件名的移除会比较麻烦，这时，我们可以使用事件的命名空间来解决。

#### 8.3. 事件委托 ####

在jQuery中，如果给很多相同的元素都分别绑定一个事件，会大大降低代码的性能，为此，有一种事件委托的机制可以改善此问题。处理方法是，利用冒泡的特性，将子元素的事件绑定到父元素或祖先元素，这样总共就只需绑定一个事件。

**注意：** 虽然事件是绑定在父元素上，但触发事件的元素只能是子元素。事件是由子元素触发，但由父元素来执行处理函数。

#### 8.4. on()、off()和one() ####

jQuery1.7版本以后，推出了on()方法和off()方法，来操作事件的绑定和解绑。与bind()、unbind()的区别是，新推出的方法还可以用到事件委托的机制。

*  on()方法 可用于绑定普通事件和事件委托机制的特殊事件。
    
        a. 绑定普通事件
            和bind()方法的用法和功能相同。
        
        b. 绑定委托事件
            用法：on('事件类型’, '子元素', 匿名函数）; // #box表示父元素的id=box， .button表示子元素的class=button $('#box').on('click','.button',function(){ // this指的是触发事件的元素，也就是子元素 $(this).clone().appendTo('#box'); });
 *  off()方法 解除绑定，可用于解除普通事件和委托事件。
    
        // 解除委托事件的写法： 
        $('#box').off('click','.button');
 *  one()方法 给元素绑定事件，事件触发一次后，自动解除绑定。 也就是说，one()绑定的事件，只能触发一次，且触发后事件就没有了。

// 绑定普通事件
    $('.button').one('click',function(){  alert('只触发一次'); });
    
    // 绑定委托事件
    $('#box').one('click','.button',function(){  alert('只触发一次'); });

### 9. 事件对象 ###

事件对象就是event对象，通过处理函数的参数默认传递接收。事件对象有很多可用的属性和方法。

#### 9.1. 事件对象的属性 ####

*  type 事件类型，如：click、focus等。
 *  target 事件触发时的DOM元素。
 *  data 事件调用时的额外数据。
 *  currentTarget 事件绑定的DOM元素。

$('input').click(function(e){   
        // 通过处理函数的参数，来获取当前的事件对象。如果不传参，则表示不获取事件对象。
        alert(e.type);
    });

#### 9.2. 冒泡和默认行为 ####

**冒泡**

如果页面中具备父子关系的元素都绑定了相同的事件类型，当触发内层元素的事件时，会从内到外，依次触发外层元素的事件。这种现象就是冒泡。

stopPropagation() 事件对象的方法，在处理函数的内部调用该方法，就可以阻止冒泡行为。

$('input').click(function(e){ 
        alert('阻止冒泡');
        e.stopPropagation();
    });

**默认行为**

网页中的元素，在操作的时候会触发自己的默认行为，如：在页面中右击会弹出文本菜单，点击超链接会跳转，点击提交按钮会向指定的url提交数据等。

preventDefault() 事件对象的方法，用于阻止默认行为。

禁止表单提交跳转的两种方式：

*  阻止提交按钮的默认行为
    
        $(':submit').click(function(e){ 
            e.preventDefault();
        });
 *  阻止表单form元素的默认行为
    
        $('form').submit(function(e){ 
            e.preventDefault();
        });

**技巧：** 在处理函数中return false，既可以阻止冒泡，也可以阻止默认行为。 也就是说，return false具备上述两个方法的功能。

### 10. 动画效果 ###

#### 10.1. 显示、隐藏 ####

显示方法为show()，隐藏方法为hide()。

不传参数时，只是硬性地显示和隐藏内容。

传递一个数值参数，以毫秒为单位来控制动画的速度，里面富含了匀速变大（变小）和透明度的变化。

$('.button').click(function(){ 
        $('#box').show(1000); // 显示用时1秒
    });

传递一个预设速度字符串参数：fast、normal和slow，分别对应200毫秒、400毫秒和600毫秒。如果传递的字符串不对或空字符串，则默认为400毫秒。

$('#box').show('fast'); // 显示用时200毫秒

传递两个参数，速度和匿名函数，可以实现列队动画效果。

$('#box').show(500,function(){ 
        alert('元素显示完毕后，执行我！');
    });

传递两个参数，速度和递归函数，可实现多个元素的列队动画。

$('div').first().show(500,function showDiv(){ 
        $(this).next().show(500,showDiv);
    });

上述列队动画，还可以使用arguments.callee，实现匿名函数的自调用，即匿名的递归函数。

$('div').first().show(500,function(){ 
        $(this).next().show(500,arguments.callee);
    });

toggle()方法，传递一个速度参数，可以来回切换元素的显示和隐藏。

$('.button').click(function(){ 
        $('#box').toggle('fast');
    });

#### 10.2. 切入、切出 ####

*  slideDown() 向下切入。
 *  slideUp() 向上切出。
 *  slideToggle() 来回控制元素的切入和切出。

这些方法的参数和显示、隐藏动画，具有相同的参数。

#### 10.3. 淡入、淡出 ####

*  fadeIn() 淡入。
 *  fadeOut() 淡出。
 *  fadeToggle() 来回控制元素的淡入和淡出。

这些方法的参数和显示、隐藏动画，具有相同的参数。

*  fadeTo() 设置元素的透明度。
    
        $('#box').fadeTo('fast', 0.33);         
        // 第一个参数表示速度，第二个参数表示透明度（0-1）

#### 10.4. 自定义动画 ####

jQuery提供了几种简单常用的固定动画供我们使用，但这些简单的动画无法满足我们更加复杂的动画需求。为此，jQuery提供了一个自定义动画的方法。

**animate() 自定义动画**

四个参数：

*  第一个参数是json，必选参数，键值对的CSS样式。如：\{‘width’:’300px’,’fontSize’:’20px’\} 其中，键名可以省略单引号。
 *  第二个参数是速度，可选参数，如 1000。
 *  第三个参数是动画运动方式，可选参数，默认值为字符串的swing（先加速，再匀速，最后减速），还有一个值为linear（线性匀速）。
 *  第四个参数是回调函数，可选参数。

$('#box').animate({width:'300px',fontSize:'20px'},1000,function(){ 
            alert('动画执行完毕后执行我'); 
    });

**注意：** 每个CSS属性值的变化就是一个动画效果，上述json中的两个CSS变化，属于同步动画。json和回调函数实现的动画是列队动画。

要想每次触发事件都有动画效果，可以使用自定义动画的累加或累减功能。

$('.button').click(function(){ 
        $('#box').animate({width:'+=10px',height:'+=5px'});
    });

实现列队动画的方式有两种：

*  在动画方法的回调函数中再执行一个动画。
    
        $('#box').animate({width:'300px'},function(){ 
            $('#box').animate({height:'200px'});
        });
 *  将动画方法顺序排列或连缀起来（必须是同一个元素才会实现列队动画，不同元素的顺序排列实现的是同步动画）。

// 顺序排列
    $('#box').animate({width:'300px'});
    $('#box').animate({height:'200px'});
    
    // 连缀形式
    $('#box').animate({width:'300px'})
             .animate({height:'200px'});

#### 10.5. 列队动画方法 ####

先来看一个例子：

$('#box').slideUp(400).slideDown(400).css('background','red');

前面两个动画方法可以实现列队动画，但后面的css()方法不是动画方法，它会在动画的前面执行。

要想让后面的css()方法也实现列队动画，有以下几种方式：

*  利用动画方法的回调函数。
    
        $('#box').slideUp(400).slideDown(400,function(){ 
            $(this).css('background','red');
        });   
        // 缺点是当动画繁多时，会影响代码的可读性
 *  使用queue()方法。
    
        $('#box').slideUp(400).slideDown(400).queue(function(){ 
            $(this).css('background','red');
        }); 
        // /这样就不会破坏slideDown()的结构，可读性较好。

queue()方法的实现原理类似于动画方法里的回调函数，它的返回值不是当前的jQuery对象。故无法在queue()之后再连缀一个动画方法。有两种方法可以解决这个问题：

*  方法一：给queue()的回调函数传递一个参数，这个参数是next函数，并在结尾处调用它。就可实现再连缀，继续执行队列动画。
    
        $('#box').slideUp(400).slideDown(400).queue(function(next){ 
            $(this).css('background','red');
            next(); // 注意：next()函数是在jQuery1.4版本以后才出现的
        }).fadeOut(600);
 *  方法二：使用dequeue()。
    
        $('#box').slideUp(400).slideDown(400).queue(function(){ 
            $(this).css('background','red');
            $(this).dequeue();             
        }).fadeOut(600);

jQuery提供了一个清理列队动画的方法 clearQueue()，将它放入一个列队动画的回调函数里执行，就可以清除剩下的未执行的动画。

$('#box').slideUp(400).slideDown(400,function(){ $(this).clearQueue();}).queue(function(){ 
        $(this).css('background','red');
        $(this).dequeue();             
    }).fadeOut(600);

#### 10.6. 动画相关方法 ####

**stop()方法**

停止正在运行中的动画。如果不给参数，列队动画中的某个正在运行中的动画，会停止在当前状态，列队动画中的后续动画方法会继续执行。

它有两个可选的参数：

*  第一个参数表示是否清空动画队列中的后续动画方法，布尔值，默认值为false。
 *  第二个参数表示是否将动画直接跳到动画结束时的末状态，布尔值，默认值为false。

$('.stop').click(function(){ 
        $('#box').stop();
    });

**delay()方法**

延迟执行动画，有一个参数，表示毫秒数。

$('#box').delay(500).slideUp(400).delay(2000).slideDown(400);

利用递归函数，可以实现动画的无线循环。

$('#box').slideToggle(800,function(){ 
        $(this).slideToggle(800,arguments.callee);
    });

#### 10.7. 动画全局属性 ####

*  $.fx.internal 动画帧的时间间隔，默认值为13，单位是毫秒。数字越小，动画越流畅。
 *  $.fx.off 是否关闭动画效果，即是否关闭动画的运动过程。默认值为false，表示不关闭。

### 11. 工具函数 ###

工具函数是指直接依附于jQuery对象，针对jQuery对象本身定义的方法，即全局性的函数。

#### 11.1. 字符串操作 ####

在jQuery中，处理字符串的工具函数只有一个。

**$.trim()** 去掉字符串两端的空格。

var str=' jQuery ';
    str=$.trim(str);

#### 11.2. 数组和对象操作 ####

**$.each()** 遍历数组或对象

**遍历数组：**

var arr=['zhangsan','lisi','wangwu'];
    $.each(arr,function(index,value){ 
        $('#box').html($('#box').html()+(index+1)+'.'+value+'<br/>');
    });

**遍历对象：**

$.each($.ajax(),function(name,fn){ 
        $('#box').html($('#box').html()+name+'<br/>');
    });

**$.grep()** 对数组元素进行筛选，返回新的数组。

var arr=[6,4,9,8,3];
    var newArr=$.grep(arr,function(element,index){  // 第一个参数表示数组中的元素，第二个参数表示数组的下标
    return index<4 && element>5;  // 筛选条件
    });
    alert(newArr);

**$.map()** 修改数组中元素的值，返回新的数组。

var arr=[6,4,9,8,3];
    var newArr=$.map(arr,function(element,index){  // 第一个参数表示数组中的元素，第二个参数表示数组的下标
        if(index<3){
            return element+1;
        }
    });
    alert(newArr);

**$.inArray()** 查找数组中，某个元素的下标。返回值为数值。

var arr=[6,4,9,8,3];
    var index=$.inArray(8,arr);
    alert(index);

**$.merge()** 合并两个数组，返回值为新的数组。

var arr=[6,4,9,8,3];
    var arr2=[100,200];
    alert($.merge(arr,arr2));

#### 11.3. 判断操作 ####

在jQuery中，提供了一些对数据的类型或状态进行判断的工具函数。

**$.isArray()** 判断一个数据的类型是否为数组，返回值为布尔值。

var arr=[6,4,9,8,3];
    alert($.isArray(arr));

**$.isFunction()** 判断是否为函数，返回值为布尔值。

**$.isEmptyObject()** 判断是否为空对象，返回值为布尔值。

**$.isPlainObject()** 判断是否为纯粹的对象，返回值为布尔值（由\{ \} 或 new Object()创建的对象才是纯粹的对象）。

**$.contains()** 判断一个DOM节点中是否包含另外一个DOM节点，返回值为布尔值 （两个参数，必须是原生的DOM对象）。