Vertiefendes Verständnis der Knotenbetriebsmethoden in JQuery

jQuery ist eine beliebte JavaScript-Bibliothek, die eine praktische API zum Bearbeiten des HTML-DOM bietet. In der Webentwicklung ist es häufig erforderlich, Knoten zu bedienen, z. B. hinzuzufügen, zu verschieben, zu löschen, zu ändern usw. In diesem Artikel werden häufig verwendete Betriebsmethoden für jQuery-Knoten vorgestellt, damit Sie HTML DOM bequemer bedienen können.

1. Knoten auswählen

In jQuery können wir Selektoren verwenden, um HTML-Elemente auszuwählen. Im Folgenden sind einige häufig verwendete Selektormethoden aufgeführt:

• $(selector): Wählt das HTML-Element des angegebenen Selektors aus. $(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()

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

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

🎜Knoten hinzufügen🎜🎜🎜Wir können eine Reihe von Methoden verwenden, die von jQuery bereitgestellt werden, um neue Knoten hinzuzufügen. 🎜🎜2.1 Die Methoden .before() und .after()🎜🎜.before() und .after() können neue Elemente vor oder nach dem angegebenen Element einfügen. Das Folgende ist der Beispielcode: 🎜rrreee🎜2.2 Die Methoden .prepend() und .append()🎜🎜.prepend() und .append() können darin verwendet werden das angegebene Element. Fügen Sie davor oder danach neue Elemente ein. Der Unterschied zwischen ihnen besteht darin, dass die Methode .prepend() ein neues Element am Anfang des angegebenen Elements einfügt, während die Methode .append() ein neues Element an einfügt das Ende des angegebenen Elements. Hier ist der Beispielcode: 🎜rrreee
🎜Knoten verschieben🎜🎜🎜Zusätzlich zum Hinzufügen neuer Knoten können wir mit jQuery auch vorhandene Knoten verschieben. Im Folgenden sind zwei häufig verwendete Methoden aufgeführt: 🎜🎜3.1 .insertBefore() und .insertAfter()🎜🎜.insertBefore() und .insertAfter() Methoden können das angegebene verschieben Element vor oder hinter andere Elemente platzieren. Das Folgende ist der Beispielcode: 🎜rrreee🎜3.2 Die Methoden .prependTo() und .appendTo()🎜🎜.prependTo() und .appendTo() können das angegebene verschieben Element zur internen Vorder- oder Rückseite anderer Elemente. Das Folgende ist der Beispielcode: 🎜rrreee
🎜Knoten löschen🎜🎜🎜Wir können .remove() und .empty() verwenden per jQuery-Methode zum Löschen eines Knotens. 🎜🎜4.1 .remove()🎜🎜.remove()-Methode kann das passende HTML-Element und alle seine untergeordneten Elemente entfernen. Hier ist der Beispielcode: 🎜rrreee🎜4.2 .empty()🎜🎜.empty()-Methode kann alle untergeordneten Elemente des übereinstimmenden Elements löschen. Das Folgende ist der Beispielcode: 🎜rrreee
🎜Knoten ändern🎜🎜🎜Schließlich können wir den Code .html(), .text() verwenden >, <code>.attr() und .css() Methoden zum Ändern des Inhalts, der Attribute oder des Stils des Knotens. 🎜🎜5.1 .html()🎜🎜.html()-Methode kann den HTML-Inhalt des passenden Elements festlegen oder zurückgeben. Das Folgende ist der Beispielcode: 🎜rrreee🎜5.2 .text()🎜🎜 Die Methode .text() kann den Textinhalt des passenden Elements festlegen oder zurückgeben. Hier ist der Beispielcode: 🎜rrreee🎜5.3 .attr()🎜🎜.attr() Die Methode kann die Attribute des passenden Elements festlegen oder zurückgeben. Das Folgende ist der Beispielcode: 🎜rrreee🎜5.4 .css()🎜🎜.css()-Methode kann den Stil des passenden Elements festlegen oder zurückgeben. Das Folgende ist der Beispielcode: 🎜rrreee🎜Zusammenfassung🎜🎜Die oben genannten sind die häufig verwendeten Knotenbetriebsmethoden in jQuery, die unserer Entwicklung Komfort und Flexibilität bieten. Natürlich warten noch weitere jQuery-APIs darauf, dass wir sie erkunden und lernen. Egal, ob Sie Anfänger oder erfahrener Entwickler sind, ich glaube, dieser Artikel kann Ihnen helfen. 🎜

Das obige ist der detaillierte Inhalt vonVertiefendes Verständnis der Knotenbetriebsmethoden in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!