jquery "recommended" _jquery for DOM node operations

1. Where is the JavaScript script?

1. When some functions need to be invoked before they are executed or some events need to be triggered to execute, we can place the script in the Head section of the HTML to ensure that the script is loaded before any calls.

2. Scripts that need to be executed when the page is loaded can be placed in the body part of the HTML, which is often used to generate the content of the page.

3. When the page is loaded, the script that needs to be executed immediately, we can put it in the end, the document is loaded and executed. Fortunately, jquery has event control, so we can download this part of the external file that the head references.

2, the common functions of jquery

such as: Children (), parent (), each (), text (), HTML (), Val (), Next ();

<ul class= "Level-1" >

<li class= "item-i" >I</li>

<li class= "item-ii" >ii 

<ul class= "Level-2" >

<li class= "item-a" >A</li>

<li class= "item-b" >b <ul "class=" 

Level-3 ">

<li class=" item-1 ">1</li>

<li class=" item-2 ">2</li>

<li class = "Item-3" >3</li> 

</ul>

</li>

<li class= "item-c" >C</li> 

</ul>

</li>

<li class= "ITEM-III" >III</li> 

</ul>

A, children ()

Traverses the DOM tree to search for a direct child node of the specified element, and this method traverses only one layer down the DOM tree

jquery 

$ (' Ul.level-2 '). Children (). CSS (' background-color ', ' red '); 

$ (' Ul.level-2 '). Children ('. item-* '). CSS (' background-color ', ' red ');

b, Parent ()

Walks up the DOM tree to search for direct affinity elements for each specified element. The traversal range of this and children () function is the same, all traversing the first layer.

$ (' li.item-a '). Parent (). CSS (' background-color ', ' red ');

C, each ()

Iterates through each element in the collection.

Array of traversal 

var arr = ["Test1", "Test2", "Test3"]; 

$.each (arr, function (I, item) { 

alert (i); 

alert (item); 

Traversal of two-dimensional arrays 

var arr = [ 

["Test1", "Test2", "Test3"], 

["Test4", "Test5", "Test6"], ["Test7", "Test8" 

, "" Test9 "] 

]; 

$.each (arr, function (I, item) { 

alert (i); 

alert (item); 

Traversal JSON data 

var obj = {"1": "Test1", "2": "Test2", "3": "Test3", "4": "Test4", "5": "Test5", "6": "Test6"}; 

$.each (obj, function (i, item) { 

alert (i); 

alert (item); 

4, text () function

Text () is a method of the jquery object that accesses the textual content of the specified element. It merges the textual content of the specified element and returns as a string. Can be used to assign values.

5. HTML () function

Gets the HTML content from the first element in the specified element and returns as a string. Can be used to assign values.

Difference: The difference between text () and HTML () functions

Difference One: the text () function is available for XML documents and HTML documents, while HTML () can only be used for HTML documents.

Difference two: HTML () function not only display text, output also includes label pairs and text, and text () only text.

6, Val () function

Returns or sets the value of the selected element, with the value of the element set through the Value property. This method is mostly used for input elements. If the method does not set a parameter, the current value of the selected element is returned.

The 7, next () function gets the sibling elements that are adjacent to each element in the matching element collection. If a selector is provided, the next sibling element that matches the selector is retrieved.

3, the operation of the DOM

such as: Prepend (), Prependto (), Clone (), append (), Appendto (), before (), InsertBefore (), after (), InsertAfter (), remove ( ), detach (), empty (), ReplaceWith (), ReplaceAll (), wrap (), Wrapall (), Warpinner ()

This jquery on the operation of the DOM node "recommendation" is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud habitat community.