本节咱们学习 jQuery
中的事件的应用,jQuery
是专门为响应 HTML 页面中的事件而设计的。咱们在应用时,须要遵循以下准则:
- 把所有
jQuery
代码置于事件处理函数中。 - 把所有事件处理函数置于文档就绪事件处理器中。
- 把
jQuery
代码置于独自的.js
文件中。 - 如果存在名称抵触,则重命名
jQuery
库。
什么是事件
首先咱们要晓得什么是事件,页面对不同访问者的响应叫做事件,例如点击某个按钮,抉择单选框或复选框,滑动鼠标等,这些都能够称为事件。
jQuery 罕用事件
在 jQuery
中,大多数 DOM
事件都有一个相应的 jQuery
办法。例如咱们后面提到过的点击事件的对应的办法为 click()
办法。
click 点击事件
当咱们点击元素时,会产生 click
点击事件,这须要用到 click()
办法。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛 (9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){$("button").click(function(){alert("hello, xkd!");
});
});
</script>
</head>
<body>
<div>
<button> 点击按钮 </button>
</div>
</body>
</html>
在浏览器中的演示成果:
dblclick 双击事件
当咱们双击元素时,会触发 dblclick
双击事件。触发双击事件须要用到 dblclick()
办法。
留神 dblclick
事件也会产生 click
事件,所有如果这两个事件都被利用于同一个元素,则会产生问题。
示例:
例如双击 p
元素并暗藏这个元素:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛 (9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){$("p").dblclick(function(){$(this).hide();});
});
</script>
</head>
<body>
<div>
<p> 双击暗藏此元素 </p>
</div>
</body>
</html>
在浏览器的演示成果:
鼠标事件
jQuery
的鼠标有四个相干的事件,包含鼠标指针进入、来到、按下、开释:
- 当鼠标指针穿过(进入)被选元素时,能够通过
mouseenter()
办法触发mouseenter
事件。 - 当鼠标指针来到 HTML 元素时,能够通过
mouseleave()
办法触发mouseleave
事件。 - 当鼠标指针挪动到元素上方,并按下鼠标按键时,能够通过
mousedown()
办法触发mousedown
事件。 - 当在元素上松开鼠标按钮时,能够通过
mouseup()
办法触发mouseup
事件。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛 (9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){$(".one").mouseenter(function(){alert("mouseenter 事件");
});
$(".two").mouseleave(function(){alert("mouseleave 事件");
});
$(".three").mousedown(function(){alert("mousedown 事件");
});
$(".four").mouseup(function(){alert("mouseup 事件");
});
});
</script>
</head>
<body>
<div>
<p class="one">mouseenter 事件,鼠标指针挪动到元素上,弹出弹出层 </p>
<p class="two">mouseleave 事件,鼠标指针来到元素上,弹出弹出层 </p>
<p class="three">mousedown 事件,在元素上按下鼠标,弹出弹出层 </p>
<p class="four">mouseup 事件,在元素上松开鼠标,弹出弹出层 </p>
</div>
</body>
</html>
hover() 办法
hover()
办法用于在鼠标指针悬停在被选元素上时要运行的两个函数。即 mouseenter()
和 mouseleave()
办法。
示例:
hover()
中第一个函数在鼠标进入 HTML 元素时执行,第二个函数在鼠标来到 HTML 元素时执行:
$(function(){$("p").hover(function(){console.log("鼠标进入 HTML 元素,执行第一个函数!");
},
function(){console.log("鼠标来到 HTML 元素,执行第二个函数!");
}
);
});
上述代码相当于:
$("p").mouseenter(function(){console.log("鼠标进入 HTML 元素,执行第一个函数!");
}).mouseleave(function(){console.log("鼠标来到 HTML 元素,执行第二个函数!");
});
咱们能够在浏览器中看一下演示成果:
focus() 和 blur() 办法
当表单元素取得焦点时,也能够说是通过鼠标点击选中元素或通过 tab
键定位到元素时,会产生 focus
事件。能够通过 focus()
办法来触发 focus
事件。
focus()
办法通常与 blur()
办法一起应用,当表单元素失去焦点时产生 blur
事件。blur
事件是通过 blur()
来触发的。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛 (9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){$("input").focus(function(){console.log("元素取得焦点");
});
$("input").blur(function(){console.log("元素失去焦点");
});
});
</script>
</head>
<body>
<div>
用户名:<input type="text">
</div>
</body>
</html>
在浏览器中的演示成果: