jQuery動畫效果、jQuery插件使用

MkkHou 發(fā)布于2019-08-29 16:16 / 1340人閱讀

摘要：一事件的綁定與解綁的簡單綁定事件新版本使用為指定的元素添加一個或多個事件處理程序，并規(guī)定當(dāng)這個事件發(fā)生時運(yùn)行的函數(shù)。將整個文件放至項(xiàng)目的任意目錄不要移動其文件結(jié)構(gòu)，它們具有完整的依賴體系。

一、事件的綁定與解綁 1.1 jQuery的簡單綁定 1.1.1 on(events,fn)事件(新版本使用)

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

參數(shù)說明：

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

fn 該事件被觸發(fā)時執(zhí)行的函數(shù)

eg：

    hello  world!

jQuery 的其他事件如下：

1.1.2 on (events,{data},fn)事件

參數(shù)說明：

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

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

fn: 該事件被觸發(fā)時執(zhí)行的函數(shù)。

1.1.4 bind(events,{data},fn)事件

針對已經(jīng)存在的元素進(jìn)行事件的設(shè)置

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

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

fn: 回調(diào)函數(shù)(事件處理函數(shù))

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

1.2 jQuery多事件綁定

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

1.2.1 直接事件的綁定

1.2.2 on 多事件綁定

1.2.3 on 給不同的事件綁定不同的函數(shù)

1.3 jQuery事件解綁

Off(events, selector, fn)

events: 想要移除的事件名稱

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

fn: 想要移除的綁定函數(shù)

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

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

    
  
  
$(selector).unbind("mouseover mouseout");//移除指定的事件
    
  
  

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

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: 傳遞給事件處理函數(shù)的附加參數(shù)

     
    點(diǎn)擊
    
    // 默認(rèn)讓該函數(shù)輸出一次，是模擬的結(jié)果，然后點(diǎn)擊數(shù)時在觸發(fā)一次

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

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

     愛你喲！
    
    

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

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

     愛你喲！
    
    

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

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

3.8 fodeTo(speed,opcity,fn)

語法：將被選元素的不透明度逐漸地改變?yōu)橹付ǖ闹?/p>
opcity:必需。規(guī)定要淡入或淡出的透明度。必須是介于 0.00 與 1.00 之間的數(shù)字

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

properties: 設(shè)置相關(guān)動畫需要的CSS的屬性內(nèi)容
duration:  設(shè)置自定義動畫執(zhí)行的時長(毫秒)
easing:    默認(rèn)jQuery提供"linear" 和 "swing
callback:  自定義動畫執(zhí)行完畢后的回調(diào)函數(shù)

     
    
    
    

4.2 animate(properties,options)
參數(shù)解釋

properties: 設(shè)置相關(guān)動畫需要的CSS的屬性內(nèi)容
options包括以下屬性

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

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

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

5.2 全局jQuery對象擴(kuò)展方法
        
    
    

5.3 普通jQuery DOM原型對象擴(kuò)展方法
    
    
    

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

官網(wǎng)：http://laydate.layui.com/

如何使用laydate插件

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

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


官網(wǎng)地址：http://www.jq22.com/jquery-in...

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

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

官網(wǎng): http://masonry.desandro.com/

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

5.7 第三方插件(Swiper)

官網(wǎng)地址：https://www.swiper.com.cn/

引入swiper.css


.
引入swiper.jquery.min.js

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