JQuery 3-1 · Basics

Launched in January 2006, jQuery is an efficient, compact, and feature-rich JavaScript library.

Version: 1.x: Compatible with IE6/7/8, most commonly used at work, learn version 1.12. 2.X: incompatible with IE6/7/8, mostly used for jQuery official bug adjustment. Not used at work. 3.X: not compatible with IE6/7/8, can only be used in older browsers, is now the official major maintenance update of jQuery.

JQuery encapsulates a lot of native JS, which greatly simplifies DOM manipulation.

The $() method

Manipulating the DOM starts by getting the element, and jQuery wraps the $() method to get the HTML element.

In jQuery, there is only one global variable, $. This is one of the great features of jQuery that avoids global variable contamination. Originally the variable was not called $, it was called the jQuery() method, and in the library both names coexist and can be used. If the jQuery file is referenced incorrectly, an error is reported: $undefined.

An overview of the

JQuery encapsulates more powerful methods of retrieving elements: $() or jQuery(), with the element to be retrieved wrapped inside $()

parameter

The internal arguments to the $() method are in string format

The sample

Get tag elements

    // Approach 1: use the $() method to get the element
    $("p");
    // Method 2: Get elements using jQuery()
    jQuery("p");
    
    // Get the element by id
    $("#myDiv");
    jQuery("#myDiv");
    
    // Get the element by class
    $(".myDiv");
    jQuery(".myDiv");
    
    // Use the advanced selector to get the label child element
     $("div ul li");
Copy the code

The jQuery object

The $() method returns a jQuery object that contains a number of properties and methods, such as.css(),.html(), and.animate(). It is also possible to call different methods in a sequence called a chain call

The sample

    $(".demo").css("color"."red");
Copy the code

Note: the elements obtained through the $() method are all the matching elements on the page, and the operation is batch operation.

JQuery objects convert to native JS objects

Once you get the jQuery object, you can only use the methods of the jQuery object, not the methods of the native JS element object. Native jS objects cannot use jQuery’s methods either.

The jQuery object is actually an array-like object that contains all the retrieved native JS objects, as well as a large number of jQuery methods and properties.

Conversion method:

• JQuery to Native: Directly use the array subscript method, get jQuery encapsulated native objects.
• Native to jQuery: Wrap native objects with $().

The sample

// 1. Use jQuery to convert native object: Use subscript to get native object, you can call native JS method.
let $p = $("p");
$p[0].innerHTML = 'headline 1';

// 2. Convert native object to jQuery object: wrap native object with $() and then call jQuery method
let p = document.getElementById("demo");
$(p).css("color"."red");
Copy the code

JQuery selector

Fetching elements in jQuery can be done with different selectors, including basic and advanced selectors in CSS3.

An overview of the

Get elements using the $() or jQuery() functions

parameter

A selector in string format

grammar

The writing mode of the selector in the parameter is the same as that of the CSS selector

The sample

    // Base selector
    $("*");
    $("div");
    $(".myDiv");
    $("#myDiv");
    
    // Advanced selector
    $("div ul li");
Copy the code

Filter selector

In addition to the basic and advanced selectors, there are filter selectors, also known as filter selectors, which are new to jQuery.

Usage: Use with the base selector

Common selectors:

The sample

    // Filter the selector
    $("p:first").css("color"."red");
    $("p:last").css("color"."blue");
    $("p:eq(2)").css("color"."#ccc");
    $("p:gt(2)").css("color"."#ccc");
    $("p:lt(2)").css("color"."#ccc");
    $("p:odd").css("color"."red");
    $("p:even").css("color"."blue");
    $("p:not(:first)").css("color"."#ccc");
Copy the code

Screening method

In addition to the above selector fetch elements, jQuery also encapsulates a number of filtering methods. After an object element has been selected using a selector, you can call the filter method to further filter it, which has the same effect as the filter selector

Common methods:

The sample

    // Filter method
    $("p").first().css("color"."red");
    $("p").eq(2).css("color"."red");
Copy the code

See the jQuery API Documentation for more details