jQuery中的DOM操作------复制及包裹节点
2016-07-11 08:23
676 查看
1、复制节点:
如果单击<li>元素后需要再复制一个<li>元素,可以用clone()方法来完成:
$(this).clone().appendTo("ul");
复制节点后,被复制的新元素不具有任何行为,如果需要新元素也具有复制功能,可以这么写:
$(this).clone(true).appendTo("ul");
2、包裹节点:wrap()&warpAll()&wrapInner()
如下代码:
<strong title="add your choice 1">Add your choice 1</strong>
<strong title="add your choice 2">Add your choice 2</strong>
(1)$("strong").wrap("<b></b>");
<b><strong title="add your choice 1">Add your choice 1</strong></b>
<b><strong title="add your choice 2">Add your choice 2</strong></b>
(2)$("strong").wrapAll("<b></b>");
<b>
<strong title="add your choice 1">Add your choice 1</strong>
<strong title="add your choice 2">Add your choice 2</strong>
</b>
(3)$("strong").wrapInner("<b></b>");
<strong title="add your choice 1"><b>Add your choice 1</b></strong>
<strong title="add your choice 2"><b>Add your choice 2</b></strong>
3、parent(),parents(),closest()的区别:
1)parent(): 获得集合中每个匹配元素的父级元素,从指定类型的直接父节点开始查找,返回一个元素节点;
2)parents(): 获得集合中每个匹配元素的祖先元素,当它找到第一个父级节点时,不停止查找,而是继续查找,最后返回多个父节点;
3)closest(): 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素。 从包含自身的节点找起,同parents()类似,只返回匹配的第一个元素节点。
如果单击<li>元素后需要再复制一个<li>元素,可以用clone()方法来完成:
$(this).clone().appendTo("ul");
复制节点后,被复制的新元素不具有任何行为,如果需要新元素也具有复制功能,可以这么写:
$(this).clone(true).appendTo("ul");
2、包裹节点:wrap()&warpAll()&wrapInner()
如下代码:
<strong title="add your choice 1">Add your choice 1</strong>
<strong title="add your choice 2">Add your choice 2</strong>
(1)$("strong").wrap("<b></b>");
<b><strong title="add your choice 1">Add your choice 1</strong></b>
<b><strong title="add your choice 2">Add your choice 2</strong></b>
(2)$("strong").wrapAll("<b></b>");
<b>
<strong title="add your choice 1">Add your choice 1</strong>
<strong title="add your choice 2">Add your choice 2</strong>
</b>
(3)$("strong").wrapInner("<b></b>");
<strong title="add your choice 1"><b>Add your choice 1</b></strong>
<strong title="add your choice 2"><b>Add your choice 2</b></strong>
3、parent(),parents(),closest()的区别:
1)parent(): 获得集合中每个匹配元素的父级元素,从指定类型的直接父节点开始查找,返回一个元素节点;
2)parents(): 获得集合中每个匹配元素的祖先元素,当它找到第一个父级节点时,不停止查找,而是继续查找,最后返回多个父节点;
3)closest(): 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素。 从包含自身的节点找起,同parents()类似,只返回匹配的第一个元素节点。
相关文章推荐
- jQuery选择器概述
- jQuery 3.0 的 setter/getter 模式
- jquery 控制 select 选中
- JQuery中,.val()与 .attr("","");的区别,以及placeholder与value冲突
- JQuery循环取出checkbox选中的值
- 根据JQuery开发自定义插件。
- jquery获取select 选中的options
- jquery 插件开发
- jquery清空表单数据
- jquery源码
- jQuery选择器大全
- jQuery+PHP+Mysql在线拍照和在线浏览照片
- 使用JQuery结合HIghcharts实现从后台获取JSON实时刷新图表
- jQuery中$.fn的用法示例介绍
- JQuery阻止事件冒泡
- jquery highcharts组件--纵向柱状图标实例
- jquery图表插件highcharts使用
- jquery动态合并表格行
- jQuery事件函数
- 16款最佳的 jQuery Time Picker 时间选择插件