JQuery-Methode zum Finden von DOM-Knoten_jquery

Das Beispiel in diesem Artikel beschreibt, wie JQuery DOM-Knoten findet. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

DOM-Operationen sind die häufigste Verwendung von JQuery. Lassen Sie uns die DOM-Operationen von JQuery einzeln analysieren. Beginnen wir mit der einfachsten Knotensuchoperation.

Um DOM-Operationen umfassend zu erklären, müssen Sie zunächst eine Webseite erstellen. Weil jede Webseite durch DOM dargestellt werden kann und jedes DOM als DOM-Baum betrachtet werden kann. Der HTML-Code lautet wie folgt:

<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>

NM im Klassennamen ist übrigens die Abkürzung für nowamagic~

Das Finden von Knoten im Dokumentbaum ist mit JQuery sehr einfach und kann über JQuery-Selektoren erfolgen.

Elementknoten suchen

Rufen Sie den Elementknoten ab und geben Sie seinen Textinhalt aus. Der JQuery-Code lautet wie folgt:

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

Der obige Code ruft den zweiten 25edfb22a4f469ecb59f1190150159c6-Knoten im ff6d136ddc5fdfeffaf53ff6ee95f185-Element ab und gibt seinen Textinhalt mit „leicht verständlicher JavaScript-Magie“ aus.

Attributknoten finden

Nachdem Sie den JQuery-Selektor verwendet haben, um das erforderliche Element zu finden, können Sie die Methode attr() verwenden, um die Werte seiner verschiedenen Attribute abzurufen. Der Parameter der attr()-Methode kann eins oder zwei sein. Wenn der Parameter eins ist, ist es der Name des abzufragenden Attributs, zum Beispiel:

Rufen Sie den Attributknoten ab und geben Sie seinen Textinhalt aus. Der JQuery-Code lautet wie folgt:

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

Der obige Code ruft den e388a4556c0f65e1904146cc1a846bee-Knoten mit der Klasse nm_p ab und gibt den Wert seines Titelattributs „Willkommen in der Concise Modern Magic Library“ aus.

Der vollständige JQuery-Code für dieses Beispiel lautet wie folgt:

<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>

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.