Kaedah JQuery untuk mencari DOM nodes_jquery-tutorial js-php.cn

Kaedah JQuery untuk mencari DOM nodes_jquery

WBOY

Lepaskan： 2016-05-16 15:56:04

asal

1366 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara JQuery mencari nod DOM. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Operasi DOM ialah penggunaan JQuery yang paling biasa Mari analisa operasi DOM JQuery satu demi satu. Mari kita mulakan dengan operasi carian nod yang paling mudah.

Untuk menerangkan operasi DOM secara menyeluruh, anda perlu membina halaman web terlebih dahulu. Kerana setiap halaman web boleh diwakili oleh DOM, dan setiap DOM boleh dianggap sebagai pokok DOM. Kod HTML adalah seperti berikut:

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

Salin selepas log masuk

By the way, nm dalam nama kelas ialah singkatan daripada nowamagic~

Mencari nod pada pepohon dokumen adalah sangat mudah menggunakan JQuery dan boleh dilakukan melalui pemilih JQuery.

Cari nod elemen

Dapatkan nod elemen dan cetak kandungan teksnya Kod JQuery adalah seperti berikut:

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

Salin selepas log masuk

Kod di atas memperoleh nod

kedua dalam

Cari nod atribut

Selepas menggunakan pemilih JQuery untuk mencari elemen yang diperlukan, anda boleh menggunakan kaedah attr() untuk mendapatkan nilai pelbagai atributnya. Parameter kaedah attr() boleh menjadi satu atau dua. Apabila parameter ialah satu, ia adalah nama atribut yang akan ditanya, contohnya:

Dapatkan nod atribut dan cetak kandungan teksnya Kod JQuery adalah seperti berikut:

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

Salin selepas log masuk

Kod di atas memperoleh

nod dengan kelas nm_p dan mencetak nilai atribut tajuknya "Selamat Datang ke Perpustakaan Sihir Moden Ringkas".

Kod JQuery lengkap untuk contoh ini adalah seperti berikut:

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

Salin selepas log masuk

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.