~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
開發工具與關鍵技術：Visual Studio 2015 &&jQuery
作者：韋永桂
撰寫時間：2020 年05 月 05 日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
一、jQuery的頁面加載事件
簡寫形式：
$(function(){
// 在這里寫你的代碼...
})；或者
$(document).ready(function(){
// 在這里寫你的代碼...
});
二、jQuery中的滑鼠事件
1、click【滑鼠單擊事件】
$(".box").click(function (){
alert("這是一個當滑鼠單擊時觸發的click()事件")
});
2、dblclick【滑鼠雙擊事件】
$(".box").dblclick(function() {
alert("這是一個當滑鼠雙擊時觸發的dblclick()事件")
});
3、mousedown 【滑鼠移動到某個元素上被按下的時候觸發的事件】
$(".box").mousedown(function() {
alert("這是一個滑鼠被按下時觸發的mousedown()事件");
});
4、mouseup【當在元素上放松滑鼠按鈕時觸發的事件】
$(".box").mouseup(function() {
alert("這是一個當在元素上放松滑鼠按鈕時觸發的mouseup()事件");
});
5、mouseenter【當滑鼠指標穿過元素時觸發的事件】
$(".box").mouseenter(function() {
console.log("這是一個當滑鼠指標穿過元素時觸發的mouseenter()事件");
});
6、mouseleave【當滑鼠指標離開元素時觸發的事件】
$(".box").mouseleave(function() {
console.log("這是一個當滑鼠指標離開元素時觸發的mouseleave()事件");
});
【mouseenter()事件和mouseleave()事件大多數時候會一起使用】
7、mouseover【當滑鼠指標位于元素上方時觸發的事件】
$(".box").mouseover(function() {
console.log("這是一個當滑鼠指標位于元素上方時觸發的mouseover()事件");
});
8、mouseout【當滑鼠指標從元素上移開時觸發的事件】
$(".box").mouseout(function() {
console.log("這是一個當滑鼠指標從元素上移開時觸發的mouseout()事件");
});
【mouseover()事件和mouseout()事件大多數時候會一起使用】
三、jQuery中的表單事件
1、focus()【當元素獲得焦點時觸發的事件】
$(".wrapinput").focus(function () {
console.log("input已經獲取到了焦點");
});
2、focusin()【當元素獲得焦點時觸發的事件】
$(".wrap").focusin(function () {
$(this).addClass("bgPink");
console.log("input已經獲取到了焦點");
});
【focusin事件跟focus事件區別在于，focusin事件可以在父元素上檢測子元素獲取焦點的情況】
3、blur()【當元素失去焦點時觸發的事件】
$(".wrapinput").blur(function () {
console.log("input已經失去了焦點");
});
4、focusout()【當元素失去焦點時觸發的事件】
$(".wrap").focusout(function () {
$(this).removeClass("bgPink");
console.log("input已經失去了焦點");
});
【focusout事件跟blur事件區別在于，focusout事件可以在父元素上檢測子元素失去焦點的情況】
5、change()【通過該事件可以監聽<input>、<textarea>和<select>元素值的改變動作】
input元素【當value值有改變時，失去焦點后觸發change事件】
$("forminput").change(function (event) {
console.log(event.target.value);
});
select元素【對于下拉選擇框，當用戶用滑鼠作出選擇時，該事件立即觸發】
$("form select").change(function() {
var value = $(this).val();
console.log(value);
});
textarea元素【多行文本輸入框，當有改變時，失去焦點后觸發change事件】
$("formtextarea").change(function () {
console.log(event.target.value);
});
四、jQuery中的鍵盤事件
1、keydown()【當鍵盤或按鈕被按下時觸發事件】
$(".target1").keydown(function(e) {
console.log(e.target.value);
$("em").first().text(e.target.value);
});
2、keyup()事件【當按鈕被松開時觸發事件】
$(".target2").keyup(function(e) {
console.log(e.target.value);
$("em:last").text(e.target.value);
});
五、jQuery中的的系結和解綁事件
1、給元素系結一個點擊事件 on方式
$("#div1").on("click",function (e) {
$(this).text("觸發了：" +e.type);
})
2、多個事件系結同一個函式
$("#div2").on("mousedownmouseup", function (e) {
$(this).text("觸發了：" +e.type);
})
3、多個事件系結不同函式
$("#div3").on({
mousedown: function () {
$(this).attr("class","bgGreen");
},
mouseup: function () {
$(this).removeAttr("class");
}
});
4、系結2個事件
$("elem").on("mousedownmouseup",fn)
5、洗掉一個事件
$("elem").off("mousedown")
6、洗掉所有事件
$("elem").off("mousedownmouseup")
7、快捷方式洗掉所有事件，這里不需要傳遞事件名了，節點上系結的所有事件講全部銷毀
$("elem").off()
uj5u.com熱心網友回復：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/48712.html
標籤：JavaScript
上一篇：前端和后臺的連接