jQuery中wrapInner()方法用法實(shí)例
更新時(shí)間：2015年01月16日 14:32:23 投稿：shichen2014
這篇文章主要介紹了jQuery中wrapInner()方法用法,實(shí)例分析了wrapInner()方法的功能、定義及包裹匹配元素的使用技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery中wrapInner()方法用法。分享給大家供大家參考。具體分析如下：
此方法使用指定的HTML內(nèi)容或元素將匹配的元素內(nèi)容包裹起來。
語法一:
用指定的DOM元素去包裹匹配元素的內(nèi)容。
復(fù)制代碼 代碼如下:
$(selector).wrapInner(elem)
參數(shù)列表:
實(shí)例:
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.dbjr.com.cn/" />
<head>
<title>腳本之家</title>
<style type="text/css">
div
{
width:200px;
height:200px;
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(){
$("div").wrapInner(document.createElement("p"));
});
});
</script>
</head>
<body>
<div>這是div的內(nèi)容，將會(huì)被包裹</div>
<div>這是div的內(nèi)容，將會(huì)被包裹</div>
<button>用div包裹每個(gè)段落</button>
</body>
</html>
語法二:
用函數(shù)返回用于包裹匹配元素內(nèi)容的元素。
復(fù)制代碼 代碼如下:
$(selector).wrapInner(function)
參數(shù)列表:
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.dbjr.com.cn/" />
<head>
<title>腳本之家</title>
<style type="text/css">
div
{
width:200px;
height:200px;
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(){
$("div").wrapInner(function(){
return "<p></p>"
});
});
});
</script>
</head>
<body>
<div>這是div的內(nèi)容，將會(huì)被包裹</div>
<div>這是div的內(nèi)容，將會(huì)被包裹</div>
<button>用div包裹每個(gè)段落</button>
</body>
</html>
語法三:
用html標(biāo)記代碼包裹匹配元素的內(nèi)容。
復(fù)制代碼 代碼如下:
$(selector).wrapInner(html)
參數(shù)列表:
實(shí)例:
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.dbjr.com.cn/" />
<head>
<title>腳本之家</title>
<style type="text/css">
div
{
width:200px;
height:200px;
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(){
$("div").wrapInner("<p></p>");
});
});
</script>
</head>
<body>
<div>這是div的內(nèi)容，將會(huì)被包裹</div>
<div>這是div的內(nèi)容，將會(huì)被包裹</div>
<button>用div包裹每個(gè)段落</button>
</body>
</html>
希望本文所述對大家的jQuery程序設(shè)計(jì)有所幫助。
本文轉(zhuǎn)自：螞蟻部落http://www.softwhy.com/
相關(guān)文章
JQuery判斷子iframe何時(shí)加載完成解決方案
需要知道iframe何時(shí)加載完成，用JQuery很簡單就能實(shí)現(xiàn)，具體如下，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
Validform驗(yàn)證時(shí)可以為空否則按照指定格式驗(yàn)證
這篇文章主要介紹了Validform驗(yàn)證時(shí)可以為空否則按照指定格式驗(yàn)證的相關(guān)資料,需要的朋友可以參考下2017-10-10
jQuery實(shí)現(xiàn)的購物車物品數(shù)量加減功能代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的購物車物品數(shù)量加減功能,涉及jQuery針對鼠標(biāo)事件的響應(yīng)及頁面元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-11-11
基于jquery實(shí)現(xiàn)的銀行卡號每隔4位自動(dòng)插入空格的實(shí)現(xiàn)代碼
這篇文章主要介紹了基于jquery實(shí)現(xiàn)的銀行卡號每隔4位自動(dòng)插入空格的實(shí)現(xiàn)代碼,需要的朋友可以參考下2016-11-11
jQuery 是一個(gè)快速、簡單的JavaScript library， 它簡化了HTML 文件的traversing，事件處理、動(dòng)畫、Ajax 互動(dòng)，從而方便了網(wǎng)頁制作的快速發(fā)展。 jQuery 是為改變你編寫JavaScript 的方式而設(shè)計(jì)的，本文給大家分享jquery validate初步體驗(yàn)(一)，感興趣的朋友一起學(xué)習(xí)吧2015-12-12
jQuery simplePage+AJAX plus分頁插件用法實(shí)例
這篇文章主要介紹了jQuery simplePage+AJAX plus分頁插件用法,結(jié)合實(shí)例形式分析了jQuery基于extend擴(kuò)展實(shí)現(xiàn)分頁插件的具體技巧,需要的朋友可以參考下2016-02-02
整理8個(gè)很棒的 jQuery 倒計(jì)時(shí)插件和教程
jQuery 是最流行也是使用最廣泛的 JavaScript 框架，它簡化了 HTML 文檔操作，事件處理，動(dòng)畫效果和 Ajax 交互。下面向大家分享8個(gè)優(yōu)秀的 jQuery 倒計(jì)時(shí)插件和教程2011-12-12
為了簡化JavaScript的開發(fā)，一些JavaScript程序庫誕生了，下面是目前集中流行的JavaScript程序庫的介紹和對比，感興趣的朋友可以了解下2013-09-09
基于JQuery的一句代碼實(shí)現(xiàn)表格的簡單篩選
JQuery的強(qiáng)大之處，這里就不用講了。這里將用一行簡單的JQuery代碼實(shí)現(xiàn)簡單的表格篩選。2010-07-07
JQuery選中checkbox方法代碼實(shí)例（全選、反選、全不選）
這篇文章主要介紹了JQuery選中checkbox方法代碼實(shí)例（全選、反選、全不選）,本文直接給出代碼實(shí)例,需要的朋友可以參考下2015-04-04