Compréhension approfondie des méthodes de fonctionnement des nœuds dans jquery-Questions et réponses frontales-php.cn

jQuery est une bibliothèque JavaScript populaire qui fournit une API pratique pour manipuler le DOM HTML. Dans le développement Web, il est souvent nécessaire d'opérer des nœuds, comme ajouter, déplacer, supprimer, modifier, etc. Cet article présentera les méthodes de fonctionnement des nœuds jQuery couramment utilisées pour vous aider à utiliser HTML DOM plus facilement.

Sélectionner un nœud

Dans jQuery, nous pouvons utiliser des sélecteurs pour sélectionner des éléments HTML. Voici quelques méthodes de sélection couramment utilisées :

$(selector) : sélectionne l'élément HTML du sélecteur spécifié. $(selector)：选择指定 selector 的 HTML 元素。
.class：选择具有指定 class 名称的 HTML 元素。
#id：选择具有指定 id 名称的 HTML 元素。

示例代码：

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

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

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

Copier après la connexion

添加节点

我们可以使用 jQuery 提供的一系列方法来添加新的节点。

2.1 .before() 和 .after()

.before() 和 .after() 方法可以在指定元素的前面或后面插入新的元素。以下是示例代码：

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

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

Copier après la connexion

2.2 .prepend() 和 .append()

.prepend() 和 .append() 方法可以在指定元素的内部前面或后面插入新的元素。它们的区别在于，.prepend() 方法将新元素插入到指定元素的开头，而 .append() 方法将新元素插入到指定元素的末尾。以下是示例代码：

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

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

Copier après la connexion

移动节点

除了添加新节点外，我们还可以使用 jQuery 移动现有节点。以下是两种常用方法：

3.1 .insertBefore() 和 .insertAfter()

.insertBefore() 和 .insertAfter() 方法可以将指定元素移动到其他元素的前面或后面。以下是示例代码：

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

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

Copier après la connexion

3.2 .prependTo() 和 .appendTo()

.prependTo() 和 .appendTo() 方法可以将指定元素移动到其他元素的内部前面或后面。以下是示例代码：

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

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

Copier après la connexion

删除节点

我们可以使用 jQuery 提供的 .remove() 和 .empty() 方法来删除节点。

4.1 .remove()

.remove() 方法可以删除匹配的 HTML 元素及其所有子元素。以下是示例代码：

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

Copier après la connexion

4.2 .empty()

.empty() 方法可以删除匹配元素的所有子元素。以下是示例代码：

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

Copier après la connexion

修改节点

最后，我们可以使用 jQuery 提供的 .html()、.text()、.attr() 和 .css() 方法来修改节点的内容、属性或样式。

5.1 .html()

.html() 方法可以设置或返回匹配元素的 HTML 内容。以下是示例代码：

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

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

Copier après la connexion

5.2 .text()

.text() 方法可以设置或返回匹配元素的文本内容。以下是示例代码：

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

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

Copier après la connexion

5.3 .attr()

.attr() 方法可以设置或返回匹配元素的属性。以下是示例代码：

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

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

Copier après la connexion

5.4 .css()

.css()

.class : sélectionne les éléments HTML avec le nom de classe spécifié.

#id : sélectionne l'élément HTML avec le nom d'identification spécifié.

Exemple de code : 🎜

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

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

Copier après la connexion

.before()

.after()

.prepend()

.append()

.prepend()

.append()

.insertBefore()

.insertAfter()

.prependTo()

.appendTo()

.remove()