JQuery学习记录(三):jquery对页面DOM节点的操作

使用JS来操作DOM节点的朋友都会有一个体会,实在是有点烦,要写上一大堆代码,才能实现一个简单功能,如JS获取一个input元素:document.getElementsByTagName('input'),而jquery获取input元素:$("input") 就可以获取到input。jquery在创建、获取、插入、修改DOM节点元素上的操作要比原始JS代码简单的多。一起来体会一下吧。

本文来自小莫扎特博客www.plusminustsuchi.com 提供

一、创建节点 本文来自小莫扎特博客www.plusminustsuchi.com 提供

真接创建一个节点,代码如下:

本文来自小莫扎特博客www.plusminustsuchi.com 提供

var box = $('<div id="box">节点</div>');

本文来自小莫扎特博客www.plusminustsuchi.com 提供

二、插入节点

本文来自小莫扎特博客www.plusminustsuchi.com 提供

向div内部插入strong节点

本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('div').append('<strong>节点</strong>');

本文来自小莫扎特博客www.plusminustsuchi.com 提供

使用匿名函数插入节点

本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('div').append(function (index, html) {
return '<strong>节点</strong>';
})

本文来自小莫扎特博客www.plusminustsuchi.com 提供

将 span 节点移入div节点内 本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('span').appendTo('div');

本文来自小莫扎特博客www.plusminustsuchi.com 提供

将 span 插入到 div 内部的前面

本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('div').prepend('<span>节点</span>') 本文来自小莫扎特博客www.plusminustsuchi.com 提供

将 span 移入 div 内部的前面

本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('span').prependTo('div');

本文来自小莫扎特博客www.plusminustsuchi.com 提供

向 div 的同级节点后面插入 span 本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('div').after('<span>节点</span>');

本文来自小莫扎特博客www.plusminustsuchi.com 提供

向 div 的同级节点前面插入 span 本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('div').before('<span>节点</span>');

本文来自小莫扎特博客www.plusminustsuchi.com 提供

将 span 元素移到 div 元素外部的后面 本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('span').insertAfter('div');

本文来自小莫扎特博客www.plusminustsuchi.com 提供

将 span 元素移到 div 元素外部的前面

本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('span').insertBefore('div');

本文来自小莫扎特博客www.plusminustsuchi.com 提供

三、包裹节点 本文来自小莫扎特博客www.plusminustsuchi.com 提供

在 div 外层包裹一层 strong 本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('div').wrap('<strong></strong>');

本文来自小莫扎特博客www.plusminustsuchi.com 提供

包裹一个原生 DOM

本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('div').wrap($('strong').get(0)); 本文来自小莫扎特博客www.plusminustsuchi.com 提供

包裹临时的原生 DOM

本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('div').wrap(document.createElement('strong')); 本文来自小莫扎特博客www.plusminustsuchi.com 提供

移除一层包裹,多个需移除多次 本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('div').unwrap(); 本文来自小莫扎特博客www.plusminustsuchi.com 提供

所有 div 外面只包一层 strong 本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('div').wrapAll('<strong></strong>');

本文来自小莫扎特博客www.plusminustsuchi.com 提供

包裹子元素内容

本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('div').wrapInner('<strong></strong>');

本文来自小莫扎特博客www.plusminustsuchi.com 提供

四、节点操作

本文来自小莫扎特博客www.plusminustsuchi.com 提供

复制节点不复制事件 本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('body').append($('div').clone()); 本文来自小莫扎特博客www.plusminustsuchi.com 提供

复制节点并复制事件 本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('body').append($('div').clone(true));

本文来自小莫扎特博客www.plusminustsuchi.com 提供

删除节点不保留事件

本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('div').remove(); 本文来自小莫扎特博客www.plusminustsuchi.com 提供

只删除 id=box 的 div。 本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('div').remove('#box');

本文来自小莫扎特博客www.plusminustsuchi.com 提供

删除节点但保留事件

本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('div').detach(); 本文来自小莫扎特博客www.plusminustsuchi.com 提供

清空节点,删除节点里的 本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('div').empty(); 本文来自小莫扎特博客www.plusminustsuchi.com 提供

将 div 替换成 span 元素 本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('div').replaceWith('<span>节点</span>'); 本文来自小莫扎特博客www.plusminustsuchi.com 提供

用span替换div节点

本文来自小莫扎特博客www.plusminustsuchi.com 提供

$('<span>节点</span>').replaceAll('div');

本文来自小莫扎特博客www.plusminustsuchi.com 提供

注意:.remove()和.detach()都是删除节点,而删除后本身方法可以返回当前被删除的节点对象,但区别在于前者在恢复时不保留事件行为,后者则保留。在连缀方法时就可以体现出来。

本文来自小莫扎特博客www.plusminustsuchi.com 提供



内容版权声明:以上内容均为转载,如有侵犯原作者请联系删除!