jQuery中wrapAll()方法用法实例


Posted in Javascript onJanuary 16, 2015

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

此方法将所有匹配的元素用单个元素包裹起来。
此方法与wrap()方法虽然功能类似,但是有着很大区别。wrap()方法会把每一个匹配的元素都匹配一次。

语法一:

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

$(selector).wrapAll(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;

       margin-top:10px;

    }

</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").wrapAll(document.getElementById("content"));

        });

    });

</script>

</head>

<body>

    <p>我是个段落</p>

    <p>我是个段落</p>

    <div id="content"></div>

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

</body>

</html>

语法二:

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

$(selector).wrapAll(html)

参数列表:
参数 描述
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">

    .content

   {

        width:200px;

        height:200px;

        border:1px solid blue;

    }

</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").wrapAll("<div class='content'></div>");

        });

    });

</script>

</head>

<body>

   <p>这是个段落</p>

   <p>这是个段落</p>

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

</body>

</html>

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

Javascript 相关文章推荐
javascript 可以拖动的DIV(二)
Jun 26 Javascript
javascript 事件绑定问题
Jan 01 Javascript
javascript中删除指定数组中指定的元素的代码
Feb 12 Javascript
基于Jquery的开发个代阴影的对话框效果代码
Jul 28 Javascript
Javascript Throttle &amp; Debounce应用介绍
Mar 19 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
Aug 24 Javascript
JavaScript中document.forms[0]与getElementByName区别
Jan 21 Javascript
JSON遍历方式实例总结
Dec 07 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
Oct 24 Javascript
微信小程序实现翻牌抽奖动画
Sep 21 Javascript
Canvas三种动态画圆实现方法说明(小结)
Apr 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
jquery中one()方法的用法实例
Jan 16 #Javascript
You might like
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
PHP使用OB缓存实现静态化功能示例
2019/03/23 PHP
PHP基于phpqrcode类生成二维码的方法示例详解
2020/08/07 PHP
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
基于jquery的仿百度搜索框效果代码
2011/04/11 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
jquery 无限级下拉菜单的简单实现代码
2014/02/21 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
2015/03/04 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
一秒学会微信小程序制作table表格
2019/02/14 Javascript
详解小程序退出页面时清除定时器
2019/04/28 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
2021/01/13 Vue.js
Python实现过滤单个Android程序日志脚本分享
2015/01/16 Python
使用Python爬了4400条淘宝商品数据,竟发现了这些“潜规则”
2018/03/23 Python
Python requests库用法实例详解
2018/08/14 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
Tensorflow 自定义loss的情况下初始化部分变量方式
2020/01/06 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
公务员考察材料范文
2014/12/23 职场文书
护士求职简历自我评价
2015/03/10 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
红色故事汇观后感
2015/06/18 职场文书
思想工作总结范文
2015/08/12 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技
Java数据结构之堆(优先队列)
2022/05/20 Java/Android
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
2022/09/23 HTML / CSS