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

上記のコードは、

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

  属性ノードの検索

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

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

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

  上記のコードは、クラス nm_p の

  ノードを取得し、その 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 プログラミングに役立つことを願っています。