雞西網站建設制作優化設計[SEO]
本頁定位
在線咨詢

JQuery文本處理的六種元素使用方法

假裝紳士??1年前 (2018-09-04)1250A+A-

今天開始學習Jquery文本處理,在使用Jquery進行文本處理時,總共分為6種模式:內部插入、外部插入、包裹、替換、刪除、復制。

下面我們對它進行一一分析。

1.內部插入:對匹配的對象元素進行內容的追加(內部)

關鍵字:append appendTo prepend prependTo
append-->在匹配對象元素(后面)追加指定內容
格式:$("element").append("content")
格式解釋:$("element")為選中的匹配對象元素,content為我們所要追加的內容
舉例:html代碼 --> <p>Jquery文本處理學習</p>
Jquery代碼:$("p").append("<span>大家好</span>")
結果:<p>Jquery文本處理學習<span>大家好</span></p>
Jquery代碼解釋:$("p").append("<span>大家好</span>") 查找p標簽,并把<span>大家好</span>插入到p標簽內的后面
appendTo -->把所有匹配的元素追加到另一個指定的元素元素集合中
格式:$("element").appendTo("content")
格式解釋:$("element")為選中的匹配對象元素,content為被追加的內容
舉例:html代碼 --><div></div><p>我在學習Jquery</p>
Jquery代碼:$("p").appendTo("div")
結果:<div><p>我在學習Jquery</p></div>
Jquery代碼解釋:$("p").appendTo("div") 查找p標簽,并把p標簽的內容插入到div標簽中
prepend -->在匹配對象元素(前面)追加指定內容
說明:此關鍵字與append關鍵字一樣,所不同的是,它將內容插入到匹配對象元素內的前面。
prependTo -->把所有匹配的元素前置到另一個、指定的元素集合中。
說明:此關鍵字與appendTo關鍵字一樣,所不同的是,它將匹配到的元素前置到另一個元素集合中。

2.外部插入:對匹配的對象元素進行內容的追加(外部)

關鍵字:after before inserAfter inserBefore
after -->在每個匹配的元素之后插入內容.
格式:$("element").after("content")
格式解釋:$("element")為選中的匹配對象元素,content為我們所要追加的內容
舉例:html代碼 --><div>大家好</div>
Jquery代碼:$("div").after("<p>我正在學習Jquery</p>")
結果:<div>大家好</div><p>我正在學習Jquery</p>
Jquery代碼解釋:把<p>我正在學習Jquery</p>插入到每個div標簽的后面,比較簡單。
before -->在每個匹配的元素之前插入內容
說明:此關鍵字與after關鍵字一樣,所不同的是,它將內容插入到了匹配對象元素的前邊
inserAfter -->把所有匹配的元素插入到另一個、指定的元素元素集合的后面。
舉例:html代碼 --><div>abc</div><p>我在學習Jquery</p>
Jquery代碼:$("p").inserAfter("div")
結果:<div>abc</div><p>我在學習Jquery</p>
Jquery代碼解釋:$("p").inserAfter("div") 查找p標簽,并把p標簽的內容插入到div標簽后面
inserBefore -->把所有匹配的元素插入到另一個、指定的元素元素集合的前面。
舉例:html代碼 --><div>abc</div><p>我在學習Jquery</p>
Jquery代碼:$("p").inserBefore("div")
結果:<p>我在學習Jquery</p><div>abc</div>
Jquery代碼解釋:$("p").inserAfter("div") 查找p標簽,并把p標簽的內容插入到div標簽前面

3.包裹

關鍵字:wrap unwrap wrapAll wrapInner
wrap -->把所有匹配的元素用其他元素的結構化標記包裹起來。
說明:wrap有兩種參數 1:html代表結構化html代碼 2:elem選擇器
舉例1: html代碼:<div id="wrap">abc</div><p>我在學習Jquery</p>
Jquery代碼:$("p").wrap("<div id='wrap1'></div>")
結果:<div id="wrap">abc</div><div id='wrap1'><p>我在學習Jquery</p></div>
舉例2:html代碼:<div id="wrap">abc</div><p>我在學習Jquery</p>
Jquery代碼:$("p").wrap($("#wrap"))
結果:<div id="wrap">abc</div><div id="wrap">abc<p>我在學習Jquery</p></div>
unwrap -->移出元素的父元素
舉例:html代碼:<div id='wrap1'><p>我在學習Jquery</p></div>
Jquery代碼:$("p").unwrap()
結果:<p>我在學習Jquery</p>
wrapAll -->將所有匹配的元素用單個元素包裹起來
舉例:html代碼:<p>Hello</p><div id="warp"><p>我在學習Jquery</p></div>
Jquery代碼:$("p").wrapAll("<div class='wrap1'></div>")
結果:<div class="wrap1"><p>Hello</p><p>我在學習Jquery</p></div><div id="warp"></div>
舉例2:
html代碼:<div class="warp">abc</div><p>Hello</p><div id="warp"><p>我在學習Jquery</p></div>
Jquery代碼:$("p").wrapAll($(".warp"))
結果:<div class="warp">abc</div><div class="warp">abc<p>Hello</p><p>我在學習Jquery</p></div><div id="warp"></div>
wrapInner -->將每一個匹配的元素的子內容(包括文本節點)用一個HTML結構包裹起來
舉例:html代碼:<p>Hello</p><p>cruel</p><p>World</p>
Jquery代碼:$("p").wrapInner("<b></b>");
結果:<p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p>

4.替換

關鍵字:replaceWith replaceAll
replaceWith -->將所有匹配的元素替換成指定的HTML或DOM元素。
舉例:<p>Hello</p><p>cruel</p><p>World</p>
Juqery代碼:$("p").replaceWith("<b>Paragraph. </b>");
結果:<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>
replaceAll -->用匹配的元素替換掉所有 selector匹配到的元素。
舉例:<p>Hello</p><p>cruel</p><p>World</p>
Jquery代碼:$("<b>Paragraph. </b>").replaceAll("p");
結果:<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>
replaceWith與replaceAll比較:replaceWith是先找匹配對象,再設置值,replaceAll是先設置值,再找匹配對象

5.刪除

關鍵字:empty remove detach
empty -->刪除匹配的元素集合中所有的子節點。
舉例:<p>Hello, <span>Person</span> <a href="#">and person</a></p>
Jquery代碼:$("p").empty();
結果:<p></p>
remove -->從DOM中刪除所有匹配的元素。
舉例:<p>Hello</p> how are <p>you</p>
Jquery代碼:$("p").remove();
結果:how are
說明:這個方法不會把匹配的元素從jQuery對象中刪除,因而可以在將來再使用這些匹配的元素。但除了這個元素本身得以保留之外,其他的比如綁定的事件,附加的數據等都會被移除。
detach -->從DOM中刪除所有匹配的元素。
舉例:<p class="hello">Hello</p> how are <p>you</p>
Jquery代碼:$("p").detach(".hello");
結果:how are <p>you</p>
說明:這個方法不會把匹配的元素從jQuery對象中刪除,因而可以在將來再使用這些匹配的元素。與remove()不同的是,所有綁定的事件、附加的數據等都會保留下來。

6.復制

關鍵字:clone clone(true)
clone -->克隆匹配的DOM元素并且選中這些克隆的副本
舉例:<b>Hello</b><p>, how are you</p>
Jquery代碼:$("b").clone().prependTo("p");
結果:<b>Hello</b><p><b>Hello</b>, how are you</p>
clone(true) -->元素以及其所有的事件處理并且選中這些克隆的副本
舉例:<button>Clone Me!</button>
Jquery代碼:$("button").click(function(){
$(this).clone(true).insertAfter(this);
});
結果:<button>Clone Me!</button><button>Clone Me!</button>
說明:clone()方法是復制一個元素,不包含其所有事件,
clone(true)方是復制一個元素及其所有事件
全部評論: 0
登錄沒有賬號 切換注冊

忘記密碼 ?

注冊已有賬號 切換登錄

15选5走势图开奖