轻松掌握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 相关文章推荐
发现的以前不知道的函数
Sep 19 Javascript
javascript 设置文本框中焦点的位置
Nov 20 Javascript
Javascript 函数中的参数使用分析
Mar 27 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
Feb 27 Javascript
js判断移动端是否安装某款app的多种方法
Dec 18 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
angularjs指令之绑定策略(@、=、&amp;)
Apr 13 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
js实现漂亮的星空背景
Nov 01 Javascript
Vue的props父传子的示例代码
May 20 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数组函数序列之array_slice() - 在数组中根据条件取出一段值,并返回
2011/11/07 PHP
8个PHP数组面试题
2015/06/23 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
深入解析PHP底层机制及相关原理
2020/12/11 PHP
用jQuery实现检测浏览器及版本的脚本代码
2008/01/22 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
Jquery $when done then的用法详解
2016/05/20 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
2016/11/17 Javascript
详解如何让Express支持async/await
2017/10/09 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
Python简单I/O操作示例
2019/03/18 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
使用Python在Windows下获取USB PID&amp;VID的方法
2019/07/02 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
linux面试题参考答案(5)
2016/11/05 面试题
秋季婚礼证婚词
2014/01/11 职场文书
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
2014年保管员工作总结
2014/11/18 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
晚会主持人开场白台词
2015/05/28 职场文书
vue前端工程的搭建
2021/03/31 Vue.js
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python
如何避免mysql启动时错误及sock文件作用分析
2022/01/22 MySQL
Python实现文字pdf转换图片pdf效果
2022/04/03 Python
python中pycryto实现数据加密
2022/04/29 Python