1. Document ready event
All code in JQuery is placed in the "document ready event";
$(document).ready(function(){
// Start writing jQuery code...}
);
Concise writing:
$( function(){
// start writing jQuery code...}
);
Second, the selector
jQuery syntax is to select HTML elements and perform certain operations on the selected elements.
Basic syntax: $(selector).action()
The dollar sign defines the jQuery
selector (selector) "query" and "find" HTML elements
jQuery's action () to perform operations on elements
All selectors in Query begin with a dollar sign: $().
The selector in JQuery is an important knowledge point, there are a variety of selectors.
1. id selector (switched with #):
$("#test").hide() - hides all elements with id="test";
2. Class name selector (starting with .):
$(".test").hide() - all elements with class="test" attribute are hidden;
3. Tag (type) selector:
$("p").hide() - hides all <p> tags;
$("p.classname") - selects <p> elements whose class is classname;
$("p :first") - selects the first <p> element;
$("ul li:first") - selects the first <li> element of the first <ul> element;
$("ul li:first-child") - selects the first <ul> element of each <li> element;
$(":button") - selects all <input> elements and <button> elements with type="button";
$("tr:even") - selects <tr> elements in even positions
$("tr:odd") - selects <tr> elements in odd positions
4. Attribute selector ([attr])
$("[href]") - selects elements with href attribute;
$("a[target='_blank']") - selects all target attribute values equal to "_blank" <a> elements
$("a[target!='_blank']") - selects all <a> elements whose target attribute value is not equal to "_blank"
5. Special selector
$("*") - selects all elements;
$(this) - selects the current HTML element;
3. Events
Unlike JavaScript, JQuery does not need to add "on", for example: onClick in JavaScript, click in JQuery.
Example: $("p").click(function(){
$(this).hide();
});
1. Common events
click - When the element is clicked, the click event occurs.
dblclick - The dblclick event occurs when an element is double-clicked.
mouseenter - The mouseenter event occurs when the mouse pointer crosses the element.
mouseleave - The mouseleave event occurs when the mouse pointer leaves the element.
mousedown - The mousedown event occurs when the mouse pointer is moved over an element and the mouse button is pressed.
mouseup - The mouseup event occurs when the mouse button is released on an element.
hover(fun1, fun2) - hover() method is used to simulate the cursor hover event, similar to the combination of mouseenter event and mouseleave event
fun1: specify the event when the mouse moves inside the element;
fun2: specify the event when the mouse moves out of the element;
focus() - The focus event occurs when the element gets focus.
blur() - The blur event occurs when the element loses focus.
See more events: https://www.runoob.com/jquery/jquery-events.html