jQuery 文檔處理

時間 2019-12-14

標籤 jquery 文檔處理欄目 JQuery 简体版

原文原文鏈接

append appendTo
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").append(" <b>Hello world!</b>");
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>在每一個 p 元素的結尾添加內容</button>
</body>

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").append(function(n){
      return "<b>This p element has index " + n + "</b>";
    });
  });
});
</script>
</head>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>在每一個 p 元素的結尾添加內容</button>
</body>

appendTo() 方法在被選元素的結尾（仍然在內部）插入指定內容。javascript

提示：append() 和 appendTo() 方法執行的任務相同。不一樣之處在於：內容和選擇器的位置，以及 append() 可以使用函數來附加內容。html

$(" Hello World!").appendTo("p");

1. append(content)方法java

方法做用：向每一個匹配的元素內部追加內容。jquery

參數介紹：content (<Content>): 要追加到目標中的內容。app

用法示例：dom

HTML代碼爲I come from I love 函數

向全部p標籤中追加一個單詞china，則寫法爲 $("p").append("china");spa

結果爲：I come from chinaI love china code

2. appendTo(expr)方法htm

方法做用：把全部匹配的元素追加到指定的元素元素集合中。

參數介紹：expr (String): 用於匹配元素的jQuery表達式。

用法示例：

HTML代碼爲I love china

把標籤b追加到p元素中，寫法爲$("b").appendTo("p");

結果爲：>I love china

使用appendTo這個方法是顛倒了常規的$(A).append(B)的操做，即不是把B追加到A中，而是把A追加到B中。

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

在每一個匹配的元素以後插入內容。$("p").after("<b>Hello</b>");

在每一個匹配的元素以前插入內容。

$("p").before("<b>Hello</b>");

把全部匹配的元素插入到另外一個、指定的元素元素集合的後面。$("p").insertAfter("#foo");

把全部匹配的元素插入到另外一個、指定的元素元素集合的前面。

$("p").insertBefore("#foo");

把全部的段落用一個新建立的div包裹起來$("p").wrap("<div class='wrap'></div>");

用ID是"content"的div將每個段落包裹起來

$("p").wrap(document.getElementById('content'));

今晚看書的時候發現jQuery有三個包裹節點的方法，百度了一下jQuery wrap() / wrapAll() / wrapInner()，果真搜索結果 W3School的文檔說明是排第一的。

但是，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標記。經過上面兩個函數分別替換元素的內容

1 <script type="text/javascript">
2 $(function() {
3 $("#Span1").replaceWith("Rainier");
4 $("han163@163.com").replaceAll("#Span2");
5 })
6 </script>
7 </head>
8 <body>
9 姓名：
10 郵箱：
11 </body>

注意　replaceWith() 與replaceAll() 方法均可以實現元素節點的替換，兩者最大的區別在
於替換字符的順序，前者是用括號中的字符替換所選擇的元素，後者是用字符串替換括號中
所選擇的元素。同時，一旦完成替換，被替換元素中的所有事件都將消失。

$(".btn1").click(function(){
$("p").replaceWith(function(){
return "Hello World!";
});
});

刪除匹配的元素集合中全部的子節點。$("p").empty();

$("p").remove();

從DOM中刪除全部匹配的元素。

這個方法不會把匹配的元素從jQuery對象中刪除，於是能夠在未來再使用這些匹配的元素。但除了這個元素自己得以保留以外，其餘的好比綁定的事件，附加的數據等都會被移除。

$("p").detach();

從DOM中刪除全部匹配的元素。

這個方法不會把匹配的元素從jQuery對象中刪除，於是能夠在未來再使用這些匹配的元素。與remove()不一樣的是，全部綁定的事件、附加的數據等都會保留下來。

clone()

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。