前端基礎之jQuery進階

jQuery操作標籤

1、類class操作

（1）原生js（DOMclass屬性操作）

① 新增類名（classList.add()）

• 您可以使用classList.add()方法向元素新增一個類名。

// 獲取元素
var element = document.getElementById('myElement');

// 新增類名
element.classList.add('newClass');

② 移除類名（classList.remove()）

• 您可以使用classList.remove()方法從元素中移除一個類名。

// 獲取元素
var element = document.getElementById('myElement');

// 移除類名
element.classList.remove('oldClass');

③ 切換類名（classList.toggle()）

• 您可以使用classList.toggle()方法來切換一個類名的存在狀態。
  • 如果類名存在，則移除它；
  • 如果不存在，則新增它。

// 獲取元素
var element = document.getElementById('myElement');

// 切換類名
element.classList.toggle('active');

④ 檢查是否包含某個類名（classList.contains()）

• 您可以使用classList.contains()方法檢查一個元素是否包含特定的類名，返回一個布林值。

// 獲取元素
var element = document.getElementById('myElement');

// 檢查是否包含類名
if (element.classList.contains('myClass')) {
    // 包含類名的操作
}

（2）jQuery class屬性操作

① 新增類名（addClass()）

• 用於向元素新增一個或多個類名。如果指定的類名已存在，則不會新增。

$(element).addClass("class1 class2");

② 移除類名（removeClass()）

• 用於從元素移除一個或多個類名。如果指定的類名不存在，則不會發生任何操作。

$(element).removeClass("class1 class2");

③ 切換類名（toggleClass()）

• 用於在元素的類名中切換指定的類名。

  • 如果類名不存在，則新增類名；

  • 如果類名已存在，則移除類名。

$(element).toggleClass("class");

④ 檢查是否包含某個類名（hasClass()）

• 用於檢查元素是否包含指定的類名，返回一個布林值。

if ($(element).hasClass("class1")) {
    // 包含 class1 類名的處理邏輯
} else {
    // 不包含 class1 類名的處理邏輯
}

（3）總結

js版本                            jQuery版本
classList.add()                   addClass()
classList.remove()				  removeClass()
classList.contains()			  hasClass()
classList.toggle()				  toggleClass()

2、樣式css操作

（1）語法

標籤.css('屬性','樣式')

// 選擇了div標籤並將它們的文字顏色設定為綠色。
$("div").css("color", "green");

（2）鏈式操作

① jQuery鏈式操作

使用jQuery可以做到一行程式碼操作很多標籤

html：
<p>JavaScript</p>
<p>jQuery</p>

一行程式碼將第一個p標籤變成紅色第二個p標籤變成綠色：

$('p').first().css('color','red').next().css('color','green')

② python中類似於jQuery中的鏈式操作

class Myclass(object):
    def func1(self):
        print('func1')
        return self

    def func2(self):
        print('func2')
        return self


obj = Myclass()
obj.func1().func2()

（3）總結

鏈式操作的本質：jQuery物件呼叫jQuery方法之後返回的還是當前jQuery物件 也就可以繼續呼叫其他方法。

類似python的物件鏈式操作，也可以連續操作物件

3、標籤的位置操作

（1）offset()

offset() 是 jQuery 中用於獲取匹配元素在文件中的偏移（offset）座標的方法。這個方法返回一個包含 top 和 left 屬性的物件，這些屬性表示元素相對於文件的偏移位置。

語法：

$(selector).offset()

示例：

假設有一個 <div> 元素如下：

<div id="myDiv">Hello, World!</div>

你可以使用 offset() 方法來獲取該 <div> 元素相對於文件的偏移位置：

var offset = $("#myDiv").offset();
console.log("Top: " + offset.top + ", Left: " + offset.left);

返回值：

offset() 方法返回一個物件，該物件包含兩個屬性：

• top：表示元素頂部邊緣相對於文件頂部的偏移量。
• left：表示元素左側邊緣相對於文件左側的偏移量。

注意事項：

• offset() 方法返回的是相對於文件的偏移位置，而不是相對於父級元素的位置。
• 如果你需要相對於父級元素的偏移位置，可以使用 position() 方法。

（2）position()

position() 是 jQuery 中用於獲取匹配元素相對於父級元素的偏移位置的方法。與 offset() 方法返回元素相對於文件的偏移位置不同，position() 方法返回元素相對於最近的已定位祖先元素的偏移位置。

語法：

$(selector).position()

示例：

假設有以下 HTML 結構：

<div id="parent" style="position: relative;">
    <div id="child">Hello, World!</div>
</div>

你可以使用 position() 方法來獲取子元素相對於父元素的偏移位置：

var position = $("#child").position();
console.log("Top: " + position.top + ", Left: " + position.left);

返回值：

position() 方法返回一個物件，該物件包含兩個屬性：

• top：表示元素頂部邊緣相對於父元素頂部的偏移量。
• left：表示元素左側邊緣相對於父元素左側的偏移量。

注意事項：

• position() 方法返回的是相對於最近的已定位祖先元素的偏移位置。
• 如果元素的祖先元素都沒有定位（position 屬性為 relative、absolute、fixed 或 sticky），position() 方法將返回相對於文件的偏移位置。

（3）scrollTop()

scrollTop() 是 jQuery 中用於獲取或設定匹配元素的垂直捲軸偏移量的方法。這個方法適用於包含捲軸的元素，如視窗或包含捲軸的 <div> 元素。

獲取垂直捲軸的偏移量：

var scrollOffset = $(selector).scrollTop();

設定垂直捲軸的偏移量：

$(selector).scrollTop(value);

• selector：要操作的元素選擇器。
• value：可選，要設定的垂直捲軸的偏移量值。

示例：

假設有一個包含捲軸的 <div> 元素：

<div id="scrollableDiv" style="height: 200px; overflow: auto;">
    <!-- 大量內容 -->
</div>

你可以使用 scrollTop() 方法來獲取或設定該元素的垂直捲軸偏移量：

// 獲取垂直捲軸的偏移量
var scrollOffset = $("#scrollableDiv").scrollTop();
console.log("垂直捲軸偏移量：" + scrollOffset);

// 設定垂直捲軸的偏移量為 100px
$("#scrollableDiv").scrollTop(100);

返回值：

• 當不提供引數時，scrollTop() 方法返回匹配元素的當前垂直捲軸偏移量。
• 當提供引數時，scrollTop() 方法設定匹配元素的垂直捲軸偏移量為指定值，並返回 jQuery 物件以支援鏈式呼叫。

scrollTop() 方法常用於控制捲軸位置，特別是在處理滾動事件時或需要透過程式設計方式滾動元素時。

（4）scrollLeft()

scrollLeft() 是 jQuery 中用於獲取或設定匹配元素的水平捲軸偏移量的方法。這個方法適用於包含水平捲軸的元素，如視窗或包含水平捲軸的 <div> 元素。

獲取水平捲軸的偏移量：

var scrollOffset = $(selector).scrollLeft();

設定水平捲軸的偏移量：

$(selector).scrollLeft(value);

• selector：要操作的元素選擇器。
• value：可選，要設定的水平捲軸的偏移量值。

示例：

假設有一個包含水平捲軸的 <div> 元素：

<div id="scrollableDiv" style="width: 200px; overflow: auto;">
    <!-- 大量內容 -->
</div>

你可以使用 scrollLeft() 方法來獲取或設定該元素的水平捲軸偏移量：

// 獲取水平捲軸的偏移量
var scrollOffset = $("#scrollableDiv").scrollLeft();
console.log("水平捲軸偏移量：" + scrollOffset);

// 設定水平捲軸的偏移量為 50px
$("#scrollableDiv").scrollLeft(50);

返回值：

• 當不提供引數時，scrollLeft() 方法返回匹配元素的當前水平捲軸偏移量。
• 當提供引數時，scrollLeft() 方法設定匹配元素的水平捲軸偏移量為指定值，並返回 jQuery 物件以支援鏈式呼叫。

scrollLeft() 方法通常用於控制水平捲軸位置，特別是在處理水平滾動事件時或需要透過程式設計方式滾動元素時。

# 位置操作


$(window).scrollTop()  # 控制頁面上下滾動的偏移量
0
$(window).scrollTop()
398.6666564941406

w.fn.init {0: Window, length: 1}

（5）總結

offset()       // 獲取該標籤相對於瀏覽器視窗的位置引數
position()     // 獲取該標籤相對於父標籤的位置引數 
scrollTop()    // 獲取或設定匹配元素的垂直捲軸偏移量
scrollLeft()   // 獲取或設定匹配元素的水平捲軸偏移量

// 括號內不加引數就是獲取
$(window).scrollTop()    // 獲取當前(豎)滑動條與瀏覽器頂部的位置
$(window).scrollLeft()   // 獲取當前(橫)滑動條與瀏覽器左部的位置距離

// 加了引數就是設定
$(window).scrollTop(0)  
$(window).scrollTop(500)  // 跳到距離瀏覽器頂部500的位置
$(window).scrollLeft(500) // 跳到距離瀏覽器左側500的位置   
           
 
4.尺寸:
   
# 尺寸
$('p').height()  # 文字的高度
20
$('p').width()  # 文字的寬度
850
$('p').innerHeight()  # 文字+padding
26
$('p').innerWidth()
854
$('p').outerHeight()  # 文字+padding+border
26
$('p').outerWidth()
854

4、尺寸操作

（1）.height() 和 .width()

• 這兩個方法用於獲取或設定元素的高度和寬度。
  • 如果不傳遞引數，它們分別返回元素的內容區域的高度和寬度。
  • 如果傳遞一個數字作為引數，可以設定元素的高度和寬度。

（2）.innerHeight() 和 .innerWidth()

• 這兩個方法用於獲取元素的內部高度和寬度，包括內容區域和內邊距（padding）。
  • 它們返回的值不包括邊框和外邊距。

（3）.outerHeight() 和 .outerWidth()

• 這兩個方法用於獲取元素的外部高度和寬度，包括內容區域、內邊距和邊框，但不包括外邊距。
  • 可以透過傳遞一個布林值引數來指定是否包括邊框，預設為false。

（4）.outerHeight(true) 和 .outerWidth(true)

• 這兩個方法用於獲取元素的完整的外部高度和寬度，包括內容區域、內邊距、邊框和外邊距。

（5）總結

$('p').height()             //獲取p標籤文字高度
$('p').width()				//獲取p標籤文字寬度
$('p').innerHeight()        //獲取p標籤文字+padding高
$('p').innerWidth()         //獲取p標籤文字+padding寬
$('p').outerHeight()        //獲取p標籤文字+padding+border高
$('p').outerwidth()         //獲取p標籤文字+padding+border寬

5、文字操作

js方法	jQuery方法	作用
.innerText	.text()	不填引數為獲取文字，填寫為設定文字
.innerHTML	.html()	不填引數為獲取html文件，填寫為設定html文件
.value	.val()	不填引數為獲取使用者輸入的內容，填寫為設定使用者輸入的內容

（1）js操作標籤內部文字

① innerText

• innerText屬性用於設定或返回指定元素中的文字內容，不包括HTML標記。

• 當使用innerText屬性時，所有HTML標記都將被視為純文字並被直接顯示在頁面上。

• 這意味著如果在innerText中包含HTML標記，那麼標記將被作為普通文字顯示而不會被解析。

• 此外，innerText屬性是隻讀的，即使嘗試修改該屬性的值也不會有任何效果。

使用示例：

<div id="myElement">This is <strong>bold</strong> text.</div>
<script>
   var element = document.getElementById("myElement");
   console.log(element.innerText); // 輸出："This is bold text."
   element.innerText = "Updated text"; // 嘗試修改innerText但不會生效
</script>

② innerHTML

• innerHTML屬性用於設定或返回指定元素的HTML內容，可以包含HTML標記和文字。
• 與innerText不同，使用innerHTML屬性時，所有HTML標記都會被解析並在頁面上正確渲染。
  • 這意味著可以透過innerHTML屬性來新增、修改或刪除HTML元素及其屬性。
• 需要注意的是，innerHTML屬性可以導致程式碼注入攻擊，因此使用時需謹慎驗證並過濾使用者輸入。

使用示例：

<div id="myElement">This is <strong>bold</strong> text.</div>
<script>
   var element = document.getElementById("myElement");
   console.log(element.innerHTML); // 輸出："This is <strong>bold</strong> text."
   element.innerHTML = "Updated <em>text</em>"; // 修改innerHTML會動態更新頁面中的內容
</script>

③ 總結

• innerText用於操作元素中的純文字內容，不解析HTML標記，且是隻讀屬性。
• innerHTML用於操作元素中的HTML內容，可以包含HTML標記

（2）jQuery操作標籤內部文字

① .text()

• 獲取文字內容：

var text = $(".my-element").text();
console.log(text);

• 設定文字內容：

$(".my-element").text("New text content");

② .html()

• 獲取HTML內容：

var html = $(".my-element").html();
console.log(html);

• 設定HTML內容：

$(".my-element").html("<p>New HTML content</p>");

③ .val()

• 獲取表單元素的值：

var value = $("#my-input").val();
console.log(value);

// 獲取input標籤內的檔案
// 先獲取標籤物件，再用標籤物件去取檔案
$("#my-input")[0].files[0];

• 設定表單元素的值：

$("#my-input").val("New value");

④ .append()

• 在每個匹配元素內部末尾插入內容：

$(".my-element").append("<span>Appended content</span>");

⑤ .prepend()

• 在每個匹配元素內部開頭插入內容：

$(".my-element").prepend("<span>Prepended content</span>");

⑥ .after()

• 在每個匹配元素之後插入內容：

$(".my-element").after("<div>Content after</div>");

⑦ .before()

• 在每個匹配元素之前插入內容：

$(".my-element").before("<div>Content before</div>");

6、獲取值操作

（1）原生js獲取文字資料（.value）

標籤.value                    // 獲取標籤的value值
標籤.value = ''               // 將標籤的value值清空
標籤.value = 'df'             // 將標籤的value值設定df

（2）jQuery獲取文字資料（.val）

$('標籤').val()               // 獲取標籤的value值
$('標籤').val('')             // 將標籤的value值清空
$('標籤').val('df')           // 將標籤的value值設定df

（3）獲取檔案資料

js：fileEle.files[0]         // 獲取檔案資料，要加索引[0],第一個才是檔案資料
jQuery：$('標籤')[0].files[0] // 轉換標籤物件再索取

ps：牢記dom物件和jQuery物件的轉換

​

7、屬性操作

js方法	jQuery方法	作用
setAttribute()	attr(name,value)	設定/更改屬性
getAttribute()	attr(name)	獲取屬性
removeAttribute()	removeAttr(name)	移除屬性

ps：在用變數儲存物件的時候，js中推薦使用xxxEle，而在jQuery中推薦使用$xxxEle

（1）jQuery普通屬性操作

$pEle.attr('id')                //獲取id的屬性
$pEle.attr('class','c1')        //更改class屬性為c1
$pEle.attr('password','123')    //自定義屬性也可以更改
$pEle.removeAttr('password')    //刪除password屬性

（2）針對checked的特殊方法 prop()

.prop() 是 jQuery 中用於獲取或設定元素屬性值的方法。它通常用於處理元素的屬性，例如核取方塊的 checked radio option屬性、輸入框的 disabled 屬性等。如果在判斷是否選中時，用attr時無法正確獲取。則需要使用.prop()。

語法:

$(selector).prop(propertyName);
$(selector).prop(propertyName, value);

• propertyName 是要獲取或設定的屬性名稱。
• value 是要設定的屬性值。

示例:

// 獲取核取方塊的 checked 屬性值
var isChecked = $("#myCheckbox").prop("checked");  // 返回true/false

// 自定義設定輸入框的 disabled 屬性為 true
$("#myInput").prop("disabled", true);

在上述示例中，第一個示例演示瞭如何使用 .prop() 方法獲取核取方塊的 checked 屬性值，而第二個示例演示瞭如何將輸入框的 disabled 屬性設定為 true。

.prop() 方法通常用於處理元素的固有屬性，而不是普通的屬性。

（3）總結

• 對於標籤上有的能夠看到的屬性和自定義屬性用attr
• 對於返回布林值比如checkbox radio option是否被選中用prop

（4）補充

① 隱藏標籤 .hide()

hide() 是 jQuery 中用於隱藏元素的方法。使用 hide() 方法可以將匹配的元素設定為不可見。

語法:

$(selector).hide(speed, callback);

• speed 引數可選，指定隱藏的速度，可以是毫秒數或預定義的字串值（如 "slow" 或 "fast"）。
• callback 引數可選，指定隱藏完成後要執行的回撥函式。

示例:

// 隱藏id為"myElement"的元素
$("#myElement").hide();

// 慢速隱藏id為"myElement"的元素
$("#myElement").hide("slow");

// 在隱藏完成後執行回撥函式
$("#myElement").hide(1000, function(){
    console.log("Element is now hidden");
});

在上述示例中，hide() 方法用於隱藏指定的元素。您可以選擇設定隱藏的速度，也可以在隱藏完成後執行回撥函式。

② 顯示標籤 .show()

.show() 是 jQuery 中用於顯示隱藏的元素的方法。當元素使用 .hide() 方法隱藏後，可以使用 .show() 方法將其重新顯示。

語法:

$(selector).show();
$(selector).show(speed);
$(selector).show(speed, callback);

• speed 引數可選，用於設定顯示動畫的速度，可以是毫秒數或預定義的字串值（如 "slow"、"fast"）。
• callback 引數可選，是在顯示動畫完成後執行的回撥函式。

示例:

// 顯示隱藏的元素
$("#myElement").show();

// 以 "slow" 速度顯示元素
$("#myElement").show("slow");

// 以自定義速度顯示元素，並在動畫完成後執行回撥函式
$("#myElement").show(1000, function() {
    console.log("Element has been shown.");
});

在上述示例中，第一個示例演示瞭如何使用 .show() 方法簡單地顯示一個隱藏的元素，第二個示例展示瞭如何以 "slow" 速度顯示元素，第三個示例演示瞭如何以自定義速度顯示元素，並在動畫完成後執行回撥函式。

8、文件處理

（1）JavaScript使用

① createElement()

在 JavaScript 中，document.createElement(tagName) 是用於建立一個指定標籤名的新 HTML 元素的方法。這個方法通常用於動態地建立新的元素，然後可以將這些元素新增到文件中的指定位置。

下面是一個簡單的示例，演示如何使用 document.createElement(tagName) 方法建立一個新的 <div> 元素，並將其新增到文件中：

// 建立一個新的 <div> 元素
var newDiv = document.createElement("div");

// 設定新建立的 <div> 元素的文字內容
newDiv.textContent = "This is a new div element.";

// 將新建立的 <div> 元素新增到文件中的 body 元素中
document.body.appendChild(newDiv);

在上面的示例中，我們首先使用 document.createElement("div") 建立了一個新的 <div> 元素，然後設定了這個元素的文字內容，最後使用 appendChild() 方法將這個新建立的 <div> 元素新增到文件中的 <body> 元素中。

這個方法在動態生成內容、處理表單資料、實現動態互動等方面非常有用。

② appendChile()

appendChild() 方法是用於將一個新的子節點新增到指定父節點的方法。在 JavaScript 中，這個方法通常用於將一個新建立的元素新增到文件中的指定位置。

下面是一個簡單的示例，演示如何使用 appendChild() 方法將一個新建立的 <div> 元素新增到文件中的 <body> 元素中：

// 建立一個新的 <div> 元素
var newDiv = document.createElement("div");

// 設定新建立的 <div> 元素的文字內容
newDiv.textContent = "This is a new div element.";

// 將新建立的 <div> 元素新增到文件中的 body 元素中
document.body.appendChild(newDiv);

在上面的示例中，我們首先建立了一個新的 <div> 元素，然後設定了這個元素的文字內容，最後使用 appendChild() 方法將這個新建立的 <div> 元素新增到文件中的 <body> 元素中。

appendChild() 方法是用於將一個子節點新增到指定父節點的最常用方法之一。

（2）jQuery使用

① $(selector)

• 使用選擇器來選取匹配的元素，並返回一個jQuery物件。
  • 可以透過該物件執行各種操作。

var elements = $('p'); // 選取頁面上所有的 <p> 元素

② $(selector).prepend(content)

內部頭部追加

• 用於在目標元素的內部開頭位置插入內容。

語法

$(selector).prepend(content);

• selector：選擇器，表示要選中的目標元素。

• content：要插入的內容，可以是 HTML 字串、DOM 元素、或者其他 jQuery 物件。

示例一：插入單個內容

$('div').prepend('<p>This is a new paragraph.</p>');

• 上述示例會在頁面上的所有 <div> 元素內部的開頭位置插入一個新的 <p> 元素。

• 該方法將給定內容（content）插入到每個匹配元素的子元素列表的開頭位置，使其成為子元素列表中的第一個元素。

示例二：插入多個內容

• 如果要插入多個內容，可以透過鏈式呼叫來連續進行 prepend 操作。

$('div').prepend('<p>Paragraph 1</p>').prepend('<p>Paragraph 2</p>');

• 上述示例會先在每個 <div> 元素內部的開頭位置插入 "Paragraph 1"，然後再在開頭位置插入 "Paragraph 2"。

③ $(selector).append(content)

內部尾部追加

• 將指定的內容追加到每個匹配元素的末尾。
  • 可以用來向元素中插入新的內容。

$('div').append('<p>This is a new paragraph.</p>');

④ $(selector).appendTo()

目標元素內部尾部追加

• 用於將當前元素插入到目標元素內部末尾的方法。

語法

$(currentElement).appendTo(targetElement);

• currentElement：

  • 要插入的當前元素，可以是 HTML 字串、DOM 元素、或者其他 jQuery 物件。

• targetElement：

  • 目標元素，表示要將當前元素插入到該元素內部的末尾位置。

示例

$('<p>This is a new paragraph.</p>').appendTo('div');

• 上述示例將一個新建立的 <p> 元素插入到頁面上所有的 <div> 元素內部的末尾。

• 該方法的作用相當於 targetElement.append(currentElement)，只是調換了插入順序，使得使用鏈式方法時可以更加流暢地構建操作。

⑤ $(selector).insertAfter(target)`

將目標元素插入到指定目標元素的後面。

• 用於將目標元素插入到指定目標元素的後面。

語法

$(selector).insertAfter(target);

• selector：選擇器，表示要選中的目標元素。
• target：目標元素，可以是選擇器、DOM 元素或者 jQuery 物件，表示要將目標元素插入到它後面。

示例一：插入單個元素

$('<p>This is a new paragraph.</p>').insertAfter('div');

• 上述示例會在頁面上的所有 <div> 元素後面插入一個新的 <p> 元素。

• 該方法將目標元素插入到指定目標元素的後面，使其成為同級的下一個元素。

示例二：插入多個元素

• 如果要插入多個目標元素，可以透過鏈式呼叫來連續進行 insertAfter 操作。

$('<p>Paragraph 1</p>').insertAfter('div').insertAfter('span');

• 上述示例會先在每個 <div> 元素後面插入 "Paragraph 1"，然後再在每個 <span> 元素後面插入 "Paragraph 1"。

⑥ $(selector).insertBefore(content)

• 用於將選中的元素插入到目標元素的前面。

語法

$(content).insertBefore(selector);

• selector：選擇器，表示目標元素。
• content：要插入的內容，可以是 HTML 字串、DOM 元素或者 jQuery 物件。

示例一：所有元素前插入相同的元素

$('<p>Insert this paragraph</p>').insertBefore('div');

• 上述示例會將一個新的 <p> 元素插入到頁面上的所有 <div> 元素之前。

• 該方法會將選中的元素插入到目標元素之前，成為同級的上一個元素。

  • 插入的內容可以是文字、HTML 元素或者其他 DOM 元素。

示例二：多個目標元素前插入相同的元素

• 如果要在多個目標元素前插入相同的元素，可以透過鏈式呼叫來連續進行插入操作。例如：

$('<p>Paragraph 1</p>').insertBefore('div').insertBefore('span');

• 上述示例會先將 "Paragraph 1" 插入每個 <div> 元素之前，然後再將 "Paragraph 1" 插入每個 <span> 元素之前。

⑦ $(selector).before(content)

• 用於在目標元素前面插入內容。

語法

$(selector).before(content);

• selector：選擇器，表示要選中的目標元素。
• content：要插入的內容，可以是 HTML 字串、DOM 元素或者 jQuery 物件。

示例一：所有元素前插入相同的元素

$('<p>This is a new paragraph.</p>').before('div');

• 上述示例會在頁面上的所有 <div> 元素之前插入一個新的 <p> 元素。

• 該方法將內容插入到目標元素的前面，成為同級的上一個元素。

  • 插入的內容可以是文字、HTML 元素或者其他 DOM 元素。

示例二：多個目標元素前插入相同的元素

• 如果要在多個目標元素前插入相同的內容，可以透過鏈式呼叫來連續進行插入操作。例如：

$('<p>Paragraph 1</p>').before('div').before('span');

• 上述示例會先在每個 <div> 元素前插入 "Paragraph 1"
  • 然後再在每個 <span> 元素前插入 "Paragraph 1"。

⑧ $(selector).after(content)

• 用於將選中的元素插入到目標元素的後面。

語法

$(content).insertAfter(selector);

• selector：選擇器，表示目標元素。
• content：要插入的內容，可以是 HTML 字串、DOM 元素或者 jQuery 物件。

示例

$('<p>Insert this paragraph</p>').insertAfter('div');

• 上述示例會將一個新的 <p> 元素插入到頁面上的所有 <div> 元素之後。

• 該方法會將選中的元素插入到目標元素之後，成為同級的下一個元素。

  • 插入的內容可以是文字、HTML 元素或者其他 DOM 元素。

• 如果要在多個目標元素後插入相同的元素，可以透過鏈式呼叫來連續進行插入操作。例如：

$('<p>Paragraph 1</p>').insertAfter('div').insertAfter('span');

• 上述示例會先將 "Paragraph 1" 插入每個 <div> 元素之後，然後再將 "Paragraph 1" 插入每個 <span> 元素之後。

⑨ $(selector).remove(content)

• 用於刪除選中的元素以及其子元素。

語法

$(selector).remove(content);

• selector：選擇器，表示目標元素。
• content：可選引數，表示要過濾的內容，只有與指定內容匹配的元素會被刪除。可以是一個選擇器、字串或者 DOM 元素。

示例

$('p').remove();

• 上述示例會刪除頁面上所有的 <p> 元素及其子元素。

• 該方法會移除與選擇器匹配的元素，並且將其從文件中刪除。

  • 如果提供了 content 引數，則只有與該引數內容匹配的元素才會被刪除。

• 如果想要從文件中移除多個不同的元素，可以使用多個選擇器或者多次呼叫 remove() 方法來實現。例如：

$('.class1, .class2').remove();

• 上述示例會移除具有 class1 和 class2 類名的所有元素。

• 請注意，使用 remove() 方法會從文件中永久刪除元素，而不僅僅是隱藏它們。

  • 所以在使用該方法之前，請確保已經不再需要這些元素，因為無法恢復已刪除的元素。

⑩ $(selector).empty(content)

• 用於清空選中元素的所有子元素。

語法

$(selector).empty(content);

• selector：選擇器，表示目標元素。
• content：選引數，表示要過濾的內容，只有與指定內容匹配的子元素會被清空。可以是一個選擇器、字串或者 DOM 元素。

示例

$('div').empty();

• 上述示例會清空上所有 <div> 元素的子元素。

• 該方法將會移除所選元素的所有子元素，但會保留自身。

  • 如果提供了 content 引數，則只有與該引數內容匹配的子元素才會被清空。

• 與 remove() 方法不同的是，empty() 方法僅清空元素的子元素，而不會將元素本身從文件中刪除。

• 如果想同時清空多個不同元素的子元素，可以使用多個選擇器或者多次呼叫 empty() 方法來實現。例如：

$('.class1, .class2').empty();

• 上述示例會清空所有具有 class1 和 class2 類名的元素的子元素。
• 請注意，使用 empty() 方法只會清空元素的子元素，元素本身仍然存在於文件中。

（3）總結

# 文件處理
'''
js                                jQuery
createElement()                   $('<p>')
appendChile()                     append()
'''
let $pEle = $('<p>')
$pEle.text('快速上車')
$pEle.attr('id','d1')
$('#d1').append($pEle)  # 內部尾部追加
$('#d1').appendTo($('#d1')

$('#d1').prepend($pEle)  # 內部頭部追加
$('#d1').prependTo($('#d1')
                   
$('#d2').after($pEle)  # 放在某個標籤後面
$pEle.insertAfter($('#d1')) 
                   
$('#d1').before($pEle)  # 放在某個標籤後面
$pEle.insertBefore($('#d2')) 
 
$('#d1').remove()  # 將標籤從DOM樹中刪除
$('#d1').empty()  # 清空標籤內部所有的內容