使用jQuery中的wrap()函数操作HTML元素的教程


Posted in Javascript onMay 24, 2016

wrap()函数用于在每个匹配元素外部包裹指定的HTML结构。
与该函数相对的是unwrap()函数,用于当前匹配元素的父元素(只移除父元素,其内部节点全部保留)。
该函数属于jQuery对象(实例)。

语法

jQueryObject.wrap( wrapper )

参数
wrapper String/Element/jQuery/Function类型用于包裹匹配元素的节点。
如果参数wrapper为字符串,则将其视作jQuery选择器或html字符串,jQuery会自行判断。
jQuery 1.4 新增支持:参数wrapper可以为函数。wrap()将根据匹配的所有元素遍历执行该函数,函数中的this将指向对应的DOM元素。
wrap()还会为函数传入一个参数,即当前元素在匹配元素中的索引。函数的返回值就是用于包裹的节点内容(可以是html字符串、DOM元素或jQuery对象)。
注意:如果wrapper匹配多个元素,则只将第一个元素作为包裹元素。
注意:如果wrapper是多层嵌套的元素(例如<p><i></i></p>),wrap()将从外往内检查每层嵌套的第一个节点。如果该节点没有子节点或者第一个子节点不是Element节点(比如文本节点、注释节点等),就停止向内查找,直接在当前节点内部的末尾位置追加(append())当前匹配元素。

返回值
wrap()函数的返回值为jQuery类型,返回当前jQuery对象本身(以便于进行链式风格的编程)。
注意:即使wrapper元素是当前页面中的元素,该元素也不会从原位置上消失。因为wrap()使用的是该元素的副本(克隆)来充当包裹。

示例

<div class="container">
 <div class="inner">Hello</div>
 <div class="inner">Goodbye</div>
</div>
$( ".inner" ).wrap(function() {
 return "<div class='" + $( this ).text() + "'></div>";
});

结果如下:

<div class="container">
 <div class="Hello">
  <div class="inner">Hello</div>
 </div>
 <div class="Goodbye">
  <div class="inner">Goodbye</div>
 </div>
</div>

类似的用法还有.wrapAll()、.wrapInner()、.unwrap()等等!

Javascript 相关文章推荐
引用 js在IE与FF之间的区别详细解析
Nov 20 Javascript
js 验证身份证信息有效性
Mar 28 Javascript
js调试工具Console命令详解
Oct 21 Javascript
node.js中的fs.appendFileSync方法使用说明
Dec 17 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
Nov 24 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
javascript验证手机号和实现星号(*)代替实例
Aug 16 Javascript
H5手机端多文件上传预览插件
Apr 21 Javascript
基于jQuery封装的分页组件
Jun 26 jQuery
Parcel 打包示例(React HelloWorld)
Jan 16 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
node.JS二进制操作模块buffer对象使用方法详解
Feb 06 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
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 #Javascript
You might like
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
php基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
PHP设计模式之观察者模式实例
2016/02/22 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
js 文件引入实现代码
2010/04/23 Javascript
基于jQuery的图片剪切插件
2011/08/03 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
2013/02/26 Javascript
js内存泄露的几种情况详细探讨
2013/05/31 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
2015/02/02 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
2015/03/18 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
JavaScript中的return语句简单介绍
2015/12/07 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
ES6 Promise对象的应用实例分析
2019/06/27 Javascript
基于form-data请求格式详解
2019/10/29 Javascript
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
在Python中处理时间之clock()方法的使用
2015/05/22 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
Python安装与卸载流程详细步骤(图解)
2020/02/20 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
python实现无边框进度条的实例代码
2020/12/30 Python
python pygame 愤怒的小鸟游戏示例代码
2021/02/25 Python
美国首屈一指的高品质珠宝设计师和零售商:Allurez
2018/01/23 全球购物
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
上学迟到的检讨书
2014/01/11 职场文书
集团薪酬管理制度
2014/01/13 职场文书
保安岗位职责
2014/02/21 职场文书
客服专员岗位职责
2014/02/28 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏