轻松掌握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 相关文章推荐
网页和浏览器兼容性问题汇总(draft1)
Jun 01 Javascript
js下利用控制器载入对应脚本
Jul 17 Javascript
javascript实现的网站访问量统计代码
Dec 20 Javascript
浅谈Angular中ngModel的$render
Oct 24 Javascript
Vue.js对象转换实例
Jun 07 Javascript
小程序实现列表删除功能
Oct 30 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
Apr 11 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
May 09 Javascript
JavaScript图片旋转效果实现方法详解
Jun 28 Javascript
在vue中获取wangeditor的html和text的操作
Oct 23 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
使用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
第七节 类的静态成员 [7]
2006/10/09 PHP
php select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
深入掌握include_once与require_once的区别
2013/06/17 PHP
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
javascript实现二分查找法实现代码
2007/11/12 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
js选项卡的实现方法
2015/02/09 Javascript
浅谈js 闭包引起的内存泄露问题
2015/06/22 Javascript
jquery Deferred 快速解决异步回调的问题
2016/04/05 Javascript
简单实现Bootstrap标签页
2020/08/09 Javascript
node.js 发布订阅模式的实例
2017/09/10 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
2017/12/20 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
2019/09/06 Javascript
Vue实现图片与文字混输效果
2019/12/04 Javascript
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
为python设置socket代理的方法
2015/01/14 Python
深入理解Javascript中的this关键字
2015/03/27 Python
Python编程之多态用法实例详解
2015/05/19 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
python 读写excel文件操作示例【附源码下载】
2019/06/19 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
Python字节单位转换(将字节转换为K M G T)
2021/03/02 Python
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
医药专业推荐信
2013/11/15 职场文书
小车司机岗位职责
2013/11/25 职场文书
品质口号大全
2014/06/17 职场文书
大学迎新标语
2014/06/26 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书
导游词之介休绵山
2019/12/31 职场文书
MySQL 表空间碎片的概念及相关问题解决
2021/05/07 MySQL
python3.7.2 tkinter entry框限定输入数字的操作
2021/05/22 Python