轻松掌握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 相关文章推荐
比Jquery的document.ready更快的方法
Apr 28 Javascript
JSONP 跨域共享信息
Aug 16 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
jquery实现弹出层完美居中效果
Mar 03 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
浅谈Javascript中substr和substring的区别
Sep 30 Javascript
关于JS中二维数组的声明方法
Sep 24 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 Javascript
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
JS解惑之Object中的key是有序的么
May 06 Javascript
java和js实现的洗牌小程序
Sep 30 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 保留小数点
2009/04/21 PHP
PHP中数组的分组排序实例
2014/06/01 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
CodeIgniter 完美解决URL含有中文字符串
2016/05/13 PHP
php中strtotime函数性能分析
2016/11/20 PHP
PHP未登录自动跳转到登录页面
2016/12/21 PHP
jQuery :first选择器使用介绍
2013/08/09 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
2016/12/08 Javascript
浅析JavaScript动画模拟拖拽原理
2016/12/09 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
2017/02/27 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
node.js中使用Export和Import的方法
2017/09/18 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
vue组件表单数据回显验证及提交的实例代码
2018/08/30 Javascript
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
Python实现合并同一个文件夹下所有PDF文件的方法示例
2018/04/28 Python
python利用requests库进行接口测试的方法详解
2018/07/06 Python
python 调试冷知识(小结)
2019/11/11 Python
django使用JWT保存用户登录信息
2020/04/22 Python
python中类与对象之间的关系详解
2020/12/16 Python
梅西酒窖:Macy’s Wine Cellar
2018/01/07 全球购物
GetYourGuide台湾:预订旅游活动、景点和旅游项目
2019/06/10 全球购物
应届生会计电算化求职信
2013/10/03 职场文书
个人简历自我评价八例
2013/10/31 职场文书
体育学院毕业生自荐信
2013/11/03 职场文书
法务专员岗位职责
2014/01/02 职场文书
党员批评与自我批评发言
2014/10/02 职场文书
2015秋季小学开学寄语
2015/05/27 职场文书
大学军训通讯稿
2015/07/18 职场文书
医院消毒隔离制度
2015/08/05 职场文书