jQuery 文件處理

2021-09-25 03:59:15 字數 3111 閱讀 5557

this is a paragraph.

this is another paragraph.

在每個 p 元素的結尾新增內容

在每個 p 元素的結尾新增內容

方法作用:向每個匹配的元素內部追加內容。引數介紹:content (): 要追加到目標中的內容。

用法示例:

html**為i come from

i love 

結果為:i come from china

i love china

方法作用:把所有匹配的元素追加到指定的元素元素集合中。

引數介紹:expr (string): 用於匹配元素的jquery表示式。

用法示例:

html**為i love china

結果為:>i love china

prepend()   prependto()  元素內部前置內容。

$("p").after("hello");在每個匹配的元素之後插入內容。
$("p").before("hello");在每個匹配的元素之前插入內容。

$("p").insertafter("#foo");把所有匹配的元素插入到另乙個、指定的元素元素集合的後面。
$("p").insertbefore("#foo");把所有匹配的元素插入到另乙個、指定的元素元素集合的前面。

$("p").wrap("

");把所有的段落用乙個新建立的div包裹起來

$("p").wrap(document.getelementbyid('content'));用id是"content"的div將每乙個段落包裹起來

可是,w3school的解釋是這樣的:

jquery 文件操作 - wrap() 方法

wrap() 方法把每個被選元素放置在指定的 html 內容或元素中。

jquery 文件操作 - wrapall() 方法

wrapall() 在指定的 html 內容或元素中放置所有被選的元素。

jquery 文件操作 - wrapinner() 方法

wrapinner() 方法使用指定的 html 內容或元素,來包裹每個被選元素中的所有內容 (inner html)。

我讀的書少,看見這樣的解釋不能立即解決我的困惑真的很煩。

還是動手最實際。

這是用來比較的原**:

我是佔位子的。

我是佔位子的。

wrap()方法

$("p").wrap("");

結果:

從圖中可以看出strong標籤包圍了每個匹配的p標籤。

wrapall()方法

$("p").wrapall("");

結果:

從圖中可以看出strong標籤把全部匹配的p標籤一下子全都包圍了。

wrapinner()方法

$("p").wrapinner("");

結果:

從圖中可以看出strong標籤內嵌入每個匹配的p標籤裡面。

這個方法將移出元素的父元素。這能快速取消 .wrap()方法的效果。匹配的元素(以及他們的同輩元素)會在dom結構上替換他們的父元素。

$("p").unwrap()   移除父級元素,使p元素不再被包圍

在jquery中,我們可以通過replacewith()和replaceall()方法來替換元素中的節點。

語法格式:replacewith(content) 將所有選擇的元素替換成指定的html和dom元素。其中引數被選擇替換的內容。

replaceall(selector)  替換指定的selector元素。

示例:在下面的頁面中存在兩個span標記。通過上面兩個函式分別替換元素的內容

7 8 

9     姓名:

11 注意 replacewith() 與replaceall() 方法都可以實現元素節點的替換,二者最大的區別在

於替換字元的順序,前者是用括號中的字元替換所選擇的元素,後者是用字串替換括號中

所選擇的元素。同時,一旦完成替換,被替換元素中的全部事件都將消失。

$(".btn1").click(function());

});

$("p").empty();刪除匹配的元素集合中所有的子節點。
$("p").remove();
從dom中刪除所有匹配的元素。

這個方法不會把匹配的元素從jquery物件中刪除,因而可以在將來再使用這些匹配的元素。但除了這個元素本身得以保留之外,其他的比如繫結的事件,附加的資料等都會被移除。

$("p").detach();
從dom中刪除所有匹配的元素。

這個方法不會把匹配的元素從jquery物件中刪除,因而可以在將來再使用這些匹配的元素。與remove()不同的是,所有繫結的事件、附加的資料等都會保留下來。

clone()

jquery 文件處理

兩個引數乙個將來是父,乙個將來是子 1 appe ndto 父 1 prependto 父 將1節點插入到父容器的最後乙個節點之後 第乙個子節點之前 父 appe nd 1 父 prepend 1 實現的是和上述一樣的功能 after before兩個引數最終會是兄弟關係 1.after 2 將2插...

JQuery文件處理

p ap pend fun ctio n in dex,html ret urni ndex 這個 集合中的 索引值 htm l 這 個物件原 先的ht ml值 1.2ap pend to c onte nt 把 所有匹配 的元素追 加到另一 個指定的 元素元素 集合中。使用這個 方法是顛 倒了常規...

jQuery文件處理

var str abc var str1 abc console.log index return abc var s abc btn prepend s 2 prependto btn after content fn 同級元素之間,將內容加到其後 before content fn 同級元素之間...