Pure dry goods! DOM operation analysis of jquery

Time:2022-5-14

My two original articlesPure dry goods! Everything about jQuery selectorsandPure dry goods! DOM operation analysis of jquery, less than a month after its release, it was used by an account in the blog parkClaimFor his original, and he also carefully deleted the copyright notice of the original article of muke.com and the bits and pieces about me in the article, which are clean and professional. I’m not going to post his account. I just hope some programmers can learn to respect the copyright of others.

Copyright notice, the article was first published on my muke.com account:How many twenty years are there in life, welcome to reprint, please indicate the source

Note: This article involves many contents. In order to keep the overall context clear, links will be attached to individual difficult points, and the mistakes and omissions of the article will be corrected from time to time

1、 Create node

Eg: // create three paragraphs (including label node, attribute node and text node) in three ways and add them to the document
        $("<p></p>"). attr({title:"p1",id:"p1"}). HTML ("this is the first paragraph") appendTo("body");
        $("<p></p>",{title:"p2",id:"p2"}). HTML ("this is the second paragraph") appendTo("body");
        $("< p title ='p3 'id ='p3' > this is the third paragraph < / P >") appendTo("body");

2、 Find node

Eg: // use the nodes created above. Next, find the label node, attribute node and text node
        var p1 = $("p:first");// Get the first paragraph node
        console. log(p1);// Print label node result: Object [p#p1]
        console. log(p1.attr("title"));// Print attribute node result: P1
        console. log(p1.text());// Print text node result: This is the first paragraph

3、 Insert node

1.   $(target). append(content)/$(content). Appendto (target) - inserts content at the end of the interior of the selected element
         $(target). prepend(content)/$(content). Prependto (target) - inserts content at the beginning of the interior of the selected element
         $(target). after(content)/$(content). Insertafter (target) - inserts content after the element of the selected element
         $(target). before(content)/$(content). Insert before (target) - inserts content before the outside of the selected element 

        For details, please see: 8 methods of inserting nodes at a glance http://www.imooc.com/article/12047

4、 Replace node

1.$(target). replaceWith(content)/$(content). Replaceall (target) - replaces the target element with content
        eg:    
            $("<ul><li>html</li><li>css</li></ul>").appendTo("body");
            console.log($("ul").html());        //result:    <li>html</li><li>css</li>
            $("<li>html5</li>").replaceAll($("ul li:eq(0)"));
            console.log($("ul").html());        //result: <li>html5</li><li>css</li>
            $("ul li:eq(1)").replaceWith("<li>css3</li>");
            console.log($("ul").html());        //result: <li>html5</li><li>css3</li>    
        2. If an event has been bound for an element before replacement, the previously bound event will disappear together with the replaced element after replacement. You need to rebind the event on the new element

5、 Replication node

eg: $(this). clone();        // Only nodes are copied, and events bound to elements are not copied
        $(this). clone(true);    // Both nodes and events bound to elements are copied
    If you don't understand the above two sentences, type the following specific code and run it once, you should be able to understand it:
    1) HTML code:
        < input type = "button" value = "copy node" >
        < input type = "button" value = "copy node and its behavior" >
    2) Introduce jQuery Library (according to your own situation)
    3) Script code:
        $(function(){
            $("input:eq(0)").click(function(){
                $(this).clone().appendTo("body");
                });
            $("input:eq(1)").click(function(){
                $(this).clone(true).appendTo("body");
                });
            });

6、 Delete node

$(element). The return value of remove () is a reference to the deleted node, so these elements can be used later, but the events and additional data it binds cannot be used again
$(element). After detach() is used, append the element again, and all bound events and additional data can be used
$(element). Strictly speaking, empty () does not delete nodes, but empties nodes. It can empty all descendant nodes in the element
   Eg: // the following two examples are intended to explain empty ()
      1) $("< div > < p > < span > how many twenty years of life < / span > < / P > < / div >") appendTo("body");
        console. log($("div"). html());        // Result: < p > < span > how many twenty years of life < / span ></p>
        $("p").empty();
        console.log($("div").html());        //result:    <p></p>
      2)$(element). Empty() analogy:
          You can think of element as a computer's recycle bin and put $(element) Empty() is regarded as the operation of emptying the recycle bin, the label node contained in element is regarded as the folder in the recycle bin, and the text node contained in element is regarded as the file in the recycle bin. Emptying the recycle bin is to completely delete all folders and files in the recycle bin, and the recycle bin itself will not be deleted, which is similar to emptying the node, This operation completely deletes all descendant label nodes in a node, including text nodes, but the node itself has not been deleted.

7、 Package node

Wrap () wraps all matched elements separately and implements wrapping outside the original element
  Wrapall() wraps the matched element set as a whole and implements wrapping outside the element
  Wrapinner() wraps all matched elements individually and implements wrapping inside the original element amount

For details, please refer to the method of breaking package nodes at a glance http://www.imooc.com/article/12193

8、 Traversal node

1. Traverse upward
        1) The parent () method returns the direct ancestor element of the selected element, that is, the parent element.
        2) The parents () method returns all the ancestor elements of the selected element, all the way up to the root element of the document (< HTML >)
        3) The parentsuntil () method returns all ancestor elements between two given elements.
        4) The closest () method starts from the element itself, matches the parent element level by level, and returns the ancestor element that matches first.

    2. Traverse down
        1) The children () method returns all direct descendant elements of the selected element, that is, child elements. (opposite to parent (), one is to look up and the other is to look down)
        2) The find () method returns the descendant element of the selected element, all the way down to the last descendant. (opposite to the direction of parents())

    3. Peer traversal
        1) The siblings () method returns all siblings of the selected element.
        2) The next () method returns the next sibling element of the selected element.
          The nextall () method returns all the sibling elements behind the selected element.
             The nextuntil () method returns all sibling elements between two given parameters.
        3) The principle of prev(), prevlall(), and prevuntil() methods is the same as that of the above three methods (they are all looking for peer elements), but the direction is exactly the opposite (next() / nextall() / nextuntil() is looking back, while prev() / prevlal() / prevuntil() is looking forward).

    4. Filter (equivalent to basic filter selector)
        1) The first () method returns the first element of the selected element.
          The last () method returns the last element of the selected element.
          The EQ () method returns the element with the specified index number in the selected element.
        2) The filter () method allows you to specify a standard. Elements that do not match this criterion are removed from the collection and the matching elements are returned.
        3) The not () method returns all elements that do not match the criteria. (the not () method is the opposite of filter ()

    attentions:
        1) This section contains a lot of content and is easy to be confused. It can be combined with another article I wrote to help understand:
            Pure dry goods! Everything about jQuery selector http://www.imooc.com/article/11319

9、 Cssdom

1). In CSS () method, if the attribute is marked with "-", such as font size and background color attributes, and if the values of these attributes are set without quotation marks, the hump naming method should be used, for example:
        $("p").css({    fontSize:"30px",backgroundColor:"#888888"});
  You can write "font size" or "font size" in quotation marks.
  In short, it's a good habit to use quotation marks.

  2). The difference between CSS () and height () used to obtain the height value:
    The height value obtained by CSS () method is related to the style setting. You may get "auto" or string like "10px"; The height value obtained by the height () method is the actual height of the element in the page, which has nothing to do with the style setting and does not take units

  3). The difference between CSS () and addclass () setting styles
    1) Maintainability: addclass() is better than css()
    2) Flexibility: CSS () is better than addclass ()
    3) Style value: CSS () can get the specified style value, while addclass () cannot get the value of the specified attribute.
    4) Style priority: CSS () has a higher style priority than addclass (). (reason: the addclass () method is by adding the class name. This style is defined in the external file or internal style first, and then attached to the element when necessary; CSS () handles inline styles and attaches them directly to the element through its style attribute)
    Summary: the two methods have their own advantages and disadvantages. Generally, they are static results. Both determine the layout rules. You can use the addclass method to add unified class rules; If it is a dynamic HTML structure, CSS () mode is generally considered when there are uncertain rules or frequent changes.

  4). Summary style actions:
    JS:
        1) Pass the class name: element Classname = theclassname or element setAttribute("class",theClassName)
            eg:    document.getElementById("p1").className = "active";
                Or document getElementById("p1"). setAttribute("class","active");
        2) Through element style
            eg:    document.getElementById("p1").style.color="blue";

    In jQuery:
        1) Pass the class name: $(element) Addclass (theclassname) or $(element) attr("class",theClassName)
            eg:    $("p1").addClass("active");
                Or $("P1") attr("class","active");
        2) Via CSS ()
            eg:    $("p1").css("color","blue");

10、 JQuery size

1. The width () / height () method sets or returns the width / height of the element (excluding the inner margin, border or outer margin).
      The innerwidth() / innerheight() method returns the width / height of the element (including the inner margin).
      The outerwidth() / outerheight() method returns the width / height of the element (including the inner margin and border).
      The outerwidth (true) / outerheight (true) method returns the width / height of the element (including inner margin, border and outer margin).
attentions:
    1) According to the box model:
            Width() / height() obtains the width and height of the innermost layer of the box model
            Innerwidth() / innerheight() obtains the width and height of the two layers (content and padding) in the box model
            Outerwidth() / outerheight() obtains the width and height of the three layers (content, padding and border) in the box model
            Outerwidth (true) / outerheight (true) obtains the width and height of the whole box (content, padding, border, margin) of the box model

Box model diagram:

Pure dry goods! DOM operation analysis of jquery