5.3.5 wrap
prk/彭仁夔 08-08-24
Jquery的wrap的系列的函数可以说是dom元素操作中较为复杂的方法。它提供,wrapAll,wrapInner,wrap三种方法。
wrapAll是把jquery对象中所有元素都包裹在给定的元素最内部元素中(firstChild)。这个包裹之后的元素在jquery对象第一个元素的位置之前。同时会把所有其它位置的元素都去掉。也就是说wrapAll最好是不要多个元素。因为多个元素就不太像wrapAll。
// ***************************************************************
// 一组用于元素标签包裹操作的函数
// 将所有匹配的元素用单个元素包裹起来
// 这个函数的原理是检查提供的第一个元素并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包装元素。
// 这于 '.wrap()' 是不同的,'.wrap()'为每一个匹配的元素都包裹一次。
wrapAll : function(html) {
if (this[0])
/*
* html的内容:<p>Hello</p> xxxxxx <p>cruel</p> xxxxxxx <p>World</p>。
* $("p").wrapAll("<div><b></b></div>");它调用wrapAll()。
* 当前jQuery对象(称为A,$("p"))的集合有三个元素:<p>Hello</p>、
* <p>cruel</p>、<p>World</p>
* 开始:jQuery(html, this[0].ownerDocument)把html生成Dom对象
* (通过调用clean)。
* 第一步:复制生成一个jQuery对象(称为B)。B的集合中有一个元素,其为:
* <div><b></b></div>的元素。
* 第二步:把B所有的元素都插在A[0]元素Dom结构之前,A[0]元素没有变,
* 新的DOm:<div><b></b></div><p>Hello</p>
* 第三步:找到B对象中所有元素的最内面的节点,如<div><b></b></div>。
* <b></b>是B中元素最inner Node;
* 第四步:向所有innerNode内部插入A对象的所有元素,得到
* <div><b><p>Hello</p><p>cruel</p><p>World</p></b></div>
*
* 如果是html是selector的话,那就只能是一个元素了。如果是传入的参数是数组,
* jquery对象,那么可能会有多个元素了。
* 比如 $("p").wrapAll($("td"));那就是在所有td元素的最内部节点插入:
* <p>Hello</p><p>cruel</p><p>World</p>
* If child is a reference to an existing node in the document,
* appendChild moves it from its current position to the new position 。
*
* 对元素进行wrap,最好还是只有this[0].因为如果有多个不同的引用,
* 会导致其它地方的元素的move。
*/
jQuery(html, this[0].ownerDocument).clone().insertBefore(this[0])
.map(function() {// 找到当前元素的最下层的子节点,map新构成jquery对象。
var elem = this;
while (elem.firstChild)
elem = elem.firstChild;
return elem;
}).append(this);// this指是调用wrapAll的jQuery对象。
return this;
},
// 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
wrapInner : function(html) {
/*
* <p>Hello</p><p>cruel</p><p>World</p>
* $("p").wrapInner("<b></b>");
* <p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p>
*/
return this.each(function() {
// 这里包裹的对象是每个元素的对象的contents()
//每一个元素的所有的子节点,且构建于jquery对象。
jQuery(this).contents().wrapAll(html);
});
},
// 对于当前的jquery对象的每个元素都执行wrapAll(html)
wrap : function(html) {
//与inner不同的是当前的节点。
return this.each(function() {// 这里包裹的对象是每个元素的对象
jQuery(this).wrapAll(html);
});
},
比较三个方法的不同之处。Wrap是对每一个元素都进行wrapAll的操作,也就是把每一个元素都包裹在给定的标签中。wrapInner则是把其每个元素的所有的子元素们进行wrapAll的操作。尽管元素的子元素有多个,但是连续的。在子元素的第一个位置之前插入传入的参数标签,之后把这些连续的子元素全部都移到参数标签的内部。可以看作是一种wrap。但是对于不连续的wrapALL就不一定,一般使用时,建议只要采用wrap和wrapInner就可以了。
分享到:
相关推荐
今晚看书的时候发现jQuery有三个包裹节点的方法,百度了一下jQuery wrap() / wrapAll() / wrapInner(),果然搜索结果 W3School的文档说明是排第一的。 可是,W3School的解释是这样的: jQuery 文档操作 – wrap() ...
jQueryObject.wrap( wrapper ) 参数 wrapper String/Element/jQuery/Function类型用于包裹匹配元素的节点。 如果参数wrapper为字符串,则将其视作jQuery选择器或html字符串,jQuery会自行判断。 jQuery 1.4 新增...
wrap()能够将指定HTML元素包裹DOM结构,与之相反unwrap()函数则是将DOM去掉^^下面让我们来以两个小例子轻松掌握jQuery中wrap()与unwrap()函数的用法:)
用法jQuery中的wrap()函数操作HTML元素的教程_.docx
2.1 jQuery 核心函数 17 2.1.1 jQuery(expression, [context]) 17 2.1.2 jQuery(html, [ownerDocument]) 18 2.1.3 jQuery(html, props) 19 2.1.4 jQuery(elements) 20 2.1.5 jQuery() 20 2.1.6 jQuery(callback) 21 ...
手机wrap网站切换效果不错的jquery.mobile手机网站模板本资源系百度网盘分享地址
jQuery 重复表单字段。保证表单字段的 name 及 ID 递增。... wrapperHtml: " class='repeater-wrap'></div>" //HTML for an element to wrap all repeatable sections in. }); 标签:jquery
wrap(html|ele|fn) unwrap() wrapall(html|ele) wrapInner(html|ele|fn) 替换 replaceWith(content|fn) replaceAll(selector) 删除 empty() remove([expr]) detach([expr]) 复制 clone([Even[,deepEven]...
$.wrap( wrappingElement ), .wrap( fn ) $.wrapAll(wrappingElement ), .wrapAll( fn ) $.wrapInner( wrappingElement ), .wrapInner( fn ) Replacing $.replaceWith( content ), .replaceWith( fn ) $.replaceAll...
本文实例讲述了jquery文档操作wrap()方法。分享给大家供大家参考。具体实现方法如下: wrap()方法:是指用某个标签将某个元素包起来,即在外面多加一层标签。 代码如下:<html> <head> <title>...
jQuery详细教程,讲解很透彻, 一. jQuery 语法实例 $(this).hide() 演示 jQuery hide() 函数,隐藏当前的 HTML 元素。 $("#test").hide() 演示 jQuery hide() 函数,隐藏 id="test" 的元素。 $("p").hide() ...
这次我们要分享的一款jQuery插件也比较实用,是一款jQuery焦点图插件。焦点图相当普通,一共可以循环播放4张图片,并且每一张图片在切换的时候都是向下滑动的切换效果,并且在向下切换时产生弹性的动画特效,另外,...
<div class="wrap" id="jcropdiv"> <img /> <div class="jy-up-ch"> <a > </a> <a > </a> <a > </a> <a > </a> <div class="pre-1"> <img /> <div class="pre-2"> ...
wrap(html|ele|fn) unwrap() wrapAll(html|ele) wrapInner(html|ele|fn) 替换 replaceWith(content|fn) replaceAll(selector) 删除 empty() remove([expr]) detach([expr]) 复制 clone([Even[,deepEven...