jquery's operation on dom nodes [recommended]_jquery

1. Where should I put the JavaScript script?

1. When some functions need to be called before they are executed or some events need to be triggered before they are executed, we can place the script in the head part of the HTML to ensure that the script has been loaded before any call.

2. When the page loads, the script to be executed can be placed in the body part of the HTML. This type of script is usually used to generate the content of the page.

3. For scripts that need to be executed immediately after the page is loaded, we can place them at the end and execute them after the document is loaded. Fortunately, Jquery has event control, so in this part we can download the external file referenced by head.

2. 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()

Traverse the DOM tree and search for direct child nodes of the specified element; this method only traverses one level down in the DOM tree

// jquery 

$('ul.level-2').children().css('background-color', 'red'); 

$('ul.level-2').children('.item-*').css('background-color', 'red');

b、parent()

Traverse the DOM tree upward to search for the direct parent elements of each specified element. This traversal range is the same as the children() function, which traverses one level.

$('li.item-a').parent().css('background-color', 'red');

c,each()

Loop through each element in the collection.

//数组的遍历 

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

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

alert(i); 

alert(item); 

}); //二维数组的遍历 

var arr = [ 

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

["Test4", "Test5", "Test6"], 

["Test7", "Test8", "Test9"] 

]; 

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

alert(i); 

alert(item); 

}); //遍历json数据 

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, used to access the text content of the specified element. It combines the text content of the specified elements and returns it as a string. Can be used for assignment.

5. html() function　

Get the html content from the first element in the specified element and return it as a string. Can be used for assignment.

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

Difference 1: The text() function can be used for xml documents and html documents, while html() can only be used for html documents.

Difference 2: The html() function not only displays text, but also outputs tag pairs and text, while text() only has text.

6. val() function　

Returns or sets the value of the selected element. The value of the element is set through the value attribute. This method is mostly used for input elements. If this method does not set parameters, it returns the current value of the selected element.

7. next() function Obtains the adjacent sibling elements of each element in the matching element set. If a selector is provided, retrieves the next sibling element that matches the selector.

3. Operation on dom

Such as: prepend(), prependTo(), clone(), append(), appendTo(), before(), insertBefore(), after(), insertAfter(), remove(), detach(), empty () , replaceWith() , replaceAll() , wrap() , wrapAll() , warpInner()

The above jquery operation on dom nodes [recommended] is all the content shared by the editor. I hope it can give you a reference, and I also hope you will support Script Home.