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是多层嵌套的元素(例如

返回值wrap()函数的返回值为jQuery类型,返回当前jQuery对象本身(以便于进行链式风格的编程)。

注意:即使wrapper元素是当前页面中的元素,该元素也不会从原位置上消失。因为wrap()使用的是该元素的副本(克隆)来充当包裹。

示例

Hello
Goodbye

$( ".inner" ).wrap(function() {

return "

});

结果如下:

Hello
Goodbye

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

如何在html中选择wrap,使用jQuery中的wrap()函数操作HTML元素的教程相关推荐

  1. js中window.onload 与 jquery中$(document.ready()) 测试

    js中window.onload 与 jquery中$(document.ready())区别,验证代码如下(调换js代码和Jquer代码书写顺序测试,运行结果一样,因此与代码书写位置没关系): &l ...

  2. js中innerHTML和innerText jQuery中html()和text()的区别

    js中innerHTML和innerText的区别 innerHTML innerHTML  会将标签和标签中的内容否获取回来 innerHTML  .innerHTML = '<p>&l ...

  3. js中的遍历和jquery中的遍历

    1.map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组. 使用实例: var ary = [12,23,24,42,1]; var res = ary.map(func ...

  4. jquery (js中window.onload与jquery中$(document.ready())的区别)

    jquery 学习之一(js中window.onload与jquery中$(document.ready())的区别) 耳听为虚,眼见为实.通过下面的实例可查看两者的异同(注意:aa.jpg最好是一张 ...

  5. jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据,表单序列化(异步获取表单内容)

    jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...

  6. html中prependid的作用,jQuery中append(),prepend()与after(),before()的区别

    在jQuery中,添加元素的方法有append(),prepend和 after(),before()两种共四个.但很多人对他们的使用有点混淆,今天就来分析一下.append()和prepend()的 ...

  7. jQuery(三)—节点操作和元素尺寸

    jQuery节点操作和元素尺寸 节点操作 创建.追加元素 $()直接传入想要创建的节点 var $newli = $("<li>这是一个新的li标签</li>&quo ...

  8. 如何从一个表中选择另一个表中不存在的所有记录?

    table1(ID,名称) table2(ID,名称) 查询: SELECT name FROM table2 -- that are not in table1 already #1楼 我的代表点不 ...

  9. html中写jq,在jQuery中,能够操作HTML代码及其文本的方法是()

    包括瘫痪理治疗方的物脑性法不,中作法B法Cn法法Ed法上田. S评评分评分评分评分分4分B分C分D分E,够操评分轻度脑外伤G是(. 码及儿童目C目E表包项目项目项目括A症评孤独0个个项3个个项6个定量 ...

最新文章

  1. 基于 CoreText 实现的高性能 UITableView
  2. 【Git】Git 分支管理 ( 删除远程分支 | 查看远程分支 git branch -a | 删除远程分支 git push origin --delete feature1 )
  3. 【AI不惑境】网络宽度对模型性能有什么影响?
  4. python实现字典树 时间复杂度_Python实现字典树
  5. matlab用高斯消元法解线性方程组,用matlab利用高斯消元法求解线性方程组
  6. Xcode 4.2 中的Automatic Reference Counting (ARC) (转)
  7. Django之ModelForm详解
  8. 洛谷题解 P1005 【矩阵取数游戏】
  9. 计算机网络实验报告3-tcp,计算机网络实验报告3 TCP
  10. HTML跳转到QQ聊天界面
  11. 小学计算机说课稿模板,获奖小学信息技术说课稿模板
  12. icp光谱仪的工作原理_ICP的工作原理
  13. Matlab模糊综合评价做空气质量经典例题
  14. PHP: Fatal error:Call to undefined function com_create_guid()
  15. [经验教程]拼多多退店保证金多久到账 拼多多退店正确操作35天内保证金到账
  16. C语言开发必会 宏定义、宏函数
  17. pion ice项目源码分析
  18. GaussDB ETCD 服务异常实例分析处理的5种方法
  19. volatile能保证原子性吗?
  20. java ftp输出流_java输出流实现文件下载

热门文章

  1. 黎曼曲面Riemann Surface
  2. Pytorch和CNN图像分类
  3. Dalvik虚拟机与java虚拟机的区别
  4. 客快物流大数据项目(五):Docker介绍
  5. android studio 常量表达式错误
  6. nodejs静态web服务
  7. React接入Sentry.js
  8. IntelliJ IDEA 教程
  9. Spring MVC-处理程序映射(Handler Mapping)-简单的Url处理程序映射(Simple Url Handler Mapping)示例(转载实践)...
  10. Linux——Linux概念架构的理解