Kaedah JQuery untuk mencipta DOM nodes_jquery

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

Gunakan pemilih JQuery untuk mencari nod elemen tertentu dengan cepat dan mudah dalam dokumen, kemudian gunakan kaedah attr() untuk mendapatkan nilai pelbagai atribut elemen. Tetapi manipulasi DOM sebenar tidak semudah itu. Dalam operasi DOM, selalunya perlu mencipta kandungan HTML secara dinamik untuk menukar pembentangan dokumen dalam penyemak imbas dan mencapai pelbagai tujuan interaksi manusia-komputer.

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

Buat nod elemen

Sebagai contoh, anda ingin mencipta dua

nod elemen dan menambahkannya pada pokok nod DOM sebagai nod anak bagi nod elemen

Untuk menyelesaikan tugasan ini memerlukan dua langkah.

1. Cipta dua

• 
  2. Masukkan dua elemen baharu ke dalam dokumen.

  Langkah pertama boleh diselesaikan menggunakan fungsi kilang jQuery $(), dalam format berikut:

  $(html);

  Kaedah

  $(html) akan mencipta objek DOM berdasarkan rentetan penanda HTML masuk, membungkus objek DOM ke dalam objek jQuery dan mengembalikannya.

  Mula-mula buat dua elemen

• , kod jQuery adalah seperti berikut:

  var $li_1 = $("<li></li>"); // 创建第一个<li>元素
  var $li_2 = $("<li></li>"); // 创建第二个<li>元素

  Kemudian masukkan dua elemen baharu ini ke dalam dokumen, anda boleh menggunakan kaedah seperti append() dalam jQuery. Kod JQuery adalah seperti berikut:

  var $parent = $(".nm_ul"); // 获取<ul>节点。<li>的父节点
  $parent.append($li_1); // 添加到<ul>节点中，使之能在网页中显示
  $parent.append($li_2); // 可以采取链式写法：$parent.append($li_1).append($li_2);
  
  

  Nod elemen baharu yang dibuat secara dinamik tidak akan ditambahkan secara automatik pada dokumen, tetapi perlu dimasukkan ke dalam dokumen menggunakan kaedah lain. Apabila mencipta elemen individu, berhati-hati tentang menutup teg dan menggunakan pemformatan XHTML standard. Contohnya, untuk mencipta elemen

  anda boleh menggunakan $("

  ") atau $("

  "), tetapi jangan gunakan $("< ;p>") Atau huruf besar $("

  ").

  Buat nod teks

  Dua

• nod elemen telah dibuat dan dimasukkan ke dalam dokumen. Pada masa ini, anda perlu menambah kandungan teks pada nod elemen yang dibuat.

  Kod JQuery adalah seperti berikut:

  var $li_1 = $("
  新增节点：数据结构
  "); // 创建第一个
  元素
  var $li_2 = $("
  新增节点：设计模式
  "); // 创建第二个
  元素
  var $parent = $(".nm_ul"); // 获取<ul>节点。<li>的父节点
  $parent.append($li_1); // 添加到<ul>节点中，使之能在网页中显示
  $parent.append($li_2); // 可以采取链式写法：$parent.append($li_1).append($li_2);
  
  

  Seperti yang ditunjukkan dalam kod di atas, mencipta nod teks adalah untuk menulis kandungan teks secara langsung semasa mencipta nod elemen, dan kemudian menggunakan append() dan kaedah lain untuk menambahkannya pada dokumen.

  Tidak kira betapa rumitnya kod HTML dalam $(html), ia mesti dibuat dengan cara yang sama. Contohnya $("

• Ini ialahagabungan kompleks" );

  Buat nod atribut

  Mencipta nod atribut adalah serupa dengan mencipta nod teks, dan juga dibuat secara langsung semasa mencipta nod elemen. Kod JQuery adalah seperti berikut:

  var $li_1 = $("<li title='新增节点：数据结构'>新增节点：数据结构</li>"); // 创建第一个<li>元素
  var $li_2 = $("<li title='新增节点：设计模式'>新增节点：设计模式</li>"); // 创建第二个<li>元素
  var $parent = $(".nm_ul"); // 获取<ul>节点。<li>的父节点
  $parent.append($li_1); // 添加到<ul>节点中，使之能在网页中显示
  $parent.append($li_2); // 可以采取链式写法：$parent.append($li_1).append($li_2);

  Lihat kod melalui alat kod sumber penyemak imbas, dan anda boleh melihat bahawa dua elemen

• mempunyai nod atribut bernama "tajuk". Ia boleh dinilai daripada ini bahawa nod teks dan nod atribut elemen yang dicipta telah ditambahkan ke halaman web. Ia boleh dilihat bahawa menggunakan jQuery untuk mencipta elemen HTML secara dinamik adalah sangat mudah, mudah dan fleksibel.

  Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.