Méthode JQuery pour trouver DOM nodes_jquery

L'exemple de cet article décrit comment JQuery trouve les nœuds DOM. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Les opérations DOM sont l'utilisation la plus courante de JQuery. Analysons les opérations DOM de JQuery une par une. Commençons par l’opération de recherche de nœud la plus simple.

Afin d'expliquer de manière exhaustive les opérations DOM, vous devez d'abord créer une page Web. Parce que chaque page Web peut être représentée par DOM, et chaque DOM peut être considéré comme une arborescence DOM. Le code HTML est le suivant :

<p class="nm_p" title="欢迎访问脚本之家" >欢迎访问脚本之家</p>
<ul class="nm_ul">
  <li title='PHP编程'>简单易懂的PHP编程</li>
  <li title='JavaScript编程'>简单易懂的JavaScript编程</li>
  <li title='JQuery编程'>简单易懂的JQuery编程</li>
</ul>

Au fait, nm dans le nom de la classe est l'abréviation de nowamagic~

La recherche de nœuds dans l'arborescence des documents est très simple avec JQuery et peut être effectuée via les sélecteurs JQuery.

Rechercher un nœud d'élément

Récupérez le nœud de l'élément et imprimez son contenu texte. Le code JQuery est le suivant :

var $li = $(".nm_ul li:eq(1)"); // 获取第二个<li>元素节点
var li_txt = $li.text(); // 输出第二个<li>元素节点的text

Le code ci-dessus obtient le deuxième nœud

dans l'élément

et imprime son contenu textuel avec une « magie JavaScript facile à comprendre ».

Rechercher un nœud d'attribut

Après avoir utilisé le sélecteur JQuery pour trouver l'élément recherché, vous pouvez utiliser la méthode attr() pour obtenir les valeurs de ses différents attributs. Le paramètre de la méthode attr() peut être un ou deux. Lorsque le paramètre vaut un, c'est le nom de l'attribut à interroger, par exemple :

Récupérez le nœud d'attribut et imprimez son contenu textuel. Le code JQuery est le suivant :

var $para = $(".nm_p"); // 获取<p>节点
var p_txt = $para.attr("title"); // 输出<p>元素节点属性title

Le code ci-dessus obtient le nœud

avec la classe nm_p et imprime la valeur de son attribut de titre "Bienvenue dans la bibliothèque magique moderne concise".

Le code JQuery complet pour cet exemple est le suivant :

<script type="text/javascript">
//<![CDATA[
$(function(){
  var $para = $(".nm_p"); // 获取<p>节点
  var $li = $(".nm_ul li:eq(1)"); // 获取第二个<li>元素节点
  var p_txt = $para.attr("title"); // 输出<p>元素节点属性title
  var ul_txt = $li.attr("title"); // 获取<ul>里的第二个<li>元素节点的属性title
  var li_txt = $li.text(); // 输出第二个<li>元素节点的text
  $("#btn_1").click(function(){
    alert(ul_txt);
  });
  $("#btn_2").click(function(){
    alert(li_txt);
  });
  $("#btn_3").click(function(){
    alert(p_txt);
  });
});
//]]>
</script>

J'espère que cet article sera utile à la programmation jQuery de chacun.