Basic use of jQuery


Different versions of jQuery


  • Compatible with old IE
  • Larger file


  • Some IE8 and below are not supported
  • Smaller files, more efficient execution


  • IE8 and below are no longer supported at all
  • Some new API s are provided
  • Provides a version that does not contain the ajax / animation API

jQuery local import

  • This method requires downloading jQuery local files in advance. JQuery's official website:
<script type="text/javascript" src="./jquery-3.6.0.js"></script>

jQuery remote service introduction

  • Load jQuery files through the remote CDN accelerator server
  • When using, the computer must have a network
  • Here is a free CDN acceleration service website:
  • The method of use is as follows:

<script type="text/javascript" src=""></script>

The core of jQuery

jQuery core function

  • JQuery function ($/ jQuery)
  • What the jQuery library exposes is $/ jQuery
  • After introducing the jQuery library, use $or jQuery directly
jQuery === $//true

jQuery core object

  • Abbreviation: jQuery object
  • Get the jQuery object: executing the jQuery function returns the jQuery object
  • Using jQuery objects: Syntax: $obj xxx()
  • The jQuery object is a pseudo element (possibly only one element) object that contains all dom element objects

Two uses of jQuery

Used as a general function: $(param)

  1. param parameter is a function: this callback function is executed after DOM loading is completed
  2. param parameter is selector string: find all matching tags and encapsulate them into jQuery objects
  3. param parameter is DOM object: encapsulate DOM object into jQuery object
  4. param parameter is html tag string: create a tag object and encapsulate it into a jQuery object
    Here are four different parameters:
<!DOCTYPE html>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
        // 1). The parameter is function: after the DOM is loaded, this callback function is executed
        $(function () {//Equivalent to window onlaod = function(){}
            // 2). The argument is a selector string: find all matching tags and encapsulate them into a jQuery object
            $('#btn').click(function() {/ / bind click event listening
                // At this time, this is still the DOM element of the event (< button >)
                // 3).  The parameter is DOM object: encapsulate the DOM object into a jQuery object
                // 4).  The parameter is html tag string: create a tag object and encapsulate it into a jQuery object
                $("<div>Xi'an, come on!</div>").appendTo("div");
        <button id="btn">test</button>

Use as object: $ xxx()


  • $. each() this method can be used to traverse any object (object, array)
  • Syntax: $ each(object, [callback])
  • The callback function has two parameters:
    • The first parameter: (index) is the index of the member or array of the object
    • The second parameter: (value) is the corresponding variable or content.
    • If you need to exit each loop, you can make the callback function return false, and other return values will be ignored
 let arr = ["waters","Heart ape","Wooden Dragon","medicine", "Yima"]
 $.each(arr, function(index, value){
     console.log(index + ":" + value);


  • $. trim(): remove spaces at both ends
 let str = "      Hello  world !     ";

jQuery basic behavior


  • This attribute can get the number of DOM elements contained in the jQuery object
        <button id="btn">test</button>
        <button id="btn">test</button>
        <button id="btn">test</button>
        <button id="btn">test</button>
        let $buttons = $("button");


  • Get the DOM element at the corresponding position
        let $buttons = $("button");


  • Traverse all DOM elements contained
  • Syntax: ` each(function)
    let $buttons = $("button");
    $buttons.each(function(index, domEle){
        // this === domEle
        console.log(index, domEle);


  • This method can get the subscript in the element

Keywords: Javascript Front-end JQuery

Added by rocket on Sun, 26 Dec 2021 00:38:37 +0200