Summary of commonly used methods in Jquery_jquery

//Advantages of jQuery:

1 Lightweight
​ ​ 2 Powerful Selectors
​ ​ 3 Excellent encapsulation of DOM operations
​ ​ 4 Reliable event handling mechanism
​ ​ 5 Perfect Ajax
​ ​ 6 Don’t pollute top-level variables
​ ​ 7 Excellent browser compatibility
                                                                                        Chain operation mode
          9 Implicit iteration
10 Behavior was separated from the structural layer
11 Rich plug-in support
12 Complete documentation
13 Open Source

629e799adbc9dadfcd341ee6c7f26ebfNo code is allowed here2cacc6d41bbb37262a98f745aa00fbf0

$("#foo") and jQuery("#foo") are equivalent
$.ajax and jQuery.ajax are equivalent The $ symbol is the abbreviation of jQuery

// window.onload : $(function(){ })
$(function(){ }) is equivalent to the window.onload event in js. It is executed immediately after the page is loaded. Only this is the same as window.onload
But window.onload can only write one, but $(function(){ }) can write multiple
When there is no abbreviation, it is $(document)ready(function(){ })

//Chain operation style:

    $(".level1>a").click(function(){
      $(this).addClass("current") //给当前元素添加"current"样式
      .next().show(); //下一个元素显示
      .parent().siblings()//父元素的同辈元素
      .children("a") //子元素<a>
      .removeClass("current")//移出"current"样式
      .next().hide();//他们的下一个元素隐藏
    return false;
    })

//Convert jQuery object to DOM object:

1 The jQuery object is an array-like object, and the corresponding DOM object can be obtained through the [index] method

var $cr = $("#cr");//jQuery object
          var cr = $[0]; //DOM object

2 Another method is provided by jQuery itself, and the corresponding DOM object is obtained through the get(index) method

var $cr = $("#cr");//jQuery object
          var cr = $cr.get(0);//DOM object

//Convert DOM object to jQuery object:

For a DOM object, you only need to wrap the DOM object with $() to get a jQuery object.
The method is: $(DOM object);

var cr = document.getElementById("cr");//DOM object
        var $cr = $(cr); //jQuery object

//Resolve conflicts:

1 If other JS libraries conflict with the jQuery library, we can call the jQuery.noConflict() function at any time to transfer control of the variable $ to other JavaScript libraries

    var $jaovo = jQuery.noConflict();
    $jaovo(function(){
      $jaovo("p").click(function(){
        alert($jaovo(this).text());
      });
    });

2 You can use "jQuery" directly to do some jQuery work

    jQuery(function(){
      jQuery("p".click(function(){
        alert(jQuery(this).text());
      }));
    });

//jQuery selector

1 Basic Selector
The basic selector is the most commonly used selector in jQuery and is also the simplest selector. It searches for DOM elements through element id, class and tag name

//jQuery :

Just get the label object. It’s an array

//jQuery object acquisition:

$("p");//Get all p tag objects ---- The obtained object is an array
$("#aa");//Get the object of the tag with id aa --- The object obtained is an array
$(".aaa");//Get the object of the tag with class aaa --- The object obtained is an array

//Conversion between jQuery object and DOM object:

jQuery methods and DOM methods cannot be used (called) with each other, but objects can be converted to each other
$("p");//is a jQuery object
Document.documentElementsTagName("p");//It is a DOM object
$(document.documentElementsTagName("p"));//Convert DOM object into jQuery object
$("p").get(1);//It is a DOM object,
Get(1); represents the second digit of the array p, (the subscript 1 is the second digit)
$($("p").get(1));//The jQuery object is converted into

//jQuery object converted into DOM object:

1 The jQuery object is an array-like object, and the corresponding DOM object can be obtained through the [index] method
        var $cr = $("#cr");//jQuery object
          var cr = $[0]; //DOM object
2 Another method is provided by jQuery itself, and the corresponding DOM object is obtained through the get(index) method
        var $cr = $("#cr");//jQuery object
          var cr = $cr.get(0);//DOM object

//DOM object converted into jQuery object:

For a DOM object, you only need to wrap the DOM object with $() to get a jQuery object.
The method is: $(DOM object);

var cr = document.getElementById("cr");//DOM object
        var $cr = $(cr); //jQuery object

//Create element:

        $("1a13e0f18c2398e8800483d008584a7e123bed06894275b65c1ab86501b08a632eb");//Create 25edfb22a4f469ecb59f1190150159c6 tag with attribute title=other and content 123
​​​​Element node (label name) Attribute node (attribute title='xxx') Text label (123)

//text() text node:

text(): function/method to obtain the internal text of the selected tag (content visible to the human eye)
                                                                                                              var li = $("li").text();//Get the data in the text node of li (that is, the content of 123)

//attr() Get attributes/Set attributes/Change attributes:

            f9c858b17a39ec55ef2776c60045f8c494b3e26ee717c64999d7867364b1b4a3;

var i = $("p").attr("title");//This is to get the value of the title attribute in the p tag

           $("p").attr("title"," bbb");//Change the value of the title attribute in the p tag to bbb

//removeAttr() deletes the attribute value of the specified element:  

removeAttr(xx,xx); delete attribute value

6d54db130ffb4e3260c1400ec113f54dWhat is your favorite fruit?94b3e26ee717c64999d7867364b1b4a3
$("p").removeAttr('title',"your least favorite");//It is to delete the value of the title attribute in the p tag (your least favorite)

//append() to add elements:

Add the matched child element to the specified parent element.

Function chain calls: Why can chain calls be used?
It’s because the previous function still returns the object that was called
For example, a.append(b).append(c) below a is a parent tag object. Call the function to add b to it, and the returned value is still the object of a, so you can also call the function and add c to it

//a, b and c are all label objects

var $li_1 = $("25edfb22a4f469ecb59f1190150159c6bed06894275b65c1ab86501b08a632eb");//Only element nodes are created
            var $li_2 = $("25edfb22a4f469ecb59f1190150159c6bed06894275b65c1ab86501b08a632eb");
            var $parent = $("ul");

$parent.append($li_1).append($li_2);
a.append(b);//Add b to the end of a (append), a is the parent tag and b is the child tag
a.append(c);//Add c to the end of a (append), a is the parent tag and c is the child tag
a.append(b).append(c);//Add b and c to a. B and c are peers, but b is above c (chained call addition)
a.prepend(b)//Add b to the front of a a is the parent tag b is the child tag
a.insertAfter(b);//Add a to the back of b (of the same generation)

a.insertBefore(b);//Add a to the front of b (of the same generation)
//Call mobile node
//Insert our specified element in front of the matched element (specified element.insertBefore("matched element"))

//appendTo() adds elements:

//a is the object b is the tag name
appendTo(): ​​adds the specified element to the set of matching elements

$("li").appendTo("ul");//Add the li tag to ul
a.appendTo("b"); //Yes, b is added to a (a is a label and b is a label)
Specified element.appendTo(matching element);

//Delete element (hidden) remove():

a.remove();//Remove a from html (hidden)
var $li = $("ul li:eq(1)").remove();//Remove the second li tag in ul eq(1); which is the li element with subscript 1, which is the li element Two, because the subscript starts from 0
           $li.appendTo("ul");//Re-add the element just deleted to ul
            $("ul li").remove("li[title !=Apple]");//Delete all li elements in the ul element whose title attribute is not Apple's

//removeAttr() deletes the attribute value of the specified element:

removeAttr(xx,xx); delete attribute value
6d54db130ffb4e3260c1400ec113f54dWhat is your favorite fruit?94b3e26ee717c64999d7867364b1b4a3
$("p").removeAttr('title',"your least favorite");//It is to delete the value of the title attribute in the p tag (your least favorite)

//Clear empty():

         $("ul li:eq(1)").empty();//Find the second li element in ul and delete the content, (text node,25edfb22a4f469ecb59f1190150159c6content(text node)8e22c81817d224bf490a20f8d20d8ac9)

//Copy the selected node clone():

clone(true): Copy the node. When true, the event listener bound to the node is also copied. If not written, the default is false

$("li").clone()//Copy the current node
            $("li").clone().appendTo("ul");//Copy the li node and append it to ul (append to the inside of ul)
            $("li").clone(true).appendTo("ul");//Copy the li node, copy the event listener bound to li, and append it to ul together (append to the inside of ul)

//Replace the selected node replaceWith(),replaceAll():

a is the object being replaced
          b is the complete tag to be replaced
a.replaceWith(b);//b will replace a (the following b replaces the previous a) The latter replaces the previous
          b.replaceAll(a);//bReplace a (the previous b replaces the following a) The front replaces the following

//If there are multiple ps, they will be replaced

         $("p").replaceWith("8e99a69fbe029cd4e2b854e244eab143Your girlfriend’s least favorite fruit is???128dba7a3a77be0113eb0bea6ea0a5d0");//Replace the entire p tag with < ;strong>What is your girlfriend’s least favorite fruit???128dba7a3a77be0113eb0bea6ea0a5d0

//If there are multiple ps and you only want to replace one

          $($("p").get(1)).replaceWith("8e99a69fbe029cd4e2b854e244eab143Your girlfriend’s least favorite fruit is???128dba7a3a77be0113eb0bea6ea0a5d0");//Only replace the first 2 p tags replaced
You can also add an ID to the tag you want to replace, that is, only one will be replaced
              $("#abc").replaceWith("25edfb22a4f469ecb59f1190150159c6I replaced the tag with id abcbed06894275b65c1ab86501b08a632eb")

//replaceAll():
$("8e99a69fbe029cd4e2b854e244eab143What is your mommy's least favorite fruit???128dba7a3a77be0113eb0bea6ea0a5d0").replaceAll("#abc");//The former one replaces the latter one with the ID #abc That tag
               $("25edfb22a4f469ecb59f1190150159c6I replaced all p tagsbed06894275b65c1ab86501b08a632eb").replaceAll("p");//The front replaces the following

//Wrap wrap() wraoAll() wrapInner() :

//wrap() :

wrap(): Wrap the matched element with a new HTML tag.
a label object (wrapped) b is a label (wrapped with b label)
         All a tags will be wrapped
            a.wrap(b);
//If there is an a tag, wrap it into:
                                                                                                                                                                                                out             a4b561c25d9afb9ac8dc4d70affff419 //If there are multiple a tags, wrap them into:
                                                                                                                                                                                                out             a4b561c25d9afb9ac8dc4d70affff419                                                                                                                                                                                                     out               a4b561c25d9afb9ac8dc4d70affff419                                                                                                                                                                                                     out               a4b561c25d9afb9ac8dc4d70affff419 Each is separated from the wrapping separation together.
          a.wrap("b");//It adds a parent tag to a. a is wrapped by b
                                                                                            $("p").wrap("5a8028ccc7a7e27417bff9f05adf593272ac96585ae54b6ae11f849d2649d9e6");//Add a parent tag to the p tag, that is, wrap the p tag with the 5a8028ccc7a7e27417bff9f05adf5932 tag to become 1f8db0b12d881a95a1abb09c84e77578I am p tag94b3e26ee717c64999d7867364b1b4a372ac96585ae54b6ae11f849d2649d9e6
           /*
                                                                                          & Lt; p & gt; I am a p & lt;/p & gt;
                                            72ac96585ae54b6ae11f849d2649d9e6
             */


//wrapAll() :

wrapAll(): Wrap all the labels together. Even if the labels to be wrapped are not together and there are other labels in the middle, the labels to be wrapped will be moved together and wrapped together
//Before parcel
                                                                                                                                                                                           e388a4556c0f65e1904146cc1a846beeaaa94b3e26ee717c64999d7867364b1b4a3
                                                                                                                              ​​​​ a.wrapAll(b);//All packages
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             e388a4556c0f65e1904146cc1a846beeaaa94b3e26ee717c64999d7867364b1b4a3
After wrapping like this, the output position will change, and the effect will also change


//wrapInner() :


wrapInner(): Add a specified tag to the content in the matching tag (equivalent to adding a sub-tag to the original tag, and saving the text content of the parent tag)
                                                                                                                                   a.wrapInner("b");//The result is: 3499910bf9dac5ae3c52d5ede7383485a4b561c25d9afb9ac8dc4d70affff4191230d36329ec37a2cc24d42c7229b69747a5db79b134e9f6b82c0b36e0489ee08ed Use the b tag to enclose the content in a

                                                                                                                                                                                                                                $("li").wrapInner("5a8028ccc7a7e27417bff9f05adf593272ac96585ae54b6ae11f849d2649d9e6");//The result is: d5b01ed333f292e161ef5c96ce4fe97f5a8028ccc7a7e27417bff9f05adf5932Apple72ac96585ae54b6ae11f849d2649d9e62867e861ba23559b572f230426ab14ea

          6ec3bfc2be99a37ee6d43b930f84f6a0                                           5a8028ccc7a7e27417bff9f05adf5932Apple72ac96585ae54b6ae11f849d2649d9e6                                                                                      

//Effect switching toggleClass():



It refers to the switching between effects. There is an effect when there is no switching for the first time. When switching, it refers to the effect composed of all classes
It means switching back and forth between the current effect and the specified effect
           080b747a20f9163200dd0a7d304ba388
         .high{

                      font-weight:bold;     /* Bold font */

                                                                                                  color: red; } .another{                font-style:italic;
              color:blue;

}

                                                                                                    064ba97ce16fd090b859e360a152e0abWhat is your favorite fruit?94b3e26ee717c64999d7867364b1b4a3
$("p").toggleClass("another ");//In fact, it is changing the class. When this function is triggered, it is equivalent to changing another and height. As set above, when class is high, It is in red font. When the class is another, it is in blue font
Therefore, when this function is triggered, the color will change once. Once it is triggered, it will change once. It is just a switch between classes. It is the class and p tag after $("p").toggleClass("another") Switch the original class inside


//Determine whether the element contains a certain style hasClass():


$("p").hasClass("MyClass");//Determine whether there is a class attribute in the p tag that is MyClass
​​​​ $("p").is("MyClass");//Same as above


//html() and text():

          6d54db130ffb4e3260c1400ec113f54d8e99a69fbe029cd4e2b854e244eab143What is your favorite fruit?128dba7a3a77be0113eb0bea6ea0a5d094b3e26ee717c64999d7867364b1b4a3
$("p").html();//It is the p tag. The content between the two tags (e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3) is equivalent to the innerHTML of p, which is: 8e99a69fbe029cd4e2b854e244eab143Your most What is your favorite fruit?128dba7a3a77be0113eb0bea6ea0a5d0
            $("p").text();//It is the text data (text node) in the p tag, which is: What is your favorite fruit?

//Get and lose focus focus() blur() :

focus(): Get focus
         blur(): lose focus
$ ("Label name (#id name) (. Class name)"). Focus                  $("Tag name (#ID name) (.class name)").blur(methods and statements that need to be executed when losing focus function(){statement operation})

//Get/change value() value defaultValue:

                          db10120a2a264e3f3bc84cd523e40fda

​​​​​ $("input").val();//This is the value to get value
            $("input").val("Account is ****");//This is the value to change value
The result is: f25c2ecc648dc21e843cd54b7ea77ebc

//defaultValue:

Represents the default value of value, which is what value is set when writing code, then what is defaultValue
         Generally used for judgment
If (txt_value == ""){//It means, if value is empty, assign the starting default value to value
Used to set the input box. If the input box does not output anything, the default value will be entered. (When the input box does not get focus, the default value will be displayed in the input box. After getting focus, the default value will be removed. If the customer does not input things, and the default value will be assigned back to the value, which is used to remind the customer that nothing has been entered)
          $("input").val($("input").defaultValue)
}

//View the number of child elements children() (only child elements, child elements of child elements, not counted, direct child elements are child elements):

$("tag").children();

The jQuery object of the tag.children();
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            5db79b134e9f6b82c0b36e0489ee08ed
           $("a").children();//That’s 2 Because the child elements of a are only b and d

$("b").children();//It is 1 because b has only one child element, c

$("d").children();//It is 0 because d has no child elements

//Sibling elements, next(), prev(), siblings():

next();//The next element of the same generation

          prev();//Previous element of the same generation

siblings();//All sibling elements a4b561c25d9afb9ac8dc4d70affff4191230d36329ec37a2cc24d42c7229b69747a 6d54db130ffb4e3260c1400ec113f54dWhat is your favorite fruit?94b3e26ee717c64999d7867364b1b4a3

ff6d136ddc5fdfeffaf53ff6ee95f185

d5b01ed333f292e161ef5c96ce4fe97fApplebed06894275b65c1ab86501b08a632eb
e1afc09f2ea87e08b572bd30c564df6fOrangebed06894275b65c1ab86501b08a632eb
6d6e186df94d189d75629d732bcd4499Pineapplebed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
5a8028ccc7a7e27417bff9f05adf593245672ac96585ae54b6ae11f849d2649d9e6

// Example: next()

var p= $("p").next();
p.html();//The content of the next element of the peer of the p element (equivalent to innerHTML), the result is:
& Lt; li title = 'apple' & gt; apple & lt;/li & gt;
                                                                                                                                                                                              e1afc09f2ea87e08b572bd30c564df6fOrangebed06894275b65c1ab86501b08a632eb
                                                                                                                                                                                                                                                                                            in  The next tag of p’s peer is ul,ff6d136ddc5fdfeffaf53ff6ee95f185Here is the stuff of html()929d1f5ca49e04fdcb27f9465b944689
------------------------
// prev()

var p = $("p").prev();

           p.html();//It’s the previous digit of the peer element of p, which is the b element. The html() of the b element is 123, so it is 123

123

--------------------------

// siblings()

var p = $("p").siblings();//All elements are now arrays

p.html(); //This is just 123, because it is an array. If it is output, the first one is output, so the content of the b tag is 123. You need to traverse to see all the content
for(var i =0;p.length;i ){
alert(p[i].innerHTML);//This is all the content, why use innerHTML?
//Because p is a jQuery object, when the jQuery object is followed by a subscript, it is a DOM object, so you can only use innerHTML. This has the same function as the html() method of the jQuery object,
                  //alert(); is an ordinary pop-up box
​​​​​​ //The result is:
123
What is your favorite fruit?
Apple
Oranges
Pineapple
              456
}

//Event delegation mechanism:

Event delegation mechanism: We need to find an element and change its attributes, but we don’t know if we can find this element, so we use a temporary variable to delegate the event to it, and then look for the element. Once found, we Forward the incident to

// $(custom variable.target).closest("the element you are looking for").css("an attribute after finding", "change the attribute value")

 
//Here, start the search from clicking on the object (if you click on a, you will first look for a, then look for span, then look for p, then look for body, until you find the correct tag, you will stop searching online)
                $(document).bind("click",function(e){
                   $(e.target).closest("body").css("color","red");
                 })
//$(document).bind("click",function("p"){
// $ ("p"). Css ("color", "red");
                                                                                                                                                                                                                                                                                                         //

                       //document: represents the entire document. I want to match an uncertain object in the document, so I used this form
                        //e: refers to a certain element we are looking for, it is an unspecific value, $(e.target) is the unspecific object
                    // From our unspecific matching, whoever matches is the one
                                                                                                        6d54db130ffb4e3260c1400ec113f54d
                                                                                                                               
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  in                                                                                                                                                                                                                                                    in                                                                                                                                                                                                                                                                                 in                                                     929d1f5ca49e04fdcb27f9465b944689
                                                                                       

//Get the left margin and top margin of the object offset():


Usage:
               jQuery object.offset();
               jQuery object.offset().left/top;
           var $p = $("p").offset();//Get the left margin and top margin of p, which is an array
           $p.left;//The obtained value is the left margin
           $p.top;//The obtained value is the top margin

//Set coordinates and display, show():

Object.css().show("slow(slow)"/"normal(normal)"/"fast(fast)");

​ A string of one of three predetermined speeds ("slow", "normal", "fast") or a millisecond value representing the animation duration (such as: 1000)
          $("#id").mouseover(function(e){
//e is equivalent to event
in native js //Create a div element, the event object triggered by e (mouseover), this represents the event source object (referring to the html tag) when triggered
            var tooltip = "c4f2e5f2cda17ebc51ceca5f4bbed902" this.title "16b28748ea4df4d9c2150843fecfba68";
                                             $("body").append(tooltip); //Append to the document

                   $("#tooltip").css({

"top":e.pageY "px", "left":e.pageX "px", "width":"300px"

}).show("fast"); //Set the x coordinate and y coordinate and display it. The e here is the coordinate of the intersection between the event and the mouse when the event source triggers this event. Use this coordinate to represent this The coordinates of the upper left corner of the box

                 })