This is the 25th day of my participation in the August Genwen Challenge.More challenges in August

JQuery Node Operations

Create the element

Grammar: $(‘ < li > < / li > ‘)

Additional elements

Append element 1

• Appends last to the parent element

Syntax: parent element jQuery object append(newly created jQuery object);

AppendTo (‘ parent element selector ‘or parent element jQuery object);

• Appends to the first parent element

Syntax: parent element jQuery object prepend(newly created jQuery object)

PrependTo (‘ parent element selector ‘or parent element jQuery object);

Append element 2

• Append a new sibling to the element

Syntax: jQuery object. After (newly created jQuery object);

Syntax: create new jQuery object. InsertAfter (‘ selector ‘or jQuery object);

• Append a new sibling to the element

Syntax: jQuery object. Before (newly created jQuery object);

Syntax: new jQuery object. InsertBefore (‘ selector ‘or jQuery object);

Remove elements

• Syntax: jQuery object. Remove ();

• Delete whoever calls this method

Empty elements

• Empty method 1: jQuery object. Empty (); It is recommended to clear all internal elements and their associated events

$(".box").empty();
Copy the code

The

inside box will be removed later, but the box element will remain

• Empty method 2: jQuery object.html(“); Only the internal element is cleared, not the event that clears the element in memory.

Cloning elements

• Syntax: jQuery object. Clone (Boolean); Returns the cloned element

• Arguments: The default is false, indicating that only content is cloned. True, clone content and events

JQuery manipulates the dimensions of elements

Width () and height() methods

The size of the operation is only part of the content

• Setting: jQuery object. Width (numeric);

• Get: jQuery object. Width ();

InnerWidth () and innerHeight() methods

The size of the operation is the content section + padding

• Settings: jQuery object. Add or subtract values to the width property

• Get: jQuery object innerWidth();

OuterWidth () and outerHeight() methods

The size of the operation is the content section + padding + border

• Settings: jQuery object. OuterWidth (numeric); Add or subtract values to the width property

• Get: jQuery object. OuterWidth ();

JQuery manipulates the position of elements

Gets the location of the element from the document

• Syntax: jQuery object. Offset ();

• Return an object containing the position of the element (left, top)

• Note that the offset() method takes the position of the element, always referring to the document, and has nothing to do with positioning.

        var $son = $(".son");
        var offsetObj = $son.offset();
        console.log(offsetObj)
        console.log(offsetObj.left)
        console.log(offsetObj.top)
Copy the code

Position the reference element from the parent

• Syntax: jQuery object. Position ();

• Returns an object containing the location of the element

• Note: the position() method retrieves the position of the element, referring to the last positioned element.

        var positionObj = $son.position();
        console.log(positionObj);
        console.log(positionObj.left);
Copy the code

Operation volume to page spacing

• Get vertical roll distance: jQuery object scrollTop(); Return to digital

• Get horizontal roll distance: jQuery object scrollLeft(); Return to digital

• Settings: jQuery object scrollTop(number);

• Settings: jQuery object scrollLeft(number);

        // Add a scroll event to the element
        $(".box").scroll(function () {
            // Get the distance of the scroll bar
            console.log($(this).scrollTop())
        })

        // Set the scroll event for the document
        $(document).scroll(function () {
            // Get the distance of the scroll bar
            console.log($(this).scrollTop())
        })
Copy the code
        // Set the distance of the document to 0 by clicking the "Back to top" button
        $(".backtop").click(function () {
            // Set the scrollTop value
            $(document).scrollTop(0)})Copy the code