jQuery事件

事件注冊

語法：element.事件(function(){})

$('div').click(function(){  事件處理程式 })  

其他事件和原生基本一致，比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等

事件處理

on() 系結事件

on() 方法在匹配元素上系結一個或多個事件的事件處理函式

語法：element.on(events,[selector],fn)

引數說明：

• events:一個或多個用空格分隔的事件型別，如"click"或"keydown"
• selector: 元素的子元素選擇器
• fn:回呼函式 ，即系結在元素身上的偵聽函式

好處：

1. 可以系結多個事件，多個處理事件處理程式

 $('div').on({
	  mouseover: function(){處理代碼}, 
	  mouseout: function(){處理代碼},
	  click: function(){處理代碼}	
});       

2. 可以事件委派操作 ，事件委派的定義就是，把原來加給子元素身上的事件系結在父元素身上，就是把事件委派給父元素，

$('ul').on('click', 'li', function() {處理代碼});
//事件系結在ul身上，但觸發物件是ul的子元素li       

3. 動態創建的元素，click() 沒有辦法系結事件， on() 可以給動態生成的元素系結事件

 $('div').on('click','p', function(){處理代碼});     

一次性事件系結： 如果有的事件只想觸發一次， 可以使用 one() 來系結事件

語法：element.one(events,[selector],fn)

$("p").one("click", function() {
    alert('一次系結');
})

off() 解綁事件

off() 方法可以移除通過 on() 方法添加的事件處理程式

語法：element.off(events,[selector],fn)

$("p").off() // 解綁p元素所有事件處理程式
$("p").off( "click")  // 解綁p元素上面的點擊事件 后面的 foo 是偵聽函式名
$("ul").off("click", "li");   // 解綁事件委托

trigger() 自動觸發事件

有些事件希望自動觸發, 比如輪播圖自動播放功能跟點擊右側按鈕一致，可以利用定時器自動觸發右側按鈕點擊事件，不必滑鼠點擊觸發

語法：element.事件()
語法：element.trigger(事件)
語法：element.triggerHandler(事件) 注意：不會觸發元素的默認行為

$('p').on('click', function () {
  	alert('hi~');
}); 
$('p').trigger('click'); // 此時自動觸發點擊事件，不需要滑鼠點擊

事件物件

事件被觸發，就會有事件物件的產生

語法：element.on(events,[selector],function(event) {})

• 阻止默認行為：event.preventDefault() 或者 return false
• 阻止冒泡：event.stopPropagation()

$(function() {
    $(document).on('click', function() {
        console.log('點擊了document');

    })
    $('div').on("click", function(event) {
        // console.log(event);
        console.log('點擊了div');
        event.stopPropagation();
    })
})

jQuery其他方法

jQuery物件拷貝

把某個物件拷貝（合并） 給另外一個物件使用，此時可以使用 $.extend() 方法

語法： $.extend([deep], target, object1, [objectN])

1. deep: 如果設為true 為深拷貝， 默認為false 淺拷貝
2. target: 要拷貝的目標物件
3. object1: 待拷貝到第一個物件的物件
4. objectN: 待拷貝到第N個物件的物件

淺拷貝：是把被拷貝的物件復雜資料型別中的地址拷貝給目標物件，修改目標物件會影響被拷貝物件
深拷貝：完全克隆(拷貝的物件,而不是地址)，修改目標物件不會影響被拷貝物件

$(function() {
    var targetObj = {
        id: 0,
        msg: {
            sex: '男'
        }
    };
    var obj = {
        id: 1,
        name: 'andy',
        msg: {
            age: 18
        }
    };
    // 1. 淺拷貝把原來物件里面的復雜資料型別地址拷貝給目標物件
    $.extend(targetObj, obj);
  	targetObj.msg.age = 20;
    console.log(targetObj); //msg :{sex: "男", age: 20}
    console.log(obj); //msg :{sex: "男", age: 20}
    // 2. 深拷貝把里面的資料完全復制一份給目標物件 如果里面有不沖突的屬性,會合并到一起 
    $.extend(true, targetObj, obj);
    targetObj.msg.age = 20;
    console.log(targetObj); // msg :{sex: "男", age: 20}
    console.log(obj); //msg :{sex: "男", age: }
})

多庫共存

jQuery使用 $ 作為標示符，隨著jQuery的流行,其他 js 庫也會用這 $ 作為識別符號， 這樣一起使用會引起沖突

$(function() {
    function $(ele) {
        return document.querySelector(ele);
    }
    console.log($('div'));
    // 1. 如果 $ 符號沖突 使用 jQuery
    jQuery.each();
    // 2. 讓jquery 釋放對 $ 控制權 自己決定名字
    var zidingyi = jQuery.noConflict();
    console.log(zidingyi('span'));
    zidingyi.each();
})

jQuery解決方案：

• 把里面的 $ 符號 統一改為 jQuery， 比如 jQuery(’‘div’’) jQuery
• 變數規定新的名稱：$.noConflict() ， 比如var xx = $.noConflict();

jQuery插件

jQuery插件常用網站：

• jQuery 插件庫
• jQuery之家

jQuery 插件使用步驟：

• 引入相關檔案，（jQuery 檔案 和 插件檔案）
• 復制相關html、css、js (呼叫插件)

應用：

• 瀑布流
• 圖片懶加載（圖片使用延遲加載在可提高網頁下載速度，它也能幫助減輕服務器負載） 當頁面滑動到可視區域，再顯示圖片， 注意，此時的js引入檔案和js呼叫必須寫到 DOM元素（圖片）最后面
• 全屏滾動（fullpage.js）

bootstrap JS 插件：

bootstrap 框架也是依賴于 jQuery 開發的，因此里面的 js插件使用 ，也必須引入jQuery 檔案