jQuery中replaceWith()方法用法實(shí)例
更新時(shí)間：2014年12月25日 15:50:17 投稿：shichen2014
這篇文章主要介紹了jQuery中replaceWith()方法用法,以實(shí)例形式分析了replaceWith()方法用于匹配元素替換的技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了jQuery中replaceWith()方法用法。分享給大家供大家參考。具體分析如下：
此方法將所有匹配的元素替換成指定的HTML或DOM元素。
需要注意的是此方法是追加內(nèi)容，也就是原來(lái)的內(nèi)容還在。
特別說(shuō)明:
HTML內(nèi)容就是內(nèi)容中可以包含HTML標(biāo)簽，并且能夠被瀏覽器渲染。
文本內(nèi)容是先將內(nèi)容中的HTML預(yù)定義字符轉(zhuǎn)換成html字符實(shí)體，這樣HTML標(biāo)簽就不會(huì)被渲染。
語(yǔ)法結(jié)構(gòu):
復(fù)制代碼 代碼如下:
$(selector).replaceWith(content)
參數(shù)列表:
實(shí)例代碼:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.fzitv.net/" />
<title>腳本之家</title>
<style type="text/css">
div{
width:100px;
height:100px;
border:1px solid blue;
}
p{
width:150px;
height:150px;
border:1px solid red;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").replaceWith("<div>我是div元素</div>");
});
});
</script>
</head>
<body>
<p>我是p元素</p>
<p>我是p元素</p>
<p>我是p元素</p>
<button>用div包裹每個(gè)段落</button>
</body>
</html>
以上代碼可以可以將p元素替換為div元素。
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
相關(guān)文章
由于ASP.NET網(wǎng)頁(yè)運(yùn)行后，服務(wù)器控件會(huì)隨機(jī)生成客戶端id，jquery獲取時(shí)候不太好操作，google了下，總結(jié)有以下3種方法.2010-05-05
這篇文章主要介紹了jquery 表單 多選框的一種巧妙寫法 ,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了jQuery+ajax+asp.net獲取Json值的方法,涉及jQuery的ajax技術(shù)與asp.net后臺(tái)交互的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
jquery插件jquery.LightBox.js實(shí)現(xiàn)點(diǎn)擊放大圖片并左右點(diǎn)擊切換效果(附demo源碼下載)
這篇文章主要介紹了jquery插件jquery.LightBox.js實(shí)現(xiàn)點(diǎn)擊放大圖片并左右點(diǎn)擊切換效果,可實(shí)現(xiàn)仿相冊(cè)插件切換效果,并附代碼demo源碼供讀者下載參考,需要的朋友可以參考下2016-02-02
jquery $(document).ready() 與window.onload的區(qū)別
Jquery中$(document).ready()的作用類似于傳統(tǒng)JavaScript中的window.onload方法，不過與window.onload方法還是有區(qū)別的。2009-12-12
用戶管理的設(shè)計(jì)_jquery的ajax實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)效果
下面小編就為大家?guī)?lái)一篇用戶管理的設(shè)計(jì)_jquery的ajax實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)效果。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-07-07
這篇文章主要介紹了8個(gè)超實(shí)用的jQuery技巧攻略,如禁用右鍵、返回頂部、圖片預(yù)加載等,需要的朋友可以參考下2014-03-03
今天看到google圖片搜索結(jié)果頁(yè)面，感覺簡(jiǎn)潔實(shí)用，于是用jquery粗略的模仿了一下再次感覺到j(luò)query的強(qiáng)大和易用，基本思路初步實(shí)現(xiàn)了，再整合ajax和json，應(yīng)該可以做一個(gè)簡(jiǎn)單的應(yīng)用了 :)2009-12-12
本文給大家介紹如何給Carousel插件添加新的功能，非常方便以后的程序開發(fā)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-04-04
dreamweaver 安裝Jquery智能提示，需要的朋友可以參考下。2011-04-04