JQuery several common events
1. Event ready(fn)
When the DOM (document object model) has been loaded and the page (including image) has been fully rendered, the ready event will occur. Generally speaking, this function event will be executed when the page is loaded. You can use $(document) in the same page infinitely Ready() event. The registered functions will be executed in sequence (in the code).
$(document).ready(function(){
// Write your code here
});
Use $(document) The abbreviation of ready() (the most commonly used), and the internal jQuery code still uses $as an alias, regardless of the global $name.
$(function($) {
// You can continue to use $as an alias here
});
2. Click the event click([[data],fn])
Trigger the click event of each matching element.
This function will call and execute all functions bound to the click event.
//Add a click event for the button with id btn
$("#btn").click(function(){
alert("Trigger click event");
})
//When you click p, the p is hidden
$("p").click( function () { $(this).hide(); });
3. Double click the event dblclick([[data],fn])
Click occurs when the mouse pointer hovers over the element and then the left mouse button is pressed and released. Click twice in a short time, that is, a double click event. Tip: if dblclick and click events are applied to the same element, problems may arise.
//Add a double-click event for the button with id btn
$("#btn").dblclick(function(){
alert("Trigger double click event");
})
4. Mouse move in event mousemove([[data],fn])
The mousemove event occurs when the mouse pointer moves in the specified element.
The mousemove event handler is passed a variable - the event object, which clientX and The clientY property represents the coordinates of the mouse
The mousemove event is triggered whether the mouse pointer leaves the selected element or any child element. The mouseenter event is triggered only when the mouse pointer leaves the selected element.
//When the mouse moves into the page, the position of the mouse pointer in the page is obtained and displayed in span
$(document).mousemove(function(e){
$("span").text(e.pageX + ", " + e.pageY);
});
5. Mouse out event mouseout([[data],fn])
The mouseout event occurs when the mouse pointer moves away from the element.
Most of the time, this event will be related to mouseover Event.
Note: unlike the mouseleave event, the mouseout event is triggered when the mouse pointer leaves the selected element or any child element. The mouseleave event is triggered only when the mouse pointer leaves the selected element. Take a look at the demonstration of the following example.
//When the mouse moves away from the element, change the background color of the element:
$("p").mouseout(function(){
$("p").css("background-color","#E9E9E4");
});
6. Mouse composite event (hover([over,]out))
A method that mimics hover events (moving the mouse over and out of an object). This is a custom method that provides a "stay in" state for frequently used tasks.
When the mouse moves over a matching element, the first function specified is triggered. When the mouse moves out of this element, the specified second function is triggered. Moreover, it will be accompanied by the detection of whether the mouse is still in a specific element (for example, an image in div). If so, it will continue to maintain the "hover" state without triggering the move out event (fixed a common error of using the mouseout event).
Over: move the mouse over the element to trigger the function
Out: the function to be triggered when the mouse moves out of the element
$("td").hover(
//Mouse over tables plus specific classes
function () {
$(this).addClass("hover");//Unlike js, addClass does not overwrite the original class, but can be shared by two classes
},
//Add and delete classes in the table moved out by the mouse
function () {
$(this).removeClass("hover");
}
);
7. Keyboard press event keydown([[data],fn])
The keydown event occurs when the keyboard is pressed.
Note: if set on a document element, this event occurs regardless of whether the element gets focus or not.
$(window).keydown(function(event){
//When the keyboard is pressed on the page, the Keycode of the key pops up
alert(event.keyCode);
// ...
// Different keys can do different things
// Different browsers have different keycode s
// More details: http://unixpapa.comjs/key.html
// Common keyCode: space 32 enter 13 ESC 27
});
8. Keyboard release event keyup([[data],fn])
The keyup event occurs when the button is released. It occurs on the element currently in focus.
Note: if set on a document element, this event occurs regardless of whether the element gets focus or not.
$("input").keyup(function(){
//Release the keyboard to change the color of the text field
$("input").css("background-color","red");
});
9. Keyboard typing event keypress([[data],fn])
The keypress event occurs when the keyboard or button is pressed.
The keypress event is similar to the keydown event. This event occurs when the button is pressed. It occurs on the element currently in focus. However, unlike the keydown event, the keypress event occurs every time a character is inserted. Note: if set on a document element, this event occurs regardless of whether the element gets focus or not.
$("input").keypress(function(){
//The keyboard produces printable characters
alert("Keyboard typing);
});
10. The element obtains the focus([[data],fn])
The focus event is triggered when the element gets focus.
It can be triggered by mouse click or TAB navigation on the keyboard. This will trigger all bound focus functions. Note that some objects do not support the focus method.
//Add a get focus event for the text box with type=text
$("input[type=text]").focus(function(){
//Make text boxes unusable:
this.blur();//The current node loses focus
});
11. Element loses focus blur([[data],fn])
The blur event is triggered when an element loses focus.
This function will call and execute all functions bound to the blur event, including the browser's default behavior. You can prevent the default behavior of the browser from being triggered by returning false. The blur event is triggered when the element loses focus, either by mouse action or by pressing tab.
//When any paragraph loses focus, a "Hello World!" pops up Handler bound in the blur event of each matching element.
$("p").blur( function () { alert("Hello World!"); } );
12. Element value change([[data],fn])
The change event occurs when the value of an element changes.
This event applies only to text fields and textarea and select elements. When used to select elements, the change event occurs when an option is selected. When used to text fields or text area s, this event occurs when the element loses focus.
$("input[type='text']").change( function() {
// You can write some verification code here
});
13. Form submission event submit([[data],fn])
When a form is submitted, a submit event occurs.
This event applies only to form elements.
//Submit the first form on this page
$("form:first").submit();
//If you want to block form submission:
$("form").submit( function () {
return false;
} );
Binding event
An event handler that binds one or more events to the selected element.
The on() method binds the event handler to the element in the currently selected jQuery object. In jQuery 1.7 The on() method provides all the functionality required to bind event handlers.
$("form").on("submit",function(){
//Triggered when the form is submitted
alert("Submitted successfully!");
})
//Code 2
//The resize event occurs when the browser window is resized.
//When the user scrolls the specified element, the scroll event occurs.
$(window).on("resize scroll",function(){
//When the user triggers resize or scroll, the background turns red
$("body").css("background","red");
})
//Code 3
//Add multiple events as objects
$("#name").on({
//Get focus
focus:function(){
$("#name").val("");
},
//When losing focus
blur:function(){
if ($("#name").val()=="") {
$("#name").val(" please enter user name ")
}
}
})
Move out event
An event handler that removes one or more events from the selection element.
$("form").on("submit",function(){
//Triggered when the form is submitted
alert("Submitted successfully!");
})
//Code 2
//The resize event occurs when the browser window is resized.
//When the user scrolls the specified element, the scroll event occurs.
$(window).on("resize scroll",function(){
//When the user triggers resize or scroll, the background turns red
$("body").css("background","red");
})
//Code 3
//Add multiple events as objects
$("#name").on({
//Get focus
focus:function(){
$("#name").val("");
},
//When losing focus
blur:function(){
if ($("#name").val()=="") {
$("#name").val(" please enter user name ")
}
}
})
$("#btndel").on("click",function(){
//Unbind submit event
$("form").off("submit");
//Unbind text box focus and blur events
$("#name").off("focus blur");
})
Finally, inserting a knowledge point * Jquery core each (function {}) is equivalent to loop traversal.
Definition and Usage each() Method specifies the function to run for each matching element. Tip: Return false It can be used to stop the cycle early. $(selector).each(function(index,element)) parameter: function(index,element) describe: Required. Specify the function to run for each matching element. index - Selector index position element - Current element (can also be used) "this" (selector)
//Output text for each li element:
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});