jQuery事件
- 單個(gè)事件注冊(cè)
- 語(yǔ)法：
element.事件(function(){});例如：$("div").click(function(){事件處理程序}),其他事件與原生基本一致 - 比如：
mouseover馏谨、mouseout蛀醉、blur、focus腐魂、change咧最、keydown捂人、keyup御雕、resize、scroll等
- 語(yǔ)法：
事件綁定
- 事件處理
on()綁定事件-
on()方法在匹配元素上綁定一個(gè)或多個(gè)事件的事件處理函數(shù) - 語(yǔ)法規(guī)范：
element.on(events,[selector],fn)-
events：一個(gè)或多個(gè)用空格分隔的事件類型先慷，如：click或keydown -
selector:元素的子元素選擇器 -
fn:回調(diào)函數(shù) 即綁定在元素身上的偵聽(tīng)函數(shù)
-
-
<style>
div{
width: 100px;
height: 100px;
background-color: #777;
}
</style>
<div></div>
<!-- 此處引入jQuery文件,你就當(dāng)這個(gè)文件存在吧 -->
<script src="jquery.min.js"></script>
<script>
$(function() {
// 單個(gè)事件注冊(cè)
$("div").click(function() {
$(this).css("background", "blue");
});
$("div").mouseenter(function() {
$(this).css("background", "red");
});
// 事件處理on()
$("div").on({
click: function() {
$(this).css("background", "blue");
},
mouseenter: function() {
$(this).css("background", "red");
}
mouseleave: function() {
$(this).css("background", "purple");
}
});
})
</script>
on()方法的優(yōu)勢(shì):
- 可以綁定多個(gè)事件饮笛，多個(gè)事件處理程序
$("div").on({
mouseover: function(){},
mouseout: function(){},
click: function(){}
});
// 如果事件類型是相同的，可以使用下面這種方法
$("div").on("mouseover mouseout", function() {
$(this).toggleClass("current");
})
- 可以實(shí)現(xiàn)事件委派操作论熙，事件委派的定義就是福青，把原來(lái)加給子元素身上的事件綁定在父元素身上，就是把事件委派給父元素
$('ul').on('click','li',function() {
alert('hello world!');
});
在此之前有
bind()脓诡、live()无午、delegate()等方法來(lái)處理事件綁定或者事件委派，最新版本的請(qǐng)用on替代他們
解綁事件
off()方法可以移除通過(guò)on()方法添加的事件處理程序
$("p").off(); // 解綁p標(biāo)簽所有事件處理程序
$("p").off("click"); // 解綁p標(biāo)簽元素上面的點(diǎn)擊事件
$("ul").off("click", "li"); // 解綁事件委托
如果有的事件只想觸發(fā)一次祝谚，可以用
one()來(lái)綁定事件
$("p").one("click", function() {
alert(57); // 只觸發(fā)一次
})
自動(dòng)觸發(fā)事件trigger()
元素.事件()第一種簡(jiǎn)寫(xiě)形式宪迟，會(huì)觸發(fā)元素的默認(rèn)行為元素.trigger("事件")第二種自動(dòng)觸發(fā)模式，會(huì)觸發(fā)元素的默認(rèn)行為
<style>
div{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<div></div>
<script>
$(function() {
$("div").on("click",function() {
alert(5);
});
// 第一種 元素.事件()
$("div").click();
// 第二種 元素.trigger("事件")
$("div").trigger("click");
})
</script>
元素.triggerHandler("事件")第三種自動(dòng)觸發(fā)模式交惯，這種方法不會(huì)觸發(fā)元素的默認(rèn)行為
jQuery事件對(duì)象
事件觸發(fā)次泽，就會(huì)有事件對(duì)象的產(chǎn)生
element.on(events, [selector],function(event) {})- 阻止默認(rèn)行為：
event.preventDefault()或者return false- 阻止事件冒泡：
event.stopPropagation()
<!-- 阻止事件冒泡 -->
<style>
div{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<div></div>
<script>
$(function() {
$(document).on("click",function() {
alert(7);
});
$("div").on("click",function() {
alert(5);
event.stopPropagation();
});
})
</script>
jQuery里面的一些常用方法
如果想要把某個(gè)對(duì)象拷貝(合并)給另外一個(gè)對(duì)象使用，此時(shí)可以用
$.extend()方法
- 語(yǔ)法：
$.extend([deep], target, object1, [objectN])
deep:如果設(shè)為true為深拷貝席爽，默認(rèn)為false淺拷貝target:要拷貝的目標(biāo)對(duì)象object1:待拷貝到第一個(gè)對(duì)象的對(duì)象
$(function() {
/* let targetObj = {};
let obj = {
id: 1,
name: "andy"
};
$.extend(targetObj, obj);
console.log(targetObj); */
/* let targetObj = {
id: 0
};
let obj = {
id: 1,
name: "andy"
};
$.extend(targetObj, obj);
console.log(targetObj); // 會(huì)覆蓋targetObj里面原來(lái)的數(shù)據(jù) */
let targetObj = {
id: 0
};
let obj = {
id: 1,
name: "andy"
byc: {
age: 18
}
};
$.extend(targetObj, obj);
console.log(targetObj);
})
- 淺拷貝是把被拷貝的對(duì)象復(fù)雜數(shù)據(jù)類型中的地址拷貝給目標(biāo)對(duì)象意荤，修改目標(biāo)對(duì)象會(huì)影響被拷貝對(duì)象
- 深拷貝，前面加
true,完全克隆(拷貝的是對(duì)象只锻，不是地址)玖像，修改目標(biāo)對(duì)象不會(huì)影響被拷貝對(duì)象
多庫(kù)共存
- 問(wèn)題概述：jQuery使用
$作為標(biāo)識(shí)符，隨著jQuery的流行齐饮，其它JS庫(kù)也會(huì)用這種$作為標(biāo)識(shí)符捐寥，這樣一起使用會(huì)引起沖突
- 客觀需求：需要一個(gè)解決方案，讓jQuery和其他的JS庫(kù)不存在沖突祖驱，可以同時(shí)存在握恳，這就叫做多庫(kù)共存
- jQuery解決方案
- 把里面的符號(hào)統(tǒng)一改為jQuery，例如：
jQuery("div")- 讓jQuery釋放對(duì)
$控制權(quán)羹膳，讓用戶自己決定(jQuery變量規(guī)定新的名稱)：$noConflict()let xx = $noConflict();
jQuery插件
jQuery功能比較有限睡互，想要更復(fù)雜的特效效果，可以借助于jQuery插件完成
- 注意：這些插件也是基于jQuery來(lái)完成的陵像，所以必須要先引入jQuery文件，因此也稱為jQuery插件
- 推薦兩個(gè)JS插件常用的網(wǎng)站
http://www.jq22.com/和http://www.htmleaf.com/
- jQuery插件使用步驟
- 引入相關(guān)文件(jQuery文件和插件文件)
- 復(fù)制相關(guān)html寇壳、css醒颖、js(調(diào)用插件)
推薦案例練習(xí)：瀑布流(圖片懶加載)、輪播圖(3D切換版)
- 圖片懶加載：就是當(dāng)我們頁(yè)面滾動(dòng)到可視區(qū)域在顯示圖片(圖片使用延遲加載可提高網(wǎng)頁(yè)下載速度壳炎，它也能幫助減輕服務(wù)器負(fù)載)
