DOM を検索するための JQuery メソッド nodes_jquery

この記事の例では、JQuery が DOM ノードを見つける方法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

DOM 操作は JQuery の最も一般的な使用法です。JQuery の DOM 操作を 1 つずつ分析してみましょう。最も単純なノード検索操作から始めましょう。

DOM の操作を包括的に説明するには、まず Web ページを構築する必要があります。すべての Web ページは DOM で表すことができ、すべての DOM を DOM ツリーとみなすことができるからです。 HTML コードは次のとおりです:

<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はnowamagicの略です~

ドキュメント ツリー上のノードの検索は、JQuery を使用すると非常に簡単で、JQuery セレクターを通じて実行できます。

要素ノードの検索

要素ノードを取得し、そのテキスト内容を出力します。JQuery コードは次のとおりです。

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

上記のコードは、ff6d136ddc5fdfeffaf53ff6ee95f185 要素の 2 番目の 25edfb22a4f469ecb59f1190150159c6 ノードを取得し、そのテキストの内容を「わかりやすい JavaScript マジック」で出力します。

属性ノードの検索

JQuery セレクターを使用して必要な要素を見つけた後、attr() メソッドを使用してそのさまざまな属性の値を取得できます。 attr() メソッドのパラメータは 1 つまたは 2 つです。パラメータが 1 の場合、それはクエリ対象の属性の名前です。例:

属性ノードを取得し、そのテキスト内容を出力します。JQuery コードは次のとおりです。

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

上記のコードは、クラス nm_p の e388a4556c0f65e1904146cc1a846bee ノードを取得し、その title 属性の値「Welcome to the Concise Modern Magic Library」を出力します。

この例の完全な JQuery コードは次のとおりです:

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

この記事が皆さんの jQuery プログラミングに役立つことを願っています。