DOM operations in JQuery

Yesterday I studied how to obtain dom elements and how to obtain them. I would like to remind you that the hierarchical selector and filter selector will produce different results if you have a single space. Please be careful and patient.

1. What is DOM?

DOM :( Document Object Model) refers to the Document Object Model. According to W3C DOM specification, DOM is an interface unrelated to browsers, platforms, and languages, you can use this interface to easily access all the standard components on the page. DOM operations are divided into three types: DOM core, HTML-DOM, CSS-DOM.

Let's take a look at the following DOM structure: Can you build a webpage based on this DOM structure? Each gray background is a node. We can get them through different selectors.

Ii. DOM operations

1. Create a node: In DOM operations, you often need to dynamically create HTML content to change the rendering effect of the document in the browser. Nodes are divided into element nodes, attribute nodes, and text nodes.

How to dynamically create a node? For example, if I create two <li> elements, you can use jquery's factory function $. Var $ li1 = $ ("<li title = 'bananas '> bananas </li> "); var $ li2 = $ ("<li title = 'apple'> Apple </li> "). the title = 'banana 'above is the property node created, and the text in the <li> element is the text node. Note: dynamically created elements are not automatically added to the document. You must use other methods to insert them into the document. Take it easy.

2. Insert nodes: if you do not want to insert new elements into the document, dynamic HTML element creation is of no practical use. JQuery provides several methods to insert nodes. The first four in the following table are inserted into the interior of the element, while the last four are inserted into the exterior of the element.

Append	Append content to matched elements	$ ("P"). append ("hello ")
AppendTo	Append the matched element to the specified element.	$ ("Hello"). appendTo ("p ")
Prepend	Forward content to each Matching Element	$ ("P"). prepend ("hello ")
PrependTo	Forward the matched element to the specified element.	$ ("Hello"). prependTo ("p ")
After	Insert content after each Matching Element	$ ("P"). after ("hello ")
InsertAfter	Insert the matched element to the end of the specified element.	$ ("Hello"). insertAfter ("p ")
Before	Insert content before each Matching Element	$ ("P"). before ("hello ")
InsertBefore	Inserts a matched element before the specified element.	$ ("Hello"). insertBefore ("p ")

3. delete a node: if an element in the document is redundant, delete it. There are two methods: empty (); remove (); anyone who understands English knows the meaning of these two words. There is a difference between them. One is to clear, one is to remove it.

Remove () means to remove all matching elements. When a node uses the remove () method, all child nodes contained in the node will be removed from the document. The return value of this method points to the reference of the deleted node. You can continue to use these elements in the future.

The empty () method does not delete a node, but clears it. It also clears all child nodes of the element. Clearing does not mean removing the elements from the document. Its element nodes still exist in the Document Stream, but all the content in it is gone.

4. Attribute operation: You can use attr () to obtain attributes of an element and set attributes. $ (". Test "). attr ("title"); $ (". test "). attr ("title", "this is my title "). set multiple attributes: $ ("p "). attr ("title": "mytitle", "class": "test "). RemoveAttr () can be used to delete a specific attribute of an element $ ("p"). removeAttr ("title ").

5. style operation: Of course, it is a css style. Its interface is the class name of the element.

(1) how to get a style: You can use attr () to get the class name and set the class name, and then perform operations in css. Generally, this method replaces the original class name with the new class name, instead of adding a new class name based on the original one.

(2) append style: Jquery provides a special addClass () to append a new class name. In this way, the original class name and the newly appended class name will coexist. However, if the same style is set for different class names, the latter will overwrite the former.

(3) Remove style: Unlike addClass (), removeClass () is used to delete the matched class name. For example, $ ("p"). removeClass ("high anther") deletes the high class name and the anther class name. There is a space in the middle. If $ ("p"). removeClass (); is to delete all the class names of the p element.

2. Confusing html (), text (), and value ()

1. html () method: similar to the innerHTML attribute of javascript, it can be used to read or obtain the html content of an element; html () methods can be used in the XHTML method but cannot be used in XML.

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

If the selector selects more than one element at the same time, only the content of the first element can be read.

<Div> <p> This is text content 1 <a href = "#"> hyperlink 1 </a> </p> <p> This is text content 2 <a href = "#"> hyperlink 2 </a> </p> </div> var p_html = $ ("div p" ).html (); alert (p_html); the result is: Text Content 1 <a href = "#"> hyperlink 1 </a>

Html () can not only read but also set content, but is different from the above. If the selector selects more than one element at the same time, the html structure of all selected elements will be changed.

<Div> <p> This is text content 1 <a href = "#"> hyperlink 1 </a> </p> <p> This is text content 2 <a href = "#"> hyperlink 2 </a> </p> </div> var p_html = $ ("div p" ).html ("
2. text () method: similar to the innerText attribute of javascript, it can be used to read or set the plain text content of an element. However, the innerText () method cannot run in firefox, while the text () method of jquery can run in all browsers.
<P> This is text content 1 <a href = "#"> hyperlink 1 </a> </p> var p_html = $ ("div p "). text (); alert (p_html); The obtained content is: text Content 1 hyperlink 1

Use. in the text () method, we only read the plain text content of an element, including its descendant elements, and the HTML tags (including the HTML tags of its descendant elements) in this element are stripped out, only text content is left.
The text () method can select multiple elements at the same time as the html () method, but it is a little different. When html () matches multiple elements, it will only read the first of the matching elements; the text () method is different. When it matches multiple elements, it reads the content of multiple elements at the same time. For example:
<Div> <p> This is text content 1 <a href = "#"> hyperlink 1 </a> </p> <p> This is text content 2 <a href = "#"> hyperlink 2 </a> </p> </div> var p_text = $ ("div p "). text (); alert (p_text); The obtained content is: text Content 1 hyperlink 1 it is text content 2 hyperlink 2
Evaluate (htmlString) for comparison. However, they have the following similarities:If multiple elements are matched, using. text () will replace the content of the matched element with the same content.
3. val () method: similar to the value attribute of javascript, it can be used to obtain or set the value field value of a form element, whether the element is a text box, a drop-down list, or a single struct, it can return the value of an element. If multiple elements are selected, an array containing all selected values is returned. The preceding html () and text () methods cannot be operated in the form. The val () method is mainly used to obtain the value of the form element. For the "<select multiple =" multiple ">" element ,. the val () method returns an array containing each selected option. For the following selection box "<select>" and check box, single choice ([type = "checkbox"], [type = "radio"]) You can use the ": selected" and ": checked" selectors to obtain the value.
<Input 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 ("email address ")}
})
Summarize the above three methods:
1. html () is used to read and modify the HTML tags of elements;
2. text () is used to read and modify the plain text content of elements;
3. val () is used to read and modify the value of a form element;
Functional Comparison of the three methods:
12.16.html(),.text(),.val().html) are used to read and select the content of elements only. HTML () is used to read the Html content of elements (including its HTML tags ),. text () is used to read the plain text content of an element, including its child element ,. val () is the "value" value used to read form elements. Except () is the same. If it is applied to multiple elements, it can only read the "value" value of the first form element,. text () is different from them, if. when text () is applied to multiple elements, the text content of all selected elements is read.
22.16.html (htmlString ),. text (textString) and. val (value) is used to replace the content of the selected element. If the three methods are applied to multiple elements at the same time, the content of all selected elements will be replaced.
After an afternoon of belching, I finally completed this blog!