• <nav id="wkkge"><strong id="wkkge"></strong></nav>
  • <menu id="wkkge"></menu>
  • jQuery教程
    jQuery選擇器
    jQuery動畫效果
    jQuery節點操作
    jQuery事件
    jQuery HTML
    jQuery遍歷
    jQuery其他
    jQuery Ajax
    jQuery參考手冊
    jQuery實例
    jQuery插件

    jQuery事件

     

     

    jQuery 是為事件處理特別設計的。

     

     

    什么是事件?

     

    頁面對不同訪問者的響應叫做事件。

     

    事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。

     

    實例:

     

    • 在元素上移動鼠標。

     

    • 選取單選按鈕

     

    • 點擊元素

     

    在事件中經常使用術語"觸發"(或"激發")例如: "當您按下按鍵時觸發 keypress 事件"。

     

    常見 DOM 事件:

     

    鼠標事件

    鍵盤事件

    表單事件

    文檔/窗口事件

    click

    keypress

    submit

    load

    dblclick

    keydown

    change

    resize

    mouseenter

    keyup

    focus

    scroll

    mouseleave

     

    blur

    unload

    hover

         

     

     

    jQuery 事件方法語法

     

    在 jQuery 中,大多數 DOM 事件都有一個等效的 jQuery 方法。

     

    頁面中指定一個點擊事件:

     

    $("p").click();

     

    下一步是定義什么時間觸發事件。您可以通過一個事件函數實現:

     

    $("p").click(function(){
        // 動作觸發后執行的代碼!!
    });

     

     

    常用的 jQuery 事件方法

     

    ① $(document).ready()

     

    $(document).ready() 方法允許我們在文檔完全加載完后執行函數。該事件方法在 jQuery 語法 章節中已經提到過。

     

    ② click()

     

    click() 方法是當按鈕點擊事件被觸發時會調用一個函數。

     

    該函數在用戶點擊 HTML 元素時執行。

     

    在下面的實例中,當點擊事件在某個 <p>元素上觸發時,隱藏當前的 <p>元素:

     

    $("p").click(function(){
      $(this).hide();
    });

     

    ③ dblclick()

     

    當雙擊元素時,會發生 dblclick 事件。

     

    dblclick() 方法觸發 dblclick 事件,或規定當發生 dblclick 事件時運行的函數:

     

    $("p").dblclick(function(){
      $(this).hide();
    });

     

    ④ mouseenter()

     

    當鼠標指針穿過元素時,會發生 mouseenter 事件。

     

    mouseenter() 方法觸發 mouseenter 事件,或規定當發生 mouseenter 事件時運行的函數:

     

    $("#p1").mouseenter(function(){
        alert('您的鼠標移到了 id="p1" 的元素上!');
    });

     

    ⑤ mouseleave()

     

    當鼠標指針離開元素時,會發生 mouseleave 事件。

     

    mouseleave() 方法觸發 mouseleave 事件,或規定當發生 mouseleave 事件時運行的函數:

     

    $("#p1").mouseleave(function(){
        alert("再見,您的鼠標離開了該段落。");
    });

     

    ⑥ mousedown()

     

    當鼠標指針移動到元素上方,并按下鼠標按鍵時,會發生 mousedown 事件。

     

    mousedown() 方法觸發 mousedown 事件,或規定當發生 mousedown 事件時運行的函數:

     

    $("#p1").mousedown(function(){
        alert("鼠標在該段落上按下!");
    });

     

    ⑦ mouseup()

     

    當在元素上松開鼠標按鈕時,會發生 mouseup 事件。

     

    mouseup() 方法觸發 mouseup 事件,或規定當發生 mouseup 事件時運行的函數:

     

    $("#p1").mouseup(function(){
        alert("鼠標在段落上松開。");
    });

     

    ⑧ hover()

     

    hover()方法用于模擬光標懸停事件。

     

    當鼠標移動到元素上時,會觸發指定的第一個函數(mouseenter);當鼠標移出這個元素時,會觸發指定的第二個函數(mouseleave)。

     

    $("#p1").hover(
        function(){
            alert("你進入了 p1!");
        },
        function(){
            alert("拜拜! 現在你離開了 p1!");
        }
    );

     

    ⑨ focus()

     

    當元素獲得焦點時,發生 focus 事件。

     

    當通過鼠標點擊選中元素或通過 tab 鍵定位到元素時,該元素就會獲得焦點。

     

    focus() 方法觸發 focus 事件,或規定當發生 focus 事件時運行的函數:

     

    $("input").focus(function(){
      $(this).css("background-color","#cccccc");
    });

     

    ⑩ blur()

     

    當元素失去焦點時,發生 blur 事件。

     

    blur() 方法觸發 blur 事件,或規定當發生 blur 事件時運行的函數:

     

    $("input").blur(function(){
      $(this).css("background-color","#ffffff");
    });

     

     

    全部教程
  • <nav id="wkkge"><strong id="wkkge"></strong></nav>
  • <menu id="wkkge"></menu>
  • 面对面棋牌游戏