jQuery 是一種流行的 JavaScript 函式庫，它提供了一套便捷的 API 來操作 HTML DOM。在 Web 開發中，經常需要對節點進行操作，例如新增、移動、刪除、修改等。本文將介紹常用的 jQuery 節點操作方法，幫助你更方便操作 HTML DOM。
在 jQuery 中，我們可以使用選擇器來選擇 HTML 元素。以下是一些常用的選擇器方法：
$(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");
});#我們可以使用 jQuery 提供的一系列方法來新增新的節點。
2.1 .before() 和.after()
.before() 和.after() 方法可以在指定元素的前面或後面插入新的元素。以下是範例程式碼：
$(document).ready(function() {
// 在每个 p 元素前插入一个新的 div 元素
$("p").before("Hello, world!");
// 在每个 p 元素后插入一个新的 span 元素
$("p").after("Goodbye, world!");
});2.2 .prepend() 和.append()
.prepend() 和.append() 方法可以在指定元素的內部前面或後面插入新的元素。它們的差異在於，.prepend() 方法將新元素插入到指定元素的開頭，而 .append() 方法將新元素插入指定元素的末端。以下是範例程式碼：
$(document).ready(function() {
// 在每个 div 元素内部前面插入一个新的 span 元素
$("div").prepend("Hello, world!");
// 在每个 div 元素内部后面插入一个新的 p 元素
$("div").append("Goodbye, world!
");
});除了新增節點外，我們還可以使用 jQuery 來移動現有節點。以下是兩種常用方法：
3.1 .insertBefore() 和.insertAfter()
##.insertBefore() 和.insertAfter()方法可以將指定元素移到其他元素的前面或後面。以下是範例程式碼：
$(document).ready(function() {
// 将每个 p 元素移动到前一个 div 元素前面
$("p").insertBefore("div");
// 将每个 span 元素移动到后一个 div 元素后面
$("span").insertAfter("div");
});.prependTo() 和.appendTo() 方法可以將指定元素移到其他元素的內部前面或後面。以下是範例程式碼：
$(document).ready(function() {
// 将每个 span 元素移动到每个 p 元素内部前面
$("span").prependTo("p");
// 将每个 p 元素移动到每个 div 元素内部后面
$("p").appendTo("div");
});.remove() 和.empty() 方法來刪除節點。
.remove() 方法可以刪除符合的 HTML 元素及其所有子元素。以下是範例程式碼：
$(document).ready(function() {
// 删除所有具有 class 名称为 "test" 的元素
$(".test").remove();
});.empty() 方法可以刪除所有符合元素的子元素。以下是範例程式碼：
$(document).ready(function() {
// 删除所有 ul 元素的子元素
$("ul").empty();
});.html()、.text ()、.attr() 和.css() 方法來修改節點的內容、屬性或樣式。
.html() 方法可以設定或傳回符合元素的 HTML 內容。以下是範例程式碼：
$(document).ready(function() {
// 设置所有 p 元素的 HTML 内容
$("p").html("Hello, world!");
// 返回第一个 div 元素的 HTML 内容
var html = $("div").html();
console.log(html);
});.text() 方法可以設定或傳回符合元素的文字內容。以下是範例程式碼：
$(document).ready(function() {
// 设置所有 p 元素的文本内容
$("p").text("Hello, world!");
// 返回第一个 div 元素的文本内容
var text = $("div").text();
console.log(text);
});.attr() 方法可以設定或傳回符合元素的屬性。以下是範例程式碼：
$(document).ready(function() {
// 设置所有 img 元素的 src 属性
$("img").attr("src", "new_image.png");
// 返回第一个 a 元素的 href 属性
var href = $("a").attr("href");
console.log(href);
});.css() 方法可以設定或傳回符合元素的樣式。以下是範例程式碼：
$(document).ready(function() {
// 设置所有 p 元素的背景颜色和字体大小
$("p").css({
"background-color": "yellow",
"font-size": "20px"
});
// 返回第一个 div 元素的宽度
var width = $("div").css("width");
console.log(width);
});以上是深入了解jquery中的節點操作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
