jQuery 學習十二(事件)

原創 apus9527 2020-02-21 13:12
●  ready(fn) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 當 DOM 載入就緒可以查詢及操縱時綁定一個要執行的函數。 
  3.  * 
  4.  * 這是事件模塊中最重要的一個函數，因爲它可以極大地提高 web 應用程序的響應速度。 
  5.  * 
  6.  * 簡單地說，這個方法純粹是對向 window.load 事件註冊事件的替代方法。通過使用這個方法，可以在 DOM  
  7.  * 載入就緒能夠讀取並操縱時立即調用你所綁定的函數，而 99.99% 的 JavaScript 函數都需要在那一刻執行。 
  8.  * 
  9.  * 有一個參數對 jQuery 函數的引用會傳遞到這個 ready 事件處理函數中。可以給這個參數任意起一個名字， 
  10.  * 並因此可以不再擔心命名衝突而放心地使用 $ 別名。 
  11.  * 
  12.  * 請確保在 <body> 元素的 onload 事件中沒有註冊函數，否則不會觸發 $(document).ready() 事件。 
  13.  * 
  14.  * 可以在同一個頁面中無限次地使用 $(document).ready() 事件。其中註冊的函數會按照(代碼中的)先後順序 
  15.  * 依次執行。 
  16.  * 
  17.  * @fn(Function) 要在 DOM 就緒時執行的函數 
  18.  * @return jQuery Object 
  19.  * @owner jQuery Object 
  20.  */  
  21. function ready(fn);  
  22.   
  23. // 例子一：在 DOM 加載完成時運行的代碼，可以這樣寫：  
  24. $(document).ready(function() {  
  25.   // 在這裏寫你的代碼 ...  
  26. });  
  27.   
  28. // 例子二：使用 $(document).ready() 的簡寫，同時內部的 jQuery 代碼依然使用 $ 作爲別名，而不管  
  29.            全局的 $ 爲何。  
  30. jQuery(function($) {  
  31.   // 你可以在這裏繼續使用 $ 作爲別名 ...  
  32. });  


    ●  bind(type, [data], fn) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 爲每一個匹配元素的特定事件(像 click)綁定一個事件處理器函數。 
  3.  * 
  4.  * 這個事件處理函數會接收到一個事件對象，可以通過它來阻止(瀏覽器)默認的行爲。如果既想取消默認的行爲， 
  5.  * 又想阻止事件起泡，這個事件處理函數必須返回 false。多數情況下，可以把事件處理器函數定義爲匿名函數 
  6.  * (見示例一)。在不可能定義匿名函數的情況下，可以傳遞一個可選的數據對象作爲第二個參數(而事件處理器 
  7.  * 函數則作爲第三個參數)，見示例二。 
  8.  * 
  9.  * @type(String) 事件類型 
  10.  * @data(Object) (可選) 作爲 event.data 屬性值傳遞給事件對象的額外數據對象 
  11.  * @fn(Function) 綁定到每個匹配元素的事件上面的處理函數 
  12.  * @return jQuery Object 
  13.  * @owner jQuery Object 
  14.  */  
  15. function bind(type, [data], fn);  
  16.   
  17. // 例子一：當每個段落被點擊的時候，彈出其文本。  
  18. $("p").bind("click", function() {  
  19.   alert( $(this).text() );  
  20. });  
  21.   
  22. // 例子二：你可以在事件處理之前傳遞一些附加的數據。  
  23. function handler(event) {  
  24.   alert(event.data.foo);  
  25. }  
  26. $("p").bind("click", {foo: "bar"}, handler);  
  27.   
  28. // 例子三：通過返回 false 來取消默認的行爲並阻止事件起泡。  
  29. $("form").bind("submit", function() { return false; });  
  30.   
  31. // 例子四：通過使用 preventDefault() 方法只取消默認的行爲。  
  32. $("form").bind("submit", function(event) {  
  33.   event.preventDefault();  
  34. });  
  35.   
  36. // 例子五：通過使用 stopPropagation() 方法只阻止一個事件起泡。  
  37. $("form").bind("submit", function(event) {  
  38.   event.stopPropagation();  
  39. });  


    ●  one(type, [data], fn) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 爲每一個匹配元素的特定事件(像 click)綁定一個一次性的事件處理函數。 
  3.  * 
  4.  * 在每個對象上，這個事件處理函數只會被執行一次。其他規則與 bind() 函數相同。這個事件處理函數會接收 
  5.  * 到一個事件對象，可以通過它來阻止(瀏覽器)默認的行爲。如果既想取消默認的行爲，又想阻止事件起泡， 
  6.  * 這個事件處理函數必須返回 false。 
  7.  * 
  8.  * 多數情況下，可以把事件處理函數定義爲匿名函數(見示 bind() 示例一)。在不可能定義匿名函數的情況下，可以傳遞一 
  9.  * 個可選的數據對象作爲第二個參數(而事件處理函數則作爲第三個參數)，見 bind() 示例二。 
  10.  * 
  11.  * @type(String) 事件類型 
  12.  * @data(Object) (可選) 作爲 event.data 屬性值傳遞給事件對象的額外數據對象 
  13.  * @fn(Function) 綁定到每個匹配元素的事件上面的處理函數 
  14.  * @return jQuery Object 
  15.  * @owner jQuery Object 
  16.  */  
  17. function one(type, [data], fn);  
  18.   
  19. // 例子：當所有段落被第一次點擊的時候，顯示所有其文本。  
  20. $("p").one("click", function() {  
  21.   alert( $(this).text() );  
  22. });  


    ●  trigger(type, [data]) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 在每一個匹配的元素上觸發某類事件。 
  3.  * 
  4.  * 這個函數也會導致瀏覽器同名的默認行爲的執行。比如，如果用 trigger() 觸發一個 "submit"，則同樣會 
  5.  * 導致瀏覽器提交表單。如果要阻止這種默認行爲，應返回 false。 
  6.  * 
  7.  * 你也可以觸發由 bind() 註冊的自定義事件。 
  8.  * 
  9.  * @type(String) 要觸發的事件類型 
  10.  * @data(Array) (可選) 傳遞給事件處理函數的附加參數 
  11.  * @return jQuery Object 
  12.  * @owner jQuery Object 
  13.  */  
  14. function trigger(type, [data]);  
  15.   
  16. // 例子一：提交第一個表單，但不用 submit()。  
  17. $("form:first").trigger("submit");  
  18.   
  19. // 例子二：給一個事件傳遞參數。  
  20. $("p").click( function (event, a, b) {  
  21.   // 一個普通的點擊事件時，a 和 b 是 undefined 類型  
  22.   // 如果用下面的語句觸發，那麼 a 指向 "foo" , 而 b 指向 "bar"  
  23. } ).trigger("click", ["foo", "bar"]);  
  24.   
  25. // 例子三：下面的代碼可以顯示一個 "Hello World"。  
  26. $("p").bind("myEvent", function(event, message1, message2) {  
  27.   alert(message1 + ' ' + message2);  
  28. });  
  29. $("p").trigger("myEvent", ["Hello", "World!"]);  


    ●  triggerHandler(type, [data]) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 這個特別的方法將會觸發指定的事件類型上所有綁定的處理函數。但不會執行瀏覽器默認動作。 
  3.  * 
  4.  * @type(String) 要觸發的事件類型 
  5.  * @data(Array) (可選) 傳遞給事件處理函數的附加參數 
  6.  * @return jQuery Object 
  7.  * @owner jQuery Object 
  8.  */  
  9. function triggerHandler(type, [data]);  
  10.   
  11. // 例子：如果你對一個 focus 事件執行了 .triggerHandler()，瀏覽器默認動作將不會被觸發，只會觸發你  
  12.            綁定的動作。  
  13. <button id="old">.trigger("focus")</button>  
  14. <button id="new">.triggerHandler("focus")</button><br/><br/>  
  15. <input type="text" value="To Be Focused"/>  
  16.   
  17. $("#old").click(function() {  
  18.   $("input").trigger("focus");  
  19. });  
  20. $("#new").click(function(){  
  21.   $("input").triggerHandler("focus");  
  22. });  
  23. $("input").focus(function() {  
  24.   $("<span>Focused!</span>").appendTo("body").fadeOut(1000);  
  25. });  


    ●  unbind([type], [data]) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 這個特別的方法將會觸發指定的事件類型上所有綁定的處理函數。但不會執行瀏覽器默認動作。 
  3.  * 
  4.  * @type(String)  (可選) 事件類型 
  5.  * @data(Function) (可選) 要從每個匹配元素的事件中反綁定的事件處理函數 
  6.  * @return jQuery Object 
  7.  * @owner jQuery Object 
  8.  */  
  9. function unbind([type], [data]);  
  10.   
  11. // 例子一：把所有段落的所有事件取消綁定。  
  12. $("p").unbind();  
  13.   
  14. // 例子二：將段落的 click 事件取消綁定。  
  15. $("p").unbind("click");  
  16.   
  17. // 例子三：刪除特定函數的綁定，將函數作爲第二個參數傳入。  
  18. var foo = function() {  
  19.   // 處理某個事件的代碼 ...  
  20. };  
  21. // 當點擊段落的時候會觸發 foo  
  22. $("p").bind("click", foo);   
  23. // 再也不會被觸發 foo  
  24. $("p").unbind("click", foo);   


    ●  hover(over, out) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 一個模仿懸停事件(鼠標移動到一個對象上面及移出這個對象)的方法。這是一個自定義的方法，它爲頻繁使用 
  3.  * 的任務提供了一種 "保持在其中" 的狀態。 
  4.  * 
  5.  * 當鼠標移動到一個匹配的元素上面時，會觸發指定的第一個函數。當鼠標移出這個元素時，會觸發指定的第二 
  6.  * 個函數。而且，會伴隨着對鼠標是否仍然處在特定元素中的檢測(例如，處在 div 中的圖像)，如果是，則會 
  7.  * 繼續保持 "懸停" 狀態，而不觸發移出事件(修正了使用 mouseout 事件的一個常見錯誤)。 
  8.  * 
  9.  * @over(Function) 鼠標移到元素上要觸發的函數 
  10.  * @out(Function) 鼠標移出元素要觸發的函數 
  11.  * @return jQuery Object 
  12.  * @owner jQuery Object 
  13.  */  
  14. function hover(over,out);  
  15.   
  16. // 例子：鼠標懸停的表格加上特定的類。  
  17. $("td").hover(  
  18.   function() {  
  19.     $(this).addClass("hover");  
  20.   },  
  21.   function() {  
  22.     $(this).removeClass("hover");  
  23.   }  
  24. );  


    ●  toggle(fn, fn) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 每次點擊後依次調用函數。 
  3.  * 
  4.  * 如果點擊了一個匹配的元素，則觸發指定的第一個函數，當再次點擊同一元素時，則觸發指定的第二個函數， 
  5.  * 如果有更多函數，則再次觸發，直到最後一個。隨後的每次點擊都重複對這幾個函數的輪番調用。 
  6.  * 
  7.  * @fn(Function) 第一數次點擊時要執行的函數 
  8.  * @fn2(Function) 第二數次點擊時要執行的函數 
  9.  * @fn3, fn4,... (Function) 更多次點擊時要執行的函數 
  10.  * @return jQuery Object 
  11.  * @owner jQuery Object 
  12.  */  
  13. function toggle(fn, fn);  
  14.   
  15. // 例子一：對錶格的切換一個類。  
  16. $("td").toggle(  
  17.   function() {  
  18.     $(this).addClass("selected");  
  19.   },  
  20.   function() {  
  21.     $(this).removeClass("selected");  
  22.   }  
  23. );  
  24.   
  25. // 例子二：對列表的切換樣式。  
  26. <ul>  
  27.   <li>Go to the store</li>  
  28.   <li>Pick up dinner</li>  
  29.   <li>Debug crash</li>  
  30.   <li>Take a jog</li>  
  31. </ul>  
  32.   
  33. $("li").toggle(  
  34.   function() {  
  35.     $(this).css({"list-style-type":"disc", "color":"blue"});  
  36.   },  
  37.   function() {  
  38.     $(this).css({"list-style-type":"disc", "color":"red"});  
  39.   },  
  40.   function() {  
  41.     $(this).css({"list-style-type":"", "color":""});  
  42.   }  
  43. );  


    ●●● 事件集合 ●●● 

    ●  blur() 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 觸發每一個匹配元素的 blur 事件。 
  3.  * 
  4.  * 這個函數會調用執行綁定到 blur 事件的所有函數，包括瀏覽器的默認行爲。可以通過返回 false 來防止觸發 
  5.  * 瀏覽器的默認行爲。blur 事件會在元素失去焦點的時候觸發，既可以是鼠標行爲，也可以是按 tab 鍵離開的。 
  6.  * 
  7.  * @return jQuery Object 
  8.  * @owner jQuery Object 
  9.  */  
  10. function blur();  
  11.   
  12. // 例子：觸發所有段落的 blur 事件。  
  13. $("p").blur();  


    ●  blur(fn) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 在每一個匹配元素的 blur 事件中綁定一個處理函數。 
  3.  * 
  4.  * blur 事件會在元素失去焦點的時候觸發，既可以是鼠標行爲，也可以是 按tab 鍵離開的。 
  5.  * 
  6.  * @fn(Function) 在每一個匹配元素的 blur 事件中綁定的處理函數 
  7.  * @return jQuery Object 
  8.  * @owner jQuery Object 
  9.  */  
  10. function blur(fn);  
  11.   
  12. // 例子：任何段落失去焦點時彈出一個 "Hello World!" 在每一個匹配元素的 blur 事件中綁定的處理函數。  
  13. $("p").blur( function() { alert("Hello World!"); } );  


    ●  change() 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 觸發每個匹配元素的 change 事件。 
  3.  * 
  4.  * 這個函數會調用執行綁定到 change 事件的所有函數，包括瀏覽器的默認行爲。可以通過在某個綁定的函數 
  5.  * 中返回 false 來防止觸發瀏覽器的默認行爲。change 事件會在元素失去焦點的時候觸發，也會當其值在獲 
  6.  * 得焦點後改變時觸發。 
  7.  * 
  8.  * @return jQuery Object 
  9.  * @owner jQuery Object 
  10.  */  
  11. function change();  


    ●  change(fn) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 在每一個匹配元素的change事件中綁定一個處理函數。 
  3.  * 
  4.  * change 事件會在元素失去焦點的時候觸發，也會當其值在獲得焦點後改變時觸發。 
  5.  * 
  6.  * @fn(Function) 在每一個匹配元素的 change 事件中綁定的處理函數 
  7.  * @return jQuery Object 
  8.  * @owner jQuery Object 
  9.  */  
  10. function change(fn);  
  11.   
  12. // 例子：給所有的文本框增加輸入驗證。  
  13. $("input[type='text']").change( function() {  
  14.   // 這裏可以寫些驗證代碼 ...  
  15. });  


    ●  click() 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 觸發每一個匹配元素的 click 事件。這個函數會調用執行綁定到 click 事件的所有函數。 
  3.  * 
  4.  * @return jQuery Object 
  5.  * @owner jQuery Object 
  6.  */  
  7. function click();  
  8.   
  9. // 例子：觸發頁面內所有段落的點擊事件。  
  10. $("p").click();  


    ●  click(fn) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 在每一個匹配元素的 click 事件中綁定一個處理函數。 
  3.  * 
  4.  * 點擊事件會在你的指針設備的按鈕在元素上單擊時觸發。單擊的定義是在屏幕的同一點觸發了 mousedown 和  
  5.  * mouseup。幾個事件觸發的順序是：mousedown -> mouseup -> click 
  6.  * 
  7.  * @fn(Function) 綁定到 click 事件的函數 
  8.  * @return jQuery Object 
  9.  * @owner jQuery Object 
  10.  */  
  11. function click(fn);  
  12.   
  13. // 例子：將頁面內所有段落點擊後隱藏。  
  14. $("p").click( function() { $(this).hide(); });  


    ●  dblclick() 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 觸發每一個匹配元素的 dbclick 事件。 
  3.  * 
  4.  * 這個函數會調用執行綁定到 dblclick 事件的所有函數，包括瀏覽器的默認行爲。可以通過在某個綁定的函數 
  5.  * 中返回 false 來防止觸發瀏覽器的默認行爲。dblclick 事件會在元素的同一點雙擊時觸發。 
  6.  * 
  7.  * @return jQuery Object 
  8.  * @owner jQuery Object 
  9.  */  
  10. function dblclick();  


    ●  dblclick(fn) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 在每一個匹配元素的 dblclick 事件中綁定一個處理函數。 
  3.  * 
  4.  * 這個函數會調用執行綁定到 dblclick 事件的所有函數，包括瀏覽器的默認行爲。可以通過在某個綁定的函數 
  5.  * 中返回 false 來防止觸發瀏覽器的默認行爲。dblclick 事件會在元素的同一點雙擊時觸發。 
  6.  * 
  7.  * @fn(String) 在每一個匹配元素的 dblclick 事件中綁定的處理函數 
  8.  * @return jQuery Object 
  9.  * @owner jQuery Object 
  10.  */  
  11. function dblclick(fn);  
  12.   
  13. // 例子：給頁面上每個段落的雙擊事件綁上 "Hello World!" 警告框。  
  14. $("p").dblclick( function () { alert("Hello World!"); });  


    ●  error() 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 這個函數會調用執行綁定到 error 事件的所有函數，包括瀏覽器的默認行爲。可以通過在某個綁定的函數中 
  3.  * 返回 false 來防止觸發瀏覽器的默認行爲。 
  4.  * 
  5.  * @return jQuery Object 
  6.  * @owner jQuery Object 
  7.  */  
  8. function error();  


    ●  error(fn) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 在每一個匹配元素的 error 事件中綁定一個處理函數。 
  3.  * 
  4.  * 對於 error 事件，沒有一個公衆的標準。在大多數瀏覽器中，當頁面的 JavaScript 發生錯誤時，window  
  5.  * 對象會觸發 error 事件；當圖像的 src 屬性無效時，比如文件不存在或者圖像數據錯誤時，也會觸發圖像 
  6.  * 對象的 error 事件。 
  7.  * 
  8.  * 如果異常是由 window 對象拋出，事件處理函數將會被傳入三個參數： 
  9.  *   1. 描述事件的信息("varName is not defined", "missing operator in expression", 等等。) 
  10.  *   2. 包含錯誤的文檔的完整 URL 
  11.  *   3. 異常發生的行數 
  12.  * 
  13.  * 如果事件處理函數返回 true，則表示事件已經被處理，瀏覽器將認爲沒有異常。 
  14.  * 
  15.  * @fn(Function) 在每一個匹配元素的 error 事件中綁定的處理函數 
  16.  * @return jQuery Object 
  17.  * @owner jQuery Object 
  18.  */  
  19. function error(fn);  
  20.   
  21. // 例子一：在服務器端記錄 JavaScript 錯誤日誌。  
  22. $(window).error(function(msg, url, line){  
  23.   jQuery.post("js_error_log.php", { msg: msg, url: url, line: line });  
  24. });  
  25.   
  26. // 例子二：隱藏 JavaScript 錯誤。  
  27. $(window).error(function() {  
  28.   return true;  
  29. });  
  30.   
  31. // 例子三：給你 IE 的用戶隱藏無效的圖像。  
  32. $("img").error(function() {  
  33.   $(this).hide();  
  34. });  


    ●  focus() 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 觸發每一個匹配元素的 focus 事件。這將觸發所有綁定的 focus 函數，注意，某些對象不支持 focus 方法。 
  3.  * 
  4.  * @return jQuery Object 
  5.  * @owner jQuery Object 
  6.  */  
  7. function focus();  
  8.   
  9. // 例子：當頁面加載後將 id 爲 "login" 的元素設置焦點。  
  10. $(document).ready(function(){  
  11.   $("#login").focus();  
  12. });  


    ●  focus(fn) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 在每一個匹配元素的 focus 事件中綁定一個處理函數。 
  3.  * 
  4.  * focus 事件可以通過鼠標點擊或者鍵盤上的TAB導航觸發。 
  5.   
  6.  * @fn(Function) 在每一個匹配元素的 focus 事件中綁定的處理函數 
  7.  * @return jQuery Object 
  8.  * @owner jQuery Object 
  9.  */  
  10. function focus(fn);  
  11.   
  12. // 例子：使人無法使用文本框。  
  13. $("input[type=text]").focus(function() {  
  14.   this.blur();  
  15. });  


    ●  keydown() 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 觸發每一個匹配元素的 keydown 事件。 
  3.  * 
  4.  * 這個函數會調用執行綁定到 keydown 事件的所有函數，包括瀏覽器的默認行爲。可以通過在某個綁定的函數中 
  5.  * 返回 false 來防止觸發瀏覽器的默認行爲。keydown 事件會在鍵盤按下時觸發。 
  6.   
  7.  * @return jQuery Object 
  8.  * @owner jQuery Object 
  9.  */  
  10. function keydown();  


    ●  keydown(fn) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 在每一個匹配元素的keydown事件中綁定一個處理函數。keydown 事件會在鍵盤按下時觸發。 
  3.  * 
  4.  * @fn(Function) 在每一個匹配元素的 keydown 事件中綁定的處理函數 
  5.  * @return jQuery Object 
  6.  * @owner jQuery Object 
  7.  */  
  8. function keydown(fn);  
  9.   
  10. // 例子：在頁面內對鍵盤按鍵做出迴應，可以使用如下代碼:   
  11. $(window).keydown(function(event) {  
  12.   switch(event.keyCode) {  
  13.     // ...  
  14.     // 不同的按鍵可以做不同的事情  
  15.     // 不同的瀏覽器的keycode不同  
  16.     // 更多詳細信息:   
  17.     http://unixpapa.com/js/key.html  
  18.     // ...  
  19.   }  
  20. });  


    ●  keypress() 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 觸發每一個匹配元素的 keypress 事件。 
  3.  * 
  4.  * 這個函數會調用執行綁定到 keypress 事件的所有函數，包括瀏覽器的默認行爲。可以通過在某個綁定的函數 
  5.  * 中返回 false 來防止觸發瀏覽器的默認行爲。keypress 事件會在鍵盤按下時觸發。 
  6.  * 
  7.  * @fn(Function) 在每一個匹配元素的 keydown 事件中綁定的處理函數 
  8.  * @return jQuery Object 
  9.  * @owner jQuery Object 
  10.  */  
  11. function keypress();  


    ●  keypress(fn) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 在每一個匹配元素的 keypress 事件中綁定一個處理函數。 
  3.  * 
  4.  * keypress 事件會在敲擊按鍵時觸發。 敲擊按鍵的定義爲按下並擡起同一個按鍵。這幾個事件發生的順序是： 
  5.  *    keydown -> keyup -> keypress 
  6.  * 
  7.  * @fn(Function) 在每一個匹配元素的 keydown 事件中綁定的處理函數 
  8.  * @return jQuery Object 
  9.  * @owner jQuery Object 
  10.  */  
  11. function keypress(fn);  


    ●  keyup() 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 觸發每一個匹配元素的 keyup 事件。 
  3.  * 
  4.  * 這個函數會調用執行綁定到 keyup 事件的所有函數，包括瀏覽器的默認行爲。可以通過在某個綁定的函數 
  5.  * 中返回 false 來防止觸發瀏覽器的默認行爲。keyup 事件會在按鍵釋放時觸發。 
  6.  * 
  7.  * @return jQuery Object 
  8.  * @owner jQuery Object 
  9.  */  
  10. function keyup();  


    ●  keyup(fn) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 在每一個匹配元素的 keyup 事件中綁定一個處理函數。keyup 事件會在鍵盤按下時觸發。 
  3.  *  
  4.  * @fn(Function) 在每一個匹配元素的 keyup 事件中綁定的處理函數 
  5.  * @return jQuery Object 
  6.  * @owner jQuery Object 
  7.  */  
  8. function keyup(fn);  


    ●  load(fn) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 在每一個匹配元素的 load 事件中綁定一個處理函數。 
  3.  * 
  4.  * 如果綁定給 window 對象，則會在所有內容加載後觸發，包括窗口，框架，對象和圖像。如果綁定在元素上， 
  5.  * 則當元素的內容加載完畢後觸發。 
  6.  * 
  7.  * 注意:只有當在這個元素完全加載完之前綁定 load 的處理函數，纔會在他加載完後觸發。如果之後再綁定就 
  8.  * 永遠不會觸發了。所以不要在 $(document).ready() 裏綁定 load 事件，因爲 jQuery 會在所有 DOM 加載完 
  9.  * 成後再綁定 load 事件。 
  10.    
  11.  * @fn(Function) 在每一個匹配元素的 load 事件中綁定的處理函數 
  12.  * @return jQuery Object 
  13.  * @owner jQuery Object 
  14.  */  
  15. function load(fn);  


    ●  mousedown(fn) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 在每一個匹配元素的 mousedown 事件中綁定一個處理函數。mousedown 事件在鼠標在元素上點擊後會觸發。 
  3.  *  
  4.  * @fn(Function) 在每一個匹配元素的 mousedown 事件中綁定的處理函數 
  5.  * @return jQuery Object 
  6.  * @owner jQuery Object 
  7.  */  
  8. function mousedown(fn);  


    ●  mousemove(fn) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 在每一個匹配元素的 mousemove 事件中綁定一個處理函數。 
  3.  * 
  4.  * mousemove 事件通過鼠標在元素上移動來觸發。事件處理函數會被傳遞一個變量 - 事件對象，其 .clientX  
  5.  * 和 .clientY 屬性代表鼠標的座標。 
  6.  *  
  7.  * @fn(Function) 在每一個匹配元素的 mousemove 事件中綁定的處理函數 
  8.  * @return jQuery Object 
  9.  * @owner jQuery Object 
  10.  */  
  11. function mousemove(fn);  


    ●  mouseout(fn) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 在每一個匹配元素的 mouseout 事件中綁定一個處理函數。mouseout 事件在鼠標從元素上離開後會觸發。 
  3.  *  
  4.  * @fn(Function) 在每一個匹配元素的 mouseout 事件中綁定的處理函數 
  5.  * @return jQuery Object 
  6.  * @owner jQuery Object 
  7.  */  
  8. function mouseout(fn);  


    ●  mouseover(fn) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 在每一個匹配元素的 mouseover 事件中綁定一個處理函數。mouseover 事件會在鼠標移入對象時觸發。 
  3.  *  
  4.  * @fn(Function) 在每一個匹配元素的 mouseover 事件中綁定的處理函數 
  5.  * @return jQuery Object 
  6.  * @owner jQuery Object 
  7.  */  
  8. function mouseover(fn);  


    ●  mouseup(fn) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 在每一個匹配元素的 mouseup 事件中綁定一個處理函數。mouseup 事件會在鼠標點擊對象釋放時。 
  3.  *  
  4.  * @fn(Function) 在每一個匹配元素的 mouseup 事件中綁定的處理函數 
  5.  * @return jQuery Object 
  6.  * @owner jQuery Object 
  7.  */  
  8. function mouseup(fn);  


    ●  resize(fn) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 在每一個匹配元素的 resize 事件中綁定一個處理函數。當文檔窗口改變大小時觸發。 
  3.  *  
  4.  * @fn(Function) 在每一個匹配元素的 resize 事件中綁定的處理函數 
  5.  * @return jQuery Object 
  6.  * @owner jQuery Object 
  7.  */  
  8. function resize(fn);  
  9.   
  10. // 例子：讓人每次改變頁面窗口的大小時很鬱悶的方法。  
  11. $(document).resize(function() {  
  12.   alert("Stop it!");  
  13. });  


    ●  scroll(fn) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 在每一個匹配元素的 scroll 事件中綁定一個處理函數。當滾動條發生變化時觸發。 
  3.  *  
  4.  * @fn(Function)  在每一個匹配元素的 scroll 事件中綁定的處理函數 
  5.  * @return jQuery Object 
  6.  * @owner jQuery Object 
  7.  */  
  8. function scroll(fn);  
  9.   
  10. // 例子：當頁面滾動條變化時，執行的函數。  
  11. $(window).scroll( function() { /* ...do something... */ } );  


    ●  select() 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 觸發每一個匹配元素的 select 事件。 
  3.  *  
  4.  * 這個函數會調用執行綁定到 select 事件的所有函數，包括瀏覽器的默認行爲。可以通過在某個綁定的函數 
  5.  * 中返回 false 來防止觸發瀏覽器的默認行爲。 
  6.  *  
  7.  * @return jQuery Object 
  8.  * @owner jQuery Object 
  9.  */  
  10. function select();  
  11.   
  12. // 例子：觸發所有 input 元素的 select 事件。  
  13. $("input").select();  


    ●  select(fn) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 在每一個匹配元素的 select 事件中綁定一個處理函數。 
  3.  * 
  4.  * 當用戶在文本框(包括 input 和 textarea)中選中某段文本時會觸發 select 事件。 
  5.  * 
  6.  * @fn(Function) 在每一個匹配元素的 select 事件中綁定的處理函數 
  7.  * @return jQuery Object 
  8.  * @owner jQuery Object 
  9.  */  
  10. function select(fn);  


    ●  submit() 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 觸發每一個匹配元素的 submit 事件。 
  3.  * 
  4.  * 這個函數會調用執行綁定到 submit 事件的所有函數，包括瀏覽器的默認行爲。可以通過在某個綁定的函數 
  5.  * 中返回 false 來防止觸發瀏覽器的默認行爲。 
  6.  * 
  7.  * @return jQuery Object 
  8.  * @owner jQuery Object 
  9.  */  
  10. function submit();  
  11.   
  12. // 例子：提交本頁的第一個表單。  
  13. $("form:first").submit();  


    ●  submit(fn) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 在每一個匹配元素的 submit 事件中綁定一個處理函數。submit 事件將會在表單提交時觸發。 
  3.  * 
  4.  * @fn(Function) 在每一個匹配元素的 submit 事件中綁定的處理函數 
  5.  * @return jQuery Object 
  6.  * @owner jQuery Object 
  7.  */  
  8. function submit(fn);  
  9.   
  10. // 例子：如果你要阻止表單提交。  
  11. $("form").submit(function() {  
  12.   return false;  
  13. });  


    ●  unload(fn) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 在每一個匹配元素的 unload 事件中綁定一個處理函數。 
  3.  *  
  4.  * @fn(Function) 在每一個匹配元素的 unload 事件中綁定的處理函數 
  5.  * @return jQuery Object 
  6.  * @owner jQuery Object 
  7.  */  
  8. function unload(fn);  
  9.   
  10. // 例子：頁面卸載的時候彈出一個警告框。  
  11. $(document).unload( function () { alert("Bye now!"); } );  
apus9527
發佈了50 篇原創文章 · 獲贊 4 · 訪問量 2萬+
私信 關注
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

特別好用的輪播圖效果，簡單好用兼容好

<!--html代碼--> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1<

一个工作 2020-07-06 10:02:18

jquery下拉展示更多信息代碼，防止重複加載

var page=0; var isbool=true; //滾動加載方法2 $(window).scroll(function() { if (($(window).height() + $(window).scrollTop

一个工作 2020-07-06 10:02:18

a毛 jquery 學習記 2(上) “jquery學習方法 英文網頁怎麼看”

jquery 學習二   （上）        此處先多做點說明，在昨天的筆記中，下載jquery包我寫的有點簡單了，今天出去的時候突然想到還是全點兒的好，雖說很多東西在網上都可以查到，但我還是把自己這裏的筆記寫完全，以助於更多的剛接觸

一平米 2020-07-03 15:33:42

我的第六課：jQuery 效果 - 淡入淡出

 jQuery 效果 - 淡入淡出的代碼如下： <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <html>   <head>      <sc

没有一明天 2020-06-29 15:11:06

我的第二課：jquery點擊按鈕消失

jquery點擊按鈕消失的代碼如下： <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <html>   <head>       <script

没有一明天 2020-06-29 15:11:06

josn 數據的遍歷

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>json數據的遍歷</title> <script src="http:/

阿聪世家 2020-06-24 19:18:07

獲取url上某個參數的值

function getUrlParam(name) { //獲取url上某個參數的值 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r

阿聪世家 2020-06-24 19:17:53

jquery的trigger函數和select框change事件

鬱悶,被坑了3個小時,最後發現只一個函數就解決 心中N只草擬嗎奔騰而過有木有 有這樣一個需求,根據圖中選擇的天數,然後去後臺走不通的查詢,最後返回結果給前臺,剛開始在echarts中使用了$.post()請求路由，然後返回結果,但

小熊提伯斯 2020-06-22 09:04:22

jQuery 學習九(篩選)

●  eq(index)  Javascript代碼   /**   * 獲取第 N 個元素。   *   * @index(Integer) 元素在 jQuery 對象中的索引   * @return Object   *

apus9527 2020-06-19 22:30:06

jQuery 學習十四(工具函數)

●  jQuery.boxModel  Javascript代碼   /**   * 當前頁面中瀏覽器是否使用標準盒模型渲染頁面。   *    * @return Boolean 標準盒模型爲 true，否則爲 false

apus9527 2020-06-19 15:29:50

jQuery 學習七(選擇器)

    ●  在指定的上下文搜索  Javascript代碼   /**   * 在指定的上下文環境中搜索滿足選擇器表達式的 jQuery 對象。    *   * @selector(String) 選擇器   * @co

apus9527 2020-06-19 14:32:16

jQuery 學習八(屬性)

●  attr(name)  Javascript代碼   /**   * 取得第一個匹配元素的屬性值。通過這個方法可以方便地從第一個匹配元素中獲取一個屬性的值。   * 如果元素沒有相應屬性，則返回 undefined。 

apus9527 2020-06-19 14:32:06

jQuery 學習十三(效果)

 ●  hide()  Javascript代碼   /**   * 隱藏顯示的元素。   *   * 這個就是 "hide( speed, [callback] )" 的無動畫版。如果選擇的元素是隱藏的，這個方法將不會改變

apus9527 2020-06-19 14:32:05

Jquery對象動畫方法總結

注：中括號內爲可選參數 1.show()和hide():元素顯示和隱藏       $("#div1").show([3000],[function(){}]),顯示元素，第一個參數表示持續時間，第二個表示動畫完成時執行的函數；    

邪鼬 2020-06-16 05:52:11

jQuery+Ajax+asp進行數據庫交互01

在之前寫的ADO操作中，每次進行數據庫操作時，都會對網頁進行刷新。之後，在瞭解jQuery（javascript庫）和Ajax（異步響應）後，可以不再刷新整個網頁，完成頁面的響應事件。 在前端代碼中，使用jQuery的Ajax方法

小小毛喵 2020-06-07 10:40:14