1.1. jQuery 事件註冊
jQuery 爲我們提供了方便的事件註冊機制，是開發人員抑鬱操作優缺點如下：
-
優點: 操作簡單，且不用擔心事件覆蓋等問題。
-
缺點: 普通的事件註冊不能做事件委託，且無法實現事件解綁，需要藉助其他方法。
語法
//單個事件註冊
element.事件(function(){})
$("div").click(function(){事件處理程序})
其他事件和原生基本一致
比如mouseover,mouseout,blur,focus,change,keydown,keyup,resize,scroll等
演示代碼
<body>
<div></div>
<script>
$(function() {
// 1. 單個事件註冊
$("div").click(function() {
$(this).css("background", "purple");
});
$("div").mouseenter(function() {
$(this).css("background", "skyblue");
});
})
</script>
</body>
1.2. jQuery 事件處理
因爲普通註冊事件方法的不足，jQuery又開發了多個處理方法，重點講解如下：
-
on(): 用於事件綁定，目前最好用的事件綁定方法
-
off(): 事件解綁
-
trigger() / triggerHandler(): 事件觸發
1.2.1 事件處理 on() 綁定事件
因爲普通註冊事件方法的不足，jQuery又創建了多個新的事件綁定方法bind() / live() / delegate() / on()等，其中最好用的是: on()
語法
element.on(events,selector,fn)
1.events:一個或多個用空格分隔的事件類型,如"click"或"keydown"
2.selector:元素的子元素選擇器
3.fn:回調函數,即綁定在元素申訴的偵聽函數
演示代碼
<body>
<div></div>
<ul>
<li>我們都是好孩子</li>
<li>我們都是好孩子</li>
<li>我們都是好孩子</li>
</ul>
<ol></ol>
<script>
$(function() {
// (1) on可以綁定1個或者多個事件處理程序
// $("div").on({
// mouseenter: function() {
// $(this).css("background", "skyblue");
// },
// click: function() {
// $(this).css("background", "purple");
// }
// });
$("div").on("mouseenter mouseleave", function() {
$(this).toggleClass("current");
});
// (2) on可以實現事件委託（委派）
//事件委派的定義就是,把原來加給子元素身上的事件綁定在父元素身上,就是把事件委派給父元素
// click 是綁定在ul 身上的，但是 觸發的對象是 ul 裏面的小li
// $("ul li").click();
$("ul").on("click", "li", function() {
alert(11);
});
// (3) on可以給未來動態創建的元素綁定事件
$("ol").on("click", "li", function() {
alert(11);
})
var li = $("<li>我是後來創建的</li>");
$("ol").append(li);
})
</script>
</body>
1.2.3. 事件處理 off() 解綁事件
off()方法可以移除通過on()方法添加的事件處理程序
演示代碼
<body>
<div></div>
<ul>
<li>我們都是好孩子</li>
<li>我們都是好孩子</li>
<li>我們都是好孩子</li>
</ul>
<p>我是一個P標籤</p>
<script>
$(function() {
// 事件綁定
$("div").on({
click: function() {
console.log("我點擊了");
},
mouseover: function() {
console.log('我鼠標經過了');
}
});
$("ul").on("click", "li", function() {
alert(11);
});
// 1. 事件解綁 off
// $("div").off(); // 這個是解除了div身上的所有事件
$("div").off("click"); // 這個是解除了div身上的點擊事件
$("ul").off("click", "li"); //解綁事件委託
// 2. one() 但是它只能觸發事件一次
$("p").one("click", function() {
alert(11);
})
})
</script>
</body>
1.2.4. 事件處理 trigger() 自動觸發事件
有些時候，在某些特定的條件下，我們希望某些事件能夠自動觸發, 比如輪播圖自動播放功能跟點擊右側按鈕一致。可以利用定時器自動觸發右側按鈕點擊事件，不必鼠標點擊觸發。由此 jQuery 爲我們提供了兩個自動觸發事件 trigger() 和 triggerHandler() ;
演示代碼
<body>
<div></div>
<input type="text">
<script>
$(function() {
// 綁定事件
$("div").on("click", function() {
alert(11);
});
// 自動觸發事件
// 1. 元素.事件()
// $("div").click();會觸發元素的默認行爲
// 2. 元素.trigger("事件")
// $("div").trigger("click");會觸發元素的默認行爲
$("input").trigger("focus");
// 3. 元素.triggerHandler("事件") 就是不會觸發元素的默認行爲
$("input").on("focus", function() {
$(this).val("你好嗎");
});
// 一個會獲取焦點，一個不會
$("div").triggerHandler("click");
// $("input").triggerHandler("focus");
});
</script>
</body>
1.3. jQuery 事件對象
事件被觸發,就會有事件對象的產生
語法
element.on(event,selector,function(event){})
阻止默認行爲:event.preventDefault() 或者return false
阻止冒泡:event.stopPropagation()
演示代碼
<body>
<div></div>
<script>
$(function() {
$(document).on("click", function() {
console.log("點擊了document");
})
$("div").on("click", function(event) {
// console.log(event);
console.log("點擊了div");
event.stopPropagation();
})
})
</script>
</body>
1.4. jQuery 拷貝對象
jQuery中分別爲我們提供了兩套快速獲取和設置元素尺寸和位置的API，方便易用，內容如下。
語法
$.extend([deep],target,object1,[objectN])
1.deep:如果設爲true爲深拷貝,默認false爲淺拷貝
2.target:要拷貝的目標對象
3.object1:待拷貝到的第一個對象的對象
4.objectN:待拷貝到第N個對象的對象
5.淺拷貝是把被拷貝的對象複雜數據類型中的地址拷貝給目標對象,修改目標對象會影響被拷貝的對象
6.深拷貝,前面加true,完全克隆(拷貝的對象,而不是地址),修改目標對象不會影響被拷貝對象.如果有不衝突的屬性,會合並
演示代碼
<script>
$(function() {
// 1.合併數據
var targetObj = {};
var obj = {
id: 1,
name: "andy",
msg:{
age:18
}
};
// $.extend(target, obj);
$.extend(targetObj, obj);
console.log(targetObj);
targetObj.msg.age=20;
console.log(targetObj);
console.log(targetObj);
// 2. 會覆蓋 targetObj 裏面原來的數據
var targetObj = {
id: 0
};
var obj = {
id: 1,
name: "andy"
};
// $.extend(target, obj);
$.extend(targetObj, obj);
console.log(targetObj);
})
</script>
1.5. jQuery 多庫共存
實際開發中，很多項目連續開發十多年，jQuery版本不斷更新，最初的 jQuery 版本無法滿足需求，這時就需要保證在舊有版本正常運行的情況下，新的功能使用新的jQuery版本實現，這種情況被稱爲，jQuery 多庫共存。
演示代碼
<script>
$(function() {
// 讓jquery 釋放對$ 控制權 讓用自己決定
var suibian = jQuery.noConflict();
console.log(suibian("span"));
})
</script>