Common methods of jquery:dom operation, attribute manipulation and CSS operation

DOM Operations

1.append append a picture to the interior of the DIV1

$ ("#div1"). Append ("

2.appendTo append a picture to the inside of Div1 last

$ ("

3.prepend, prependto inside the front insert

$ ("#div1"). Prepend ("$ ("

4.after, InsertAfter on the outside of Div2, insert node behind

$ ("#div1"). After ("<p> This is a div</p>");
$ ("<p> This is a div</p>"). InsertAfter ("#div1");

5.before, InsertBefore on the outside of DIV1, front insert node

$ ("#div1"). Before ("<p> This is a div</p>");
$ ("<p> This is a div</p>"). InsertBefore ("#div1");

6.wrap for each selected node, set a parent node

$ ("div"). Wrap ("<section></section>");

7.WRAPALL Wraps all selected nodes in the same parent node

$ ("div"). Wrapall ("<section></section>");

8.unwrap Delete the parent node of the selected node

$ ("#div1 p"). Unwrap ();

9.wrapInner wraps all child elements in the selected node in a new parent node, and the new parent node is still a child of the current element node

$ ("#div1"). Wrapinner ("<div></div>");

10.replaceWith, ReplaceAll Replace all selected nodes with new nodes

$ ("div p"). ReplaceWith ("<span>1</span>");
$ ("<span>1</span>"). ReplaceAll ("div p");

11.empty empties the contents of the current node, but retains the current node label

$ ("#div1"). empty ();

12.remove deletes the current node and all child nodes of the current node

[The difference between remove and Detachde]
The node that is bound by the node will no longer be preserved if it is restored after recovering the nodes that were deleted using remove
Nodes that are removed by using detach can retain the events bound by the node after the node is restored

$ ("#div1"). Remove ();
$ ("#div1"). Detach ();

13.clone
[JS in CloneNode () and JQ in the Clone () the difference]
1.cloneNode () If the parameter is not passed or false, it means that only the current node is cloned and the child node is not cloned;
2.clone () Clones the current node and all child nodes, whether passed in true or false
Passing in true means that the cloned node will include the event that the node is bound to.
Otherwise, only the nodes are cloned and the events are not cloned.
The second parameter can pass in true or false to indicate whether the child node is cloned

$ ("#div1"). Clone (). Empty (). InsertBefore ("button:eq (0)");

Property manipulation

1.attr setting the properties of a node

$ ("#div1"). attr ("Class", "CLS Cls2 CLS3");

An incoming object that sets many pairs of properties in the form of a key-value pair. Common

$ ("#div1"). attr ({
"Class": $ ("#div1"). attr ("class") + "CLS1",
"Name": "Name1",
"Style": "Font-size:24px;color:yellow;"
});

. attr properties taken to a node

Console.log ($ ("#div1"). attr ("id"));

2.REMOVEATTR Delete Node Properties

$ ("#div1"). Removeattr ("class");

3.prop and attr, you can read and set the node properties

[difference between the two]
When reading property name = property Value Properties, ATTR returns the property value and undefined: and prop returns True or false.
That is, the attribute to be taken by the attr must be a property already stated on the label, otherwise it cannot be taken.

Console.log ($ ("Input:eq (0)"). attr ("Disable"));
Console.log ($ ("Input:eq (0)"). Prop ("Disable"));
$ ("Input:eq (0)"). Removeprop ("Disable");

4.addClass adds a class name based on the original class

$ ("#div1"). AddClass ("cls0000");

5.removeClass deletes the specified class name. The remaining class names that are not deleted remain

$ ("#div1"). Removeclass ("CLS");

6.toggleClass Switch class: If you have the specified class, delete it, if not, add it.

$ ("button"). Click (function () {
$ ("#div1"). Toggleclass ("Div1");
});

7.html ([VAL|FN]) fetching or setting the HTML code in the node

8.text ([VAL|FN]) fetching or setting text in a node

9.val ([Val|fn|arr]) takes or sets the value of the form element

CSS Actions

1.CSS () Add CSS style to the node, which belongs to the row-level style sheet permission

$ ("#div1"). CSS ("Color", "green");

Add a multiple-pair style to a node at the same time

$ ("#div1"). CSS ({
"Color": "Green",
"Font-size": "36px"
});

Modifying a style by returning a value from a callback function

$ ("Button:eq (0)"). Click (function () {
$ ("#div1"). CSS ({
"Color": "Green",
"Font-size": function (index,value) {
var n=parseint (value) +1;
return n + "px";
}
});
});

2.height, width to take or set width height. Contains only Width/height

$ ("#div1"). Height (400);
$ ("#div1"). Width ("400px");

3.innerHeight, innerwidth take to the node's width and height +padding. does not contain border and margin

Console.log ($ ("#div1"). Innerheight ());
Console.log ($ ("#div1"). Innerwidth ());

4.outerHeight, outerwidth non-pass parameters, indicating the width of the high +padding+border
Passed in true, indicating the width of the high +padding+border+margin

Console.log ($ ("#div1"). Outerheight ());
Console.log ($ ("#div1"). Outerwidth (true));

5.offset returns the offset of a node relative to the upper-left corner of the browser
Returns the result as an object {top:20,left:20}

Console.log ($ ("#div1"). offset ());

6.position returns the offset of a node relative to the parent container.
Attention:
① uses this method to require that the parent element must be an anchor element. If the parent element is not an anchor element, it is still measured relative to the upper-left corner of the browser.
② This method, the margin is not considered when the offset is measured. Margin is considered a part of the current container

Console.log ($ ("#div1"). Position ());

7.scrollTop (): Sets or takes the scroll bar position of the specified node

Console.log ($ (document). ScrollTop ());

Common methods of jquery:dom operation, attribute manipulation and CSS operation