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 相关文章推荐
javascript获取设置div的高度和宽度兼容任何浏览器
Sep 22 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
Sep 09 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
Feb 17 Javascript
jquery自定义右键菜单、全选、不连续选择
Mar 01 Javascript
js仿淘宝和百度文库的评分功能
May 15 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
Aug 24 Javascript
js数组常用最重要的方法
Feb 04 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
Feb 08 Javascript
Angular中使用better-scroll插件的方法
Mar 27 Javascript
Vue 实现登录界面验证码功能
Jan 03 Javascript
vue项目中监听手机物理返回键的实现
Jan 18 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
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
zend framework重定向方法小结
2016/05/28 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
10个很棒的jQuery代码片段
2015/09/24 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
关于JS变量和作用域详解
2016/07/28 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
2017/02/19 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
详解AngularJS 模块化
2017/06/14 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
2018/09/27 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
python操作excel的方法
2018/08/16 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
python使用numpy实现直方图反向投影示例
2020/01/17 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
HTML5中在title标题标签里设置小图标的方法
2020/06/23 HTML / CSS
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
数控专业毕业生求职信范文
2013/09/21 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
爱护公共设施演讲稿
2014/09/13 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
小学班主任自我评价
2015/03/11 职场文书
2015年服务员工作总结
2015/04/08 职场文书
《圆的面积》教学反思
2016/02/19 职场文书