[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元素，改變背景顏色為黃色。
