[jQuery] Event:事件

[jQuery] Event:事件

jQuery事件與方法

在jQuery中,DOM事件會對應一個jQuery的方法。

若要指派一個click事件,語法如下:

$("p").click();

 

指派事件後定義事件發生後要執行的動作,在事件中加入一個function:

$("p").click(function(){
  //要執行的程式
});

 

常見的jQuery事件方法

 

$(document).ready()

$(document).ready()方法可以讓function在HTML完全載入後執行,避免HTML元素尚未建立而發生錯誤。

 

click()

click()方法可以在HTML元素中加入事件來執行function,當點擊HTML元素時便會執行function。

click()事件範例:

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/jquery-3.1.1.min.js"></script>
    <script>
 $(document).ready(function () {
            $("p").click(function () {
                $(this).hide();
            });
});
    </script>
</head>

<body>

    <h2>jQuery</h2>

    <p id="first">第一個p標籤</p>
    <p id="second">第二個p標籤</p>

</body>
</html>

 $(document).ready(function () { } ); HTML載入完畢後才執行function,避免找不到HTML元素。

$("p").click(function () { }); 指派<p>標籤加上click事件與執行function。

$(this).hide(); 將目前選取的HTML元素執行hide()方法,隱藏選取的HTML元素。

初始畫面:

 

點擊<p>標籤後,隱藏點擊的項目:

 

dblclick()

dblclick()方法可以在HTML元素中加入事件來執行function,當點擊兩下HTML元素時便會執行function。

dblclick()事件範例:

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/jquery-3.1.1.min.js"></script>
    <script>
 $(document).ready(function () {
            $("p").dblclick(function () {
                $(this).hide();
            });
});
    </script>
</head>

<body>

    <h2>jQuery</h2>

    <p id="first">第一個p標籤</p>
    <p id="second">第二個p標籤</p>

</body>
</html>

 $(document).ready(function () { } ); HTML載入完畢後才執行function,避免找不到HTML元素。

$("p").dblclick(function () { }); 指派<p>標籤加上dblclick事件與執行function。

$(this).hide(); 將目前選取的HTML元素執行hide()方法,隱藏選取的HTML元素。

初始畫面:

 

點擊兩下<p>標籤後,隱藏點擊的項目:

 

mouseenter()

mouseenter()方法可以在HTML元素中加入事件來執行function,當滑鼠進入HTML元素時便會執行function。

mouseenter()事件範例:

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/jquery-3.1.1.min.js"></script>
    <script>
 $(document).ready(function () {
            $("p").mouseenter(function () {
                alert("這是"+this.id);
            });
});
    </script>
</head>

<body>

    <h2>jQuery</h2>

    <p id="first">第一個p標籤</p>
    <p id="second">第二個p標籤</p>

</body>
</html>

$(document).ready(function () { } ); HTML載入完畢後才執行function,避免找不到HTML元素。

$("p").mouseenter(function () { }); 指派<p>標籤加上mouseenter事件與執行function。

alert("這是"+this.id); 跳出訊息顯示文字與目前元素的id。

初始畫面:

 

滑鼠進入<p>標籤後,跳出訊息:

 

mouseleave()

mouseleave()方法可以在HTML元素中加入事件來執行function,當滑鼠離開HTML元素時便會執行function。

mouseleave()事件範例:

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/jquery-3.1.1.min.js"></script>
    <script>
 $(document).ready(function () {
            $("p").mouseleave(function () {
                alert("離開"+this.id);
            });
});
    </script>
</head>

<body>

    <h2>jQuery</h2>

    <p id="first">第一個p標籤</p>
    <p id="second">第二個p標籤</p>

</body>
</html>

$(document).ready(function () { } ); HTML載入完畢後才執行function,避免找不到HTML元素。

$("p").mouseleave(function () { }); 指派<p>標籤加上mouseleave事件與執行function。

alert("離開"+this.id); 跳出訊息顯示文字與目前元素的id。

初始畫面:

 

滑鼠離開<p>標籤後,跳出訊息:

 

mousedown()

mousedown()方法可以在HTML元素中加入事件來執行function,當滑鼠按下HTML元素時便會執行function。

mousedown()事件範例:

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/jquery-3.1.1.min.js"></script>
    <script>
 $(document).ready(function () {
            $("p").mousedown(function () {
                alert("按下"+this.id);
            });
});
    </script>
</head>

<body>

    <h2>jQuery</h2>

    <p id="first">第一個p標籤</p>
    <p id="second">第二個p標籤</p>

</body>
</html>

$(document).ready(function () { } ); HTML載入完畢後才執行function,避免找不到HTML元素。

$("p").mousedown(function () { }); 指派<p>標籤加上mousedown事件與執行function。

alert("按下"+this.id); 跳出訊息顯示文字與目前元素的id。

初始畫面:

 

滑鼠按下<p>標籤後,跳出訊息:

 

mouseup()

mouseup()方法可以在HTML元素中加入事件來執行function,當滑鼠按下HTML元素後放開時便會執行function。

mouseup()事件範例:

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/jquery-3.1.1.min.js"></script>
    <script>
 $(document).ready(function () {
            $("p").mouseup(function () {
                alert("放開"+this.id);
            });
});
    </script>
</head>

<body>

    <h2>jQuery</h2>

    <p id="first">第一個p標籤</p>
    <p id="second">第二個p標籤</p>

</body>
</html>

$(document).ready(function () { } ); HTML載入完畢後才執行function,避免找不到HTML元素。

$("p").mouseup(function () { }); 指派<p>標籤加上mouseup事件與執行function。

alert("放開"+this.id); 跳出訊息顯示文字與目前元素的id。

初始畫面:

 

滑鼠按下<p>標籤並放開後,跳出訊息:

 

hover()

hover()方法有兩個function結合兩種方法,mouseenter()與mouseleave()。

第一個function會在滑鼠進入HTML元素時執行,第二個function會在滑鼠離開HTML元素時執行。

hover()事件範例:

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/jquery-3.1.1.min.js"></script>
    <script>
 $(document).ready(function () {
            $("p").hover(function () {
                alert("進入"+this.id);
            },
            function () {
                alert("離開"+this.id)
            });
});
    </script>
</head>

<body>

    <h2>jQuery</h2>

    <p id="first">第一個p標籤</p>
    <p id="second">第二個p標籤</p>

</body>
</html>

$(document).ready(function () { } ); HTML載入完畢後才執行function,避免找不到HTML元素。

$("p").hover(function () { },function () { }); 指派<p>標籤加上hover事件與執行function。第一個function為mouseenter(),第二個function為mouseleave()。

alert("進入"+this.id); 跳出訊息顯示文字與目前元素的id。

alert("離開"+this.id); 跳出訊息顯示文字與目前元素的id。

初始畫面:

 

滑鼠進入<p>標籤後,跳出訊息:

滑鼠離開<p>標籤後,跳出訊息:

 

focus()

focus()方法可以在HTML元素中加入事件來執行function,當滑鼠點進欄位框時執行function。

focus()事件範例:

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/jquery-3.1.1.min.js"></script>
    <script>
 $(document).ready(function () {
     $("input").focus(function () {
         $(this).css("background-color", "#cccccc");
     })
});
    </script>
</head>

<body>

    <h2>jQuery</h2>

    名字:<input type="text" name="name" /><br />
    信箱:<input type="text" name="name" />

</body>
</html>

$(document).ready(function () { } ); HTML載入完畢後才執行function,避免找不到HTML元素。

$("input").focus(function () { }); 指派<input>標籤加上focus事件與執行function。

$(this).css("background-color", "#cccccc"); 將目前選取的HTML元素加入background-color的CSS樣式。

滑鼠點進欄位時,欄位的底色變色:

 

blur()

blur()方法可以在HTML元素中加入事件來執行function,當滑鼠離開欄位框時執行function。

blur()事件範例:

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/jquery-3.1.1.min.js"></script>
    <script>
 $(document).ready(function () {
     $("input").focus(function () {
         $(this).css("background-color", "#cccccc");
     })
     $("input").blur(function () {
         $(this).css("background-color", "#ffffff");
     })
});
    </script>
</head>

<body>

    <h2>jQuery</h2>

    名字:<input type="text" name="name" /><br />
    信箱:<input type="text" name="name" />

</body>
</html>

$(document).ready(function () { } ); HTML載入完畢後才執行function,避免找不到HTML元素。

$("input").focus(function () { }); 指派<input>標籤加上focus事件與執行function。

$(this).css("background-color", "#cccccc"); 將目前選取的HTML元素加入background-color的CSS樣式。

$("input").blur(function () { }); 指派<input>標籤加上blur事件與執行function。

$(this).css("background-color", "#ffffff"); 將目前選取的HTML元素加入background-color的CSS樣式。

滑鼠點進欄位時,欄位的底色變色:

 

滑鼠離開欄位時,欄位的底色變色:

 

on()

on()方法可以在HTML元素中加入一個或多個事件來執行function。

在<p>標籤加入click事件:

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/jquery-3.1.1.min.js"></script>
    <script>
 $(document).ready(function () {
     $("p").on("click", function () {
         $(this).hide();
     });
});
    </script>
</head>

<body>

    <h2>jQuery</h2>

    <p id="first">第一個p標籤</p>
    <p id="second">第二個p標籤</p>

</body>
</html>

$(document).ready(function () { } ); HTML載入完畢後才執行function,避免找不到HTML元素。

$("p").on("click", function () { }) 指派<p>標籤加上on()事件,on()方法中加入click事件與執行function。

$(this).hide(); 將目前選取的HTML元素執行hide()方法,隱藏選取的HTML元素。

初始畫面:

 

點擊<p>標籤後,隱藏點擊的項目:

 

 

在<p>標籤加入多個事件:

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/jquery-3.1.1.min.js"></script>
    <script>
 $(document).ready(function () {
     $("p").on({
         mouseenter: function () {
             $(this).css("background-color", "lightgray");
         },
         mouseleave: function () {
             $(this).css("background-color", "lightblue");
         },
         click: function () {
             $(this).css("background-color", "yellow");
         }
     });
});
    </script>
</head>

<body>

    <h2>jQuery</h2>

    <p id="first">第一個p標籤</p>

</body>
</html>

$(document).ready(function () { } ); HTML載入完畢後才執行function,避免找不到HTML元素。

$("p").on() 指派<p>標籤加上on()事件,on()方法中加入個個事件與執行function。

mouseenter: function () { } 指派mouseenter事件與function。
 $(this).css("background-color", "lightgray");  變更當前選取的HTML元素,改變背景顏色為灰色。

mouseleave: function () { } 指派mouseleave事件與function。
$(this).css("background-color", "lightblue"); 變更當前選取的HTML元素,改變背景顏色為藍色。

click: function () { } 指派click事件與function。
$(this).css("background-color", "yellow"); 變更當前選取的HTML元素,改變背景顏色為黃色。 

 

滑鼠進入<p>標籤後,被景色改為灰色:

 

滑鼠點擊<p>標籤後,被景色改為黃色:

 

滑鼠離開<p>標籤後,被景色改為藍色:

 

 END 

回目錄