1.$(document).ready()
成都創(chuàng)新互聯(lián)公司主營綏棱網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,app軟件定制開發(fā),綏棱h5微信小程序開發(fā)搭建,綏棱網(wǎng)站營銷推廣歡迎綏棱等地區(qū)企業(yè)咨詢
$(document).ready()是jQuery中響應(yīng)JavaScript內(nèi)置的onload事件并執(zhí)行任務(wù)的一種典型方式。它和onload具有類似的效果。但是也有一些差異：
當一個文檔完全下載到瀏覽器中時，會觸發(fā)window.onload事件。而使用$(document).ready()注冊的事件處理程序會在html下載完成并解析為Dom樹之后，代碼就可以運行，但并不意味著所有關(guān)聯(lián)文件都已經(jīng)下載完畢。
一個頁面中一般只有一個onload事件處理程序，而且只能一次保存對一個函數(shù)的引用；而$(document).ready()是可以有多個。
一般來說$(document).ready()都要優(yōu)于使用onload事件處理程序。但是如果關(guān)聯(lián)文件還沒有加載完成，則類似圖像高度、寬度的屬性的調(diào)用就會有問題，因此需要在不同的時候選擇合適的方法。
$(document).ready()有三種寫法，分別是：
$(document).ready(function(){
//thisis
the
coding...
});
$().ready(function(){
//thisis
the
coding...
});
$(function(){
//thisis
the
coding...
});
2.事件綁定
語法
$(selector).bind(event,data,function)
參數(shù)和描述：
event：必需。規(guī)定添加到元素的一個或多個事件。由空格分隔多個事件。必須是有效的事件。
data
可選。規(guī)定傳遞到函數(shù)的額外數(shù)據(jù)。
function
必需。規(guī)定當事件發(fā)生時運行的函數(shù)。
對應(yīng)的有unbind()：移除事件
Eg:
$(‘#idchoose').unbind(“click”,Function_Name)
簡寫綁定事件：一般比較喜歡偏向簡寫
$("#dividelement").bind("click",function(){//do
something})改寫為：
$("#dividelement").click(function(){//do
something
}
jQuery通過使用.bind()方法為元素進行事件綁定，通過使用.unbind()方法為元素進行解除綁定。而且.bind()方法是可以執(zhí)行多次綁定的，如果沒有綁定，在進行解除綁定的時候，這都是安全的。
很多時候某一個事件只需要觸發(fā)一次，隨后就要立即解除綁定，按照傳統(tǒng)的做法，我們可能會先進行事件綁定，然后在事件執(zhí)行完畢后進行解除綁定。jQuery為我們提供了一種簡寫的方法.one來專門解決上述情景下的繁瑣的代碼編寫，示例如下：
$(document).ready(function(){
$('#swotcjer').one('click',toggleStyleSwitcher);
});
附帶說下，用bind綁定事件的好處是可以定義自定義的事件，而且可以一次綁定多個事件。
3.合成事件
在進行事件捕獲的時候，常常需要捕獲組合的用戶操作，并且以多個函數(shù)作為響應(yīng)，這些事件我們稱為復(fù)合事件。
jQuery提供的.ready()方法就是最常用的符合事件方法之一，除此之外，還有進行交互處理的時候用到的兩個函數(shù)：
.hover(enter,leave)
一個模仿懸停事件（鼠標移動到一個對象上面及移出這個對象）的方法。這是一個自定義的方法，它為頻繁使用的任務(wù)提供了一種“保持在其中”的狀態(tài)。
$(function(){
$("#panelh5.head").hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
})
.toggle(fn1,fn2,..fnN)
每次點擊時切換要調(diào)用的函數(shù)。用于模擬鼠標連續(xù)單擊事件。示例:
$(function(){
$("#panelh5.head").toggle(function(){
$(this).addClass("highlight");
$(this).next().show();
},function(){
$(this).removeClass("highlight");
$(this).next().hide();
});
})
4.事件對象與事件冒泡
事件對象：在程序中使用事件對象非常簡單，只需要為函數(shù)添加一個參數(shù)，eg:
$(“element”).click(function(event){
//event:事件對象
})
當點擊“element”元素時候，事件對象就被創(chuàng)建了。這個對象只有事件處理函數(shù)能訪問。當事件處理函數(shù)執(zhí)行完畢，事件對象就被銷毀了。
事件捕獲：
允許多個元素響應(yīng)事件的一種策略。在事件捕獲的過程中，事件首先會交給最外層的元素，接著再交給更具體的元素。
(body-div-span)
事件冒泡：另外一種相反的策略叫時間冒泡，當事件發(fā)生時，會首先發(fā)送給最具體的元素，在這個元素獲得響應(yīng)機會之后，事件會向上冒泡到更一般的元素。事件冒泡有時候會產(chǎn)生副作用，導(dǎo)致始料不及的行為。
(span-div-body)
阻止事件冒泡的三種方法
通過調(diào)用.preventDefault()方法可以在出發(fā)默認操作之前終止事件。
調(diào)用event.stopPropagation()停止事件傳播
jQuery提供了一個.stopPropagation()方法，使用該方法可以完全阻止事件冒泡。
5.使用event.tatget屬性明確事件對象
事件處理程序中event保存著事件對象。而event.tatget屬性保存著發(fā)生事件的目標元素。這個屬性是DOMAPI中規(guī)定的，但是沒有被所有瀏覽器實現(xiàn)。jQuery對這個事件對象進行了必要的擴展，從而在任何瀏覽器中都能夠使用這個屬性。通過.target，可以確定DOM中首先接收到事件的元素。而且，我們知道this引用的是處理事件的DOM元素。
使用event.tatget屬性
明確事件對象阻止事件冒泡的代碼如下：
$(document).ready(function(){
$('switcher').click(function(event){
if(event.target==
this)
{
$('switcher.button').toggleClass('hidden');
}
};)
});
其他事件對象屬性可以參考w3c上的介紹。
實現(xiàn)的方法如下：
1、第一步，創(chuàng)建一個新的html文件，見下圖，轉(zhuǎn)到下面的步驟。
2、第二步，執(zhí)行完上面的操作之后，創(chuàng)建輸入框和按鈕，見下圖，轉(zhuǎn)到下面的步驟。
3、第三步，執(zhí)行完上面的操作之后，預(yù)覽效果見下圖，轉(zhuǎn)到下面的步驟。
4、第四步，執(zhí)行完上面的操作之后，需要引入jquery.js，見下圖，轉(zhuǎn)到下面的步驟。
5、第五步，執(zhí)行完上面的操作之后，設(shè)置輸入框的keydown事件與click事件，見下圖，轉(zhuǎn)到下面的步驟。
6、第六步，執(zhí)行完上面的操作之后，按鈕單擊觸發(fā)事件，見下圖，轉(zhuǎn)到下面的步驟。
7、第七步，執(zhí)行完上面的操作之后，單擊按鈕，效果見下圖。這樣，就解決了這個問題了。
jQuery中用on來綁定事件，常用寫法
兩種寫法哪個更好？
1. $(document).on 將事件委托document， $('#idname').on 將事件綁定到.className元素上。每次document有點擊動作，瀏覽器都會判斷當前點擊的對象。如果匹配再決定要不要執(zhí)行，多了個判斷環(huán)節(jié)。JS渲染效率很高，所以此異同基本可以忽略。
2. $("className").on 為onclick綁定，只有在頁面onload時執(zhí)行一次。頁面刷新后，新加載的具有className的元素便沒有事件綁定到上面了。相反$(document).on這種方法會刷新和重新賦予綁定操作，所以一定程度上更為全面。
jQuery綁定點擊事件可以使用其綁定事件函數(shù)
jquery中四個事件綁定方式（bind,live,delegate,on）
1、bind()????
簡要描述
bind()向匹配元素添加一個或多個事件處理器。
使用方式
$(selector).bind(event,data,function)
event：必需項；添加到元素的一個或多個事件，例如 click,dblclick等；
單事件處理：例如?$(selector).bind("click",data,function);
多事件處理：
1.利用空格分隔多事件，例如?$(selector).bind("click dbclick mouseout",data,function);
2.利用大括號靈活定義多事件，例如?$(selector).bind({event1:function, event2:function, ...})
3.空格相隔方式：綁定較為死板，不能給事件單獨綁定函數(shù),適合處理多個事件調(diào)用同一函數(shù)情況；
大括號替代方式：綁定較為靈活，可以給事件單獨
綁定函數(shù)；
data：可選；需要傳遞的參數(shù)；
function：必需；當綁定事件發(fā)生時，需要執(zhí)行的函數(shù)；
適用Jquery版本
適用所有版本，但是根據(jù)官網(wǎng)解釋，自從jquery1.7版本以后bind()函數(shù)推薦用on()來代替。
2、live()? ?
簡要描述
live()?向當前或未來的匹配元素添加一個或多個事件處理器；
使用方式
$(selector).live(event,data,function)
event：必需項；添加到元素的一個或多個事件，例如 click,dblclick等；
單事件處理：例如?$(selector).live("click",data,function);
多事件處理：1.利用空格分隔多事件，例如?$(selector).live("click dbclick mouseout",data,function);
2.利用大括號靈活定義多事件，例如?$(selector).live({event1:function, event2:function, ...})
3.空格相隔方式：綁定較為死板，不能給事件單獨綁定函數(shù),適合處理多個事件調(diào)用同一函數(shù)情況；
大括號替代方式：綁定較為靈活，可以給事件單獨綁定函數(shù)；
data：可選；需要傳遞的參數(shù)；
function：必需；當綁定事件發(fā)生時，需要執(zhí)行的函數(shù)；
適用Jquery版本
jquery1.9版本以下支持，jquery1.9及其以上版本刪除了此方法，jquery1.9以上版本用on()方法來代替。
3、delegate()
簡要描述
delegate()?為指定的元素（被選元素的子元素）添加一個或多個事件處理程序，并規(guī)定當這些事件發(fā)生時運行的函數(shù)。使用 delegate() 方法的事件處理程序適用于當前或未來的元素（比如由腳本創(chuàng)建的新元素）。
使用方式
$(selector).delegate(childSelector,event,data,function)
childSelector:?必需項；需要添加事件處理程序的元素，一般為selector的子元素；
event：必需項；添加到元素的一個或多個事件，例如 click,dblclick等；
單事件處理：例如?$(selector).delegate(childselector,"click",data,function);
多事件處理：1.利用空格分隔多事件，例如?$(selector).delegate(childselector,"click?dbclick mouseout",data,function);
2.利用大括號靈活定義多事件，例如?$(selector).delegate(childselector,{event1:function, event2:function, ...})
3.空格相隔方式：綁定較為死板，不能給事件單獨綁定函數(shù),適合處理多個事件調(diào)用同一函數(shù)情況；
大括號替代方式：綁定較為靈活，可以給事件單獨綁定函數(shù)；
data：可選；需要傳遞的參數(shù)；
function：必需；當綁定事件發(fā)生時，需要執(zhí)行的函數(shù)；
適用Jquery版本
jquery1.4.2及其以上版本；
4、on()
簡要描述
on()?為指定的元素,添加一個或多個事件處理程序，并規(guī)定當這些事件發(fā)生時運行的函數(shù)。使用 on() 方法的事件處理程序適用于當前或未來的元素（比如由腳本創(chuàng)建的新元素）。
使用方式
$(selector).on(event,childselector,data,function)
event：必需項；添加到元素的一個或多個事件，例如 click,dblclick等；
單事件處理：例如?$(selector).on("click",childselector,data,function);
多事件處理：1.利用空格分隔多事件，例如?$(selector).on("click?dbclick mouseout",childseletor,data,function);
2.利用大括號靈活定義多事件，例如?$(selector).on({event1:function, event2:function, ...},childselector);
3.空格相隔方式：綁定較為死板，不能給事件單獨綁定函數(shù),適合處理多個事件調(diào)用同一函數(shù)情況；
大括號替代方式：綁定較為靈活，可以給事件單獨綁定函數(shù)；
childSelector:?可選；需要添加事件處理程序的元素，一般為selector的子元素；
data：可選；需要傳遞的參數(shù)；
function：必需；當綁定事件發(fā)生時，需要執(zhí)行的函數(shù)；
適用Jquery版本
jquery1.7及其以上版本；jquery1.7版本出現(xiàn)之后用于替代bind()，live()綁定事件方式；
四種方式的異同和優(yōu)缺點
相同點：
1.都支持單元素多事件的綁定；空格相隔方式或者大括號替代方式;
2.均是通過事件冒泡方式，將事件傳遞到document進行事件的響應(yīng)；
比較和聯(lián)系:
1.bind()函數(shù)只能針對已經(jīng)存在的元素進行事件的設(shè)置；但是live(),on(),delegate()均支持未來新添加元素的事件設(shè)置；
2.bind()函數(shù)在jquery1.7版本以前比較受推崇，1.7版本出來之后，官方已經(jīng)不推薦用bind()，替代函數(shù)為on(),這也是1.7版本新添加的函數(shù)，同樣，可以
用來代替live()函數(shù)，live()函數(shù)在1.9版本已經(jīng)刪除；
3.live()函數(shù)和delegate()函數(shù)兩者類似，但是live()函數(shù)在執(zhí)行速度，靈活性和CSS選擇器支持方面較delegate()差些
4.bind()支持Jquery所有版本；live()支持jquery1.8-；delegate()支持jquery1.4.2+；on()支持jquery1.7+；
總結(jié)
如果項目中引用jquery版本為低版本，推薦用delegate(),高版本jquery可以使用on()來代替，以上僅為個人看法
重慶分公司
重慶分公司
