opération de jquery sur les nœuds dom [recommandé]_jquery

1. Où dois-je placer le script JavaScript ?

1. Lorsque certaines fonctions doivent être appelées avant d'être exécutées ou que certains événements doivent être déclenchés avant d'être exécutés, nous pouvons placer le script dans la partie head du HTML pour garantir que le script a été chargé avant tout. appel.

2. Lors du chargement de la page, le script à exécuter peut être placé dans la partie corps du HTML. Ce type de script est généralement utilisé pour générer le contenu de la page.

3. Pour les scripts qui doivent être exécutés immédiatement après le chargement de la page, nous pouvons les placer à la fin et les exécuter après le chargement du document. Heureusement, Jquery dispose d'un contrôle d'événements, nous pouvons donc dans cette partie télécharger le fichier externe référencé par head.

2. Fonctions communes de jquery

Tels que : 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, enfants()

Parcourez l'arborescence DOM et recherchez les nœuds enfants directs de l'élément spécifié ; cette méthode ne parcourt qu'un niveau plus bas dans l'arborescence DOM

// jquery 

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

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

b、parent()

Parcourez l'arborescence DOM vers le haut pour rechercher les éléments parents directs de chaque élément spécifié. Cette plage de parcours est la même que la fonction children(), qui traverse un niveau.

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

c,chacun()

Parcourez chaque élément de la 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. fonction text()

text() est une méthode de l'objet jquery, utilisée pour accéder au contenu textuel de l'élément spécifié. Il combine le contenu textuel des éléments spécifiés et le renvoie sous forme de chaîne. Peut être utilisé pour l'affectation.

5. Fonction html()

Récupérez le contenu HTML du premier élément de l'élément spécifié et renvoyez-le sous forme de chaîne. Peut être utilisé pour l'affectation.

Différence : La différence entre les fonctions text() et html()

Différence 1 : La fonction text() peut être utilisée pour les documents XML et les documents HTML, tandis que html() ne peut être utilisée que pour les documents HTML.

Différence 2 : La fonction html() affiche non seulement du texte, mais génère également des paires de balises et du texte, tandis que text() n'a que du texte.

6. fonction val()　

Renvoie ou définit la valeur de l'élément sélectionné. La valeur de l'élément est définie via l'attribut value. Cette méthode est principalement utilisée pour les éléments d'entrée. Si cette méthode ne définit pas de paramètres, elle renvoie la valeur actuelle de l'élément sélectionné.

7. Fonction next() Obtient les éléments frères adjacents de chaque élément dans l'ensemble d'éléments correspondant. Si un sélecteur est fourni, récupère l'élément frère suivant qui correspond au sélecteur.

3. Opération sur dom

Tels que : prepend(), prependTo(), clone(), append(), appendTo(), before(), insertBefore(), after(), insertAfter(), remove(), detach(), vide () , replaceWith() , replaceAll() , wrap() , wrapAll() , warpInner()

L'opération jquery ci-dessus sur les nœuds dom [recommandée] correspond à tout le contenu partagé par l'éditeur. J'espère qu'elle pourra vous donner une référence et j'espère que vous soutiendrez Script Home.