Jquery 學習二

1、事件編程

一、基本事件（以方法形式存在的）

基本語法：

原生Javascript代碼中的事件綁定方式：

DOM對象.事件 = 事件的處理程序

 

jQuery代碼中的事件綁定方式：

jQuery對象.事件(事件處理程序)

二、經常使用的事件列表

• blur(fn) ：當失去焦點時觸發
• change(fn) ：當下拉選框狀態改變時觸發
• click(fn) ：當單擊時觸發
• dblclick(fn) ：當雙擊時觸發
• focus(fn) ：當得到焦點時觸發
• keydown(fn) ：當鍵盤按下時觸發
• keyup(fn) ：當鍵盤彈起時觸發
• keypress(fn) ：當鍵盤按下時觸發
• load(fn) ：當頁面載入時觸發，與ready方法功能一致
• unload(fn) ：當頁面關閉時觸發，其處理程序中不能放置alert語句
• mousedown(fn) ：當鼠標按下時觸發
• mouseup(fn) ：當鼠標彈起時觸發
• mousemove(fn) ：當鼠標移動時觸發
• mouseover(fn) ：當鼠標懸浮時觸發
• mouseout(fn) ：當鼠標離開時觸發
• resize(fn) ：當窗口大小改變時觸發
• scroll(fn) ：當滾動條滾動時觸發
• select(fn) ：（瞭解），當文本框文本選中時觸發
• submit(fn) ：當表單提交時觸發

示例代碼：

問題：在原生Javascript代碼中，事件綁定一共有三種形式：

① 行內綁定

② 動態綁定

③ 事件監聽

那在jQuery中，其事件綁定是以哪一種形式呢？

運行結果：彈出hello，在彈出world。

因此由以上案例能夠得出結論：在jQuery中，其事件綁定都是以事件監聽的形式存在的且其調整了事件監聽的兼容性問題並更改了事件的觸發順序，統一爲正序觸發（先綁定先觸發）。

三、事件切換

• hover(over,out) ：鼠標懸浮與鼠標離開事件

參數說明：

over：鼠標懸浮事件，一般是一個匿名函數

out：鼠標離開事件，一般是一個匿名函數

 

• toggle(fn,fn,…) ：鼠標點擊切換事件

參數說明：

fn：鼠標點擊時觸發的事件處理程序，能夠有多個

當第一次單擊時，觸發第一個fn事件處理程序

當第二次單擊時，觸發第二個fn事件處理程序

…

例1：hover方法的使用

例2：toggle方法的使用

四、事件處理（封裝的函數，專門用於事件綁定）

• bind(type,[data],fn) ：爲某個元素綁定相關的事件處理程序

參數說明：

type：不帶'on'前綴的事件類型

[data]：（瞭解），事件發生時所傳遞的參數，若是沒有則直接寫第三個參數便可

fn：事件的處理程序

• bind({type:fn,type:fn}) ：爲某個元素綁定多個事件處理程序，參數是一個json數據

參數說明：

type：不帶'on'前綴的事件類型

fn：事件的處理程序

• one(type,[data],fn) ：爲某個元素進行一次綁定，只觸發一次

參數說明：

type：不帶'on'前綴的事件類型

[data]：（瞭解），事件發生時所傳遞的參數，若是沒有則直接寫第三個參數便可

fn：事件的處理程序

• unbind([type]) ：移除事件

參數說明：

[type] ：可選參數，要移除的事件類型，若是不寫表明移除全部事件

 

例1：使用bind方法爲元素綁定事件

例2：使用one方法進行事件處理

例3：使用unbind方法移除事件

在原生Javascript代碼中，事件移除必須有一個前提：在事件綁定時，其事件的處理程序必須是一個有名函數，可是在jQuery代碼中只須要提供要移除的事件類型便可。

五、事件綁定中的this指向

在Javascript中有一個特殊的對象，叫作this，其在不一樣環境下其指向也是不一樣的：

行內綁定中this指向window對象

動態綁定中this指向當前正在操做的dom對象

事件監聽中其this具備兼容性問題，在IE內核瀏覽器下其指向全局window對象，W3C內核瀏覽器下其指向當前正在操做的dom對象

 

問題：jQuery中，其事件綁定都是採用事件監聽的形式實現的，那麼其內部的this又指向何方呢？

調試結果以下圖所示：

由此能夠得出結論：在jQuery事件綁定中，其內部的this指向當前正在操做的DOM對象。

六、事件冒泡

之因此稱之爲事件冒泡是指事件的響應會像水泡同樣上升至最頂級對象。

由上圖可知，在jQuery中依然存在事件冒泡行爲，有些狀況下冒泡是人爲設計的，可是大多數狀況下，冒泡是須要禁止的！

IE內核瀏覽器：

window.event.cancelBubble = true;

W3C內核瀏覽器：

dom對象.事件 = function(event) {

event.stopPropagation();

}

在jQuery中，其解決了兼容性問題，統一更改成：

event.stopPropagation();

經過以上代碼測試可知，其解決了IE內核與W3C內核瀏覽器的兼容性問題，並解決了事件冒泡，因此jQuery其實是對event進行了二次封裝。

七、默認行爲

在html代碼中，不少標籤具備本身的默認行爲。

如a超級連接標籤，單擊後能夠跳轉到指定頁面

如submit按鈕，單擊後能夠自動提交表單數據到服務器端頁面

可是有些狀況下，默認行爲是須要禁止的：

IE內核瀏覽器：

window.event.returnValue = false;

W3C內核瀏覽器：

dom對象.事件 = function(event){

event.preventDefault();

}

在jQuery中，其禁止行爲的方法，統一更改成event.preventDefault()實現：

2、jQuery中的效果

• 基本
• 滑動
• 淡入淡出
• 自定義動畫

一、基本效果（顯示或隱藏）

• show() ：顯示
• show(speed,[callback]) ：以動畫效果顯示
• hide() ：隱藏
• hide(speed,[callback]) ：以動畫效果隱藏
• toggle() ：切換顯示或隱藏
• toggle(switch) ：顯示或隱藏。switch，布爾類型的值，true：顯示，false：隱藏
• toggle(speed,[callback]) ：以動畫效果顯示或隱藏

參數說明：

speed：動畫的速度或動畫的持續時間

若是採用動畫的速度，其值能夠是如下三種狀況：

"slow" ：緩慢的

"normal" ：正常的

"fast" ：快速的

若是採用動畫的持續事件，其能夠是固定值，默認單位爲毫秒

[callback]：可選參數，動畫完成時所觸發的回調函數

 

示例代碼：

二、滑動效果（上下滑動）

• slideDown(speed,[callback]) ：以動畫效果向下滑動
• slideUp(speed,[callback]) ：以動畫效果向上滑動
• slideToggle(speed,[callback]) ：以動畫效果向上或向下滑動

參數說明：

speed：動畫的持續時間

[callback]：可選參數，動畫完成時所觸發的事件處理程序

 

示例代碼：

三、淡入淡出效果（針對元素的透明度）

• fadeIn(speed,[callback]) ：以動畫效果淡入
• fadeOut(speed,[callback]) ：以動畫效果淡出

參數說明：

speed：動畫的持續事件

[callback]：可選參數，動畫完成時所觸發的回調函數

• fadeTo(speed,opacity,[callback]) ：以動畫效果設置元素的透明度

參數說明：

speed：動畫的持續時間

opacity：元素的透明度，0全透明1不透明 0-1之間半透明

[callback]：可選參數，動畫的持續時間

特別注意fadeOut與fadeTo之間對透明度爲0的處理有區別，fadeOut若是消失後，其再也不佔用原有位置，可是fadeTo設置爲全透明時，其默認仍是佔有原來的位置。

 

示例代碼：

四、自定義動畫

animate(params,[speed], [callback]) ：自定義動畫效果

參數說明：

params ：要求是一個json格式的數據

[speed] ：動畫的持續時間

[callback] ：動畫完成時所觸發的回調函數

示例代碼：

五、幾個小案例

例1：一組圖片的淡入淡出

例2：仿hao123左側導航功能

3、jQuery文檔操做

• 插入
• 刪除
• 複製
• 替換
• 包裹
• 查找

一、內部插入

• append(content) ：在元素的尾部插入content內容
• appendTo(content) ：把匹配到的元素插入到content元素的尾部
• prepend(content) ：在元素的頭部插入content內容
• prependTo(content) ：把匹配到的元素插入到content元素的頭部

例如：<div>worldhelloworld</div>

示例代碼：

二、外部插入

• after(content) ：在元素的尾部插入content內容
• before(content) ：在元素的頭部插入content內容
• insertAfter(content) ：把匹配到的內容插入到content元素的尾部
• insertBefore(content) ：把匹配到的內容插入到content元素的頭部

例如：world<div>hello</div>world

示例代碼：

三、刪除操做（節點）

• empty() ：清空元素的內容，但不刪除元素自己
• remove() ：刪除整個元素

示例代碼：

四、複製操做

• clone() ：複製元素自己，但不復制元素自己的事件
• clone(true) ：除了複製元素自己，還要複製元素自己的事件

擴展：天貓購物車

五、替換操做

• html() ：替換元素的內容
• replaceWith() ：替換元素自己

六、包裹操做

• wrap() ：對每個元素進行單獨包裹
• wrapAll() ：對全部元素進行一次包裹
  • wrapInner() ：對每個元素的內容進行單獨包裹

例如：<div><strong>hello</strong></div>

七、查找操做

• eq(index) ：查找索引等於index的元素
• filter(expr) ：查找某個指定條件的元素，不是過濾，而是縮小查詢範圍
• not(expr) ：查找除指定元素外的其餘元素
• children([expr]) ：查找當前元素的全部子元素（一級）
• find(expr) ：查找當前元素的全部後代元素（任何級別）
• next([expr]) ：查找緊鄰的下一個元素
• prev([expr]) ：查找緊鄰的上一個元素
• parent([expr]) ：查找當前元素的父元素
• siblings([expr]) ：查找當前元素的全部同級兄弟元素（不管上下）

 

示例代碼：

4、jQuery插件擴展機制

一、爲何須要插件擴展機制

在實際項目開發中，可能咱們須要的某個功能在jQuery中並無進行封裝，那這個時候咱們就能夠經過jQuery中的插件擴展機制對其進行擴充。

二、基本語法

jQuery.fn.extend(object)

特別說明：在jQuery源代碼中，jQuery與$是徹底等價的，以下圖所示：

參數說明：

object ：要求是一個json格式的對象，語法以下：

jQuery.fn.extend({

    //擴展函數名稱:具體程序實現

    fn1:function(){},

    fn2:function(){},

    ......

});

特別說明：在jQuery插件擴展機制中，也存在一個特殊對象，叫作this，其指向了當前正在操做的jQuery對象。

三、示例代碼

四、綜合案例——實現全選、全不選、反選功能