JQuery从开始到结束

た入场券 2023-07-05 10:23 6阅读 0赞

# Ⅰ- 壹 - JQuery介绍 #

## 一 什么是JQuery? ##

JQuery是一个JavaScript库，他通过封闭原生JavaScript函数得到一套定义好的方法。JQuery已经集成了JavaScript、css、DOM、和Ajax于一体的强大功能，他可以用最少的代码，完成很多复杂而困难的功能。

## 二 jQuery的功能 ##

jQuery作为JavaScript封装的库，他的目的就是为了简化开发者使用JavaScript。主要功能有以下几点：

1.  像CSS那样访问和操作DOM
2.  修改CSS控制页面外观
3.  简化JavaScript代码操作
4.  事件处理更加容易
5.  各种动画效果使用方便
6.  让Ajax技术更加完美
7.  基于jQuery大量插件
8.  自行扩展功能插件

## 三 JQuery 代码风格 ##

*  在jQuery程序中，不管是页面元素的选择、内置的功能函数，都是美元符号“ ” 来 起 始 的 。 而 这 个 “ ”来起始的。而这个“ ”来起始的。而这个“”就是jQuery当中最重要且独有的对象：jQuery对象，所以我们在页面元素选择或执行功能函数的时候可以这么写：
 *  jQuery的代码模式是采用的连缀方式，可以不停的连续调用功能函数。 $(’\#box’).css(‘color’,‘red’).css(‘font-size’,‘50px’);//连缀
 *  jQuery中代码注释和JavaScript是保持一致的，有两种最常用的注释：单行使用“//…”，多行使用“/*…*/”  
    //$(’\#box’).css(‘color’,‘red’);

# Ⅱ - 贰 - JQuery使用 #

## 一 JQuery 简单选择器 ##

在使用jQuery选择器时，我们首先必须使用“$()”函数来包装我们的CSS规则。而CSS规则作为参数传递到jQuery对象内部后，再返回包含页面中对应元素的jQuery对象。随后，我们就可以对这个获取到的DOM节点进行行为操作了

<table> 
 <thead> 
  <tr> 
   <th>CSs模式</th> 
   <th>JQuery模式</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>div{}</td> 
   <td>$(“div”)</td> 
   <td>获取所有div元素</td> 
  </tr> 
  <tr> 
   <td>#box{}</td> 
   <td>$("#box")</td> 
   <td>获取id为box的元素</td> 
  </tr> 
  <tr> 
   <td>.box{}</td> 
   <td>$(".box")</td> 
   <td>获取class为box的所有元素</td> 
  </tr> 
 </tbody> 
</table>

$('div').css('color','red');//元素选择器，返回多个元素 
    $('#box').css('color','red');//ID选择器，返回单个元素 
    $('.box').css('color','red'); //类(class)选择器，返回多个元素

为了证明ID返回的是单个元素，而元素标签名和类(class)返回的是多个，我们可以采用jQuery核心自带的一个属性

length：
          alert($('#box').length);

## 二 JQuery 高级选择器 ##

*  在 find()、next()、nextAll()和 children()这四个方法中，如果不传递参数，就相当于传递 了“\*”，
 *  层次选择器对节点的层次都是有要求的，比如子选择器，只有子节点才可以被选择到，孙子节点和重孙子节点都无法选择到。next和nextAll选择器，必须是同一个层次的后一个和后N个，不在同一个层次就无法选取到了。
 *  理论上来讲，jQuery 提供的方法 find()、next()、nextAll()和 children()运行速度要快于使用高级选择器。因为他们实现的算法有所不同，高级选择器是通过解析字符串来获取节点对象，而 jQuery 提供的方法一般都是单个选择器，是可以直接获取的。但这种快慢的差异， 对于客户端脚本来说没有太大的实用性，并且速度的差异还要取决了浏览器和选择的元素内容。

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>JQuery模式</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>群组选择器</td> 
   <td>$(“pan,em,box”)</td> 
   <td>获取多个选择器的DOM对象</td> 
  </tr> 
  <tr> 
   <td>后代选择器</td> 
   <td>$(“ui li a”)</td> 
   <td>获取追溯到的多个DOM对象</td> 
  </tr> 
  <tr> 
   <td>子代选择器</td> 
   <td>$(“div&gt;div1”)</td> 
   <td>获取子代class为div1的所有元素</td> 
  </tr> 
  <tr> 
   <td>下一个兄弟选择器</td> 
   <td>$(".div1+div")</td> 
   <td>获取下一个兄弟选择器</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>$(".div1").next()</td> 
   <td>类似于$(".div1+")获取下一个兄弟元素</td> 
  </tr> 
  <tr> 
   <td>下面所有的兄弟选择器</td> 
   <td>$(".div1~div")</td> 
   <td>获取下面所有的兄弟选择器</td> 
  </tr> 
  <tr> 
   <td>同级上下所有元素选定</td> 
   <td>$(’#box’).siblings(‘p’)</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>同级下所有元素选定</td> 
   <td>$(".div1").nextAll()</td> 
   <td>获取div1下面所有的兄弟选择器</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>$(".div1").nextUntil(".div2")</td> 
   <td>div1到div2之间的兄弟元素</td> 
  </tr> 
  <tr> 
   <td>向上的一个兄弟元素</td> 
   <td>$(".div1").prev()</td> 
   <td>向上的一个兄弟元素</td> 
  </tr> 
  <tr> 
   <td>向上的所有兄弟元素</td> 
   <td>$(".div1").prevAll()</td> 
   <td>向上的所有兄弟元素</td> 
  </tr> 
  <tr> 
   <td>向上指定到直间兄弟元素</td> 
   <td>$(".div1").prevUntil(".div2")</td> 
   <td>向上到div2直接兄弟元素</td> 
  </tr> 
  <tr> 
   <td>统配选择器</td> 
   <td>$("*")</td> 
   <td>获取所有元素标签的DOM对象</td> 
  </tr> 
 </tbody> 
</table>

//群组选择器
    span,em,.box{  //多种选择器添加红色字体 
            color:red
    ;} 
    $('span,em,.box').css('color','red');//群组选择器jQuery方式 
    //后代选择器
    ul li a{  //层层追溯到的元素添加红色字体
             color:red;
    } 
    $('ul li a').css('color','red');//群组选择器jQuery方式 
    
    $("div>div1").css('color','red');//后代选择器jQuery方式 
    
    
    //通配选择器
    *{  //页面所有元素都添加红色字体
            color:red;
    } 
    $(".div1").nextUntil(".div2").css("color","red");//div1到div2之间的兄弟元素
    $('*').css('color','red'); //通配选择器

## 三 JQuery 属性选择器 ##

<table> 
 <thead> 
  <tr> 
   <th>CSs模式</th> 
   <th>JQuery模式</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>a[title]</td> 
   <td>$(“a[title]”)</td> 
   <td>获取具有这个属性的DOM对象</td> 
  </tr> 
  <tr> 
   <td>a[title=num1]</td> 
   <td>$(“a[title=num1]”)</td> 
   <td>获取具有这个属性=这个属性值的DOM对象</td> 
  </tr> 
  <tr> 
   <td>a[title^=num]</td> 
   <td>$(“a[title^=num]”)</td> 
   <td>获取具有这个属性且开头属性值匹配的DOM对象</td> 
  </tr> 
  <tr> 
   <td>a[title|=num]</td> 
   <td>$(“a[title!=num]”)</td> 
   <td>获取具有这个属性切等于属性值或开头属性值匹配后面跟一个“-”号的DOM对象</td> 
  </tr> 
  <tr> 
   <td>a[title$=num]</td> 
   <td><span><span><span> ( " a [ t i t l e ("a[title </span><span><span><span style="height: 1em; vertical-align: -0.25em;"></span><span>(</span><span>"</span><span>a</span><span>[</span><span>t</span><span>i</span><span>t</span><span style="margin-right: 0.01968em;">l</span><span>e</span></span></span></span></span>=num]")</td> 
   <td>获取具有这个属性且结尾属性值匹配的DOM对象</td> 
  </tr> 
  <tr> 
   <td>a[title!=num]</td> 
   <td>$(“a[title!=num]”)</td> 
   <td>获取具有这个属性且不等于属性值匹配的DOM对象</td> 
  </tr> 
  <tr> 
   <td>a[title~=num]</td> 
   <td>$(“a[title~=num]”)</td> 
   <td>获取具有这个属性是以一个空格分隔的列表，其中包含属性值的DOM对象</td> 
  </tr> 
  <tr> 
   <td>a[title*=num]</td> 
   <td>$(“a[title*=num]”)</td> 
   <td>获取具有这个属性且属性含有一个指定字符串的DOM对象</td> 
  </tr> 
  <tr> 
   <td>a[bbb][title=num]</td> 
   <td>$(“a[bbb][title=num]”)</td> 
   <td>获取具有这个属性且属性值匹配的DOM对象</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

// 属性选择器
    console.log($("div[a]"));//[a] 表示是否具备标签属性a
    console.log($("[a]"));//[a] 表示是否具备标签属性a
    console.log($("[a=1]"));//标签必须有a属性，并且属性值是1
    console.log($("[a^=1]"));//属性值的开头是1的元素
    $("[b|=ab]").css("color","red");//值是ab或者以ab起头后面使用—来连接的
            
    $("[b~=ab]").css("color","red");//值是ab或者值是以空格区分，并且中间包含ab的
    //一般用于class中的多个样式选择
    $("[b$=b]");以b结尾的值
    $("[b!=ab]");值不是ab的
    $("[b*=c]");值中包含有c这个字符的
    $("[a][b]");//有a属性和b属性的元素

## 四 JQuery 过滤器 ##

**类似于伪类选择器**

<table> 
 <thead> 
  <tr> 
   <th>过滤器名</th> 
   <th>JQ语法</th> 
   <th>说明</th> 
   <th>返回</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:first</td> 
   <td>$(li:first)</td> 
   <td>获取第一个元素</td> 
   <td>单个元素</td> 
  </tr> 
  <tr> 
   <td>:last</td> 
   <td>$(li:last)</td> 
   <td>获取最后一个元素</td> 
   <td>单个元素</td> 
  </tr> 
  <tr> 
   <td>:not()</td> 
   <td>$('li:not(.red))</td> 
   <td>获取class不是red的li元素</td> 
   <td>集合元素</td> 
  </tr> 
  <tr> 
   <td>:even</td> 
   <td>$(li:even)</td> 
   <td>选择索引（0开始）是偶数的所有元素</td> 
   <td>集合元素</td> 
  </tr> 
  <tr> 
   <td>:odd</td> 
   <td>$(li:odd)</td> 
   <td>选择索引（0开始）是奇数的所有元素</td> 
   <td>集合元素</td> 
  </tr> 
  <tr> 
   <td>:eq(index)</td> 
   <td>$(li:eq(2))</td> 
   <td>选择索引（0开始）是等于index元素</td> 
   <td>集合元素</td> 
  </tr> 
  <tr> 
   <td>:gt(index)</td> 
   <td>$(li:gt(2))</td> 
   <td>选择索引（0开始）是大于index元素</td> 
   <td>集合元素</td> 
  </tr> 
  <tr> 
   <td>:lt(index)</td> 
   <td>$(li:le(2))</td> 
   <td>选择索引（0开始）是小于index元素</td> 
   <td>集合元素</td> 
  </tr> 
  <tr> 
   <td>:header</td> 
   <td>$(:header)</td> 
   <td>选择标题元素h1-h6</td> 
   <td>集合元素</td> 
  </tr> 
  <tr> 
   <td>:animated</td> 
   <td>$(:animated)</td> 
   <td>选择正在执行动画的元素</td> 
   <td>集合元素</td> 
  </tr> 
  <tr> 
   <td>:focus</td> 
   <td>$(:focus)</td> 
   <td>选择当前被焦点的元素一般针对表单元素和超链接你</td> 
   <td>集合元素</td> 
  </tr> 
 </tbody> 
</table>

### 1 :first ###

$("li:first").css("color","red");
    $("li:first-child").css("color","red");//当前li是不是父容器当中的第一个li元素
    $("li:first-of-type").css("color","red");//当前li是不是父容器当中li类型中的第一个
    $("li").first()--->$("li:first")

### 2 :last ###

$("li:last").css("color","red");
    $("li:last-child").css("color","red");
    $("li:last-of-type").css("color","red");
    $("li").last()--->$("li:last")

### 3 基数偶数过滤器 ###

$("li:nth-child(2)").css("color","red");//当前li是不是该元素父容器的第2个子元素 2不是索引值，从1开始
    $("li:nth-of-type(2)").css("color","red");//寻找当前元素的父容器中第二个是li类型的元素， 2不是索引值
    $("li:nth-child(2n)").css("color","red");//偶数
    $("li:nth-of-type(2n)").css("color","red");//偶数
    $("li:nth-child(even)").css("color","red")//偶数
    $("li:nth-of-type(even)").css("color","red")//偶数
    $("li:odd").css("color","red");//奇数 这是按照索引值设置 从0开始 把所有li放在一个列表中，奇偶获取
    
     $("li:nth-child(2n-1)").css("color","red");//奇数
     $("li:nth-of-type(2n-1)").css("color","red");//奇数
     $("li:nth-child(odd)").css("color","red");//奇数
    $("li:nth-of-type(odd)").css("color","red");//奇数
     $("li:even").css("color","red");//偶数 这是按照索引值设置 从0开始 把所有li放在一个列表中，奇偶获取

### 4 :not ###

$("div:not(.ab)").css("color","red");//不是什么内容
    $("div").not(".ab")--->$("div:not(.ab)")//class不是.ab的元素

### 5 :eq :gt :lt ###

$("div:eq(1)").css("color","red");//是按照索引开始从第0个开始的
    $("li:gt(2)").css("color","red");//列表中下标大于2的所有元素
    $("li:lt(2)").css("color","red");//列表中下标小于2的所有元素
     $("div").eq(1)--->$("div:eq(1)")

### 6 :empty ###

console.log( $("div:empty"));//没有子元素或者没有内容的空元素

### 7 :has() ###

console.log($("div:has(.ab)"));//判断div元素中是否后代元素中有class是ab的元素
    $("div").has(".ab")

### 8 :parent :contains :has() ###

console.log($(".div1:contains(1)"));//判断元素的后代中有1这个内容的元素
    console.log($(".div2:parent"));//判断div2有子元素的或者有内容的
    console.log($(".div1:has(.div2)"));//含有div2的内容的div1元素

### 9 :hidden :visibie ###

console.log($(":hidden"));//隐藏 display:none这是隐藏的， visibility: hidden不属于隐藏
    console.log($(":visibie"));//显示的内容

### 10 is ###

方法判断有没有class ， hasClass方法判断div中有没有class是ab的元素

console.log($("div").is(".ab"));//判断div中有没有class是ab的元素 返回值true或者false
     console.log($("div").hasClass("ab"));//判断div中有没有class是ab的元素 返回值true或者false
    // is不单纯可以判断class还可以判断其他选择器，hasClass只能判断class
     console.log($("div").slice(2,4)); //将所有选中元素的列表截取第几个到第几个

## 五 JQuery 遍历 ##

jQuery提供了一个遍历工具专门来处理这种对象数组，$.each()方法，这个方法可以轻松的遍历对象数组。

$.each(box,function(attr,value){ //遍历JavaScript原生态的对象数组 
        //attr为下标 value 为这个元素 
    	alert(attr+':'+value);
    }); 
    //使用$.each()可以遍历原生的JavaScript对象数组，如果是jQuery对象的数组怎么使用.each()方法呢？ 
    //index为索引，element为元素DOM 
    $('div').each(function(index,element){ 
    	alert(index+':'+element);
    });

## 六 JQuery 方法 ##

### 1 设置元素及内容 ###

我们通过前面所学习的各种选择器、过滤器来得到我们想要操作的元素。这个时候，我 们就可以对这些元素进行 DOM 的操作。那么，最常用的操作就是对元素内容的获取和修改。

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>简述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>html()</td> 
   <td>获取元素中HTML内容</td> 
  </tr> 
  <tr> 
   <td>html(value)</td> 
   <td>设置元素中HTML内容</td> 
  </tr> 
  <tr> 
   <td>text()</td> 
   <td>获取元素中文本内容</td> 
  </tr> 
  <tr> 
   <td>text(value)</td> 
   <td>设置原生中文本内容</td> 
  </tr> 
  <tr> 
   <td>val( )</td> 
   <td>获取表单中的文本内容</td> 
  </tr> 
  <tr> 
   <td>val(value)</td> 
   <td>设置表单中的文本内容</td> 
  </tr> 
 </tbody> 
</table>

$('#box').html();//获取html内容
    $('#box').text();//获取文本内容，会自动清理html标签
    $('#box').html('<em>www.li.cc</em>');//设置html内容
    $('#box').text('<em>www.li.cc</em>');//设置文本内容，会自动转义html标签

注意：当我们使用html()或text()设置元素里的内容时，会清空原来的数据。而我们期望能够追加数据的话，需要先获取原本的数据。

$('#box').html($('#box').html()+'<em>www.li.cc</em>');//追加数据 
    如果元素是表单的话，jQuery提供了val()方法进行获取或设置内部的文本数据。
    	$('input').val();//获取表单内容
    	$('input').val('www.li.cc');//设置表单内容

### 2 元素属性的操作 ###

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>attr()</td> 
   <td>是设置在DOM标签上的属性</td> 
  </tr> 
  <tr> 
   <td>prop()</td> 
   <td>是设置在DOM对象上的对象属性</td> 
  </tr> 
  <tr> 
   <td>data()</td> 
   <td>是设置在jQuery映射对象上的属性，为了不污染DOM对象的属性</td> 
  </tr> 
 </tbody> 
</table>

**三个设置属性的用法同下**

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>简述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>attr(key)</td> 
   <td>获取某个元素key属性的属性值</td> 
  </tr> 
  <tr> 
   <td>attr(key, value)</td> 
   <td>设置某个元素key属性的属性值</td> 
  </tr> 
  <tr> 
   <td>attr( {key1:value2, key2:valu…})</td> 
   <td>设置某个元素多个key属性的属性值</td> 
  </tr> 
  <tr> 
   <td>att(key, function (index, value) {})</td> 
   <td>设置某个元素key通过fn来设置</td> 
  </tr> 
 </tbody> 
</table>

// 只能获取到列表中第一个元素的a属性值
    console.log($("div").attr("a"));
    
    $("div").attr("b","10");
    
    //循环遍历给每个div添加属性c 
    $("div").attr("c",function(index,item){ 
           return index+1;
      })
    
            // 多个不同属性
       $("div").attr({ 
            b:"1",
            c:function(index,item){ 
                return index+1;
            }
        })

### 3 元素样式的操作 ###

`CSS操作的方法`

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>css(name)</td> 
   <td>获取某个元素行内的CSS样式</td> 
  </tr> 
  <tr> 
   <td>css([namel, name2, name3])</td> 
   <td>获取某个元素行内多个Css样式</td> 
  </tr> 
  <tr> 
   <td>css(name, value)</td> 
   <td>设置某个元素行内的Css样式</td> 
  </tr> 
  <tr> 
   <td>css(name, function (index, value) )</td> 
   <td>设置某个元素行内的Css样式</td> 
  </tr> 
  <tr> 
   <td>css( (namel : valuel, name2 : value2})</td> 
   <td>设置某个元素行内多个CSS样式</td> 
  </tr> 
  <tr> 
   <td>addClass(class)</td> 
   <td>给某个元素添加一个CSS类</td> 
  </tr> 
  <tr> 
   <td>addClass(classl class2 class…)</td> 
   <td>给某个元素添加多个CSS类</td> 
  </tr> 
  <tr> 
   <td>removeClass(class)</td> 
   <td>删除某个元素的一个CSS类</td> 
  </tr> 
  <tr> 
   <td>removeClass(lassl class2 las…)</td> 
   <td>删除某个元素的多个CSS类</td> 
  </tr> 
  <tr> 
   <td>toggleClass(class)</td> 
   <td>来回切换默认样式和指定样式</td> 
  </tr> 
  <tr> 
   <td>toggleClass(class1 class2 cas…)</td> 
   <td>同上</td> 
  </tr> 
  <tr> 
   <td>toggleClass(lass, switch)</td> 
   <td>来回切换样式的时候设置切换频率</td> 
  </tr> 
  <tr> 
   <td>toggleCas(function(){})</td> 
   <td>通过匿 名函数设置切换的规则</td> 
  </tr> 
  <tr> 
   <td>toggleClass(finction (){}, switch)</td> 
   <td>在匿名函数设置时也可以设置频率</td> 
  </tr> 
  <tr> 
   <td>toggleCas(function(i,c,s){},switch)</td> 
   <td>在匿名函数设置时传递三个参数</td> 
  </tr> 
 </tbody> 
</table>

$('div').css('color'); //获取元素CSS样式的颜色 
    $('div').css('color','red'); //设置元素行内CSS样式颜色为红色
    	在CSS获取上，我们也可以获取多个CSS样式，而获取到的是一个对象数组，如果用传统方式进行解析需要使用for in遍历。
    	 var box=$('div').css(['color','height','width']);
                 //得到多个CSS样式的数组对象
    	for(var i in box){ //逐个遍历出来 
    		alert(i+':'+box[i]);
    	}

除了行内CSS设置，我们也可以直接给元素添加CSS类，可以添加单个或多个，并且也可以删除它。

$('div').addClass('red');//添加一个CSS类
    $('div').addClass('red bg');//添加多个CSS类
    $('div').removeClass('bg');//删除一个CSS类
    $('div').removeClass('red bg');//删除多个CSS类

### 4 CSS操作方法 ###

#### (1)width()和height()方法 ####

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>width(value)</td> 
   <td>设置某个元素的长度</td> 
  </tr> 
  <tr> 
   <td>width(function (index, width) {})</td> 
   <td>通过匿 名函数设置某个元素的长度</td> 
  </tr> 
  <tr> 
   <td>height()</td> 
   <td>获取某个元素的长度</td> 
  </tr> 
  <tr> 
   <td>height(value)</td> 
   <td>设置某个元素的长度</td> 
  </tr> 
  <tr> 
   <td>height(finction (index, width) {})</td> 
   <td>通过匿名函数设置某个元素的长度</td> 
  </tr> 
 </tbody> 
</table>

width
    
    $('div').width();//获取元素的长度，返回的类型为number
    $('div').width(500);//设置元素长度，直接传数值，默认加px
    $('div').width('500pt'); //同上，设置了pt单位 
    $('div').width(function(index,value){  //index是索引，value是原本值
    return       value-500;//无须调整类型，直接计算 
    });
    //pt: point，点，印刷行业常用单位，等于1/72英寸
    
    height
    $('div').height();//获取元素的高度，返回的类型为number
    $('div').height(500);//设置元素高度，直接传数值，默认加px
    $('div').height('500pt'); //同上，设置了pt单位 
    $('div').height(function(index,value){  //index是索引，value是原本值
    return value-1;//无须调整类型，直接计算 
    });

#### (2)内外边距和边框尺寸方法 ####

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>innerWidth()</td> 
   <td>获取元素宽度，包含内边距padding</td> 
  </tr> 
  <tr> 
   <td>innerHeight()</td> 
   <td>获取元素高度，包含内边距padding</td> 
  </tr> 
  <tr> 
   <td>outerWidth()</td> 
   <td>获取元素宽度，包含边框border和内边距padding</td> 
  </tr> 
  <tr> 
   <td>outerHeight()</td> 
   <td>获取元素高度，包含边框border和内边距padding</td> 
  </tr> 
  <tr> 
   <td>outerWidth(ture)</td> 
   <td>同上，且包含外边距</td> 
  </tr> 
  <tr> 
   <td>outerHeight(true)</td> 
   <td>同上，且包含外边距</td> 
  </tr> 
 </tbody> 
</table>

alert($('div').width()); //不包含 
    alert($('div').innerWidth());//包含内边距padding 
    alert($('div').outerWidth());//包含内边距padding+边框border 
    alert($('div').outerWidth(true)); //包含内边距padding+边框border+外边距margin

#### (3)元素偏移方法 ####

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>offset()</td> 
   <td>获取某个元素相对于视口的偏移位置</td> 
  </tr> 
  <tr> 
   <td>position()</td> 
   <td>获取某个元素相对于父元素的偏移位置</td> 
  </tr> 
  <tr> 
   <td>scrollTop()</td> 
   <td>获取垂直滚动条的值</td> 
  </tr> 
  <tr> 
   <td>scrollTop(value)</td> 
   <td>设置垂直滚动条的值</td> 
  </tr> 
  <tr> 
   <td>scrollLeft()</td> 
   <td>获取水平滚动条的值</td> 
  </tr> 
  <tr> 
   <td>scrollLeft(value)</td> 
   <td>设置水平滚动条的值</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

$('strong').offset().left;//相对于视口的偏移
    $('strong').position().left;//相对于父元素的偏移
    $(window).scrollTop();//获取当前滚动条的位置
    $(window).scrollTop(300); //设置当前滚动条的位置

### 5 DOM元素节点的操作 ###

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>append(content)</td> 
   <td>向指定元素内部后面插入节点content</td> 
  </tr> 
  <tr> 
   <td>append(function (index, html) {})</td> 
   <td>使用匿名函数向指定元素内部后面插入节点</td> 
  </tr> 
  <tr> 
   <td>appendTo(content)</td> 
   <td>将指定元素移入到指定元素content内部后面</td> 
  </tr> 
  <tr> 
   <td>prepend(content)</td> 
   <td>向指定元素content内部的前面插入节点</td> 
  </tr> 
  <tr> 
   <td>prepend(function (index, htm1) {})</td> 
   <td>使用匿名函数向指定元素内部的前面插入节点</td> 
  </tr> 
  <tr> 
   <td>prependTo(content)</td> 
   <td>将指定元素移入到指定元素content内部前面</td> 
  </tr> 
  <tr> 
   <td>wrap(content)</td> 
   <td>给每个元素外面的包裹一个content标签</td> 
  </tr> 
  <tr> 
   <td>wrapAll(content)</td> 
   <td>给所有元素外面包裹一个content标签</td> 
  </tr> 
  <tr> 
   <td>after(content)</td> 
   <td>向指定元素的外部后面插入节点content</td> 
  </tr> 
  <tr> 
   <td>after(function (index, html) {})</td> 
   <td>使用匿名函数向指定元素的外部后面插入节点</td> 
  </tr> 
  <tr> 
   <td>before(content)</td> 
   <td>向 指定元素的外部前面插入节点content</td> 
  </tr> 
  <tr> 
   <td>before(function (index, html) {})</td> 
   <td>使用匿名函数向指定元素的外部前面插入节点</td> 
  </tr> 
  <tr> 
   <td>insertAfter(content)</td> 
   <td>将指定节点移到指定元素content外部的后面</td> 
  </tr> 
  <tr> 
   <td>insertBefore(content)</td> 
   <td>将指定节点移到指定元素content外部的前面</td> 
  </tr> 
  <tr> 
   <td>unwrap()</td> 
   <td>将包裹的父元素删除</td> 
  </tr> 
  <tr> 
   <td>wrapInner(content)</td> 
   <td>给每个内容包裹一个content标签</td> 
  </tr> 
 </tbody> 
</table>

$('div').append('<strong>节点</strong>');//向div内部插入strong节点 
    $('div').append(function(index,html){  //使用匿名函数插入节点，html是原节点 return'<strong>节点</strong>';
    }); 
    $('span').appendTo('div');//将span节点移入div节点内
    $('span').appendTo($('div')); //同上 
    $('div').prepend('<span>节点</span>');//将span插入到div内部的前面
    $('div').append(function(index,html){  //使用匿名函数，同上 
    return'<span>节点</span>';
    }); 
    $('span').prependTo('div');//将span移入div内部的前面$('span').prependTo($('div')); //同上
    
    
    
    
    $('div').after('<span>节点</span>');//向div的同级节点后面插入span
    $('div').after(function(index,html){  //使用匿名函数，同上 
    return'<span>节点</span>';
    }); 
    $('div').before('<span>节点</span>');//向div的同级节点前面插入span
    $('div').before(function(index,html){  //使用匿名函数，同上 
        return'<span>节点</span>';
    });
    $('span').insertAfter('div');//将span元素移到div元素外部的后面
    $('span').insertBefore('div'); //将span元素移到div元素外部的前面
    
    
    
    
    
    
    $("div").wrap("<a></a>");//给每个元素外面的包裹一个a标签
    $("div").wrapAll("<a></a>");//给所有元素外面包裹一个a标签
    $("span").unwrap();//将包裹的父元素删除
    $("div").wrapInner("<a></a>");//给每个div的内容包裹一个a标签

#### (1) 复制节点 ####

$('body').append($('div').clone(true));//复制一个节点添加到HTML中

注意：clone(true)参数可以为空，表示只复制元素和内容，不复制事件行为。而加上true参数的话，这个元素附带的事件处理行为也复制出来。

#### (2) 删除节点 ####

$('div').remove(); //直接删除div元素
    注意：.remove()不带参数时，删除前面对象选择器指定的元素。而.remove()本身也可以带选择符参数的，比如：$('div').remove('#box');只删除id=box的div。 
    //保留事件的删除节点
    $('div').detach(); //保留事件行为的删除

注意：.remove()和.detach()都是删除节点，而删除后本身方法可以返回当前被删除的节点对象，但区别在于前者在恢复时不保留事件行为，后者则保留。

//清空节点
    $('div').empty(); //删除掉节点里的内容

#### (3) 替换节点 ####

$('div').replaceWith('<span>节点</span>');//将div替换成span元素
    $('<span>节点</span>').replaceAll('div'); //同上

####  ####

注意：节点被替换后，所包含的事件行为就全部消失了。

### 6 表单元素的操作 ###

表单作为 HTML 中一种特殊的元素，操作方法较为多样性和特殊性，开发者不但可以使用之前的常规选择器或过滤器，也可以使用 jQuery 为表单专门提供的选择器和过滤器来准确的定位表单元素。

我们可以使用 id、类(class)和元素名来获取表单字段，如果是表单元素，都必须含有 name属性，还可以结合属性选择器来精确定位。

$('input').val();//元素名定位，默认获取第一个
    $('input').eq(1).val();//同上，获取第二个
    $('input[type=password]').val();//选择 type 为 password 的字段
    $('input[name=user]').val();//选择 name 为 user 的字段

那么对于 id 和类(class)用法比较类似，也可以结合属性选择器来精确的定位，在这里我们不在重复。对于表单中的其他元素名比如：textarea、select 和 button 等，原理一样，不在重复

虽然可以使用常规选择器来对表单的元素进行定位，但有时还是不能满足开发者灵活多变的需求。所以，jQuery 为表单提供了专用的选择器。

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>描述</th> 
   <th>返回</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>: input</td> 
   <td>选取所有input. textarea、 select 和button 元素</td> 
   <td>集合元素</td> 
  </tr> 
  <tr> 
   <td>:text</td> 
   <td>选择所有单行文本框，即type=text</td> 
   <td>集合元素</td> 
  </tr> 
  <tr> 
   <td>:password</td> 
   <td>选择所有密码框，即type=password</td> 
   <td>集合元素</td> 
  </tr> 
  <tr> 
   <td>:radio</td> 
   <td>选择所有单选框，即type=radio</td> 
   <td>集合元素</td> 
  </tr> 
  <tr> 
   <td>:checkbox</td> 
   <td>选择所有复选框，即type=checkbox</td> 
   <td>集合元素</td> 
  </tr> 
  <tr> 
   <td>:submit</td> 
   <td>选取所有提交按钮，即type=submit</td> 
   <td>集合元素</td> 
  </tr> 
  <tr> 
   <td>:reset</td> 
   <td>选取所有重置按钮，即type=reset</td> 
   <td>集合元素</td> 
  </tr> 
  <tr> 
   <td>:image</td> 
   <td>选取所有图像按钮，即type=image</td> 
   <td>集合元素</td> 
  </tr> 
  <tr> 
   <td>:button</td> 
   <td>选择所有普通按钮，即button 元素</td> 
   <td>集合元素</td> 
  </tr> 
  <tr> 
   <td>:file</td> 
   <td>选择所有文件按钮，即type=file</td> 
   <td>集合元素</td> 
  </tr> 
  <tr> 
   <td>:hidden</td> 
   <td>选择所有不可见字段，即type=hidden</td> 
   <td>集合元素</td> 
  </tr> 
  <tr> 
   <td>:enabled</td> 
   <td>选取所有可用元素</td> 
   <td>集合元素</td> 
  </tr> 
  <tr> 
   <td>:disabled</td> 
   <td>选取所有不可用元素</td> 
   <td>集合元素</td> 
  </tr> 
  <tr> 
   <td>:checked</td> 
   <td>选取所有被选中的元素，单选和复选字段</td> 
   <td>集合元素</td> 
  </tr> 
  <tr> 
   <td>:selected</td> 
   <td>选取所有被选中的元素，下拉列表</td> 
   <td>集合元素</td> 
  </tr> 
 </tbody> 
</table>

## 七 JQuery事件 ##

### 1 on绑定事件 off关闭事件 ###

**在JQuery中绑定事件使用off关闭事件**

//创建一个div添加到body。
     $("<div></div>").appendTo("body").css({ 
                 width:50,
                 height:50,
                 backgroundColor:"red"
             }).on("click",clickHandler);//绑定事件
             // div.addEventListener("click",clickHandler);
     
             function clickHandler(e){ 
                 // this 事件侦听的元素 DOM
                 // this.removeEventListener("click",clickHandler);
                 $(this).off("click",clickHandler);//关闭事件
             }

### 2 事件命名空间 ###

**匿名函数不使用函数名清除，都是匿名函数。会将当前jQuery对象所有的click清除，这个时候就需要用到。事件命名空间**

$("<div></div>").appendTo("body").css({ 
                        width:50,
                        height:50,
                        backgroundColor:"red"
                    }).on("click.a",function(){ 
                        console.log("aaa");
                        $(this).off("click.a");
                    }).on("click.b",function(){ 
                        console.log("bbb");
                    })

**在事件后面加 .名 用于区分事件**

### 3 简写事件 ###

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>触发条件</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>click(fn)</td> 
   <td>鼠标</td> 
   <td>触发每-一个匹配元素的click(单击)事件</td> 
  </tr> 
  <tr> 
   <td>dblclick(fn)</td> 
   <td>鼠标</td> 
   <td>触发每一个匹配元素的dblclick(双击)事件</td> 
  </tr> 
  <tr> 
   <td>mousedown(fn)</td> 
   <td>鼠标</td> 
   <td>触发每一-个匹配元素的mousedown(点击后)事件</td> 
  </tr> 
  <tr> 
   <td>mouseup(fn)</td> 
   <td>鼠标</td> 
   <td>触发每一个匹配元素的mouseup(点击弹起)事件</td> 
  </tr> 
  <tr> 
   <td>mouseover(fn)</td> 
   <td>鼠标</td> 
   <td>触发每一个匹配元素的mouseover(鼠标移入)事件</td> 
  </tr> 
  <tr> 
   <td>mouseout(fn)</td> 
   <td>鼠标</td> 
   <td>触发每一个匹配元素的mouseout(鼠标移出)事件</td> 
  </tr> 
  <tr> 
   <td>mousemove(fn)</td> 
   <td>鼠标</td> 
   <td>触发每一个匹配元素的mousemove(鼠标移动)事件</td> 
  </tr> 
  <tr> 
   <td>mouseenter(fn)</td> 
   <td>鼠标</td> 
   <td>触发每一个匹配元素的mouseenter(鼠标穿过)事件</td> 
  </tr> 
  <tr> 
   <td>mouseleave(fn)</td> 
   <td>鼠标</td> 
   <td>触发每一个匹配元素的mouseleave(鼠标穿出)事件</td> 
  </tr> 
  <tr> 
   <td>keydown(fn)</td> 
   <td>键盘</td> 
   <td>触发每一个匹配元素的keydown(键盘按下)事件</td> 
  </tr> 
  <tr> 
   <td>keyup(fn)</td> 
   <td>键盘</td> 
   <td>触发每一个匹配元素的keyup(键盘按下弹起)事件</td> 
  </tr> 
  <tr> 
   <td>keypress(fn)</td> 
   <td>键盘</td> 
   <td>触发每一个匹配元素的keypress(键盘按下)事件</td> 
  </tr> 
  <tr> 
   <td>unload(fn)</td> 
   <td>文档</td> 
   <td>当卸载本页面时绑定-一个要执行的函数</td> 
  </tr> 
  <tr> 
   <td>resize(fn)</td> 
   <td>文档</td> 
   <td>触发每一-个匹配元素的resize(文档改变大小)事件</td> 
  </tr> 
  <tr> 
   <td>scroll(fn)</td> 
   <td>文档</td> 
   <td>触发每一个匹配元素的scroll(滚动条拖动)事件</td> 
  </tr> 
  <tr> 
   <td>focus(fn)</td> 
   <td>表单</td> 
   <td>触发每一个匹配元素的focus(焦点激活)事件</td> 
  </tr> 
  <tr> 
   <td>blur(fn)</td> 
   <td>表单</td> 
   <td>触发每一个匹配元素的blur(焦点丢失)事件</td> 
  </tr> 
  <tr> 
   <td>focusin(fn)</td> 
   <td>表单</td> 
   <td>触发每一-个匹配元素的focusin(焦点激活)事件</td> 
  </tr> 
  <tr> 
   <td>focusout(fn)</td> 
   <td>表单</td> 
   <td>触发每一个匹配元素的focusout(焦点丢失)事件</td> 
  </tr> 
  <tr> 
   <td>select(fn)</td> 
   <td>表单</td> 
   <td>触发每一个匹配元素的select(文 本选定)事件</td> 
  </tr> 
  <tr> 
   <td>change(fn)</td> 
   <td>表单</td> 
   <td>触发每一个匹配元 素的change(值改变)事件</td> 
  </tr> 
  <tr> 
   <td>submit(fn)</td> 
   <td>表单</td> 
   <td>触发每一个匹配元素的submit(表单提交)事件</td> 
  </tr> 
  <tr> 
   <td>复合事件</td> 
   <td></td> 
   <td>描述</td> 
  </tr> 
  <tr> 
   <td>ready(fn)</td> 
   <td></td> 
   <td>当DOM加载完毕触发事件</td> 
  </tr> 
  <tr> 
   <td>hover([fn1,]fn2)</td> 
   <td></td> 
   <td>当鼠标移入触发第-一个fnl,移出触发fn2</td> 
  </tr> 
 </tbody> 
</table>

mouseover()和.mouseout()表示鼠标移入和移出的时候触发。那么 jQuery 还封装了另外 一组：.mouseenter()和.mouseleave()表示鼠标穿过和穿出的时候触发。那么这两组本质上有 什么区别呢？手册上的说明是：.mouseenter()和.mouseleave()这组穿过子元素不会触发， 而.mouseover()和.mouseout()则会触发。

$("div").mousedown(function(e){ 
            
            }).mouseup(function(){ 
              
            })
        })

### 4 event对象的属性 ###

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>type</td> 
   <td>获取这个事件的事件类型，例如: click</td> 
  </tr> 
  <tr> 
   <td>target</td> 
   <td>获取绑定事件的DOM元素</td> 
  </tr> 
  <tr> 
   <td>data</td> 
   <td>获取事件调用时的额外数据</td> 
  </tr> 
  <tr> 
   <td>relatedTarget</td> 
   <td>获取移 入移出目标点离开或进入的那个DOM元素</td> 
  </tr> 
  <tr> 
   <td>currentTarget</td> 
   <td>获取冒泡前触发的DOM元素，等同与this</td> 
  </tr> 
  <tr> 
   <td>pageX/pageY</td> 
   <td>获取相对于页面原点的水平/垂直坐标</td> 
  </tr> 
  <tr> 
   <td>screenX/screenY</td> 
   <td>获取显示器屏幕位置的水平/垂直坐标(非jQuery封装)</td> 
  </tr> 
  <tr> 
   <td>clientX/clientY</td> 
   <td>获取相对于页面视口的水平/垂直坐标(非jQuery封装)</td> 
  </tr> 
  <tr> 
   <td>result</td> 
   <td>获取上一个相同事件的返回值</td> 
  </tr> 
  <tr> 
   <td>timeStamp</td> 
   <td>获取事件触发的时间戳</td> 
  </tr> 
  <tr> 
   <td>which</td> 
   <td>获取鼠标的左中右键(1,2,3)，或获取键盘按键</td> 
  </tr> 
  <tr> 
   <td>altKey/shifKey/ctrlKey/metaKey</td> 
   <td>获取是否按下了alt、 shift、 ctrl(这 三个非jQuery封装)或meta键(IE原生meta键，jQuery 做了封装)</td> 
  </tr> 
 </tbody> 
</table>

//通过 event.type 属性获取触发事件名 
    $('input').click(function(e){  
    alert(e.type); 
    });
    
    
    //通过 event.target 获 取绑定的 DOM 元素 
    $('input').click(function(e){  
    alert(e.target); 
    });
    
    
    //通过 event.data 获取额外数据，可以是数字、字符串、数组、对象 
    $('input').bind('click',123,function(){  //传递 data 数据 
        alert(e.data); //获取数字数据 
    });
    
    //注意：如果字符串就传递：'123'、如果是数组就传递：[123,'abc']，如果是对象就传递： {user:'Lee',age:100}。数组的调用方式是：e.data[1]，对象的调用方式是：e.data.user。
    
    
    //event.data 获取额外数据，对于封装的简写事件也可以使用
    $('input').click({ user:'Lee', age:100},function(e){  
    alert(e.data.user); 
    });
    //注意：键值对的键可以加上引号，也可以不加；在调用的时候也可以使用数组的方式： alert(e.data['user']);

### 5 冒泡和默认行为的一些方法 ###

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>preventDefault()</td> 
   <td>取消某个元素的默认行为</td> 
  </tr> 
  <tr> 
   <td>isDefaultPrevented()</td> 
   <td>判断是否调用了preventDefault()方法</td> 
  </tr> 
  <tr> 
   <td>stopPropagation()</td> 
   <td>取消事件冒泡</td> 
  </tr> 
  <tr> 
   <td>isPropagationStopped()</td> 
   <td>判断是否调用了stopPropagation()方法</td> 
  </tr> 
  <tr> 
   <td>stopImmediatePropagation()</td> 
   <td>取消事件冒泡,并取消该事件的后续事件处理函数</td> 
  </tr> 
  <tr> 
   <td>isImmediatePropagationStopped()</td> 
   <td>判断是否调用了stopImmediatePropagation()方法</td> 
  </tr> 
 </tbody> 
</table>

## 八 JQuery 动画 ##

$("div").hide(2000).show(2000);
    
      $("div").hide(2000,function(){ 
                $(this).show(2000);
            }) 
    
    
    $("div").hide(2000,function(){ 
                $(this).toggle(2000);
            })

### 1 固定动画方法 ###

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>简介</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>slideDown(speed,callback)</td> 
   <td>向上滑动</td> 
  </tr> 
  <tr> 
   <td>slideUp(speed,callback)</td> 
   <td>向下滑动</td> 
  </tr> 
  <tr> 
   <td>slideToggle()</td> 
   <td>向下-向上滑动切换</td> 
  </tr> 
  <tr> 
   <td>fadeIn(speed,callback)</td> 
   <td>淡入</td> 
  </tr> 
  <tr> 
   <td>fadeOut(speed,callback)</td> 
   <td>淡出</td> 
  </tr> 
  <tr> 
   <td>fadeTo()</td> 
   <td>淡出 可设置透明度</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

$("div").slideUp(2000).slideDown(2000);
    
    
    $("div").fadeOut(1000).fadeIn(1000);
    $("div").fadeTo(2000,0.4);//透明到多少

### 2 自定义动画方法 ###

.animate()

注意：一个 CSS 变化就是一个动画效果，上面的例子中，已经有四个 CSS 变化，已经 实现了多重动画同步运动的效果。  
必传的参数只有一个，就是一个键值对 CSS 变化样式的对象。还有两个可选参数分别 为速度和回调函数。

$('.animate').click(function(){  
    $('#box').animate({  
    'width':'300px', 
    'height':'200px', 
    'fontSize':'50px', 
    'opacity':0.5 
    }); 
    });
    
    
    
    $(document).on("click",function(e){ 
                $("div").animate({ 
                    left:e.clientX-25,
                    top:e.clientY-25,
                    width:100,
                    height:100
                },500)
            })

自定义实现列队动画的方式，有两种：

1.  在回调函数中再执行一个动画；
2.  通过连缀或顺序来实现列队动画。 通过依次顺序实现列队动画

## 九 JQuery 插件 ##

扩展jQuery插件的作用是非常强大的，它可以节省大量开发时间。

添加JQuery的两种方法：

*  $.extend()向jquery中添加函数
 *  $.fn上面添加一个方法

### 1 $.fn ###

*  利用$.fn实现获取宽度功能

//实现width功能
    $.fn.widths=function(w){ 
               if(w===undefined) return parseFloat(this.css("width"));
               w=parseFloat(w)
               if(isNaN(w)) return;
               this.css({ 
                   width:w+"px"
               })
            }
    //使用
    
    $("div").widths(true);

*  利用$.fn实现设置背景的功能

//实现设置背景的功能
     $.fn.bgc=function(color){ 
                if(color===undefined) return this.css("backgroundColor");
                this.css("backgroundColor",color);
                return this;
            }
    
    //使用
     $("<div</div>")
                .appendTo("body")
                .width(100)
                .height(100)
                .bgc("red").on("click",function(){ 
    
            })

### 2 $.extend ###

*  实现$.each() 功能

//简单设置一个a方法
     $.extend({ 
                a:function(){ 
                    console.log("aa");
                }
            })
    
    //使用
    $.a(); //打印aa
    
    //实现$.each() 
    $.extend({ 
                eachs:function(list,fn){ 
                    switch(list.constructor){ 
                        case Array:
                        case jQuery:
                        case HTMLCollection:
                        case NodeList:
                        for(var i=0;i<list.length;i++){ 
                            fn(i,list[i]);
                        }
                        break;
                        case Object:
                            for(var prop in list){ 
                                fn(prop,list[prop]);
                            }
                        break;
                        
                        case Set:
                            for(var value of list){ 
                                fn(value,value);
                            }
                        break;
                        case Map:
                             for(var value of list){ 
                                fn(value[0],value[1]);
                            }
                        break;
                    }
                }
            })

# 0 - 0 - 知识点： #

## 一 load事件和ready事件 ##

ready早于load执行。

$(document).ready(function(){ 
       // 当DOM全部创建完成后，图片没有加载完成前
    
       })
    	//当DOM全部创建完成后
       window.onload=function(){ 
    
       }

## 二 JQuery抛发事件 ##

trigger：会触发默认事件

triggerHandler：这个不会触发默认事件

$("form").trigger("submit");//会触发默认事件
    
    //$("form").triggerHandler("submit");//这个不会触发默认事件
    
    
    //事件抛发流程
    
    $("div").on("chilema",function(e,a,b,c){ 
         console.log(e,a,b,c);
      })
    $("div").trigger("chilema",[10,100,1000])