Pemahaman mendalam tentang kaedah operasi nod dalam jquery

jQuery ialah perpustakaan JavaScript popular yang menyediakan API yang mudah untuk memanipulasi DOM HTML. Dalam pembangunan web, selalunya diperlukan untuk mengendalikan nod, seperti menambah, mengalihkan, memadam, mengubah suai, dsb. Artikel ini akan memperkenalkan kaedah pengendalian nod jQuery yang biasa digunakan untuk membantu anda mengendalikan HTML DOM dengan lebih mudah.

1. Pilih Nod

Dalam jQuery, kita boleh menggunakan pemilih untuk memilih elemen HTML. Berikut ialah beberapa kaedah pemilih yang biasa digunakan:

• $(selector): Memilih elemen HTML bagi pemilih yang ditentukan.
• .class: Memilih elemen HTML dengan nama kelas yang ditentukan.
• #id: Memilih elemen HTML dengan nama id yang ditentukan.

Kod contoh:

$(document).ready(function() {
  // 选择所有段落元素
  $("p").css("background-color", "yellow");

  // 选择具有 "intro" 类的所有元素
  $(".intro").css("font-size", "20px");

  // 选择具有 id 名称为 "myDiv" 的元素
  $("#myDiv").css("border", "1px solid red");
});

2. Tambah nod

Kami boleh menggunakan satu siri kaedah yang disediakan oleh jQuery untuk menambah nod baharu. Kaedah

2.1 .before() dan .after()

.before() dan .after() boleh memasukkan elemen baharu sebelum atau selepas elemen yang ditentukan. Berikut ialah kod sampel:

$(document).ready(function() {
  // 在每个 p 元素前插入一个新的 div 元素
  $("p").before("<div>Hello, world!</div>");

  // 在每个 p 元素后插入一个新的 span 元素
  $("p").after("<span>Goodbye, world!</span>");
});

2.2 .prepend() dan .append()

.prepend() dan .append() kaedah boleh memasukkan elemen baharu sebelum atau selepas elemen yang ditentukan elemen. Perbezaan di antara mereka ialah kaedah .prepend() memasukkan elemen baharu pada permulaan elemen yang ditentukan, manakala kaedah .append() memasukkan elemen baharu pada penghujung elemen yang ditentukan. Berikut ialah kod sampel:

$(document).ready(function() {
  // 在每个 div 元素内部前面插入一个新的 span 元素
  $("div").prepend("<span>Hello, world!</span>");

  // 在每个 div 元素内部后面插入一个新的 p 元素
  $("div").append("<p>Goodbye, world!</p>");
});

3. Move Nod

Selain menambah nod baharu, kami juga boleh mengalihkan nod sedia ada menggunakan jQuery. Berikut ialah dua kaedah yang biasa digunakan:

3.1 .insertBefore() dan .insertAfter()

.insertBefore() dan .insertAfter() kaedah boleh mengalihkan elemen yang ditentukan ke hadapan atau belakang yang lain elemen. Berikut ialah kod sampel:

$(document).ready(function() {
  // 将每个 p 元素移动到前一个 div 元素前面
  $("p").insertBefore("div");

  // 将每个 span 元素移动到后一个 div 元素后面
  $("span").insertAfter("div");
});

3.2 .prependTo() dan .appendTo()

.prependTo() dan .appendTo() kaedah boleh mengalihkan elemen yang ditentukan ke bahagian hadapan dalam elemen lain atau kemudian. Berikut ialah kod sampel:

$(document).ready(function() {
  // 将每个 span 元素移动到每个 p 元素内部前面
  $("span").prependTo("p");

  // 将每个 p 元素移动到每个 div 元素内部后面
  $("p").appendTo("div");
});

4. Padam Nod

Kita boleh menggunakan kaedah .remove() dan .empty() yang disediakan oleh jQuery untuk memadamkan nod. Kaedah

4.1 .remove()

.remove() boleh mengalih keluar elemen HTML yang sepadan dan semua elemen anaknya. Berikut ialah kod sampel:

$(document).ready(function() {
  // 删除所有具有 class 名称为 "test" 的元素
  $(".test").remove();
});

4.2 .empty()

.empty() kaedah boleh memadamkan semua elemen anak unsur padanan. Berikut ialah kod sampel:

$(document).ready(function() {
  // 删除所有 ul 元素的子元素
  $("ul").empty();
});

5. Ubah suai nod

Akhir sekali, kita boleh menggunakan .html(), .text(), .attr() dan .css() disediakan oleh jQuery > Kaedah untuk mengubah suai kandungan, sifat atau gaya nod. Kaedah

5.1 .html()

.html() boleh menetapkan atau mengembalikan kandungan HTML elemen padanan. Berikut ialah kod sampel:

$(document).ready(function() {
  // 设置所有 p 元素的 HTML 内容
  $("p").html("<b>Hello, world!</b>");

  // 返回第一个 div 元素的 HTML 内容
  var html = $("div").html();
  console.log(html);
});

5.2 .text()

.text() Kaedah ini boleh menetapkan atau mengembalikan kandungan teks unsur padanan. Berikut ialah kod sampel:

$(document).ready(function() {
  // 设置所有 p 元素的文本内容
  $("p").text("Hello, world!");

  // 返回第一个 div 元素的文本内容
  var text = $("div").text();
  console.log(text);
});

5.3 .attr()

.attr() kaedah boleh menetapkan atau mengembalikan atribut elemen padanan. Berikut ialah kod sampel:

$(document).ready(function() {
  // 设置所有 img 元素的 src 属性
  $("img").attr("src", "new_image.png");

  // 返回第一个 a 元素的 href 属性
  var href = $("a").attr("href");
  console.log(href);
});

5.4 .css()

.css() kaedah boleh menetapkan atau mengembalikan gaya elemen padanan. Berikut ialah kod sampel:

$(document).ready(function() {
  // 设置所有 p 元素的背景颜色和字体大小
  $("p").css({
    "background-color": "yellow",
    "font-size": "20px"
  });

  // 返回第一个 div 元素的宽度
  var width = $("div").css("width");
  console.log(width);
});

Ringkasan

Di atas ialah kaedah operasi nod yang biasa digunakan dalam jQuery, yang memberikan kemudahan dan kefleksibelan untuk pembangunan kami. Sudah tentu, lebih banyak API jQuery sedang menunggu untuk kami meneroka dan belajar. Sama ada anda seorang pemula atau pembangun berpengalaman, saya percaya artikel ini boleh membantu anda.

Atas ialah kandungan terperinci Pemahaman mendalam tentang kaedah operasi nod dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!