In-depth understanding of node operation methods in jquery

jQuery is a popular JavaScript library that provides a convenient API for manipulating the HTML DOM. In web development, it is often necessary to operate nodes, such as adding, moving, deleting, modifying, etc. This article will introduce commonly used jQuery node operation methods to help you operate HTML DOM more conveniently.

1. Selecting Nodes

In jQuery, we can use selectors to select HTML elements. The following are some commonly used selector methods:

• $(selector): Selects the HTML element of the specified selector.
• .class: Selects HTML elements with the specified class name.
• #id: Selects the HTML element with the specified id name.

Sample code:

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

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

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

2. Add node

We can use a series of methods provided by jQuery to add new nodes.

2.1 .before() and .after()

.before() and .after() methods can be in front of the specified element Or insert a new element later. The following is sample code:

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

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

2.2 .prepend() and .append()

.prepend() and .append() methods New elements can be inserted before or after the specified element. The difference between them is that the .prepend() method inserts a new element at the beginning of the specified element, while the .append() method inserts a new element at the end of the specified element. Here is the sample code:

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

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

3. Move Node

In addition to adding new nodes, we can also move existing nodes using jQuery. The following are two commonly used methods:

3.1 .insertBefore() and .insertAfter()

.insertBefore() and .insertAfter() Method can move the specified element to the front or back of other elements. The following is sample code:

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

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

3.2 .prependTo() and .appendTo()

.prependTo() and .appendTo() methods You can move the specified element to the inside of another element, in front of or behind it. The following is the sample code:

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

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

4. Remove nodes

We can use the .remove() and .empty() provided by jQuery Method to delete nodes.

4.1 .remove()

.remove() method can remove the matching HTML element and all its child elements. The following is sample code:

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

4.2 .empty()

.empty() method can delete all child elements of the matching element. The following is sample code:

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

5. Modify nodes

Finally, we can use the .html(), .text provided by jQuery (), .attr() and .css() methods to modify the content, attributes or style of the node.

5.1 .html()

.html() method can set or return the HTML content of the matching element. The following is sample code:

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

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

5.2 .text()

.text() method can set or return the text content of the matching element. The following is sample code:

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

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

5.3 .attr()

.attr() The method can set or return the attributes of the matching element. The following is sample code:

$(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() method can set or return the style of the matching element. The following is a sample code:

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

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

Summary

The above are the commonly used node operation methods in jQuery, which provide convenience and flexibility for our development. Of course, more jQuery APIs are waiting for us to explore and learn. Whether you are a beginner or an experienced developer, I believe this article can help you.

The above is the detailed content of In-depth understanding of node operation methods in jquery. For more information, please follow other related articles on the PHP Chinese website!