Introduction to JQuery Basics

What exactly is jquery

jQuery's official website jQuery
JQuery is a js library. Using jQuery is simpler than using JavaScript.

jquery version problem

Download address of official website: Download jQuery | jQuery
There are many versions of jQuery, which are divided into 1 x 2. x 3. x
1.x and 2 X version jquery is no longer updated. Now it is only updated to 3 X version.

jquery entry function

Four steps to use jQuery:

  • Import jQuery file
  • Check whether the import is successful
  • Entry function
  • Function realization
// Check whether jquery is successfully imported
        alert($);//   Sum up $= = jQuery

About jQuery's entry function:

//The first way to write
$(document).ready(function() {
//The second way to write
$(function() {

The difference between jQuery entry function and js entry function:

  1. The JavaScript entry function cannot be executed until all resources (including pictures and files) in the page are loaded.
  2. The entry function of jQuery will only wait for the document tree to be loaded, and will not wait for the pictures and files to be loaded.

jq objects and dom objects (important)

DOM object: use the method in JavaScript to get the elements in the page, and the returned object is the DOM object.
JQuery object: the jQuery object is to use the jQuery method to obtain the elements in the page, and the returned object is the jQuery object.
jQuery object is actually the wrapper set of DOM objects, which wraps the collection of DOM objects (pseudo array)
Methods of DOM object and jQuery object cannot be mixed.

Get jQuery object $("dom object selector")

jQuery obtain jQuery object
$("dom Object selector")
Principle analysis
// js get element object
        var _box = document.getElementById("box");
// $(dom object) = = = $(document.getElementById("box"))
// So $("#box") = = document getElementById("box")

Converting dom objects into jquery objects

dom Object to jquery object
    $(dom object);
    as $(_box);//_ box is the acquired jsDOM object

Convert jquery object to dom object

jquery Object to dom object
//Method 1
 jQuery object[Indexes]
//Method 2
 jQuery object.get(Indexes)
 as $("div")[0];

jquery selector

Basic selector




ID Selector


Gets the ID of the specified element

Class selector


Get elements of the same class

tag chooser


Get all elements of the same type of label

Union selector


Use commas to separate, as long as one of the conditions is met.

Intersection selector


Get div element with class redClass

Summary: the selector usage is exactly the same as that of css.

Level selector




Progeny selector


Use the > sign to get the elements of the child level. Note that the elements of the child level will not be obtained

Descendant Selectors

$("ul li");

Use a space to represent the descendant selector and get all li elements under ul, including grandchildren

Summary: the selector usage is exactly the same as that of css.

Filter selector





$("li:eq(2)").css("color", "red");

Among the obtained li elements, select the element with index number 2, and the index number starts from 0.


$("li:odd").css("color", "red");

Among the obtained li elements, select the element with odd index number


$("li:even").css("color", "red");

Among the obtained li elements, select the element with an even index number

Summary: these selectors have colons

Filter selector (method)






Equivalent to $("UL > Li"), subclass selector



Equivalent to $("ul li"), descendant selector



Find sibling nodes, excluding itself.



Find father



Equivalent to $("li:eq(2)"), index starts from 0



Find the next brother



Last time, brother

Summary: the function of filter selector is similar to that of filter selector, but the usage is different. Filter selector is mainly a method.

Style settings

Set the style of a single bar css("attribute name", "attribute value")

Set multiple styles css({attribute name 1 ":" attribute value 1 "," attribute name 2 ":" attribute value 2 ",...})

Style acquisition

Gets the style value css("property name")

Add class} multiple classes can be added

. addClass("class name 1, class name 2...") multiple class names are separated by spaces

Delete class} you can delete multiple classes

. removeClass() / / if it is empty, it means to delete all

Addition and deletion judgment

. toggleClass("class name") / / if there is such a class, it will be deleted; if there is no such class, it will be added; if it is empty, it means all are deleted

. toggleClass("class name", true/false) is a Boolean value used to judge whether a style class is added or removed

            $(".box").addClass("bg");//Add class
            // $(".box").removeClass("bg");// Delete class
            // $(".box").removeClass();// Delete all
            // $(".box").toggleClass("box fz");// Delete if any, add if none
            // $(".box").toggleClass();// Delete all
            // $(".box").toggleClass("fz");// Delete if any, add if none
            $(".box").toggleClass("fz", true);//true means that only classes can be added, false means that only classes can be deleted

Property settings

    /*1.get attribute*/
    $('li').attr('Attribute name');
    /*2.set a property*/
    $('li').attr('Attribute name','Attribute value');
    /*3.Set multiple properties*/
    $('li').attr({'Property name 1':'Attribute value 1','Attribute name 2':'Attribute value 2'...});
    /*4.Delete attribute*/
    $('li').removeAttr('Attribute name');

Element content operation

Get content

     jquery object.text() / jquery object.html() / jquery object.val()
      ps: If jquery When there are multiple objects,
      jquery object.html() / jquery object.val()When acquiring,
      Get the first one jquery Content in object

Set content

set up:
     jquery object.text(content) / jquery object.html(content) / jquery object.val(content)

Event binding (continue to sort out later)

jquery object.bind("Event name1 event Name2 ...", function () {});
jquery object.bind({ Event name 1: function () {}, Event name 1: function () {} });


Note: you need to pass parameters in () to see the animation effect

show() / / the width and height of the display change with the transparency

hide() / / hide width, height and transparency

slideDown() / height increase

slideUp() / height reduction

toggle() / Toggle

slideToggle() / slide in and slide out

fadeIn() / fade in

fadeOut() / fade out

fadeToggle() / fade in and out

Fadeto (duration, opacity, [callback]) / / set the fade in and fade out effect to a certain opacity fadeToggle()

fadeTo(2000, 0.5, function() {}) / opacity value can be set, which is different from other parameters in special syntax

Basic animation

    /*Note: the essence of animation is to change the size and transparency of the container*/
    /*Note: if you do not pass the parameters, you will not see the animation*/
    /*Note: the special character fast normal slow can be passed in*/
    /*Note: the number unit can be passed in milliseconds*/
    /*1.Show animation*/
    /*2.hide animation*/
    /*3.Toggle show and hide*/

Slide in and slide out

    /*Note: the essence of animation is to change the height of the container*/
    /*1.Slide in animation*/
    /*2.Slide out animation*/
    /*3.Switch slide in and slide out*/

Fade in fade out

    /*Note: the essence of animation is to change the transparency of the container*/
    /*1.Fade in animation*/
    /*2.Fade out animation*/
    /*3.Toggle fade in and fade out*/

The animation is still lacking, so we will continue to sort it out later

Tags: JQuery

Posted by Rohlan on Mon, 16 May 2022 23:25:14 +0300