This is the 26th day of my participation in the August More Text Challenge.
jQuery
1. JavaScript Library
● Is a specific set (methods and functions) encapsulated
● Simple understanding is a JS file, in the face of our native JS code is encapsulated, we can quickly call these encapsulated functions. JQuery, for example, is for quick and easy manipulation of the DOM. JQuery is a JS file that encapsulates many functions (DOM operations)
2. How to use jQuery
1. Download jQuery file
● Copy the code from jQuery’s official website and paste it into a new JS file (usually using the compressed version of the code). Name this js file jquery.min.js.
2. Import jQuery files
3. JQuery code writing
The jQuery entry function waits for the PAGE DOM to load before executing the code, which is equivalent to the DOMContentLoaded event in the BOM.
$(document).ready(function(){})
$(function(){})
● The code in function can be executed after the DOM structure is rendered, instead of waiting for all external resources to load
● Different from Load event, Load event is the page document, external JS files, CSS files, images loaded before the execution of the code
JQuery top-level object $
1. $is another name for jQuery
2,
Wrapped as a jQuery object, you can call jQuery methods. Such as: $(‘ div ‘). Hide ();
JQuery object and DOM object
● The pairs obtained with native JS are DOM objects (document.querySelector(“)).
$(‘ ‘); $(‘ ‘);
● The essence of jQuery object is an object generated by wrapping DOM object with $, and stored in the form of pseudo-array
● jQuery objects can only use jQuery methods; DOM objects can only use native JS properties and methods
● DOM objects and jQuery objects can be converted to each other
–> $(DOM**** object)
Low jQuery object into a DOM object — — — — > by pseudo array index number to get — — — – > (‘ ‘) [index] * * * * or * * * * (‘ ‘). The get (index)
● The jQuery method gets jQuery objects directly. It can’t use the play() method in native JS. Convert it to a DOM object and use it (retrieved by the pseudo-array’s index number)
5. Common apis
● 1. Get elements > jQuery selector
● $(‘ selector ‘) // Write CSS selectors directly inside quotes
● $(‘ selector 1, selector 2, selector 3’) // Get multiple elements
Base selector
Hierarchy selector
Filter selector
jQuery Screening method (Critical)
Parent (),children(),find(),siblings(),eq(index)
● Note: Use parents(” selector “) to return the specified ancestor element
jQuery Implicit iteration
● All matched elements are iterated through internally, executing the corresponding method without us doing the loop again
● When getting elements, for operations like prefix, can be written together
2. JQuery styles
● CSS method -> $(‘ selector ‘).css(‘ property ‘,’ value ‘)
$(‘ selector ‘).css(‘ property ‘,’ value ‘); For this writing, attribute names must be quoted; Attribute values can be numeric without units or quotes
● If an attribute is written without a value ($(‘ selector ‘).css(‘ attribute ‘)), the current value of the attribute is returned, not modified
● CSS method parameters can also be in the form of objects, easy to set groups of styles. To enclose the CSS style with curly braces {}, the property name and value are separated by colons, and the property name can be unquoted, and the numeric property value can also be unquoted
JQuery action class (equivalent to classList)
$(‘ selector ‘).addClass(‘ class name ‘);
● Note: Class names are not dotted here.
$(‘ selector ‘).removeclass (‘ class name ‘);
$(‘ selector ‘).toggleclass (‘ class name ‘);
● Switching classes: delete if there is one, add if there is none
Difference from className in native JS
● className overwrites the element’s original class
● The jQuery action class only operates on the specified class. It does not affect the original class of the element