The 3rd chapter of jquery: Dom operations in jquery

Dom operations are divided into 3 areas:

DOM Core (core), Html-dom, and Css-dom

1. Find the node:

Find ELEMENT nodes:

var $li = $ ("ul Li:eq (1)");

var li_txt = $li. Text ();

To find an attribute node:

var $p = $ ("P");

var p_title = $p. attr ("title");

　　　　Note: attr () Gets the value of the specified element node property.

2. Create a node:

To create an element node:

var $li = $ ("<li></li>");

To create a text node:

var $li = $ ("<li> banana </li>");

To create an attribute node:

var $li = $ ("<li title=" banana "> Banana </li>");

3. Insert the node:

(1) Append (): Append content to each matched internal

(2) AppendTo ()

(3) prepend (): front content to each matched element

(4) Prependto ()

(5) after (): Insert content after each matching element

(6) InsertAfter ()

(7) before (): Insert content before each matching element

(8) InsertBefore ()

　　Note: These methods of inserting nodes can not only insert new nodes, but also move the nodes that exist.

4. Delete the node:

(1) Remove ()

(2) Detach ()

(3) Empty ()

5. Replication node:

$ ("ul Li"). Click (function() {    $ (this). Clone (). AppendTo ("ul");}) 

Note: The copy node uses the Clone () method, Clone (): The function is to copy the new element without any behavior. Parameter True,clone (TRUE): The action is to copy an element while copying an event that is bound in the element.

6, replace the node:

(1) replacewith (): Replaces all matching elements with the specified HTML or DOM elements.

(2) ReplaceAll (): The method works the same as the above method, but reverses the operation of the ReplaceWith ().

7. Parcel node:

(0) Wrap (): Wraps all matching elements separately.

(1) Wrapall (): The matching element is wrapped with an element.

　　　　Note: If there are other elements in the wrapped element, the other elements will be placed after the wrapping element.

(2) Wrapinner (): Wraps the child content of each matching element (including the text node) with other structured tags.

8. Attribute Operation:

attr (): Gets or sets the element property.

Removeattr (): Delete element attribute.

　　Note: jQuery1.6 adds prop (), Removeprop (), respectively, to get the property values of the first element in the matching element set and to delete the Set property values.

9. Style operation:

(1) attr (): Gets or sets the style.

(2) addclass (): Append style.

(3) Removeclass (): Removes the style by removing all or the specified class from the matching element.

(4) Toggle style:

Toggle (): Alternating code execution, mainly controlling repetitive switching on behavior.

Toggleclass (): Primarily controls the recurrence of a style, if the class name exists, delete it, and add it if the class name does not exist.

(5) Determine if a style is included:

Hasclass (): Determines whether the element contains the specified class, or returns False if it returns true.

　　　　Note: $ ("P"). Hasclass ("abc"); Equivalent to $ ("P"). Is ("abc");

10. Set and get HTML, text, and values:

(1) HTML (): Sets and gets the HTML content of the specified element. (Similar to the innerHTML property in Javascirptz)

　　　　Note: the HTML () method can be used for XHTML documents, but not for XML documents.

(2) text (): Sets and gets the text content in the specified element. (Similar to the InnerText property in Javascirptz)

　　　　Note: The innertext attribute in JAVASCIRPTZ does not work under Firefox, and the jquery text () method supports the browser.

The text () method is valid for both HTML documents and XML documents.

(3) Val (): Sets or gets the value of the element. (text box, drop-down list, radio box) can return the value of an element, or an array that contains all the selected values if the element is multi-selected. (Similar to the Value property in Javascirptz)

　　　　Note: This points to the current text box, and "This.defaultvalue" is the default value for the current text box.

Focus (): Handles the event when the focus is obtained.

Blur (): Handles the event when the focus is lost.

11. Traverse the node:

(1) Children (): A collection of child elements used to obtain a matching element. (only child elements are considered, regardless of descendant elements)

(2) Next (): Used to get the sibling element immediately behind the matching element.

(3) Prev (): Used to get the sibling element immediately preceding the matching element.

(4) siblings (): Used to get all the sibling elements before and after the matching element.

(5) closest (): Gets the closest matching element. First check whether the current element matches, if the match returns the element itself directly. If they do not match, look up the parent element and step up until a matching selector element is found. If nothing is found, an empty jquery object is returned.

(6) The difference between pareat (), Pareats (), closest ():

Note: There are many more ways to traverse a node in jquery, such as find (), filter (), Nextall (), Prevall (), and see jquery documentation or manuals for more.

12, css-dom Operation:

$ ("P"). CSS ("opacity", "0.5"); Set Translucent

$ ("P"). CSS ("height"); Setting or getting the height, related to CSS settings, may be "auto", or it could be the string "10px".

$ ("P"). Height (100); Sets the height of the P element to 100px

$ ("P"). Height ("100em"); Sets the height of the P element to 100em

　　Note: the height () method after jQuery1.2 can be used to obtain the heights of the widows or document.

The difference: the height value obtained by CSS () is related to the CSS settings, which may be "auto", or it may be the string "10px". The height () obtained is the actual height of the element in the page, regardless of the setting of the style, and without units.

In addition, there are several frequently used methods for element positioning in Css-dom, as follows:

(1) offset (): Gets the relative offset of the element in the current window. The returned object has two properties, top and left, that are valid only for visible elements.

var offset = $ ("P"). offset ();

var left = Offset.left;

var top = Offset.top;

(2) position (): Gets the relative offset of an element relative to the most recent position style property set to relative or absolute's grandfather node, as with offset, which returns two properties, top and left.

var position = $ ("P"). Position ();

var left = Position.left;

var top = Position.top;

(3) scrolltop (): Gets the distance from the top of the scrollbar of the element.

ScrollLeft (): Gets the distance from the left side of the scrollbar of the element.

var $p = $ ("P");

var scrolltop = $p. scrolltop ();

var scrollleft = $p. scrollleft ();

$ ("textarea"). ScrollTop (300);

$ ("textarea"). ScrollLeft (300);

The 3rd chapter of jquery: Dom operations in jquery