Compréhension approfondie des méthodes de fonctionnement des nœuds dans jquery

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.

1. 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");
});

2. 添加节点

我们可以使用 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>");
});

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>");
});

3. 移动节点

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

3.1 .insertBefore() 和 .insertAfter()

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

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

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

3.2 .prependTo() 和 .appendTo()

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

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

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

4. 删除节点

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

4.1 .remove()

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

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

4.2 .empty()

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

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

5. 修改节点

最后，我们可以使用 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);
});

5.2 .text()

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

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

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

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);
});

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);
});

🎜Ajouter un nœud🎜🎜🎜Nous pouvons utiliser une série de méthodes fournies par jQuery pour ajouter de nouveaux nœuds. 🎜🎜2.1 Les méthodes .before() et .after()🎜🎜.before() et .after() peuvent insérer de nouveaux éléments avant ou après l'élément spécifié. Voici un exemple de code : 🎜rrreee🎜2.2 Les méthodes .prepend() et .append()🎜🎜.prepend() et .append() peuvent être utilisées à l'intérieur l'élément spécifié Insérer de nouveaux éléments avant ou après. La différence entre eux est que la méthode .prepend() insère un nouvel élément au début de l'élément spécifié, tandis que la méthode .append() insère un nouvel élément au début de l'élément spécifié, tandis que la méthode .append() insère un nouvel élément au début de l'élément spécifié. la fin de l'élément spécifié. Voici l'exemple de code : 🎜rrreee
🎜Déplacement de nœuds🎜🎜🎜En plus d'ajouter de nouveaux nœuds, nous pouvons également déplacer des nœuds existants à l'aide de jQuery. Voici deux méthodes couramment utilisées : 🎜🎜3.1 Les méthodes .insertBefore() et .insertAfter()🎜🎜.insertBefore() et .insertAfter() peuvent déplacer le spécifié. élément à l’avant ou à l’arrière des autres éléments. Voici un exemple de code : 🎜rrreee🎜3.2 Les méthodes .prependTo() et .appendTo()🎜🎜.prependTo() et .appendTo() peuvent déplacer le spécifié élément vers l'avant ou l'arrière interne d'autres éléments. Voici l'exemple de code : 🎜rrreee
🎜Supprimer les nœuds🎜🎜🎜Nous pouvons utiliser .remove() et .empty() fournis par la méthode jQuery pour supprimer un nœud. 🎜🎜4.1 La méthode .remove()🎜🎜.remove() peut supprimer l'élément HTML correspondant et tous ses éléments enfants. Voici l'exemple de code : 🎜rrreee🎜4.2 .empty()🎜🎜.empty() peut supprimer tous les éléments enfants de l'élément correspondant. Voici l'exemple de code : 🎜rrreee
🎜Modifier les nœuds🎜🎜🎜Enfin, nous pouvons utiliser .html(), .text() code >, les méthodes <code>.attr() et .css() pour modifier le contenu, les attributs ou le style du nœud. 🎜🎜5.1 La méthode .html()🎜🎜.html() peut définir ou renvoyer le contenu HTML de l'élément correspondant. Voici l'exemple de code : 🎜rrreee🎜5.2 .text()🎜🎜 La méthode .text() peut définir ou renvoyer le contenu textuel de l'élément correspondant. Voici l'exemple de code : 🎜rrreee🎜5.3 .attr()🎜🎜.attr() La méthode peut définir ou renvoyer les attributs de l'élément correspondant. Voici l'exemple de code : La méthode 🎜rrreee🎜5.4 .css()🎜🎜.css() peut définir ou renvoyer le style de l'élément correspondant. Voici l'exemple de code : 🎜rrreee🎜Résumé🎜🎜Ce qui précède sont les méthodes d'opération de nœud couramment utilisées dans jQuery, qui offrent commodité et flexibilité pour notre développement. Bien sûr, d’autres API jQuery attendent que nous les explorions et les apprenions. Que vous soyez débutant ou développeur expérimenté, je pense que cet article peut vous aider. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!