使用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 相关文章推荐
jQuery 拖动层(在可视区域范围内)
May 24 Javascript
JavaScript实现的多种鼠标拖放效果
Nov 03 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 Javascript
javascript验证香港身份证的格式或真实性
Feb 07 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 Javascript
js实现随机点名系统(实例讲解)
Oct 18 Javascript
vue2.0 和 animate.css的结合使用
Dec 12 Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
深入学习js函数的隐式参数 arguments 和 this
Jun 24 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 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
php 分页原理详解
2009/08/21 PHP
php中CI操作多个数据库的代码
2012/07/05 PHP
支持png透明图片的php生成缩略图类分享
2015/02/08 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
功能强大的PHP图片处理类(水印、透明度、旋转)
2015/10/21 PHP
PHP实现简易图形计算器
2020/08/28 PHP
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
js调用后台servlet方法实例
2013/06/09 Javascript
js日期对象兼容性的处理方法
2014/01/28 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
NodeJS创建基础应用并应用模板引擎
2016/04/12 NodeJs
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
基于jQuery实现顶部导航栏功能
2016/12/27 Javascript
浅析bootstrap原理及优缺点
2017/03/19 Javascript
解决vue-cli中stylus无法使用的问题方法
2017/06/19 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
Angular中sweetalert弹框的基本使用教程
2018/07/22 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
vue使用echarts图表的详细方法
2018/10/22 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
2019/12/19 Javascript
Django安装配置mysql的方法步骤
2018/10/15 Python
Python自动发送邮件的方法实例总结
2018/12/08 Python
python判断所输入的任意一个正整数是否为素数的两种方法
2019/06/27 Python
Python中的self用法详解
2019/08/06 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
django框架cookie和session用法实例详解
2019/12/10 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
HTML5新特性之type=file文件上传功能
2018/02/02 HTML / CSS
个人思想理论学习的自我鉴定
2013/11/30 职场文书
三八红旗集体先进事迹材料
2014/05/22 职场文书
预备党员学习十八届三中全会精神思想汇报
2014/09/13 职场文书
生产操作工岗位职责
2014/09/16 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书