摘要：一事件的綁定與解綁的簡單綁定事件新版本使用為指定的元素添加一個或多個事件處理程序，并規定當這個事件發生時運行的函數。將整個文件放至項目的任意目錄不要移動其文件結構，它們具有完整的依賴體系。

為指定的元素添加一個或多個事件處理程序，并規定當這個事件發生時運行的函數。on()方法適用于當前或未來的元素，如用腳本創建的新元素。

參數說明：

events 一個或多個用空格分隔的事件類型

fn 該事件被觸發時執行的函數

eg：

    
hello  world!
    
    

jQuery 的其他事件如下：

參數說明：

events: 一個或多個用空格分隔的事件類型

data: 需要傳遞的參數，作為event.data的屬性值

fn: 該事件被觸發時執行的函數。

針對已經存在的元素進行事件的設置

events: 指定綁定的事件名稱，多個參數用空格隔開

data: 作為event.data屬性值傳遞給事件對象的額外數據對象

fn: 回調函數(事件處理函數)

    點擊
  
  

bind 支持的事件名稱

blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error

使用mouseover、mouseout作為案例;（mouseenter mouseleave）

    移動/離開
  
  

     移動/點擊
  
  

    放上/點擊/離開
  
  

Off(events, selector, fn)

events: 想要移除的事件名稱

selector: 移除那一個DOM節點的事件(必須和傳入的DOM節點一致)

fn: 想要移除的綁定函數

事件解綁分為以下幾種情況：

$(selector).unbind(); 移除所有的事件，看下面的例子：

    放上/點擊/離開
  
  

$(selector).unbind("mouseover mouseout");//移除指定的事件
    放上/點擊/離開
  
  


$(selector).off(); // 移除所有 這個和上面的bind一樣，這里就不在舉例子了
$(selector).off("click"); // 移除點擊事件（而不會移除其他的事件）,這里也不舉例子了
$(“body”).off(events,selector，fn); // 移除事件，同時會移除函數

eg:
      function change(){
      console.log("I LOVE YOU")
    }
    $("body").on("mouseover click mouseout","button",change);
    $("body").off("mouseover","button",change);

二、jQuery模擬事件

語法：trigger(type,data)
解釋一：type: 指定要模擬的事件名稱
解釋二：data: 傳遞給事件處理函數的附加參數

     
    
點擊
    
    // 默認讓該函數輸出一次，是模擬的結果，然后點擊數時在觸發一次

三、動畫顯示與隱藏
3.1 show([speed,[easing],[fn]])

語法：顯示隱藏的匹配元素
解釋一：speed:  "slow", "normal"(400),  or "fast"或毫秒數值(如：1000)
解釋二：easing: 默認是"swing"變加速運動，參數"linear"勻速運動
解釋三：fn: 在動畫完成時執行的函數，每個元素執行一次

     
    
    

3.2 hide([speed,[easing],[fn])

語法：隱藏顯示的元素
解釋一：speed:  "slow", "normal",  or "fast"或毫秒數值(如：1000)
解釋二：easing: 默認是"swing"變加速運動，參數"linear"勻速運動
解釋三：fn: 在動畫完成時執行的函數，每個元素執行一次

     
愛你喲！
    
    

3.3 toggle([speed],[easing], [callback])
語法：在被選元素上進行 hide() 和 show() 之間的切換
注意： 這里的例子就不舉了，很簡單，一句話：顯示的時候讓他消失，隱藏的時候讓他結束
3.4 slideDown([speed],[easing],[fn])
用法：向下展開動態顯示元素
3.5 slideUp([speed,[easing],[fn]])
用法：向上展開動態顯示元素
以上兩種合例：
     折疊
     伸展
    

    
    

3.6 fadeIn([speed],[easing], [callback])
語法：淡入（隱藏）
3.7  fadeOut([speed],[easing], [callback])
語法： 淡出（顯示）
以上兩個合例：
    淡入
  淡出
  

  
  

3.8 fodeTo(speed,opcity,fn)

語法：將被選元素的不透明度逐漸地改變為指定的值
opcity:必需。規定要淡入或淡出的透明度。必須是介于 0.00 與 1.00 之間的數字

3.9 其他函數
fadeToggle和slideToggle 
解釋一下就行了：很簡單，意思就是 有則顯示沒有，沒有則有
四、自定義動畫
4.1 animate(properties,[duration],[easing],[callback])
參數解釋

properties: 設置相關動畫需要的CSS的屬性內容
duration:  設置自定義動畫執行的時長(毫秒)
easing:    默認jQuery提供"linear" 和 "swing
callback:  自定義動畫執行完畢后的回調函數

     點擊
    

    
    

4.2 animate(properties,options)
參數解釋

properties: 設置相關動畫需要的CSS的屬性內容
options包括以下屬性

?    duration - 設置自定義動畫執行的時長(毫秒)
?    easing  - 默認jQuery提供"linear" 和 "swing".
?    complete - 自定義動畫執行完畢后的回調函數
?    queue   - Boolean值,(默認值: true) 設定為false將使此動畫不進入動畫隊列，會立刻執行
eg：
    點擊
    

    
    

五、jQuery常見插件的使用
5.1 .data()跟.attr() 方法的區別

獲取數據的時候，attr方法需要傳入參數，data方法可以不傳入參數，這時候獲取到的是一個js對象，即使沒有任何data屬性
獲取到的數據類型不同，attr方法獲取到的數據類型是字符串(String)，data方法獲取到的是相應的類型。
data方法獲取到數據之后，我們使用一個對象來接收它，那么就可以直接操作(設置值或獲取值)這個對象，而attr方法不可以
data-attribute屬性會在頁面初始化的時候放到jQuery對象，被緩存起來，而attr方法不會

5.2 全局jQuery對象擴展方法
        
    
    

5.3 普通jQuery DOM原型對象擴展方法
    
    
    

5.4 第三方插件( laydate 插件 )
layDate 日期與時間組件

官網：http://laydate.layui.com/

如何使用laydate插件

?    下載解壓。
?    將laydate整個文件放至項目的任意目錄 ( 不要移動其文件結構，它們具有完整的依賴體系 )。
?    只需在頁面引入laydate.js即可
    
    
    
    

注意：還有其他的功能，這里小編就不一一寫了，關鍵時太多了，要是你有用到這個東西，就去官網上進行查看
5.5 第三方插件( jQuery.lazyload.js )
Lazy Load 是一個用 JavaScript 編寫的 jQuery 插件. 它可以延遲加載長頁面中的圖片. 在瀏覽器可視區域外的圖片不會被載入, 直到用戶將頁面滾動到它們所在的位置. 這與圖片預加載的處理方式正好是相反的。
在包含很多大圖片長頁面中延遲加載圖片可以加快頁面加載速度，瀏覽器將會在加載可見圖片之后即進入就緒狀態,在某些情況下還可以幫助降低服務器負擔.


官網地址：http://www.jq22.com/jquery-in...

這些東西小編真的講不通，只有通過官網自己去看，還有真的是太多了

5.6 第三方插件( masonry )瀑布流

官網: http://masonry.desandro.com/

Masonry是 一款非常強大的jQuery動態網格布局插件，可以幫助開        發人員快速開發瀑布流效果。很多網站都有使用這樣的布局，比如：淘        寶的哇哦、花瓣網、蘑菇街
具體用法：找官網

5.7 第三方插件(Swiper)

官網地址：https://www.swiper.com.cn/

引入swiper.css


.
引入swiper.jquery.min.js

具體用法：見官方
5.8 unslider(輪播插件)
小編懶語：這些插件并不是一時半會就學會的，如果你需要那個就去官方網站上進行查找，里面有壓縮包，還有具體的用法
5.9 echarts
官方地址：http://echarts.baidu.com/
5.10 highcharts
官方地址：http://www.hcharts.cn/
5.11 插件封裝模板
    
5.12 fullpage插件
官網：http://www.jq22.com/jquery-in...
六、總結
小編寫的這節內容有水的部分，比如 插件，其實插件這部分需要自己去摸索，自己去官網查看，我只是列舉了幾個重要的插件，如果你有需要，就認真一點去官網上看看，或者自己寫一個讓小編我see see！