轻松掌握jQuery中wrap()与unwrap()函数的用法


Posted in Javascript onMay 24, 2016

wrap()

wrap()函数可以接受任何字符串或对象,可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套了好几层深,但应该只包含一个核心的元素。每个匹配的元素都会被这种结构包裹。该方法返回原始的元素集,以便之后使用链式方法。
eg:

//在当前页面内追加换行标签和指定的HTML内容
function w( html ){
  document.body.innerHTML += "<br/>" + html;
}

var name = "Hello";
function foo( a, b ){
  w( this.name );
  w( a + b );
}
 // 直接调用
foo( 1, 2 );
// Hello
// 3


var obj = { name: "CodePlayer", age: 18 };
var proxy = $.proxy( foo, obj, 5, 10 );
// 代理调用foo()函数,此时其内部的this指向对象obj
proxy();
// CodePlayer
// 15
运行代码

unwrap()
这个函数将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素(以及他们的同辈元素)会在DOM结构上替换他们的父元素。
eg:
用ID是"content"的div将每一个段落包裹起来

# HTML 代码:
<div>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
</div>
 
# jQuery 代码:
 $("p").unwrap()

结果:

<p>Hello</p>
<p>cruel</p>
<p>World</p>
Javascript 相关文章推荐
父子窗体间传递JSON格式的数据的代码
Dec 25 Javascript
Js event事件在IE、FF兼容性问题
Jan 01 Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
JavaScript中的原型和继承详解(图文)
Jul 18 Javascript
JQuery查找DOM节点的方法
Jun 11 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
Jun 07 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
angular实现spa单页面应用实例
Jul 10 Javascript
浅谈Angular4实现热加载开发旅程
Sep 08 Javascript
JS设计模式之命令模式概念与用法分析
Feb 06 Javascript
puppeteer库入门初探
Jan 09 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
Oct 02 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 #Javascript
实例解析jQuery中proxy()函数的用法
May 24 #Javascript
jQuery前端开发35个小技巧
May 24 #Javascript
JS+Canvas绘制时钟效果
Aug 20 #Javascript
基于JQuery实现图片上传预览与删除操作
May 24 #Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
May 24 #Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
May 24 #Javascript
You might like
php中引用&amp;的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
作为PHP程序员你要知道的另外一种日志
2018/07/30 PHP
Linux基于php-fpm模式的lamp搭建phpmyadmin的方法
2018/10/25 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
2014/06/23 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
2016/09/24 Javascript
vue实现列表的添加点击
2016/12/29 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
layui监听工具栏的实例(操作列表按钮)
2019/09/10 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
[51:07]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
举例讲解Python中is和id的用法
2015/04/03 Python
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
一些常用的Python爬虫技巧汇总
2016/09/28 Python
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
Python实现数字的格式化输出
2020/08/01 Python
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
离婚协议书范文
2015/01/26 职场文书
费用申请报告范文
2015/05/15 职场文书
审查起诉阶段律师意见书
2015/05/19 职场文书
网吧温馨提示
2015/07/17 职场文书
浅谈MySQL user权限表
2021/06/18 MySQL
十大最强飞行系宝可梦,BUG燕上榜,第二是飞行系王者
2022/03/18 日漫