关于jquery的包裹节点的简单理解 wrap() wrapAll() wrapInner()
来源:互联网 发布:网络弱电工程资质 编辑:程序博客网 时间:2024/04/28 17:12
jquery中有三种包裹节点的方法:
分别是wrap() wrapAll() wrapInner()
首先看看三种方法的定义:
wrap():将每一个匹配的元素进行包裹(一对一的单独包裹)。
wrapInner():将每一个匹配的元素的子内容用其他结构化的标记包裹起来。
wrapAll():将所有匹配的元素用一个元素包裹。
其中比较好理解的就是wrap()和wrapInner().
举两个简单的例子:
body中存在1个<em>hello world!</em>
此时分别执行$('em').wrap('<b></b>');
$('em').wrapInner('<b></b>');
得到的结果是<b><em>hello world!</em></b>
<em><b>hello world!</b></em>
wrap()是再选定元素外面包裹你设置的元素,而wrapInner()是在选定元素内部(元素的内容)包裹你设置的元素。
打一个不是很恰当的比喻:wrap(‘e’) ; e指的是你设置的元素,该元素做爸爸,而wrapInner('e'),e做儿子。
最后说一说wrapAll(); 该方法是指将所有匹配元素用一个元素包裹。
1、如果此时选定元素是这种形式:
<em>hello world!</em>
<em>hello world!</em>
<em>hello world!</em>
<em>hello world!</em>
所有的选定元素连在一起,那么wrapAll()很好理解
$('em').wrapAll('<b></b>');
得到的结果是
<b>
<em>hello world!</em>
<em>hello world!</em>
<em>hello world!</em>
<em>hello world!</em>
</b>
2、如果选定的元素是分散的或者根本不在同一级别
这种选定元素排列是分撒的
<em>hello world!</em>
<em>hello world!</em>
<strong> 你好 世界!</strong>
<em>hello world!</em>
<strong> 你好 世界!</strong>
<em>hello world!</em>
这种选定元素排列是不再同一级的
<em>hello world!</em>
<em>hello world!</em>
<p>
<strong> 你好 世界!</strong>
<em>hello world!</em>
</p>
<em>hello world!</em>
<em>hello world!</em>
如果我们此时执行$('em').wrapAll('<b></b>');
那么得到的结果是什么呢?
第一种
第二种:
3、其中还有一种情况那么就是我们选定的元素中含有子元素的时候,这时候选定元素的子元素会不会也倍抽离,答案是会的。如果子元素不抽离,文档的元素节点的层级就会发生改变,我想 儿子突然叫自己老爸一句老哥,想必谁也不能接受。
运行代码:$('b').wrapAll(‘div></div>'); 结果如下
那么根据代码执行的结果可知:
我认为可以是wrapAll()分三步走:
1、找到所有选定元素提取后按选定元素的先后顺序进行排列,其中第一个选定的元素在文档中的位置不变。(如果选定元素有后代,一并提取)。
解释下:我们所有的元素在问文档中都有个先后顺序,那么我们提取的元素,无论是多少个,那么它们的排列顺序就像在文档中原先的顺序一样,在前面的元素永远在前面,在后面的元素永远在后面,
我们选中的所有元素只有第一个元素在文档中的位置不变,其它选中的元素与其在同一级别并排列在首位元素(e:first)的后面。
2将所有匹配元素用一个元素包裹。
3、文档中剩余的元素按原先的方式进行排列,只不过其中选中的元素已经被取走了。就像例子2中p元素中的em元素。
这是一个初学jquery的初学者的一点理解,如有不对之处,请批评指正。
阅读全文
0 0
- 关于jquery的包裹节点的简单理解 wrap() wrapAll() wrapInner()
- wrap,wrapAll,wrapInner包裹节点区别
- jquery中wrap,wrapAll,wrapInner的区别
- JQuery中wrap,wrapAll,wrapInner的区别
- jquery的unwrap wrap wrapAll wrapInner的区别跟总结
- jQuery中 wrap() wrapAll() 与 wrapInner()的区别
- jQuery中 wrap() wrapAll() 与 wrapInner()的区别
- jQuery中 wrap() wrapAll() 与 wrapInner()的区别
- 浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
- 一个简单的例子说明JQuery中wrap、wrapAll、wrapInner的区别
- wrap()、wrapAll()、wrapInner()、unwrap()的区别
- jquery wrap,wrapAll,wrapInner 区别:
- jquery之设置元素内容(包裹元素,使用wrap(),wrapAll(),wrapInner()方法)
- {{jQuery源码分析}}.wrapAll,.wrapInner,.wrap方法
- Jquery中的wrap wrapAll wrapInner实战代码
- jQuery中wrap、wrapAll和wrapInner…
- wrap wrapInner wrapAll unWarp
- jQuery中wrap、wrapAll和wrapInner用法以及区别
- Echarts数据可视化tooltip提示框,开发全解+完美注释
- 重载运算符
- Python基础(七)系统编程之进程-fork
- 在Docker里从源码安装Apache
- Echarts数据可视化toolbox工具框,开发全解+完美注释
- 关于jquery的包裹节点的简单理解 wrap() wrapAll() wrapInner()
- Echarts数据可视化legend图例,开发全解+完美注释
- HDU4666 Hyperspace multiset&Manhattan距离
- web前端学习日记13------angularjs开发京东购物车
- Echarts数据可视化dataZoom,开发全解+完美注释
- 【位图】STL中bitset的使用
- 顺序栈 C语言
- (5)通过节点的层次关系获取节点对象:增删改查节点
- ORA-15001: diskgroup "DATADG01" does not exist or is not mounted