轻松掌握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网页关键字高亮代码
Jul 30 Javascript
JS延迟加载加快页面打开速度示例代码
Dec 30 Javascript
使用jquery实现IE下按backspace相当于返回操作
Mar 18 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
May 12 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
Sep 04 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 Javascript
1秒50万字!js实现关键词匹配
Aug 01 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 Javascript
JS简单实现自定义右键菜单实例
May 31 Javascript
jQuery实现checkbox的简单操作
Nov 18 jQuery
JavaScript设计模式之命令模式实例分析
Jan 16 Javascript
layui输入框只允许输入中文且判断长度的例子
Sep 18 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/06 PHP
PHP获取url的函数代码
2011/08/02 PHP
php中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
php中动态修改ini配置
2014/10/14 PHP
PHP实现合并discuz用户
2015/08/05 PHP
php中的登陆login实例代码
2016/06/20 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
js继承的实现代码
2010/08/05 Javascript
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
基于滚动条位置判断的简单实例
2017/12/14 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
Vue-component全局注册实例
2018/09/06 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
2019/02/15 Javascript
详解vue的双向绑定原理及实现
2019/05/05 Javascript
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
Python的Urllib库的基本使用教程
2015/04/30 Python
python实现逆波兰计算表达式实例详解
2015/05/06 Python
python学习入门细节知识点
2018/03/29 Python
python调用Matplotlib绘制分布点图
2019/10/18 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
pycharm 激活码及使用方式的详细教程
2020/05/12 Python
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
广州地球村科技数据库题目
2016/04/25 面试题
“学雷锋活动月”总结
2014/03/09 职场文书
个人承诺书怎么写
2014/05/24 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
刘公岛导游词
2015/02/05 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
离婚案件答辩状
2015/05/22 职场文书
MySQL 覆盖索引的优点
2021/05/19 MySQL
Redis主从配置和底层实现原理解析(实战记录)
2021/06/30 Redis