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 相关文章推荐
JS打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
js验证模型自我实现的具体方法
Jun 21 Javascript
jquery垂直公告滚动实现代码
Dec 08 Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
浅谈JavaScript的函数及作用域
Dec 30 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 Javascript
让div运动起来 js实现缓动效果
Jul 06 Javascript
使用vue如何构建一个自动建站项目
Feb 05 Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
Aug 12 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 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
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
JS中Date日期函数中的参数使用介绍
2014/01/02 Javascript
iframe父页面获取子页面参数的方法
2014/02/21 Javascript
Bootstrap学习笔记之css样式设计(1)
2016/06/07 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
使用JS和canvas实现gif动图的停止和播放代码
2017/09/01 Javascript
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
[01:28:44]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第一场 1月10日
2021/03/11 DOTA
python使用装饰器和线程限制函数执行时间的方法
2015/04/18 Python
Python进程间通信之共享内存详解
2017/10/30 Python
Python3使用正则表达式爬取内涵段子示例
2018/04/22 Python
pymongo中group by的操作方法教程
2019/03/22 Python
python递归法解决棋盘分割问题
2019/07/17 Python
python应用文件读取与登录注册功能
2019/09/23 Python
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
javascript实现用户必须勾选协议实例讲解
2021/03/24 Javascript
大学应届毕业生个人求职信
2013/09/23 职场文书
初中音乐教学反思
2014/01/12 职场文书
英语故事演讲稿
2014/04/29 职场文书
体育活动总结范文
2014/05/04 职场文书
2015初一年级组工作总结
2015/07/24 职场文书
五年级作文之学校的四季
2019/12/05 职场文书
Redis5之后版本的高可用集群搭建的实现
2021/04/27 Redis
Python基础之元组与文件知识总结
2021/05/19 Python
十大最强格斗系宝可梦,超梦X仅排第十,第二最重格斗礼仪
2022/03/18 日漫
Go 中的空白标识符下划线
2022/03/25 Golang