700字范文 > 【jQuery笔记Part4】01-jQuery-节点操作-添加节点-删除节点-复制节点

【jQuery笔记Part4】01-jQuery-节点操作-添加节点-删除节点-复制节点

时间：2020-08-19 17:03:06

节点操作

添加节点静态页面内部添加（父子关系）append(): 添加节点->追加到最后 (父子关系)appendTo(tag): 把创建的节点添加到指定节点之后(父子关系)prepend() 添加结点->追加到最前面 (父子关系)prependTo(tag) 把创建的结点添加到指定结点之前(父子关系)外部添加（兄弟关系）after() 把指定结点添加到指定元素之后(属于兄弟关系)insertAfter(tag) 把指定元素添加到指定元素之前(兄弟关系)before() 把指定结点添加到指定元素之前(兄弟关系)insertBefore(tag) 把指定元素添加到指定元素之后(兄弟关系)注意点一个节点对象只能被添加到一个地方节点对象可以是 js 对象也可以是 jQuery 对象删除节点静态页面remove() 把指定的节点删除empty() 清空选择元素当中的所有内容利用 html('') 清空内容替换&复制节点静态页面tag1.replaceWith(tag2) 把tag1标签替换为tag2标签tag.clone(varBool) 复制tag标签浅复制 false：只复制标签，不复制事件深复制 true：事件一起复制

jQuery笔记目录

添加节点

静态页面

html 小技巧：ul.green>li{green$}*10

可以快速实现：

<ul class="green"><li>green1</li><li>green2</li><li>green3</li><li>green4</li><li>green5</li><li>green6</li><li>green7</li><li>green8</li><li>green9</li><li>green10</li></ul>

首先搭建示例页面：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.box{width: 300px;margin: 100px auto;border: 1px solid orange;}.red{background-color: red;}.green{background-color: green;}</style></head><body><div class="box"><ul class="red"><li>red1</li><li>red2</li><li>red3</li><li>red4</li><li>red5</li><li>red6</li><li>red7</li><li>red8</li><li>red9</li><li>red10</li></ul><ul class="green"><li>green1</li><li>green2</li><li>green3</li><li>green4</li><li>green5</li><li>green6</li><li>green7</li><li>green8</li><li>green9</li><li>green10</li></ul></div></body></html>

运行效果：

内部添加（父子关系）

append(): 添加节点->追加到最后 (父子关系)

语法格式：$('ul').append(tag);

var $newTag = $('<li>新增节点</li>');$('.red').append($newTag); // 父子关系

运行效果：

appendTo(tag): 把创建的节点添加到指定节点之后(父子关系)

语法格式：$(tag).appendTo('li');

var $newTag = $('<li>新增节点</li>');$newTag.appendTo('.red'); // 父子关系

运行效果：与上面 append() 运行效果相同。

prepend() 添加结点->追加到最前面 (父子关系)

语法格式：$('ul').prepend(tag);

var $newTag = $('<li>新增节点</li>');$('.red').prepend($newTag);

运行效果：

prependTo(tag) 把创建的结点添加到指定结点之前(父子关系)

语法格式：$(tag).prependTo('li');

var $newTag = $('<li>新增标签</li>');$newTag.prependTo('.red');

运行效果：与上面 prepend() 运行效果相同。

外部添加（兄弟关系）

after() 把指定结点添加到指定元素之后(属于兄弟关系)

语法格式：$('ul').after(tag);

var $newTag = $('<li>新增节点</li>');$('.red').after($newTag);

运行效果：

insertAfter(tag) 把指定元素添加到指定元素之前(兄弟关系)

语法格式：$('li:first').insertAfter($('li:last'));

var $newTag = $('<li>新增节点</li>');$newTag.insertAfter($('.red'));

运行效果：与上面 after() 运行效果相同。

before() 把指定结点添加到指定元素之前(兄弟关系)

语法格式：$('ul').before(tag);

var $newTag = $('<li>新增节点</li>');$('.red').before($newTag);

运行效果：

insertBefore(tag) 把指定元素添加到指定元素之后(兄弟关系)

语法格式：$('li:last').insertBefore($('li:first'));

var $newTag = $('<li>新增节点</li>');$newTag.insertBefore($('.red'));

运行效果：与上面的 before() 运行效果相同。

注意点

一个节点对象只能被添加到一个地方

如果对一个节点对象执行多次操作，后面的操作会把前面的操作覆盖掉。

var $newTag = $('<li>新增节点</li>');$('.red').append($newTag); // 添加到红色区域后面// 由于操作的是同一个对象 $newTag，所以下面的操作会把上面的给覆盖掉$('.red').prepend($newTag); // 添加到红色区域前面

运行效果：

节点对象可以是 js 对象也可以是 jQuery 对象

var $newTag = $('<li>新增节点</li>');$newTag.insertBefore('.red'); // js对象$newTag.insertBefore($('.red')); // jq对象

以上两种写法都可以运行，且效果相同：

删除节点

静态页面

搭建示例页面：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.box{width: 300px;margin: 100px auto;border: 1px solid orange;}.red{background-color: red;}.green{background-color: green;}</style></head><body><div class="box"><ul class="red"><li>red1<input type="date"><span>撩课学院</span></li><li>red2</li><li>red3</li><li>red4</li><li>red5</li><li>red6</li><li>red7</li><li>red8</li><li>red9</li><li>red10</li></ul><ul class="green"><li>green1</li><li>green2</li><li>green3</li><li>green4</li><li>green5</li><li>green6</li><li>green7</li><li>green8</li><li>green9</li><li>green10</li></ul></div></body></html>

运行效果：

remove() 把指定的节点删除

将选择的标签包括本身全部删除。

语法格式：$(tag).remove()

$('.red>li:first').remove(); // 连 li 标签一起删除

运行效果：

empty() 清空选择元素当中的所有内容

内部有标签就连标签一起清空；没有标签，直接清空文字。但是会留下选择的标签。

语法格式：$(tag).empty()

$('.red>li:first').empty() // 清空标签内容，留下 li 标签

运行效果：

利用 html(’’) 清空内容

同样也可以达到清空内容的效果，与 empty() 相同

语法格式：$(tag).html('')

$('.red>li:first').html(''); // 与 empty() 效果相同

运行效果：与上面的 empty() 运行效果相同。

替换&复制节点

静态页面

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>p{height: 40px;background: green;margin: 10px;}</style></head><body><p><input type="date"><span>喜欢IT，就上撩课()</span></p></body></html>

运行效果：

tag1.replaceWith(tag2) 把tag1标签替换为tag2标签

$(document).click(function () {// 点击整个页面// 替换节点var $newTag = $('<h1>哈哈哈</h1>');$('p').replaceWith($newTag);})

运行效果：点击整个页面时，原本的标签被替换。

tag.clone(varBool) 复制tag标签

参数说明:

当参数为 false 时代表只复制标签，不包括标签绑定的事件，浅复制。当参数为 true 时代表不仅复制标签，连同里面的事件一起复制，深复制。如果没有传递参数，代表为false。

浅复制 false：只复制标签，不复制事件

浅复制，只复制标签，不复制事件

$(document).click(function () {// 点击整个页面$('p:first').click(function (event) {event.stopPropagation(); // 阻止冒泡，只跳出弹框，不复制标签alert('哈哈哈哈');})// 复制节点(浅复制)var $newTag = $('p:first').clone(); // 浅复制，只复制标签，不复制事件$('body').append($newTag);})

运行效果：点击除了第一行标签以外的地方都会复制出一个新的标签，由于是浅复制，复制出来的标签是没有事件处理的，所以点击复制的标签不会弹框。

点击第一行的标签（非复制），则跳出窗口提示。

深复制 true：事件一起复制

深复制，事件一起复制。

$('p:first').click(function (event) {event.stopPropagation(); // 阻止冒泡，只跳出弹框，不复制标签alert('哈哈哈哈');})$(document).click(function () {// 点击整个页面// 复制节点(深复制)var $newTag = $('p:first').clone(true); // 深复制，事件一起复制$('body').append($newTag);})

运行效果：

由于是深复制，复制的标签依旧有事件处理。所以点击任意一个复制的标签，都会跳出弹框。

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。