轻松掌握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 相关文章推荐
cssQuery()的下载与使用方法
Jan 12 Javascript
jquery星级插件、支持页面中多次使用
Mar 25 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
Mar 31 Javascript
javascript封装的sqlite操作类实例
Jul 17 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
纯原生js实现贪吃蛇游戏
Apr 16 Javascript
Vue.js项目模板搭建图文教程
Sep 20 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
Nov 30 Javascript
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
JavaScript实现百度搜索框效果
Mar 26 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 Javascript
mpvue开发音频类小程序踩坑和建议详解
Mar 12 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 之入门篇
2006/12/04 PHP
非常好用的两个PHP函数 serialize()和unserialize()
2012/02/04 PHP
php邮箱地址正则表达式验证
2015/11/13 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
PHP实现图片批量打包下载功能
2017/03/01 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
js实现同一页面多个不同运动效果的方法
2015/04/10 Javascript
AngularJs实现分页功能不带省略号的代码
2016/05/30 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
jquery操作select取值赋值与设置选中实例
2017/02/28 Javascript
JS完成画圆圈的小球
2017/03/07 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
JS设置随机出现2个数字的实例代码
2017/07/19 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
kaggle+mnist实现手写字体识别
2018/07/26 Python
Python线程障碍对象Barrier原理详解
2019/12/02 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
Python networkx包的实现
2020/02/14 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
英国百年闻名的优质健康产品连锁店:Holland & Barrett
2019/12/19 全球购物
服装设计专业毕业生推荐信
2013/11/09 职场文书
体育教育毕业生自荐信
2013/11/21 职场文书
简易离婚协议书(范本)
2014/10/25 职场文书
医院志愿者活动总结
2015/05/06 职场文书
行政申诉状范文
2015/05/20 职场文书
创业计划书之电动车企业
2019/10/11 职场文书
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫