jQuery DOM 操作 (Manipulation)

最新推荐文章于 2022-10-10 12:48:01 发布

转载最新推荐文章于 2022-10-10 12:48:01 发布 · 890 阅读

jQuery 专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍了 jQuery 的 DOM 操作方法，包括如何改变元素内容、插入内容及删除元素。具体涉及了 HTML 和纯文字内容的获取与设置，以及如何使用 append、prepend、before、after 等方法进行内部或外部插入。同时，文章还讲解了如何使用 wrap 方法将元素包裹在特定 HTML 结构中，并提供了实例代码和结果展示。

jQuery DOM 操作 (Manipulation)

jQuery Manipulation 主要是用來操作 DOM 元素的新增、刪除與修改等。

改變元素內容 (Changing Contents)

HTML －類似 JavaScript 中的 innerHTML

/* 取得匹配元素的HTML內容 － 無參數 */
$(selectors).html();

/* 設定匹配元素的HTML內容 － 有參數 */
$(selectors).html(val);
例子：
/* HTML */&lt;div&gt;&lt;/div&gt;/* jQuery codes */
$("div").html("<p>Hello World</p>"); 
/* 得到的結果 */
[&lt;div&gt;&lt;p&gt;Hello World&lt;/p&gt;&lt;/div&gt;]

若包含<script>、<link rel="stylesheet>這些外部檔案jQuery會幫你載入，而<script></script>間的程式碼jQuery則會幫你eval。

Text －純文字內容

/* 取得一個字串包含著所有匹配元素的純文字內容 － 無參數 */
$(selectors).text();
例子：
/* HTML */&lt;p&gt;&lt;em&gt;Test1.&lt;/em&gt;Test12.&lt;/p&gt;&lt;p&gt;Test3&lt;/p&gt;/* jQuery codes */
$("p").text();
/* 得到的結果 */
Test1.Test2.Test3

/* 設定所有匹配元素的純文字內容 － 有參數
   "<"與">"會自動被轉成HTML entities */
$(selectors).text(val);

插入內容 (Inserting)

相關函式有 append、prepend、before、after等：

append(content) －在每個匹配的元素內部最後面加入···· (內部插入)

/* HTML */&lt;p&gt;I would like to say: &lt;/p&gt; /* jQuery codes */
$("p").append("<b>Hello</b>"); 
/* 得到的結果 */
[&lt;p&gt;I would like to say: &lt;b&gt;Hello&lt;/b&gt;&lt;/p&gt;]

prepend(content) －在每個匹配的元素內部最前面加入···· (內部插入)

/* HTML */&lt;p&gt;I would like to say: &lt;/p&gt; /* jQuery codes */
$("p").prepend("<b>Hello</b>"); 
/* 得到的結果 */
[&lt;p&gt;&lt;b&gt;Hello&lt;/b&gt;I would like to say: &lt;/p&gt;]

before(content) －在每個匹配的元素前面加入···· (外部插入)

/* HTML */&lt;p&gt;I would like to say: &lt;/p&gt; /* jQuery codes */
$("p").before("<b>Hello</b>"); 
/* 得到的結果 */
[&lt;b&gt;Hello&lt;/b&gt;&lt;p&gt;I would like to say: &lt;/p&gt;]

after(content) －在每個匹配的元素後面加入···· (外部插入)

/* HTML */&lt;p&gt;I would like to say: &lt;/p&gt; /* jQuery codes */
$("p").after("<b>Hello</b>"); 
/* 得到的結果 */
[&lt;p&gt;I would like to say: &lt;/p&gt;&lt;b&gt;Hello&lt;/b&gt;]

移動元素

如果在前面這些函式的參數中帶入「jQuery」或「DOM」物件則代表移動它們：

append(jQuery or DOM)

/* HTML */&lt;p&gt;I would like to say: &lt;/p&gt;&lt;b&gt;Hello&lt;/b&gt;/* jQuery codes */
$("p").append( $("b") );
/* 得到的結果 */
[&lt;p&gt;I would like to say: &lt;b&gt;Hello&lt;/b&gt;&lt;/p&gt;]

prepend(jQuery or DOM)

/* HTML */&lt;p&gt;I would like to say: &lt;/p&gt;&lt;b&gt;Hello&lt;/b&gt;/* jQuery codes */
$("p").prepend( $("b") );
/* 得到的結果 */
[&lt;p&gt;&lt;b&gt;Hello&lt;/b&gt;I would like to say: &lt;/p&gt;]

before(jQuery or DOM)

/* HTML */&lt;p&gt;I would like to say: &lt;/p&gt;&lt;b&gt;Hello&lt;/b&gt;/* jQuery codes */
$("p").before( $("b") );
/* 得到的結果 */
[&lt;b&gt;Hello&lt;/b&gt;&lt;p&gt;I would like to say: &lt;/p&gt;]

after(jQuery or DOM)

/* HTML */&lt;b&gt;Hello&lt;/b&gt;&lt;p&gt;I would like to say: &lt;/p&gt;/* jQuery codes */
$("p").after( $("b") );
/* 得到的結果 */
[&lt;p&gt;I would like to say: &lt;/p&gt;&lt;b&gt;Hello&lt;/b&gt;]

把自己包起來 (Inserting Around)

wrap(html)

/* HTML */&lt;p&gt;Test Here.&lt;/p&gt;/* jQuery codes */
$("p").wrap("<div class='wrap'></div>"); 
/* 得到的結果 */
[&lt;div class=&quot;wrap&quot;&gt;&lt;p&gt;Test Paragraph.&lt;/p&gt;&lt;/div&gt;]

刪除元素 (Removing)

empty() －刪除匹配到的元素其所有子節點

/* HTML */&lt;p&gt;Hello, &lt;span&gt;Person&lt;/span&gt; &lt;a href=&quot;#&quot;&gt;and person&lt;/a&gt;&lt;/p&gt;/* jQuery codes */
$("p").empty();
/* 得到的結果 */
[&lt;p&gt;&lt;/p&gt;]

remove([expr]) －從 DOM 中刪除所有匹配到的元素 (但此函式不會將匹配的元素從 jQuery 物件中刪除)

/* HTML */&lt;p&gt;Hello&lt;/p&gt; how are &lt;p&gt;you?&lt;/p&gt;/* jQuery codes */
$("p").remove();
/* 得到的結果 */
[how are]

複製元素 (Copying)

clone([true]) －複製匹配元素的副本

/* HTML */&lt;b&gt;Hello&lt;/b&gt;&lt;p&gt;, how are you?&lt;/p&gt;/* jQuery codes */
$("b").clone().prependTo("p");
/* 得到的結果 */
[&lt;b&gt;Hello&lt;/b&gt;&lt;p&gt;&lt;b&gt;Hello&lt;/b&gt;, how are you?&lt;/p&gt;]

如果想要連綁定的事件一起複製，則加個true參數－clone(true)

源：http://webdesign.kerthis.com/jquery/jquery_manipulation