轻松掌握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对象实现深复制的方法
Oct 24 Javascript
浅谈js中变量初始化
Feb 03 Javascript
15款jQuery分布引导插件分享
Feb 04 Javascript
使用纯javascript实现放大镜效果
Mar 18 Javascript
js实现网页抽奖实例
Aug 05 Javascript
深入浅析jQuery对象$.html
Aug 22 Javascript
AngularJS表格添加序号的方法
Mar 03 Javascript
JavaScript中如何判断一个值的类型
Sep 15 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 Javascript
Node.js Express安装与使用教程
May 11 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 Javascript
js变量值传到php过程详解 将php解析成数据
Jun 26 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
《超神学院》霸气归来, 天使彦上演维多利亚的秘密
2020/03/02 国漫
php判断是否连接上网络的方法实例详解
2016/12/14 PHP
ThinkPHP模板标签eq if 中区分0,null,false的方法
2017/03/24 PHP
在PHP中实现使用Guzzle执行POST和GET请求
2019/10/15 PHP
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
js调用后台、后台调用前台等方法总结
2014/04/17 Javascript
JSON格式化输出
2014/11/10 Javascript
js对象继承之原型链继承实例
2015/01/10 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
2016/06/13 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
Vue 中使用 CSS Modules优雅方法
2018/04/09 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
2018/09/30 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
在类Unix系统上开始Python3编程入门
2015/08/20 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
python requests指定出口ip的例子
2019/07/25 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
Python wordcloud库安装方法总结
2020/12/31 Python
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
个性婚礼策划方案
2014/05/17 职场文书
单位委托书范本(3篇)
2014/09/18 职场文书
2014最新毕业证代领委托书
2014/09/26 职场文书
整改报告怎么写
2014/11/06 职场文书
员工辞退通知书
2015/04/17 职场文书
个人欠条范本
2015/07/03 职场文书
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python
Python实现简单的俄罗斯方块游戏
2021/09/25 Python
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis
Win11开始菜单添加休眠选项
2022/04/19 数码科技