jQuery 學習十(文檔處理)

原創 apus9527 2020-02-21 13:12
 ●  append(content) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 向每個匹配的元素內部追加內容。 
  3.  * 這個操作與對指定的元素執行 appendChild 方法，將它們添加到文檔中的情況類似。 
  4.  * 
  5.  * @content(String, Element, jQuery) 要追加到目標中的內容 
  6.  * @return Object 
  7.  * @owner jQuery Object 
  8.  */  
  9. function append(content);  
  10.   
  11. // 例子：向所有段落中追加一些HTML標記。  
  12. <p>I would like to say: </p>  
  13.   
  14. $("p").append("<b>Hello</b>") -> [ <p>I would like to say: <b>Hello</b></p> ]  


    ●  appendTo(content) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 把所有匹配的元素追加到另一個、指定的元素元素集合中。 
  3.  * 實際上，使用這個方法是顛倒了常規的 $(A).append(B) 的操作，即不是把 B 追加到 A 中，而是把 A  
  4.  * 追加到 B 中。 
  5.  * 
  6.  * @content(String) 用於被追加的內容 
  7.  * @return Object 
  8.  * @owner jQuery Object 
  9.  */  
  10. function appendTo(content);  
  11.   
  12. // 例子：把所有段落追加到 ID 值爲 "foo" 的元素中。  
  13. <p>I would like to say: </p>  
  14. <div id="foo"></div>  
  15.   
  16. $("p").appendTo("#foo") -> <div id="foo"><p>I would like to say: </p></div>  


    ●  prepend(content) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 向每個匹配的元素內部前置內容。這是向所有匹配元素內部的開始處插入內容的最佳方式。 
  3.  * 
  4.  * @content(String, Element, jQuery) 要插入到目標元素內部前端的內容 
  5.  * @return Object 
  6.  * @owner jQuery Object 
  7.  */  
  8. function prepend(content);  
  9.   
  10. // 例子一：向所有段落中前置一些 HTML 標記代碼。  
  11. <p>I would like to say: </p>  
  12.   
  13. $("p").prepend("<b>Hello</b>") -> [ <p><b>Hello</b>I would like to say: </p> ]  
  14.   
  15. // 例子二：將一個 DOM 元素前置入所有段落  
  16. <p>I would like to say: </p>  
  17. <p>I would like to say: </p>  
  18. <b class="foo">Hello</b>  
  19. <b class="foo">Good Bye</b>  
  20.   
  21. $("p").prepend( $(".foo")[0] ) ->   
  22.     <p><b class="foo">Hello</b>I would like to say: </p>  
  23.     <p><b class="foo">Hello</b>I would like to say: </p>  
  24.     <b class="foo">Hello</b>  
  25.     <b class="foo">Good Bye</b>   
  26.       
  27. // 例子三：向所有段落中前置一個 jQuery 對象(類似於一個 DOM 元素數組)。  
  28. <p>I would like to say: </p><b>Hello</b>  
  29.   
  30. $("p").prepend( $("b") ) -> <p><b>Hello</b>I would like to say: </p>  


    ●  prependTo(content) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 把所有匹配的元素前置到另一個、指定的元素元素集合中。 
  3.  * 實際上，使用這個方法是顛倒了常規的 $(A).prepend(B) 的操作，即不是把 B 前置到 A 中，而是把  
  4.  * A 前置到 B 中。 
  5.  * 
  6.  * @content(String) 用於匹配元素的 jQuery 表達式 
  7.  * @return Object 
  8.  * @owner jQuery Object 
  9.  */  
  10. function prependTo(content);  
  11.   
  12. // 例子一：把所有段落追加到 ID 值爲 foo 的元素中。  
  13. <p>I would like to say: </p>  
  14. <div id="foo"></div>  
  15.   
  16. $("p").prependTo("#foo") -> <div id="foo"><p>I would like to say: </p></div>  


    ●  after(content) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 在每個匹配的元素之後插入內容。 
  3.  * 
  4.  * @content(String, Element, jQuery) 插入到每個目標後的內容 
  5.  * @return Object 
  6.  * @owner jQuery Object 
  7.  */  
  8. function after(content);  
  9.   
  10. // 例子一：在所有段落之後插入一些 HTML 標記代碼。  
  11. <p>I would like to say: </p>  
  12.   
  13. $("p").after("<b>Hello</b>") -> <p>I would like to say: </p><b>Hello</b>  
  14.   
  15. // 例子二：在所有段落之後插入一個 DOM 元素。  
  16. <b id="foo">Hello</b><p>I would like to say: </p>  
  17.   
  18. $("p").after( $("#foo")[0] ) -> <p>I would like to say: </p><b id="foo">Hello</b>  
  19.   
  20. // 例子三：在所有段落中後插入一個 jQuery 對象(類似於一個DOM元素數組)。  
  21. <b>Hello</b><p>I would like to say: </p>  
  22.   
  23. $("p").after( $("b") ) -> <p>I would like to say: </p><b>Hello</b>  


    ●  before(content) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 在每個匹配的元素之前插入內容。 
  3.  * 
  4.  * @content(String, Element, jQuery) 插入到每個目標前的內容 
  5.  * @return Object 
  6.  * @owner jQuery Object 
  7.  */  
  8. function before(content);  
  9.   
  10. // 例子一：在所有段落之前插入一些 HTML 標記代碼。  
  11. <p>I would like to say: </p>  
  12.   
  13. $("p").before("<b>Hello</b>") -> [ <b>Hello</b><p>I would like to say: </p> ]  
  14.   
  15. // 例子二：在所有段落之前插入一個元素。  
  16. <p>I would like to say: </p>  
  17. <b id="foo">Hello</b>  
  18.   
  19. $("p").before( $("#foo")[0] ) -> <b id="foo">Hello</b><p>I would like to say: </p>  
  20.   
  21. // 例子三：在所有段落中前插入一個 jQuery 對象(類似於一個DOM元素數組)。  
  22. <p>I would like to say: </p><b>Hello</b>  
  23.   
  24. $("p").before( $("b") ) -> <b>Hello</b><p>I would like to say: </p>  


    ●  insertAfter(content) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 把所有匹配的元素插入到另一個，指定的元素元素集合的後面。 
  3.  * 實際上，使用這個方法是顛倒了常規的 $(A).after(B) 的操作，即不是把 B 插入到 A 後面，而是把 A  
  4.  * 插入到 B 後面。 
  5.  * 
  6.  * @content(String) 用於匹配元素的 jQuery 表達式 
  7.  * @return Object 
  8.  * @owner jQuery Object 
  9.  */  
  10. function insertAfter(content);  
  11.   
  12. // 例子一：把所有段落插入到一個元素之後。與 $("#foo").after("p") 相同。  
  13. <p>I would like to say: </p>  
  14. <div id="foo">Hello</div>  
  15.   
  16. $("p").insertAfter("#foo") -> <div id="foo">Hello</div><p>I would like to say: </p>  


    ●  insertBefore(content) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 把所有匹配的元素插入到另一個、指定的元素元素集合的前面。 
  3.  * 實際上，使用這個方法是顛倒了常規的 $(A).before(B) 的操作，即不是把 B 插入到 A 前面，而是把 A  
  4.  * 插入到 B 前面。 
  5.  * 
  6.  * @content(String) 用於匹配元素的 jQuery 表達式 
  7.  * @return Object 
  8.  * @owner jQuery Object 
  9.  */  
  10. function insertBefore(content);  
  11.   
  12. // 例子：把所有段落插入到一個元素之前。與 $("#foo").before("p") 相同。  
  13. <div id="foo">Hello</div>  
  14. <p>I would like to say: </p>  
  15.   
  16. $("p").insertBefore("#foo") -> <p>I would like to say: </p><div id="foo">Hello</div>  


    ●  wrap(elem) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 把所有匹配的元素用其他元素的結構化標記包裝起來。 
  3.  * 
  4.  * @elem(Element) 用於包裝目標元素的 DOM 元素 
  5.  * @return Object 
  6.  * @owner jQuery Object 
  7.  */  
  8. function wrap(elem);  
  9.   
  10. // 例子：用 ID 是 "content" 的 div 將每一個段落包裹起來。  
  11. <p>Test Paragraph.</p>  
  12. <div id="content"></div>  
  13.   
  14. $("p").wrap(document.getElementById('content')) ->   
  15.     <div id="content"><p>Test Paragraph.</p></div><div id="content"></div>  


    ●  wrapAll(elem) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 將所有匹配的元素用單個元素包裹起來。這於 wrap(elem) 是不同的，wrap(elem) 爲每一個匹配的元素都 
  3.  * 包裹一次。 
  4.  * 
  5.  * @elem(Element) 用於包裝目標元素的 DOM 元素 
  6.  * @return Object 
  7.  * @owner jQuery Object 
  8.  */  
  9. function wrapAll(elem);  
  10.   
  11. // 例子：用一個生成的 div 將所有段落包裹起來。  
  12. <p>Hello</p>  
  13. <p>cruel</p>  
  14. <p>World</p>  
  15.   
  16. $("p").wrapAll(document.createElement("div")) -> <div><p>Hello</p><p>cruel</p><p>World</p></div>  


    ●  wrapInner(elem) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 將每一個匹配的元素的子內容(包括文本節點)用 DOM 元素包裹起來。 
  3.  * 
  4.  * @elem(Element) 用於包裝目標元素的 DOM 元素 
  5.  * @return Object 
  6.  * @owner jQuery Object 
  7.  */  
  8. function wrapInner(elem);  
  9.   
  10. // 例子：把所有段落內的每個子內容加粗。  
  11. <p>Hello</p>  
  12. <p>cruel</p>  
  13. <p>World</p>  
  14.   
  15. $("p").wrapInner(document.createElement("b")) ->   
  16.     <p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p>   


    ●  wrap(html) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 把所有匹配的元素用其他元素的結構化標記包裹起來。 
  3.  * 這種包裝對於在文檔中插入額外的結構化標記最有用，而且它不會破壞原始文檔的語義品質。 
  4.  *  
  5.  * 這個函數的原理是檢查提供的 html(它是由所提供的 HTML 標記代碼動態生成的)，並在它的代碼結構中 
  6.  * 找到最上層的祖先元素 － 這個祖先元素就是包裹元素。 
  7.  *  
  8.  * 當 HTML 標記代碼中的元素包含文本時無法使用這個函數。因此，如果要添加文本應該在包裹完成之後再行添加。 
  9.  * 
  10.  * @html(String) HTML 標記代碼字符串，用於動態生成元素幷包裹目標元素 
  11.  * @return Object 
  12.  * @owner jQuery Object 
  13.  */  
  14. function wrap(html);  
  15.   
  16. // 例子：把所有的段落用一個新創建的 div 包裹起來。  
  17. <p>Test Paragraph.</p>  
  18.   
  19. $("p").wrap("<div class='wrap'></div>") -> <div class="wrap"><p>Test Paragraph.</p></div>  


    ●  wrapAll(html) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 將所有匹配的元素用單個元素包裹起來。這於 wrap(html)是不同的，wrap(html) 爲每一個匹配的元素都 
  3.  * 包裹一次。 
  4.  * 
  5.  * 這種包裝對於在文檔中插入額外的結構化標記最有用，而且它不會破壞原始文檔的語義品質。 
  6.  * 
  7.  * 這個函數的原理是檢查提供的第一個元素並在它的代碼結構中找到最上層的祖先元素 － 這個祖先元素就 
  8.  * 是包裝元素。 
  9.  * 
  10.  * @html(String) HTML 標記代碼字符串，用於動態生成元素幷包裝目標元素 
  11.  * @return Object 
  12.  * @owner jQuery Object 
  13.  */  
  14. function wrapAll(html);  
  15.   
  16. // 例子：用一個生成的 div 將所有段落包裹起來。  
  17. <p>Hello</p>  
  18. <p>cruel</p>  
  19. <p>World</p>  
  20.   
  21. $("p").wrapAll("<div></div>") -> <div><p>Hello</p><p>cruel</p><p>World</p></div>  


    ●  wrapInner(html) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 將每一個匹配的元素的子內容(包括文本節點)用一個 HTML 結構包裹起來。 
  3.  * 
  4.  * 這個函數的原理是檢查提供的第一個元素(它是由所提供的 HTML 標記代碼動態生成的)，並在它的代碼結構中 
  5.  * 找到最上層的祖先元素 - 這個祖先元素就是包裝元素。 
  6.  * 
  7.  * @html(String) HTML 標記代碼字符串，用於動態生成元素幷包裝目標元素 
  8.  * @return Object 
  9.  * @owner jQuery Object 
  10.  */  
  11. function wrapInner(html);  
  12.   
  13. // 例子：把所有段落內的每個子內容加粗。  
  14. <p>Hello</p>  
  15. <p>cruel</p>  
  16. <p>World</p>  
  17.   
  18. $("p").wrapInner("<b></b>") -> <p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p>  


    ●  replaceAll(selector) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 用匹配的元素替換掉所有 selector 匹配到的元素。 
  3.  * 
  4.  * @selector(Selector) 用於查找所要被替換的元素 
  5.  * @return Object 
  6.  * @owner jQuery Object 
  7.  */  
  8. function replaceAll(selector);  
  9.   
  10. // 例子：把所有的段落標記替換成加粗標記。  
  11. <p>Hello</p>  
  12. <p>cruel</p>  
  13. <p>World</p>  
  14.   
  15. $("<b>Paragraph. </b>").replaceAll("p") ->   
  16.     <b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>  


    ●  replaceWith(content) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 將所有匹配的元素替換成指定的 HTML 或 DOM 元素。 
  3.  * 
  4.  * @content(String, Element, jQuery) 用於將匹配元素替換掉的內容 
  5.  * @return Object 
  6.  * @owner jQuery Object 
  7.  */  
  8. function replaceWith(content);  
  9.   
  10. // 例子：把所有的段落標記替換成加粗的標記。  
  11. <p>Hello</p>  
  12. <p>cruel</p>  
  13. <p>World</p>  
  14.   
  15. $("p").replaceWith("<b>Paragraph. </b>") ->   
  16.     <b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>  


    ●  empty() 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 刪除匹配的元素集合中所有的子節點。 
  3.  * 
  4.  * @return Object 
  5.  * @owner jQuery Object 
  6.  */  
  7. function empty();  
  8.   
  9. // 例子：把所有段落的子元素(包括文本節點)刪除。  
  10. <p>Hello, <span>Person</span> <a href="#">and person</a></p>  
  11.   
  12. $("p").empty() -> <p></p>  


    ●  remove([expr]) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 從 DOM 中刪除所有匹配的元素。這個方法不會把匹配的元素從 jQuery 對象中刪除，因而可以在將來再使用 
  3.  * 這些匹配的元素。 
  4.  * 
  5.  * @expr(String) (可選) 用於篩選元素的 jQuery 表達式 
  6.  * @return Object 
  7.  * @owner jQuery Object 
  8.  */  
  9. function remove([expr]);  
  10.   
  11. // 例子一：從 DOM 中把所有段落刪除。  
  12. <p>Hello</p> how are <p>you?</p>  
  13.   
  14. $("p").remove() -> how are  
  15.   
  16. // 例子二：從 DOM 中把帶有 hello 類的段落刪除。  
  17. <p class="hello">Hello</p> how are <p>you?</p>  
  18. $("p").remove(".hello") -> how are <p>you?</p>  


    ●  clone() 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 克隆匹配的 DOM 元素並且選中這些克隆的副本。 
  3.  * 在想把 DOM 文檔中元素的副本添加到其他位置時這個函數非常有用。 
  4.  * 
  5.  * @return Object 
  6.  * @owner jQuery Object 
  7.  */  
  8. function clone();  
  9.   
  10. // 例子：克隆所有 b 元素(並選中這些克隆的副本)，然後將它們前置到所有段落中。  
  11. <b>Hello</b><p>, how are you?</p>  
  12.   
  13. $("b").clone().prependTo("p") -> <b>Hello</b><p><b>Hello</b>, how are you?</p>  


    ●  clone(true) 
Javascript代碼  收藏代碼
  1. /** 
  2.  * 元素以及其所有的事件處理並且選中這些克隆的副本。 
  3.  * 在想把 DOM 文檔中元素的副本添加到其他位置時這個函數非常有用。 
  4.  * 
  5.  * @true(Boolean) 設置爲 true 以便複製元素的所有事件處理 
  6.  * @return Object 
  7.  * @owner jQuery Object 
  8.  */  
  9. function clone(true);  
  10.   
  11. // 例子：創建一個按鈕，它可以複製自己，並且它的副本也有同樣功能。  
  12. <button>Clone Me!</button>  
  13.   
  14. $("button").click(function() {  
  15.   $(this).clone(true).insertAfter(this);  
  16. });  
apus9527
發佈了50 篇原創文章 · 獲贊 4 · 訪問量 2萬+
私信 關注
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

特別好用的輪播圖效果，簡單好用兼容好

<!--html代碼--> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1<

一个工作 2020-07-06 10:02:18

jquery下拉展示更多信息代碼，防止重複加載

var page=0; var isbool=true; //滾動加載方法2 $(window).scroll(function() { if (($(window).height() + $(window).scrollTop

一个工作 2020-07-06 10:02:18

a毛 jquery 學習記 2(上) “jquery學習方法 英文網頁怎麼看”

jquery 學習二   （上）        此處先多做點說明，在昨天的筆記中，下載jquery包我寫的有點簡單了，今天出去的時候突然想到還是全點兒的好，雖說很多東西在網上都可以查到，但我還是把自己這裏的筆記寫完全，以助於更多的剛接觸

一平米 2020-07-03 15:33:42

我的第六課：jQuery 效果 - 淡入淡出

 jQuery 效果 - 淡入淡出的代碼如下： <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <html>   <head>      <sc

没有一明天 2020-06-29 15:11:06

我的第二課：jquery點擊按鈕消失

jquery點擊按鈕消失的代碼如下： <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <html>   <head>       <script

没有一明天 2020-06-29 15:11:06

josn 數據的遍歷

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>json數據的遍歷</title> <script src="http:/

阿聪世家 2020-06-24 19:18:07

獲取url上某個參數的值

function getUrlParam(name) { //獲取url上某個參數的值 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r

阿聪世家 2020-06-24 19:17:53

jquery的trigger函數和select框change事件

鬱悶,被坑了3個小時,最後發現只一個函數就解決 心中N只草擬嗎奔騰而過有木有 有這樣一個需求,根據圖中選擇的天數,然後去後臺走不通的查詢,最後返回結果給前臺,剛開始在echarts中使用了$.post()請求路由，然後返回結果,但

小熊提伯斯 2020-06-22 09:04:22

jQuery 學習九(篩選)

●  eq(index)  Javascript代碼   /**   * 獲取第 N 個元素。   *   * @index(Integer) 元素在 jQuery 對象中的索引   * @return Object   *

apus9527 2020-06-19 22:30:06

jQuery 學習十四(工具函數)

●  jQuery.boxModel  Javascript代碼   /**   * 當前頁面中瀏覽器是否使用標準盒模型渲染頁面。   *    * @return Boolean 標準盒模型爲 true，否則爲 false

apus9527 2020-06-19 15:29:50

jQuery 學習七(選擇器)

    ●  在指定的上下文搜索  Javascript代碼   /**   * 在指定的上下文環境中搜索滿足選擇器表達式的 jQuery 對象。    *   * @selector(String) 選擇器   * @co

apus9527 2020-06-19 14:32:16

jQuery 學習八(屬性)

●  attr(name)  Javascript代碼   /**   * 取得第一個匹配元素的屬性值。通過這個方法可以方便地從第一個匹配元素中獲取一個屬性的值。   * 如果元素沒有相應屬性，則返回 undefined。 

apus9527 2020-06-19 14:32:06

jQuery 學習十三(效果)

 ●  hide()  Javascript代碼   /**   * 隱藏顯示的元素。   *   * 這個就是 "hide( speed, [callback] )" 的無動畫版。如果選擇的元素是隱藏的，這個方法將不會改變

apus9527 2020-06-19 14:32:05

Jquery對象動畫方法總結

注：中括號內爲可選參數 1.show()和hide():元素顯示和隱藏       $("#div1").show([3000],[function(){}]),顯示元素，第一個參數表示持續時間，第二個表示動畫完成時執行的函數；    

邪鼬 2020-06-16 05:52:11

jQuery+Ajax+asp進行數據庫交互01

在之前寫的ADO操作中，每次進行數據庫操作時，都會對網頁進行刷新。之後，在瞭解jQuery（javascript庫）和Ajax（異步響應）後，可以不再刷新整個網頁，完成頁面的響應事件。 在前端代碼中，使用jQuery的Ajax方法

小小毛喵 2020-06-07 10:40:14