jQuery文档操作-DOM插入操作-元素周围
来源:互联网 发布:淘宝卖东西交保证金 编辑:程序博客网 时间:2024/05/17 23:29
从DOM中移除匹配元素的父元素,将匹配的元素放置在他们的地方
.unwrap()
这个方法不接受任何参数。
.unwrap()方法移除元素的父元素。这是.wrap()的相反的方法。匹配的元素(和他们的兄弟元素,如果有)在DOM结构中替换他们的父元素。
.wrap()
使用htm结构来包裹每一个匹配的元素
.wrap(wrappingElement)
.wrap(function(index))
wrappingElement
类型是字符串,选择器,元素,jQuery对象。
一个HTML片段,选择器表达式,jQuery对象或者DOM元素指定结构来包裹在匹配元素的周围。
function(index)
类型是函数。
一个回调函数返回HTML的内容或者jQuery对象来包裹在匹配元素的周围。接受在集合中的元素的索引位置。在这个函数中,this指向集合中的当前元素。
.wrap()方法能够接收任何字符串或者对象来指定DOM结构。这个结构也许会嵌套多层,但最深层元素只能有一个。这个方法会返回原始元素的集合来做链式的使用。
如下html:
<div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div></div>
使用.wrap(),我们能在inner <div>元素周围插入html结构,像这样:
$('.inner').wrap('<div class="new" />');
这样,这个新的<div>元素被动态创建,并且添加到DOM中。得到的结果是新的<div>会包裹每个匹配的元素:
<div class="container"> <div class="new"> <div class="inner">Hello</div> </div> <div class="new"> <div class="inner">Goodbye</div> </div></div>
这个方法的第二种的形式,允许我们指定一个回调函数。这个回调函数会为每一个匹配的元素调用一次。它应该返回一个DOM元素,jQuery对象,或者HTMl片段来包裹对应的元素。比如:
$('.inner').wrap(function() { return '<div class="' + $(this).text() + '" />';});
会有如下结果,每一个inner <div>会被和有自己text值对应的class 的div包裹:
<div class="container"> <div class="Hello"> <div class="inner">Hello</div> </div> <div class="Goodbye"> <div class="inner">Goodbye</div> </div></div>
.wrapAll()
给匹配的所有元素包裹html结构
.wrapAll(wrappingElement)
wrappingElement
类型是字符串,选择器,元素,jQuery对象
一个HTML片段,选择器表达式,jQuery对象或者DOM元素指定结构包裹在匹配元素的周围。
.warapAll()方法能够接收任何字符串或者对象来指定DOM结构。这个结构也许会嵌套多层,但最深层元素只能有一个。这个结构,将会包裹匹配集合的所有元素,作为一个单独的一组。
如下代码:
<div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div></div>
使用.warpAll(),我们能够在inner <div>元素周围插入HTML结构
$('.inner').wrapAll('<div class="new" />');
这个new <div>元素被动态的创建,并添加到了DOM上。结果是这个<div>元素包裹了所有匹配元素:
<div class="container"> <div class="new"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div></div>
.wrapInner()
给匹配元素中的每一个元素包裹元素的内容
.wrapInner(wrappingElement)
.wrapInner(function(index))
wrappingElement
类型是字符串。
一个HTML片段,选择器表达式,jQuery对象或者DOM元素指定结构包裹在匹配元素的内容的周围。
function(index)
类型是函数。
一个回调函数生成一个结构包裹在匹配元素内容额周围。接受做为参数的在集合中元素的索引位置。在这个函数中,this指向集合中当前的元素。
.wrapInner()方法能够接收任何字符串或者对象来指定DOM结构。这个结构也许会嵌套多层,但最深层元素只能有一个。这个结构会包裹每个匹配元素的内容。
如下html:
<div class="container"> <div class="inner">Hello</div>//inner <div class="inner">Goodbye</div></div>
使用.wrapInner(),我们能在每一个inner<div>的内容周围插入一个html结构
$('.inner').wrapInner('<div class="new" />');
这个new <div>元素被动态的创建,并添加到了DOM中。结果是这个<div>包裹了每个匹配元素内容的周围:
<div class="container"> <div class="inner"> <div class="new">Hello</div>//new </div> <div class="inner"> <div class="new">Goodbye</div>//new </div></div>
这个方法的第二种形式允许我们指定一个回调函数。这个回调函数会为每一个匹配的元素调用一次。它应该返回一个DOM元素,jQuery对象,或者HTMl片段来包裹对应的元素的内容。比如:
$('.inner').wrapInner(function() { return '<div class="' + this.nodeValue + '" />';});
这样会产生每个inner div的text被class和text对应的div包裹:
<div class="container"> <div class="inner"> <div class="Hello">Hello</div> </div> <div class="inner"> <div class="Goodbye">Goodbye</div> </div></div>
Note:当给.wrapInner()函数传递一个字符串选择器时,需要输入是有正确的结束标签的完整的HTML。合法的输入的例子:
$(elem).wrapInner("<div class='test' />");$(elem).wrapInner("<div class='test'></div>");$(elem).wrapInner("<div class=\"test\"></div>");
- jQuery文档操作-DOM插入操作-元素周围
- jQuery文档操作-DOM插入操作-元素内部
- jQuery文档操作-DOM插入操作-元素外部
- jquery随记(DOM操作)----插入元素
- JQuery DOM元素操作
- jquery 操作dom元素
- jQuery操作DOM元素
- JQuery操作DOM元素
- jQuery 操作DOM元素
- jQuery操作DOM元素
- jQuery操作DOM元素
- jQuery操作DOM元素
- jQuery操作DOM元素
- jQuery操作DOM元素
- jQuery 操作DOM元素
- 37、实例 使用jQuery操作DOM之插入元素
- jquery dom 文档对象操作,插入,删除,克隆,替换
- jquery对DOM元素操作
- 使用自适应阈值和支持动态区域的曲率尺度空间角点检测(理论)
- VS2008利用MPIR使用GMP
- LDD读书笔记——并发与竞态
- 【Boost】boost库中thread多线程详解4——谈谈recursive_mutex(递归式互斥量)
- Android错误二
- jQuery文档操作-DOM插入操作-元素周围
- 我浅浅驻足,徒留深深缠绵
- 树状数组
- ORACLE中dual的使用和详解
- Archie OSG Step By Step④ MFC+OSG添加事件
- storm-trident源码学习
- 希尔排序
- C# BackgroundWorker的使用
- error while loading shared libraries 错误解决办法总结,