《雲頂之弈》11.11版本復甦魔女上分陣容推薦
單個事件註冊
事件方法觸發器或新增一個函式到被選元素的事件處理程式。
觸發例項：
$("button#demo").click()
上面的例子將觸發 id="demo" 的 button 元素的 click 事件。
繫結例項：
$("button#demo").click(function(){$("img").hide()})
上面的例子會在點選 id="demo" 的按鈕時隱藏所有影象。
on()方法
on() 方法在被選元素及子元素上新增一個或多個事件處理程式。
自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。該方法給 API 帶來很多便利，我們推薦使用該方法，它簡化了 jQuery 程式碼庫。
注意：使用 on() 方法新增的事件處理程式適用於當前及未來的元素（比如由指令碼建立的新元素）。
提示：如需移除事件處理程式，請使用 off() 方法。
提示：如需新增只執行一次的事件然後移除，請使用 one() 方法。
語法
$(selector).on(event,childSelector,data,function)
| 引數 | 描述 |
|---|---|
| event | 必需。規定要從被選元素新增的一個或多個事件或名稱空間。 由空格分隔多個事件值，也可以是陣列。必須是有效的事件。 |
| childSelector | 可選。規定只能新增到指定的子元素上的事件處理程式（且不是選擇器本身，比如已廢棄的 delegate() 方法）。 |
| data | 可選。規定傳遞到函式的額外資料。 |
| function | 可選。規定當事件發生時執行的函式。 |
繫結多個事件
繫結多個事件有兩種語法：
一、將事件與方法以物件方式傳入
二、若多個事件為同一方法，可以將事件設定為字串
例：
<script> //多個事件使用同一方法 $('.box').on('mouseenter mouseleave', function() { console.log('hello world'); }); //多個事件多個方法 $('.box').on({ mouseenter: function() { $(this).css('backgroundColor', 'skyblue'); }, mouseleave: function() { $(this).css('backgroundColor', 'pink') } }); </script>
實現事件委託
on()方法可以實現事件委託，其傳入的引數有一個childSelector可以實現對子節點（注意：只能是子節點，孫子節點就不行了）的事件委託，事件還是繫結在父節點上的，通過事件冒泡來實現事件的方法
例：
<script>
$('ul').on('click', 'li', function() {
console.log(123);
});
</script>
實現未來節點繫結
on()方法還可以為還未建立的節點繫結事件
例：
<body>
<ul></ul>
<script>
$('ul').on('click', 'li', function() {
console.log(111);
});
var li = $('<li>123</li>');
$('ul').append(li);
</script>
<div class="box"></div>
<script>
$('.box').on({
mouseenter: function() {
console.log(123);
}
});
var div = $('<div class="box">123</div>');
$('.box').append(div);
</script>
</body>
移除事件
off()方法
off() 方法通常用於移除通過 on() 方法新增的事件處理程式。
自 jQuery 版本 1.7 起，off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。該方法給 API 帶來很多便利，我們推薦使用該方法，它簡化了 jQuery 程式碼庫。
注意：如需移除指定的事件處理程式，當事件處理程式被新增時，選擇器字串必須匹配 on() 方法傳遞的引數。
提示：如需新增只執行一次的事件然後移除，請使用 one() 方法。
語法
$(selector).off(event,selector,function(eventObj),map)
| 引數 | 描述 |
|---|---|
| event | 必需。規定要從被選元素移除的一個或多個事件或名稱空間。 由空格分隔多個事件值。必須是有效的事件。 |
| selector | 可選。規定新增事件處理程式時最初傳遞給 on() 方法的選擇器。 |
| function(eventObj) | 可選。規定當事件發生時執行的函式。 |
| map | 規定事件對映 ({event:function, event:function, ...})，包含要新增到元素的一個或多個事件，以及當事件發生時執行的函式。 |
例：
<script>
$('div').on({
click: function() {
$(this).css('backgroundColor', 'skyblue');
},
mouseenter: function() {
$(this).css('backgroundColor', 'green')
}
});
$('div').off('click mouseenter'); //解綁點選和滑鼠經過事件
$('div').off('mouseenter'); //解綁滑鼠經過事件
$('div').off(); //解綁所有繫結事件
</script>
執行一次事件
one()方法
one() 方法為被選元素新增一個或多個事件處理程式，並規定當事件發生時執行的函式。
當使用 one() 方法時，每個元素只能執行一次事件處理程式函式。
語法
$(selector).one(event,data,function)
| 引數 | 描述 |
|---|---|
| event | 必需。規定新增到元素的一個或多個事件。 由空格分隔多個事件值。必須是有效的事件。 |
| data | 可選。規定傳遞到函式的額外資料。 |
| function | 必需。規定當事件發生時執行的函式。 |
它的用法與on()方法類似，例：
<script>
$('div').one({
click: function() {
console.log('hello');
},
mouseenter: function() {
console.log('world');
}
});
</script>
自動觸發事件
element.事件()
該方法可以簡單的呼叫一些事件
例如：
$('div').click();
trigger() 方法
trigger() 方法觸發被選元素上指定的事件以及事件的預設行為（比如表單提交）。
該方法與 triggerHandler() 方法類似，不同的是 triggerHandler() 不觸發事件的預設行為。
與 triggerHandler() 方法相比的不同之處:
- trigger() 方法不會引起事件（比如表單提交）的預設行為
- trigger() 會操作 jQuery 物件匹配的所有元素，而 triggerHandler() 隻影響第一個匹配元素。
- 由 triggerHandler() 建立的事件不會在 DOM 樹中冒泡，如果目標元素不直接處理它們，則不會發生任何事情。
語法
$(selector).trigger(event,eventObj,param1,param2,...)
| 引數 | 描述 |
|---|---|
| event | 必需。規定指定元素上要觸發的事件。 可以是自定義事件，或者任何標準事件。 |
| param1,param2,... | 可選。傳遞到事件處理程式的額外引數。 額外的引數對自定義事件特別有用。 |
triggerHandler() 方法
triggerHandler() 方法觸發被選元素上指定的事件。
該方法的返回的是事件處理函式的返回值，而不是具有可鏈性的 jQuery 物件。此外，如果沒有處理程式被觸發，則這個方法返回 undefined。
該方法與 trigger() 方法類似，不同的是 trigger() 也觸發事件的預設行為（比如表單提交）。
與 trigger() 方法相比的不同之處:
- 它不會引起事件（比如表單提交）的預設行為
- .trigger() 會操作 jQuery 物件匹配的所有元素，而 .triggerHandler() 隻影響第一個匹配元素。
- 由 .triggerHandler() 建立的事件不會在 DOM 樹中冒泡；如果目標元素不直接處理它們，則不會發生任何事情。
其語法與方法引數與trigger() 方法相同
例：
<script>
$('.one').click(function() {
alert('hello one');
});
$('.two').click(function() {
alert('hello two');
});
$('input').focus(function() {
$(this).val('hello world');
})
// $('div').click(); //第一種方法
//$('div').trigger('click'); //第二種方法,會匹配所有div
//$('div').triggerHandler('click'); //第三種方法，只會匹配第一個div，也就是.one
//$('input').trigger('focus'); //會觸發預設行為，輸入框中會有表單聚焦
$('input').triggerHandler('focus'); //不會觸發預設行為，所以輸入框不會有聚焦
</script>
jQuery事件物件
與JavaScript類似，jQuery也有事件物件，用法與JavaScript相似
例如，語法
$('.one').click(function(event) {
console.log(event);
});
拷貝物件extend()方法
jQuery.extend() 函式用於將一個或多個物件的內容合併到目標物件。
注意：
-
如果只為
$.extend()指定了一個引數，則意味著引數target被省略。此時，target就是jQuery物件本身。通過這種方式，我們可以為全域性物件jQuery新增新的函式。 -
如果多個物件具有相同的屬性，則後者會覆蓋前者的屬性值
語法
$.extend( target [, object1 ] [, objectN ] )
指示是否深度合併
$.extend( [deep ], target, object1 [, objectN ] )
警告: 不支援第一個引數傳遞 false 。
| 引數 | 描述 |
|---|---|
| deep | 可選。 Boolean型別 指示是否深度合併物件，預設為false。如果該值為true，且多個物件的某個同名屬性也都是物件，則該"屬性物件"的屬性也將進行合併。 |
| target | Object型別 目標物件，其他物件的成員屬性將被附加到該物件上。 |
| object1 | 可選。 Object型別 第一個被合併的物件。 |
| objectN | 可選。 Object型別 第N個被合併的物件。 |
淺拷貝
淺拷貝即預設情況下該方法的第一個引數deep為false的情況下，該方法會將原物件的資料拷貝到目標物件，若有相同的屬性則會覆蓋掉，簡單資料型別會重新賦值，複雜資料型別會將地址賦值給目標物件，因此，淺拷貝在進行復雜資料的更改時，會將原物件的資料也一併更改。
<script>
// 1、目標物件為空
// let targetObj = {}
// let obj = {
// name: 'david',
// age: 18
// }
// console.log(targetObj.name);
// $.extend(targetObj, obj);
// console.log(targetObj.name);
// 2、目標物件不為空
// let targetObj = {
// sex: 'men',
// }
// let obj = {
// name: 'david',
// age: 18,
// hobby: {
// love: 'you',
// }
// }
// $.extend(targetObj, obj);
// console.log(targetObj);
// 3、目標物件不為空且相互衝突
let targetObj = {
name: 'david',
sex: 'men',
hobby: {
game: 'double',
sport: 'jump'
}
}
let obj = {
name: 'marry',
sex: 'women',
hobby: {
lover: 'david',
hate: 'shit'
}
}
$.extend(targetObj, obj);
// console.log(targetObj);
// console.log(obj);
// 4、修改複雜資料
targetObj.hobby.lover = 'jhon';
console.log(targetObj);
console.log(obj);
</script>
深拷貝
與淺拷貝不同，深拷貝是將所有資料複製一份到目標物件，因此即使修改複雜資料也對源物件沒有影響。除此之外，深拷貝會考慮到複雜物件，在進行復雜物件拷貝時也會對比屬性值，若複雜資料物件名相同但是屬性值不同則會將複雜資料的屬性值新增到目標物件中，而不會完全覆蓋。
<script>
let targetObj = {
name: 'david',
sex: 'men',
hobby: {
love: 'you',
hate: 'you',
lover: {
hi: 'jhon',
}
}
}
let obj = {
name: 'marry',
sex: 'women',
hobby: {
love: 'me',
game: 'double',
sport: 'jump',
lover: {
hello: 'jhon'
}
}
}
$.extend(true, targetObj, obj);
console.log(targetObj);
console.log(obj);
</script>
擴充套件：事件大全
| 方法 | 描述 |
|---|---|
| bind() | 向匹配元素附加一個或更多事件處理器 |
| blur() | 觸發、或將函式繫結到指定元素的 blur 事件 |
| change() | 觸發、或將函式繫結到指定元素的 change 事件 |
| click() | 觸發、或將函式繫結到指定元素的 click 事件 |
| dblclick() | 觸發、或將函式繫結到指定元素的 double click 事件 |
| delegate() | 向匹配元素的當前或未來的子元素附加一個或多個事件處理器 |
| die() | 移除所有通過 live() 函式新增的事件處理程式。 |
| error() | 觸發、或將函式繫結到指定元素的 error 事件 |
| event.isDefaultPrevented() | 返回 event 物件上是否呼叫了 event.preventDefault()。 |
| event.pageX | 相對於文件左邊緣的滑鼠位置。 |
| event.pageY | 相對於文件上邊緣的滑鼠位置。 |
| event.preventDefault() | 阻止事件的預設動作。 |
| event.result | 包含由被指定事件觸發的事件處理器返回的最後一個值。 |
| event.target | 觸發該事件的 DOM 元素。 |
| event.timeStamp | 該屬性返回從 1970 年 1 月 1 日到事件發生時的毫秒數。 |
| event.type | 描述事件的型別。 |
| event.which | 指示按了哪個鍵或按鈕。 |
| focus() | 觸發、或將函式繫結到指定元素的 focus 事件 |
| keydown() | 觸發、或將函式繫結到指定元素的 key down 事件 |
| keypress() | 觸發、或將函式繫結到指定元素的 key press 事件 |
| keyup() | 觸發、或將函式繫結到指定元素的 key up 事件 |
| live() | 為當前或未來的匹配元素新增一個或多個事件處理器 |
| load() | 觸發、或將函式繫結到指定元素的 load 事件 |
| mousedown() | 觸發、或將函式繫結到指定元素的 mouse down 事件 |
| mouseenter() | 觸發、或將函式繫結到指定元素的 mouse enter 事件 |
| mouseleave() | 觸發、或將函式繫結到指定元素的 mouse leave 事件 |
| mousemove() | 觸發、或將函式繫結到指定元素的 mouse move 事件 |
| mouseout() | 觸發、或將函式繫結到指定元素的 mouse out 事件 |
| mouseover() | 觸發、或將函式繫結到指定元素的 mouse over 事件 |
| mouseup() | 觸發、或將函式繫結到指定元素的 mouse up 事件 |
| one() | 向匹配元素新增事件處理器。每個元素只能觸發一次該處理器。 |
| ready() | 文件就緒事件（當 HTML 文件就緒可用時） |
| resize() | 觸發、或將函式繫結到指定元素的 resize 事件 |
| scroll() | 觸發、或將函式繫結到指定元素的 scroll 事件 |
| select() | 觸發、或將函式繫結到指定元素的 select 事件 |
| submit() | 觸發、或將函式繫結到指定元素的 submit 事件 |
| toggle() | 繫結兩個或多個事件處理器函式，當發生輪流的 click 事件時執行。 |
| trigger() | 所有匹配元素的指定事件 |
| triggerHandler() | 第一個被匹配元素的指定事件 |
| unbind() | 從匹配元素移除一個被新增的事件處理器 |
| undelegate() | 從匹配元素移除一個被新增的事件處理器，現在或將來 |
| unload() | 觸發、或將函式繫結到指定元素的 unload 事件 |