jQuery中wrapInner()方法用法实例


Posted in Javascript onJanuary 16, 2015

本文实例讲述了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="https://3water.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="https://3water.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="https://3water.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/

Javascript 相关文章推荐
js实现单行文本向上滚动效果实例代码
Nov 28 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
修复bash漏洞的shell脚本分享
Dec 31 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
jQuery获取选中单选按钮radio的值
Dec 27 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
微信小程序实现城市列表选择
Jun 05 Javascript
详解Vue、element-ui、axios实现省市区三级联动
May 07 Javascript
jQuery中wrapAll()方法用法实例
Jan 16 #Javascript
jQuery中unwrap()方法用法实例
Jan 16 #Javascript
jquery搜索框效果实现方法
Jan 16 #Javascript
js表头排序实现方法
Jan 16 #Javascript
js计算任意值之间随机数的方法
Jan 16 #Javascript
jquery事件preventDefault()方法用法实例
Jan 16 #Javascript
jQuery老黄历完整实现方法
Jan 16 #Javascript
You might like
DC四月将推出百页特刊漫画 纪念小丑诞生80周年
2020/04/09 欧美动漫
PHP反向代理类代码
2014/08/15 PHP
使用新浪微博API的OAuth认证发布微博实例
2015/03/27 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
Javascript 函数对象的多重身份
2009/06/28 Javascript
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
js Canvas实现的日历时钟案例分享
2016/12/25 Javascript
常用jQuery选择器汇总
2017/02/02 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
vue.js的提示组件
2017/03/02 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
微信小程序中setInterval的使用方法
2017/09/29 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
微信小程序转发事件实现解析
2019/10/22 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
[10:53]2018DOTA2国际邀请赛寻真——EG
2018/08/11 DOTA
python网络编程学习笔记(九):数据库客户端 DB-API
2014/06/09 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
Python select及selectors模块概念用法详解
2020/06/22 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
会计专业的自荐信
2013/12/12 职场文书
企业三严三实学习心得体会
2014/10/13 职场文书
父亲节活动总结
2015/02/12 职场文书
警示教育片观后感
2015/06/17 职场文书
上级领导检查欢迎词
2015/09/30 职场文书
Spring中的使用@Async异步调用方法
2021/11/01 Java/Android
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android