使用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 相关文章推荐
点图片上一页下一页翻页效果
Jul 09 Javascript
window.open 以post方式传递参数示例代码
Feb 27 Javascript
javascript中的正则表达式使用指南
Mar 01 Javascript
JS小数运算出现多为小数问题的解决方法
Jun 02 Javascript
JavaScript中动态向表格添加数据
Jan 24 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
May 05 Javascript
vue组件实现可搜索下拉框扩展
Oct 23 Javascript
vue router 用户登陆功能的实例代码
Apr 24 Javascript
javascript实现切割轮播效果
Nov 28 Javascript
Vuex的热更替如何实现
Jun 05 Javascript
ES6 async、await的基本使用方法示例
Jun 06 Javascript
微信小程序实现下拉加载更多商品
Dec 29 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中unlink()、mkdir()、rmdir()等方法的使用介绍
2012/12/21 PHP
制作特殊字的脚本
2006/06/26 Javascript
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
文本框输入时 实现自动提示(像百度、google一样)
2012/04/05 Javascript
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
vue中SPA单页面应用程序详解
2017/11/07 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
Vue 权限控制的两种方法(路由验证)
2019/08/16 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
2020/08/04 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
Python判断字符串与大小写转换
2015/06/08 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
numpy下的flatten()函数用法详解
2019/05/27 Python
python通过链接抓取网站详解
2019/11/20 Python
Python pymysql模块安装并操作过程解析
2020/10/13 Python
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
如何设置Java的运行环境
2013/04/05 面试题
幼儿园师德演讲稿
2014/05/06 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
承诺书应该怎么写?
2019/09/10 职场文书
Mysql数据库中datetime、bigint、timestamp来表示时间选择,谁来存储时间效率最高
2021/08/23 MySQL
JavaScript严格模式不支持八进制的问题讲解
2021/11/07 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript