管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

jQuery中wrapInner()方法用法实例

　　本文实例讲述了jQuery中wrapInner()方法用法。分享给大家供大家参考。具体分析如下：

　　此方法使用指定的HTML内容或元素将匹配的元素内容包裹起来。

　　语法一:

　　用指定的DOM元素去包裹匹配元素的内容。

　　

复制代码 代码如下:
$(selector).wrapInner(elem)

　　参数列表:

　　

参数 描述
elem 用于包裹目标的DOM元素。

　　实例:

　　

复制代码 代码如下:

　　<!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.glzy8.com/" />

　　<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的内容，将会被包裹</div>

　　<div>这是div的内容，将会被包裹</div>

　　<button>用div包裹每个段落</button>

　　</body>

　　</html>

　　语法二:

　　用函数返回用于包裹匹配元素内容的元素。

　　

复制代码 代码如下:
$(selector).wrapInner(function)

　　参数列表:

　　

参数 描述
function 返回用于包裹匹配元素内容的函数。
实例:

　　

复制代码 代码如下:

　　<!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.glzy8.com/" />

　　<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的内容，将会被包裹</div>

　　<div>这是div的内容，将会被包裹</div>

　　<button>用div包裹每个段落</button>

　　</body>

　　</html>

　　语法三:

　　用html标记代码包裹匹配元素的内容。

　　

复制代码 代码如下:
$(selector).wrapInner(html)

　　参数列表:

　　

参数 描述
html 用于包裹匹配元素内容的html标记代码。

　　实例:

　　

复制代码 代码如下:

　　<!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.glzy8.com/" />

　　<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的内容，将会被包裹</div>

　　<div>这是div的内容，将会被包裹</div>

　　<button>用div包裹每个段落</button>

　　</body>

　　</html>

　　希望本文所述对大家的jQuery程序设计有所帮助。

　　本文转自：蚂蚁部落http://www.softwhy.com/

教程首页 更多教程