轻松掌握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 相关文章推荐
个人总结的一些关于String、Function、Array的属性和用法
Jan 10 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 Javascript
js删除Array数组中指定元素的两种方法
Aug 03 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
Sep 14 Javascript
jQuery网页定位导航特效实现方法
Dec 19 Javascript
原生js实现倒计时功能(多种格式调用)
Jan 12 Javascript
JS+CSS实现下拉刷新/上拉加载插件
Mar 31 Javascript
详解JavaScript中关于this指向的4种情况
Apr 18 Javascript
iphone刘海屏页面适配方法
May 07 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 Javascript
vue源码nextTick使用及原理解析
Aug 13 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通过前序遍历树实现无需递归的无限极分类
2015/07/10 PHP
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
用PHP将Unicode 转化为UTF-8的实现方法(推荐)
2017/02/08 PHP
在laravel中使用with实现动态添加where条件
2019/10/10 PHP
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
JavaScript Promise启示录
2014/08/12 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
JavaScript中的类(Class)详细介绍
2014/12/30 Javascript
Javascript基础教程之数据类型转换
2015/01/18 Javascript
javascript白色简洁计算器
2015/05/04 Javascript
Javascript闭包(Closure)详解
2015/05/05 Javascript
jquery不常用方法汇总
2015/07/26 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
ES6中Iterator与for..of..遍历用法分析
2017/03/31 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
Python函数生成器原理及使用详解
2020/03/12 Python
python 8种必备的gui库
2020/08/27 Python
python利用platform模块获取系统信息
2020/10/09 Python
Carolina工作鞋官网:Carolina Footwear
2019/03/14 全球购物
CSMA/CD介质访问控制协议
2015/11/17 面试题
大学生开西餐厅创业计划书
2014/02/01 职场文书
党的群众路线教育实践活动学习笔记范文
2014/11/06 职场文书
2014年政协工作总结
2014/12/09 职场文书
2015年个人现实表现材料
2014/12/10 职场文书
债务纠纷代理词
2015/05/25 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
nginx location 带斜杠【 / 】与不带的区别
2022/04/13 Servers