轻松掌握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 相关文章推荐
use jscript List Installed Software
Jun 11 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
May 23 Javascript
jQuery 仿百度输入标签插件附效果图
Jul 04 Javascript
详谈JavaScript 匿名函数及闭包
Nov 14 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
Sep 06 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
Dec 25 Javascript
require简单实现单页应用程序(SPA)
Jul 12 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 Javascript
VUE基于NUXT的SSR 服务端渲染
Nov 30 Javascript
js实现购物车商品数量加减
Sep 21 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
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
YII Framework教程之异常处理详解
2016/03/14 PHP
php实现页面纯静态的实例代码
2017/06/21 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
JQuery自定义事件的应用 JQuery最佳实践
2010/08/01 Javascript
javascript 伪数组实现方法
2010/10/11 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
我的Node.js学习之路(一)
2014/07/06 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
2017/04/11 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
Vue的Options用法说明
2020/08/14 Javascript
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
解决python matplotlib imshow无法显示的问题
2018/05/24 Python
Python英文文本分词(无空格)模块wordninja的使用实例
2019/02/20 Python
python同步windows和linux文件
2019/08/29 Python
pygame实现弹球游戏
2020/04/14 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
教师四风对照检查材料思想汇报
2014/09/17 职场文书
品德与社会教学反思
2016/02/24 职场文书
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL
Win11运行cmd提示“请求的操作需要提升”的两种解决方法
2022/07/07 数码科技