In this section, we learn jQuery the use of events in jQuery . 061683ef54bcc7 is specifically designed to respond to events in HTML pages. When we use it, we need to follow the following principles:
- Put all
jQuerycode in the event handler. - Put all event handlers in the document ready event handler.
- Put the
jQuerycode in a separate.jsfile. - If there is a name conflict, rename the
jQuerylibrary.
What is an event
First of all, we need to know what an event is. The response of a page to different visitors is called an event. For example, clicking a button, selecting a radio button or check box, sliding the mouse, etc., can all be called events.
jQuery common events
In jQuery , most DOM events have a corresponding jQuery method. For example, the corresponding method of the click event we mentioned earlier is the click() method.
click event
When we click on the element, the click click event will occur, which requires the click() method.
Example:
<!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>Demonstration effect in the browser:
dblclick double click event
When we double-click the element, the dblclick double-click event will be triggered. dblclick() method is needed to trigger the double-click event.
Note that the dblclick event will also generate the click event, so if these two events are applied to the same element, it will cause problems.
Example:
For example, double-click the p element and hide this element:
<!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>Demonstration effect in the browser:
Mouse event
jQuery mouse has four related events, including mouse pointer entering, leaving, pressing, and releasing:
- When the mouse pointer passes through (enters) the selected element, the
mouseenterevent can be triggeredmouseenter() - When the mouse pointer leaves the HTML element, the
mouseleaveevent can be triggeredmouseleave() - When the mouse pointer moves over the element and the mouse button is pressed, the
mousedownevent can be triggeredmousedown() - When the mouse button is released on the element, the
mouseupevent can be triggeredmouseup()
Example:
<!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() method
hover() method is used to run two functions when the mouse pointer hovers over the selected element. That is, the mouseenter() and mouseleave() methods.
Example:
hover() first function in 061683ef54c863 is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element:
$(function(){
$("p").hover(
function(){
console.log("鼠标进入HTML元素，执行第一个函数!");
},
function(){
console.log("鼠标离开HTML元素，执行第二个函数!");
}
);
});The above code is equivalent to:
$("p").mouseenter(function(){
console.log("鼠标进入HTML元素，执行第一个函数!");
}).mouseleave(function(){
console.log("鼠标离开HTML元素，执行第二个函数!");
});We can look at the demo effect in the browser:
focus() and blur() methods
When the form element gets the focus, it can also be said that when the element is selected by mouse click or the element is positioned tab focus event will occur. focus event can be triggered by the focus()
focus() method is usually blur() method. The blur event occurs when the form element loses focus. blur event is triggered blur()
Example:
<!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>Demonstration effect in the browser:
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。