轻松掌握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 相关文章推荐
从盛大通行证上摘下来的身份证验证js代码
Jan 11 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
Apr 14 Javascript
用JavaScript修改CSS属性的代码
May 06 Javascript
JavaScript中的toDateString()方法使用详解
Jun 12 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 Javascript
Javascript面试经典套路reduce函数查重
Mar 23 Javascript
JavaScript之Canvas_动力节点Java学院整理
Jul 04 Javascript
vue中的event bus非父子组件通信解析
Oct 27 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
初学vue出现空格警告的原因及其解决方案
Oct 31 Javascript
Javascript异步流程控制之串行执行详解
Sep 27 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+DBM的同学录程序(1)
2006/10/09 PHP
PHP 简单数组排序实现代码
2009/08/05 PHP
php strnatcmp()函数的用法总结
2013/11/27 PHP
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
常用js脚本
2006/12/03 Javascript
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
2018/08/27 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
微信小程序实现电影App导航和轮播
2020/11/30 Javascript
python获取mp3文件信息的方法
2015/06/15 Python
python 文件操作删除某行的实例
2017/09/04 Python
Python中出现IndentationError:unindent does not match any outer indentation level错误的解决方法
2020/04/18 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
欧缇丽美国官网:Caudalie美国
2016/12/31 全球购物
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
预订全球最佳旅行体验:Viator
2018/03/30 全球购物
波兰家居和花园家具专家:4Home
2019/05/26 全球购物
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
日语专业毕业生求职信
2013/12/04 职场文书
进步之星获奖感言
2014/02/22 职场文书
《春晓》教学反思
2014/04/20 职场文书
法人代表证明书格式
2014/10/01 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
青岛导游词
2015/02/12 职场文书
vue elementUI表格控制对应列
2022/04/13 Vue.js
Mysql 数据库中的 redo log 和 binlog 写入策略
2022/04/26 MySQL
vue.js 使用原生js实现轮播图
2022/04/26 Vue.js