DOM包裹wrap()方法
DOM包裹wrap()方法
如果要将元素用其他元素包裹起来,也就是给它增加一个父元素,针对这样的处理,JQuery提供了一个wrap方法
.wrap( wrappingElement ):在集合中匹配的每个元素周围包裹一个HTML结构
简单的看一段代码:
<p>p元素</p>
给p元素增加一个div包裹
$('p').wrap('<div></div>')
最后的结构,p元素增加了一个父div的结构
<div><p>p元素</p> </div>
.wrap( function ) :一个回调函数,返回用于包裹匹配元素的 HTML 内容或 jQuery 对象
使用后的效果与直接传递参数是一样,只不过可以把代码写在函数体内部,写法不同而已
以第一个案例为例:
$('p').wrap(function() {return '<div></div>'; //与第一种类似,只是写法不一样 })
注意:
.wrap()函数可以接受任何字符串或对象,可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套了好几层深,但应该只包含一个核心的元素。每个匹配的元素都会被这种结构包裹。该方法返回原始的元素集,以便之后使用链式方法
DOM包裹unwrap()方法
我们可以通过wrap方法给选中元素增加一个包裹的父元素。相反,如果删除选中元素的父元素要如何处理 ?
jQuery提供了一个unwrap()方法 ,作用与wrap方法是相反的。将匹配元素集合的父级元素删除,保留自身(和兄弟元素,如果存在)在原来的位置。
看一段简单案例:
<div><p>p元素</p> </div>
我要删除这段代码中的div,一般常规的方法会直接通过remove或者empty方法
$('div').remove();
但是如果我还要保留内部元素p,这样就意味着需要多做很多处理,步骤相对要麻烦很多,为了更便捷,jQuery提供了unwrap方法很方便的处理了这个问题
$('p').unwrap();
找到p元素,然后调用unwrap方法,这样只会删除父辈div元素了
结果:
<p>p元素</p>
这个方法比较简单,也不接受任何参数,注意参考下案例的使用即可
DOM包裹wrapAll()方法
wrap是针对单个dom元素处理,如果要将集合中的元素用其他元素包裹起来,也就是给他们增加一个父元素,针对这样的处理,JQuery提供了一个wrapAll方法
.wrapAll( wrappingElement ):给集合中匹配的元素增加一个外面包裹HTML结构
简单的看一段代码:
<p>p元素</p> <p>p元素</p>
给所有p元素增加一个div包裹
$('p').wrapAll('<div></div>')
最后的结构,2个P元素都增加了一个父div的结构
<div><p>p元素</p><p>p元素</p> </div>
.wrapAll( function ) :一个回调函数,返回用于包裹匹配元素的 HTML 内容或 jQuery 对象
通过回调的方式可以单独处理每一个元素
以上面案例为例,
$('p').wrapAll(function() {return '<div><div/>'; })
以上的写法的结果如下,等同于warp的处理了
<div><p>p元素</p> </div> <div><p>p元素</p> </div>
注意:
.wrapAll()函数可以接受任何字符串或对象,可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套多层,但是最内层只能有一个元素。所有匹配元素将会被当作是一个整体,在这个整体的外部用指定的 HTML 结构进行包裹。
DOM包裹wrapInner()方法
如果要将合集中的元素内部所有的子元素用其他元素包裹起来,并当作指定元素的子元素,针对这样的处理,JQuery提供了一个wrapInner方法
.wrapInner( wrappingElement ):给集合中匹配的元素的内部,增加包裹的HTML结构
听起来有点绕,可以用个简单的例子描述下,简单的看一段代码:
<div>p元素</div> <div>p元素</div>
给所有元素增加一个p包裹
$('div').wrapInner('<p></p>')
最后的结构,匹配的di元素的内部元素被p给包裹了
<div><p>p元素</p> </div> <div><p>p元素</p> </div>
.wrapInner( function ) :允许我们用一个callback函数做参数,每次遇到匹配元素时,该函数被执行,返回一个DOM元素,jQuery对象,或者HTML片段,用来包住匹配元素的内容
以上面案例为例,
$('div').wrapInner(function() {return '<p></p>'; })
以上的写法的结果如下,等同于第一种处理了
<div><p>p元素</p> </div> <div><p>p元素</p> </div>
注意:
当通过一个选择器字符串传递给.wrapInner() 函数,其参数应该是格式正确的 HTML,并且 HTML 标签应该是被正确关闭的。
转载于:https://www.cnblogs.com/liaolijun/p/7326251.html
DOM包裹wrap()方法相关推荐
- 如何在html中选择wrap,jQuery wrap()方法怎么用?
jQuery wrap()方法怎么用?下面本篇文章给大家介绍一下jQuery wrap()方法的使用.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. jQuery wrap()方法怎 ...
- Java的包裹wrap
对于基本数据类型,Java提供了对应的包裹(wrap)类型. 包裹类型将一个基本数据类型的数据转换成对象的形式,从而使得它们可以像对象一样参与运算和传递. int i = 5这是一个基本数据类型,并不 ...
- pythonxml解析拿到控件坐标_Python解析xml中dom元素的方法
本文实例讲述了Python解析xml中dom元素的方法.共享给大家供大家参考.详细实现方法如下: 复制代码 代码如下: from xml.dom import minidom try: xmlfile ...
- javascript原生事件句柄、BOM、DOM对象属性方法总结
javascript原生事件句柄.BOM.DOM对象属性方法总结 JS事件句柄 事件句柄 类型 说明 onabort 事件句柄 图像加载被中断 onblur 事件句柄 元素失去焦点 onfocus 事 ...
- 遍历同辈节电的方法_JQuery遍历DOM节点的方法
本文实例讲述了JQuery遍历DOM节点的方法.分享给大家供大家参考.具体分析如下: 本节的核心是介绍JQuery的DOM操作,前面介绍了很多创建.删除.替换等等节点操作.这里介绍如何遍历节点,选中临 ...
- HTML DOM console.table() 方法
HTML DOM console.table() 方法
- js取iframe 上级页面_原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法...
用原生js在父页面获取iframe子页面的元素,以及在子页面获取父页面元素,这是平时经常会用到的方法,这里写一个例子来总结下: 1.父页面(demo.html),在父页面修改子页面div的背景色为灰色 ...
- JS获取DOM元素的方法
什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...
- oracle domnode释放,html DOM对象之方法cloneNode()的简介说明
摘要: 下文讲述DOM对象之方法cloneNode()的功能简介说明,如下所示: DOM cloneNode()方法简介 cloneNode()方法的功能: 将DOM选中的一个节点进行复制操作 将根据 ...
最新文章
- 软件过程与项目管理(作业一)
- 解决Mysql无法导入存在null数据的问题
- session_unset()和session_destroy()用法分析
- Hexo如何绑定个人域名
- android 插入耳机 使用自身mic录音_这样选用麦克风,耳机降噪效果会更好
- 机器人参数校准的原理
- Git 基础(十)—— 常用命令
- [SQL SERVER] 跨库查询--分布式查询
- 单片机实验一 LED灯实验
- php 支付宝退款40004,接入支付宝支付 错误码4000,排查方法——开发记录
- CITA 技术白皮书
- 破壳2周造百万销量,荣耀20系列:三个超级炸弹的“寒潮逆袭”
- 基于CNN的表情识别(FER)pytorch实现
- nginx常用配置笔记
- 七段数码管共阳(阴)极常用字形码
- 深度学习 学习笔记总结
- 强叔侃墙 NAT篇 NAT Server 三十二字真言(上篇)_实验一正一反,出入自如去反存正,自断出路
- Graph Convolutional Neural Networks for Web-Scale Recommender Systems(用于Web级推荐系统的图形卷积神经网络)
- PHP trait的使用
- 用jquery制作凡客诚品帮助中心页面