轻松掌握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 相关文章推荐
javascript操作符&quot;!~&quot;详解
Feb 10 Javascript
JavaScript实现带标题的图片轮播特效
May 20 Javascript
JavaScript判断用户名和密码不能为空的实现代码
May 16 Javascript
使用jQuery调用XML实现无刷新即时聊天
Aug 07 Javascript
微信小程序实现根据字母选择城市功能
Aug 16 Javascript
Angular4学习教程之HTML属性绑定的方法
Jan 04 Javascript
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
详解Vue打包优化之code spliting
Apr 09 Javascript
webpack4 升级迁移的实现
Sep 12 Javascript
laypage+SpringMVC实现后端分页
Jul 27 Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 Javascript
JavaScript canvas实现跟随鼠标移动小球
Feb 09 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 输出简单动态WAP页面
2009/06/09 PHP
php中数据库连接方式pdo和mysqli对比分析
2015/02/25 PHP
js 函数的执行环境和作用域链的深入解析
2009/11/01 Javascript
javascript算法学习(直接插入排序)
2011/04/12 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
javascript中的3种继承实现方法
2016/01/27 Javascript
JavaScript编码风格指南(中文版)
2016/08/26 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
2016/10/29 Javascript
深入理解angular2启动项目步骤
2017/07/15 Javascript
nodejs判断文件、文件夹是否存在及删除的方法
2017/11/10 NodeJs
Angular4.0中引入laydate.js日期插件的方法教程
2017/12/25 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
2018/09/04 Javascript
vue 解决IOS10低版本白屏的问题
2020/11/17 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
关于小程序优化的一些建议(小结)
2020/12/10 Javascript
详解python上传文件和字符到PHP服务器
2017/11/24 Python
Python中按键来获取指定的值
2019/03/02 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
优秀演讲稿范文
2013/12/29 职场文书
生日派对邀请函
2014/01/13 职场文书
简历中的自我评价怎么写
2014/01/29 职场文书
财务科科长岗位职责
2014/03/10 职场文书
霸王洗发水广告词
2014/03/14 职场文书
大学国际贸易专业自荐信
2014/06/05 职场文书
协会周年庆活动方案
2014/08/26 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书
pytorch查看网络参数显存占用量等操作
2021/05/12 Python
Nginx的基本概念和原理
2022/03/21 Servers