jquery 节点

jQuery 节点操作

jQuery 提供了一系列方法来操作 DOM 节点，包括创建、插入、删除、替换等。以下是常用的节点操作方法：

创建节点

通过 $() 函数可以直接创建新的 DOM 节点：

var newDiv = $("<div>这是一个新创建的 div</div>");
var newParagraph = $("<p>这是一个段落</p>");

插入节点

• append(): 在匹配元素内部的末尾插入内容

  $("#container").append(newDiv);

• prepend(): 在匹配元素内部的开头插入内容

  $("#container").prepend(newParagraph);

• after(): 在匹配元素之后插入内容

  $("#target").after("<span>插入到目标元素之后</span>");

• before(): 在匹配元素之前插入内容

  $("#target").before("<span>插入到目标元素之前</span>");

删除节点

• remove(): 删除匹配的元素及其子元素

  $("#elementToRemove").remove();

• empty(): 清空匹配元素的所有子节点

  

  $("#container").empty();

替换节点

• replaceWith(): 用新内容替换匹配的元素

  $("#oldElement").replaceWith("<div>替换后的新内容</div>");

• replaceAll(): 用匹配的元素替换所有目标元素

  $("<div>新内容</div>").replaceAll(".oldElements");

克隆节点

• clone(): 创建匹配元素的副本

  var clonedElement = $("#original").clone();
  $("#target").append(clonedElement);

节点遍历

• parent(): 获取直接父元素

  $("#child").parent();

• children(): 获取所有直接子元素

  

  $("#parent").children();

• find(): 查找后代元素

  $("#container").find(".item");

• siblings(): 获取所有兄弟元素

  $("#element").siblings();

节点属性操作

• attr(): 获取或设置属性

  $("#image").attr("src", "new-image.jpg");

• removeAttr(): 删除属性

  $("#link").removeAttr("target");

• addClass()/removeClass(): 添加或删除类

  $("#element").addClass("highlight");
  $("#element").removeClass("inactive");

这些方法覆盖了 jQuery 中常见的节点操作需求，可以灵活组合使用以实现复杂的 DOM 操作。