日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
jQuery學習大總結(jié)(四)jQuery事件

前三篇總結(jié)了jQuery的一些基礎(chǔ)，有jQuery對象的介紹、jQuery操作css樣式和jQuery操作元素。今天總結(jié)一下jQuery事件，這是比較重要的一塊，希望本次總結(jié)能幫助到很多同我一樣的新手。

成都創(chuàng)新互聯(lián)專業(yè)做網(wǎng)站、成都網(wǎng)站設(shè)計，集網(wǎng)站策劃、網(wǎng)站設(shè)計、網(wǎng)站制作于一體，網(wǎng)站seo、網(wǎng)站優(yōu)化、網(wǎng)站營銷、軟文推廣等專業(yè)人才根據(jù)搜索規(guī)律編程設(shè)計，讓網(wǎng)站在運行后，在搜索中有好的表現(xiàn)，專業(yè)設(shè)計制作為您帶來效益的網(wǎng)站！讓網(wǎng)站建設(shè)為您創(chuàng)造效益。

首先，我們來看一個有用的實例，來加深以前所掌握的知識，其中有些是在前邊出現(xiàn)過的。

 
 
 
    
  
  
  
    2. 
  
  
  
  2.  
    3. 
 
 
 
 
 
 
    
  
  
  
  1. jQuery(document).ready(function() {
    2. 
  
  
  
  2.     jQuery("#btnHide").click(function() {
    3. 
  
  
  
  3.         jQuery("#imgGoogle").hide("1000");
    4. 
  
  
  
  4.     });
    5. 
  
  
  
  5. });
    6.

當點擊隱藏圖片時，google的logo圖片將在一秒鐘進行隱藏。這里我們用到了hide()方法，當然也可不指定時間，如果要顯示圖片的話應(yīng)該使用show()方法，感覺是不是很棒。

現(xiàn)在開始本篇的主要內(nèi)容：事件。大家可能已經(jīng)注意到了，上邊已經(jīng)在多處用到了事件。其中，document.ready就是一個事件，當文檔準備好了，它告訴jQuery可以執(zhí)行事件了，鼠標移動、點擊、文本框焦點離開等都是事件。

在過去，我們經(jīng)?？吹剑?/p>

 
 
 
    
  
  
  
  1. 在北京

這種寫法。從現(xiàn)在開始，大家應(yīng)該拋棄這種寫法。實現(xiàn)js代碼和html的分離，這樣頁面整潔了，效率也會更高。現(xiàn)在的寫法，將會變成：

 
 
 
    
  
  
  
  1. jQuery("#divRent").click(function() {
    2. 
  
  
  
  2.     alert("租房貴");
    3. 
  
  
  
  3. });
    4.

既然是總結(jié)，我還是像前三篇那樣，用實例來記錄盡可能多的事件方法，方便大家在需要的時候查閱。

以下是自己在學習過程中遇到的：

1、one()事件，綁定要執(zhí)行一次的事件

 
 
 
    
  
  
  
  1. 人在北京

 
 
 
    
  
  
  
  1. jQuery("#divRent").one("click", function() {
    2. 
  
  
  
  2.     alert("租房貴");
    3. 
  
  
  
  3. });
    4.

以上綁定一次單擊事件，第二次點擊時，不會再彈出提示。

2、focus()和blur()事件

 
 
 
    
  
  
  
  1.  
    2. 
 
 
 
 
 
 
    
  
  
  
  1. jQuery("#tTest").focus(function() { 
    2. 
  
  
  
  2.     jQuery(this).css("background", "yellow"); 
    3. 
  
  
  
  3. }).blur(function() { 
    4. 
  
  
  
  4.     jQuery(this).css("background", "white"); 
    5. 
  
  
  
  5. });
    6.

此例實用到了鏈式寫法，相信不難理解。如果對jQuery操作css樣式不熟悉，可以看看第二篇總結(jié)。此例當焦點聚焦在本文框時，背景色變?yōu)辄S色，離開時又變回白色。這樣做的目的，可以提高用戶體驗，我個人感覺。

3、keydown()和keyup()事件

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2.  
    3. 
 
 
 
 
 
 
    
  
  
  
  1. jQuery("#tTest").keyup(function() { 
    2. 
  
  
  
  2.     jQuery("#lResult").html(jQuery(this).val()); 
    3. 
  
  
  
  3. }); 
    4.

當鍵彈起時（這里感覺不好表達^_^），在label中將會顯示文本框中的內(nèi)容。操作元素屬性部分可以看看第三篇總結(jié)。

4、submit()事件

 
 
 
    
  
  
  
    2. 
  
  
  
  2.      
    3. 
  
  
  
  3.      
    4. 
  
  
  
  4.      
    5. 
  
  
  
  5.  
    6. 
 
 
 
 
 
 
    
  
  
  
  1. jQuery("#form1").submit(function() { 
    2. 
  
  
  
  2.     if (jQuery.trim(jQuery("#text").val()).length == 0) { 
    3. 
  
  
  
  3.         return false; 
    4. 
  
  
  
  4.     } 
    5. 
  
  
  
  5. });
    6.

可以看出，本實例使用了服務(wù)器控件。實質(zhì)上是一樣的，最終會進行表單提交。點擊按鈕時，進行表單提交。如果文本框內(nèi)容為空時，返回false，從而不進行提交；否則，進行提交。此類應(yīng)用在web開發(fā)中隨處可見。

5、hover()事件

 
 
 
    
  
  
  
  1. hover me

 
 
 
    
  
  
  
  1. jQuery("#divHover").hover(function() { 
    2. 
  
  
  
  2.     jQuery(this).css("background", "yellow"); 
    3. 
  
  
  
  3. }, function() { 
    4. 
  
  
  
  4.     jQuery(this).css("background", "red"); 
    5. 
  
  
  
  5. });
    6.

鼠標移動到div上時，div背景色變成黃色，移出背景色變成紅色。

以上幾種事件是比較常見的，也是用的比較多的。當然本篇總結(jié)的只是一小部分，學習中遇到問題還得用jQuery文檔進行查閱。


名稱欄目：jQuery學習大總結(jié)(四)jQuery事件
轉(zhuǎn)載來于：http://www.dlmjj.cn/article/djsjedj.html