//$(document).ready() 方法
/*
當DOM載入就緒可以查詢及操縱時系結一個要執行的函式。
這是事件模塊中最重要的一個函式,因為它可以極大地提高web應用程式的回應速度。
簡單地說,這個方法純粹是對向window.load事件注冊的替代方法。通過使用這個方法,
可以在DOM載入就緒能夠讀取并操縱時立即呼叫你所系結的函式,而99.99%的JavaScript函式都需要在那一刻執行。
注意:可以在同一個頁面中無限次地使用$(document).ready()事件。
其中注冊的函式會按照(代碼中的)先后順序依次執行。
引數說明:fn 要在DOM就緒時執行的函式
在DOM加載完成時運行的代碼,可以這樣寫:
jQuery 代碼:
$(document).ready(function(){
// 在這里寫你的代碼...
});
//簡寫形式
$(function(){
// 在這里寫你的代碼...
})
*/
//1.1 jQuery鍵盤事件 keydown()與keyup()事件
/*
滑鼠有mousedown,mouseup之類的事件,這是根據人的手勢動作分解的2個觸發行為。
相對應的鍵盤也有這類事件,將用戶行為分解成2個動作,鍵盤按下與松手,針對這樣的2種動作,
jQuery分別提供了對應keydown與keyup方法來監聽
- keydown()事件
當鍵盤或按鈕被按下時,發生keydown事件。
- keyup()事件
當按鈕被松開時,發生keyup事件。它發生在當前獲得焦點的元素上。
*/
//$(".target1").keydown(function (e) {
// //console.log(e.target.value);
// $("em").first().text(e.target.value);
//});
//1.2jQuery鍵盤事件 keypress()事件
/*在input元素上系結keydown事件會發現一個問題:
注意:每次獲取的內容都是之前輸入的,當前輸入的獲取不到
keydown事件觸發在文字還沒敲進文本框,這時如果在keydown事件中輸出文本框中的文本,
得到的是觸發鍵盤事件前的文本,而keyup事件觸發時整個鍵盤事件的操作已經完成,
獲得的是觸發鍵盤事件后的文本
當瀏覽器捕獲鍵盤輸入時,還提供了一個keypress的回應,這個跟keydown是非常相似
keypress事件與keydown和keyup的主要區別
只能捕獲單個字符,不能捕獲組合鍵
無法回應系統功能鍵(如delete,backspace)
不區分小鍵盤和主鍵盤的數字字符
總而言之,
KeyPress主要用來接收字母、數字等ANSI字符,
而 KeyDown 和 KeyUP 事件程序可以處理任何不被 KeyPress 識別的擊鍵。
諸如:功能鍵(F1-F12)、編輯鍵、定位鍵以及任何這些鍵和鍵盤換檔鍵的組合等。
*/
//1.0 jQuery中的滑鼠事件
/*
1. click() 滑鼠單擊事件 // js onclick
2. dblclick() 滑鼠雙擊事件 // js ondblclick
3. mousedown() 當滑鼠指標移動到元素上方,并按下滑鼠按鍵時,會發生mousedown事件
4. mouseup() 當在元素上放松滑鼠按鈕時,會發生 mouseup 事件。
5. mouseenter() 當滑鼠指標穿過元素時,會發生mouseenter事件。該事件大多數時候會與mouseleave 事件一起使用。
6. mouseleave() 當滑鼠指標離開元素時,會發生 mouseleave 事件。該事件大多數時候會與mouseenter 事件一起使用
7.mouseover() 當滑鼠指標位于元素上方時,會發生 mouseover 事件。該事件大多數時候會與 mouseout 事件一起使用
8.mouseout() 當滑鼠指標從元素上移開時,發生 mouseout 事件。該事件大多數時候會與 mouseover 事件一起使用
9. mousemove() 當滑鼠指標在指定的元素中移動時,就會發生 mousemove 事件。
mousemove事件處理函式會被傳遞一個變數——事件物件,其.clientX 和 .clientY 屬性代表滑鼠的坐標
注意!!!
mouseover與mouseenter的區別:
mouseover如果滑鼠指標穿過選定元素的任何子元素,都會觸發mouseover事件,
mouseenter如果滑鼠指標穿過選定元素的任何子元素不會觸發mouseenter事件
mouseout與mouseleave的區別:
mouseout不論滑鼠指標離開被選元素還是任何子元素,都會觸發mouseout事件。
mouseleave只有在滑鼠指標離開被選元素時,才會觸發 mouseleave 事件
簡而言之:就是移動到選定元素的子元素上面是否觸發事件
mouseover 子元素 觸發
mouseenter 子元素 不觸發
mouseout 子元素 觸發
mouseleave 子元素 不觸發
*/
//1.0 click單擊事件
//$(".box").click(function () {
// alert("這是一個click單擊事件被觸發了")
//});
//2 dblclick滑鼠雙擊事件
//$(".box").dblclick(function () {
// alert("這是一個dblclick滑鼠雙擊事件被觸發了")
//});
//3 mousedown 滑鼠移動到某個元素上被按下的時候觸發的事件
//$(".box").mousedown(function () {
// alert("這是一個mousedown滑鼠被按下的時候觸發");
//});
//4 mouseup當在元素上放松滑鼠按鈕時
//$(".box").mouseup(function () {
// alert("這是一個mouseup當在元素上放松滑鼠按鈕時觸發的事件");
//});
轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/53078.html
標籤:HTML(CSS)
下一篇:jQuery異步ajax總結
