1. Use of jquery

1. Use jQuery online cdn file jquery (v3.6.0) - jQuery is an efficient, streamlined and feature rich JavaScript tool library. Its API is easy to use and compatible with many browsers, which makes it easier to traverse and manipulate HTML documents, event processing, animation and Ajax operations| BootCDN - Bootstrap Chinese open source project free CDN acceleration service jQuery is an efficient, concise and feature rich JavaScript tool library. Its API is easy to use and compatible with many browsers, which makes it easier to traverse and manipulate HTML documents, event processing, animation and Ajax operations.https://www.bootcdn.cn/jquery/

2. Download the official document of jQuery JS and min.js two versions

2. Two sharp tools of jquery

<!--
1. jQuery core function
* abbreviation: jQuery function ($/ jQuery)
* what the jQuery library directly exposes is $/ jQuery
* after introducing the jQuery library, you can use $directly
* when the function uses: $(xxx)
* when the object uses $ xxx()
2. jQuery core object
* abbreviation: jQuery object
* get the jQuery object: execute the jQuery function to return the jQuery object
* use jQuery object: $obj xxx()
-->

When writing jQuery, the underlying code can be simply abstracted into the following code. It can be seen that the $and jQuery exposed in the end are essentially jQuery functions, and its return value is an object

(function (window) {
    var jQuery = function () {
      return new xxx()
    }

    window.$ = window.jQuery = jQuery
  })(window)

3.jQuery core function

* as a general function, user: $(param)
* param is function: the parameter is function: when the DOM is loaded, execute this callback function, which is equivalent to window Onload = function (listening after document loading), which is different. It will be explained later. It is one of the interview questions
* param is the selector string: find all matching DOM elements and return the jQuery object containing all DOM elements
* param is a DOM element: wrap the DOM element object as a jQuery object and return $(this)
* param is the label string: create a label DOM element object and wrap it as a jQuery object

  /*Demand 1 Click button: display the text of the button and display a new input box*/
  //1.1).  The parameter is function: when the DOM is loaded, execute this callback function
  $(function () { // Listening after binding document loading
    // 1.2).  The parameter is selector string: find all matching tags and encapsulate them into jQuery objects
    $('#btn').click(function() {/ / binding click event listening
      // What is this? dom element where the event occurred (< button >)
      // alert(this.innerHTML)
      // 1.3).  The parameter is DOM object: encapsulate the DOM object into a jQuery object
      alert($(this).html())
      // 1.4).  The parameter is html tag string (less used): create a tag object and encapsulate it into a jQuery object
      $('<input type="text" name="msg3"/><br/>').appendTo('div')
    })
  })

A.appendto(B), append a to B

4.jQuery object

<!--
1. jQuery object is a pseudo array object containing any number of dom elements that match

/*
  1. Pseudo array
* Object object
* length attribute
* numeric subscript attribute
* there is no special method for arrays: forEach(), push(), pop(), splice()
   */

 console.log($buttons instanceof Array) // false

2. Basic behavior
* size()/length: the number of DOM elements contained
* [index]/get(index): get the DOM element at the corresponding position
* each(): traverses all DOM elements contained
* index(): get the subscript in the sibling element
-->
 

5. Basic selector

* basic
      * #id
      * tagName/*
      * .class
      * selector1,selector2,selector3: Union
      * selector1selector2selector3: intersection

6. Hierarchy selector

<!--
Hierarchy selector: Find child elements, Descendant element, Selector for sibling elements
1. ancestor descendant
  Matches all descendant elements under a given ancestor element
2. parent>child
  Matches all child elements under a given parent element
3. prev+next
  Match all immediately after prev After element next element
4. prev~siblings
  matching prev All after element siblings element
-->

7. Filter selector

* filter
      * Filter out some of the original matching elements
      * :first
      * :last
      * :eq(index)
      * :lt
      * :gt
      * :odd
      * :even
      * :not(selector)
      * :hidden
      * :visible
      * [attrName]
        //7. Select the li element with the title attribute
        // $('li[title]').css('background', 'red')
      * [attrName=value]
        //8. Select all li elements whose attribute title is hello
         $('li[title="hello"]').css('background', 'red')

8. Form filter

* form 
      * :input
      * :text
      * :checkbox
      * :radio
      * :checked: Selected

 9. Tool method

<!--
1. $.each(): Traversing data in an array or object
2. $.trim(): Remove spaces on both sides of the string
3. $.type(obj): Type of data obtained
4. $.isArray(obj): Determine whether it is an array
5. $.isFunction(obj): Determine whether it is a function
6. $.parseJSON(json) : analysis json Convert string to js object/array
-->

$.each

//1. $.each(): traverses the data in an array or object
  var obj = {
    name: 'Tom',
    setName: function (name) {
      this.name = name
    }
  }
  $.each(obj, function (key, value) {
    console.log(key, value)
  })

Turn with json

/*
  JSON.parse(jsonString)   json String -- > JS object / array
  JSON.stringify(jsObj/jsArr)  js Object / array -- > JSON string
  */

10. Properties

* operation tag attributes, tag body text
* attr(name) / attr(name, value): read and write label attributes with non Boolean values
* prop(name) / prop(name, value): read and write the label attribute of Boolean value
* removeAttr(name)/removeProp(name): delete attribute
* addClass(classValue): Add class
* removeClass(classValue): removes the specified class
* val() / val(value): read and write the value of the tag
* html() / html(htmlString): read and write tag body text