Dom operations in jquery

First, what is DOM?

DOM: (Document Object model) means that, according to the Web site DOM specification, Dom is a browser-, platform-, language-independent interface that makes it easy to access all the standard components of a page. In general, DOM operations are divided into 3 categories: Dom Core, Html-dom, Css-dom.

Let's look at the following Dom chart: Can you build a Web page from this DOM structure? Each of these gray backgrounds is a node. We can get them by using different selectors.

Second, Dom Operation

1, create the node : in DOM operations often need to dynamically create HTML content, so that the document in the browser rendering effect changes. node is divided into element nodes, attribute nodes, text nodes.

How do you create nodes dynamically? For example, I created two <li> elements that can be done using JQuery's Factory function $ (). var $li 1 = $ ("<li title= ' banana ' > Banana </li>"); var $li 2 = $ ("<li title= ' Apple ' > Apple </li>"). The title= ' banana ' above is the created attribute node, and the banana text in the <li> element is the text node. Note: Dynamically created elements are not automatically added to the document and must be inserted into the document using a different method. Take it slow, don't worry.

2. Insert Node : If you do not speak the new element inserted into the document , the dynamic creation of HTML elements is of no practical use. jquery, however, provides several ways to insert nodes. The first four in the following table are inserted inside the element, and the next four are inserted outside the element.

Append	Add content to the matching element	$ ("P"). Append ("Hello")
AppendTo	Appends a matching element to the specified element	$ ("Hello"). AppendTo ("P")
Prepend	Internal front content to each matched element	$ ("P"). prepend ("Hello")
Prependto	Place the matched element in front of the specified element	$ ("Hello"). Prependto ("P")
After	Insert content after each matched element	$ ("P"). After ("Hello")
InsertAfter	Inserts a matching element after the specified element	$ ("Hello"). InsertAfter ("P")
Before	Insert content before each matching element	$ ("P"). Before ("Hello")
InsertBefore	Inserts a matching element before the specified element	$ ("Hello"). InsertBefore ("P")

3. Delete a node : if one of the elements in the document is superfluous, then we should say he deleted it. There are two ways to do this: empty (); Remove (); know the meaning of these two words in English, there is a difference between them, one is empty, and the other is removed.

Remove () Removes all matching elements, and when a node uses the Remove () method, all descendant nodes that the node contains are removed from the document. The return value of this method points to a reference to the node that has been deleted, and you can continue to use these elements later.

The empty () method does not delete a node, it simply empties it, and it also empties all descendant nodes of that element. Emptying does not mean removing the HA from the document, its element node or the existence of the document flow, except that everything inside it is missing.

4. Property manipulation : Use attr () to get the attributes of an element as well as to set properties. $ (". Test"). attr ("title"); $ (". Test"). attr ("title", "This is my title"). Set multiple properties: $ ("P"). attr ("title": "MyTitle", "Class": "Test"). Use Removeattr () to delete an element-specific property $ ("P"). Removeattr ("title").

5, style operation : Of course, CSS style, its interface is the class name of the element.

(1) How to get the style: You can get the class name and set the class name by attr () and then manipulate it in CSS. In general, this method replaces the original class name with the newly set class name instead of adding a new class name on top of the original.

(2) Append style: jquery provides a special addclass () to append a new class name, in which case the original class name and the newly appended class name will exist at the same time. However, the same style is set for different class names, and the latter overrides the former.

(3) Remove style: In contrast to AddClass (), Removeclass () is specifically used to delete a matching class name. For example: $ ("P"). Removeclass ("High anther") removed the high class name and Anther class name. The middle is a space symbol. If $ ("P"). Removeclass (); Deletes all the class names of the P element.

second, easy to confuse HTML (), text (), value ()

1, HTML () method: It is similar to the innerHTML property of JavaScript, can be used to read or get the HTML content of an element; the HTML () method can be used in XHTML methods but not in XML.

< Div >< Strong > This is text content ha </strong></div>var div_html = $ ("div"). html (); alert (div_html); Gets the result:<strong> This is the text content ha </  strong>

If the selector selects more than one element at a time, it can only read the contents of the first element.

<Div>       <P>This is text content 1<ahref="#">Hyperlink 1</a></P>      <P>This is text content 2<ahref="#">Hyperlink 2</a></P></Div>var p_html = $ ("div p"). html (); alert (p_html); Gets the result: this is the text content 1<ahref="#">Hyperlink 1</a>

HTML () can not only read the content but also set the content, but unlike above, if the selector selects more than one element at a time, then the HTML structure of all the selected elements will be changed.

<Div>      <P>This is text content 1<ahref="#">Hyperlink 1</a></P>      <P>This is text content 2<ahref="#">Hyperlink 2</a></P></Div>var p_html = $ ("div p"). HTML ("<H2>Title of the new addition</H2><a>No content</a>) ; Gets the result:<Div>      <P><H2>Title of the new addition</H2><a>No content</a></P>      <P><H2>Title of the new addition</H2><a>No content</a></P></Div>

2. Text () method: It is similar to the InnerText property of JavaScript and can be used to read or set the plain text content of an element. However, the innertext () method cannot run under Firefox, and the text () method of jquery can be run in all browsers.

< P > This is text content 1<href= "#"> hyperlink 1</a ></ P > var p_html = $ ("div p"). text (); alert (p_html); Gets the content is: This is the text content 1 hyperlink 1

Using the. Text () method, we only read the plain text content of the element, including its descendant elements, and the HTML tag in this element (including the HTML tag of its descendant elements) is stripped away, leaving only the text content.

The text () method, like the HTML () method, can select multiple elements at the same time, but with a different point, HTML () will only read the first of the matching elements when matching multiple elements, and the text () method, when it matches multiple elements, reads the contents of multiple elements at the same time. Such as:

<Div>       <P>This is text content 1<ahref="#">Hyperlink 1</a></P>      <P>This is text content 2<ahref="#">Hyperlink 2</a></P></Div>var p_text = $ ("div p"). text (); alert (p_text); Gets the content is: This is the text content 1 Hyperlink 1 This is the text content 2 Hyperlink 2

The text () method replaces the old content of an element with an HTML tag as plain text content, which is completely different from the. html () method, and you can compare it to the previous. html (htmlstring). But they have one thing in common: If multiple elements are matched, using. Text () replaces the contents of the matched element with the same content.

3. Val () method: It is similar to the Value property of JavaScript, it can be used to get or set the value of the form element, whether the element is a text box or a drop-down list, a radio box, it can return the value of the element, if the element is multi-select, Returns an array that contains all the selected values. None of the preceding HTML () and text () methods can be manipulated in the form, and the Val () method is primarily used to get the value of the form element. As for the "<select multiple=" multiple ">" element, the. Val () method returns an array containing each selected option, for the next selection box "<select>" and the check box, radio ([type= " CheckBox "],[type=" Radio "]) you can use the": Selected "and": checked "selectors to get the values.

<type= "text"  ID= "Address"  value= "Email address" > $ ("#address"). focus (function () {         var txt = $ (this). Val ();         if (txt== "email address")         {$ (this). Val ("");}         })
$ ("#address"). blur (function () {
var txt = $ (this). Val ();
if (txt== "")
{$ (this). Val ("E-mail Address")}
})

Summarize the 3 methods above:

1, HTML () to read and modify the elements of the HTML tag;

2, text () to read and modify the elements of the plain text content;

3. Val () is used to read and modify the value of the form element;

The functional comparison of these three methods:

1. . HTML (),. Text (),. Val () Three methods are used to read the contents of the selected element; HTML () is used to read the HTML content of the element (including its HTML tags),. Text () is used to read the plain text content of the element, including its descendant elements. Val () is a value that is used to read the form element's "value". The. and. Text () methods cannot be used on form elements, whereas. val () can only be used on form elements; the. html () method only reads the first element when used on more than one element, and the. Val () method is the same as. html () If it is applied on more than one element. Only the value of the first FORM element can be read, but. Text () is different from theirs, and if. Text () is applied on more than one element, the textual content of all the selected elements is read.

2.. html (htmlstring),. Text (TextString) and. Val (value) Three methods are used to replace the contents of the selected element, and if three methods are applied on more than one element at the same time, the contents of all the selected elements will be replaced.

Played a hiccup in the afternoon, and finally finished this blog!

Dom operations in jquery