jQuery对节点的增删改查和一些常用的逻辑处理

1,jQuery常用的删除节点方法

$(selector).remove([selector]);

这个方法会删除选择器所选中的节点,该方法会返回一个类型为删除的jQuery节点的对象。如果还想使用这个节点,可以赋值给一个新的节点继续使用。但要注意的是这个方法返回的对象除了节点本身保留之外,其他如绑定的事件,附加的数据都会删除。

如果只是想单纯的移动节点,可以将节点赋值再获取节点对象.after(节点对象)来添加。

$(selector).detach([selector]);

这个方法也会删除选择器所选中的节点,但是和remove()的区别就是不会删除绑定的事件和附加的数据,

$(selector).empty();

该方法会删除选择器所选中的节点下的所有子节点,选择器所选中的子节点本身不会清空且没有返回值。

2,替换节点

顾名思义就是拿一个或一类节点替换一个或者一类节点

$("<h1>hello</h1>").replaceAll("<h1></h1>")

将<h1>hello</h1>变为<h1></h1>

也可以使用

$("<h1></h1>").replacewith("<h1>hello</h1>")

使用前面的替换后面的。

两个方法使用的结果完全相同,只是颠倒了顺序。

3,插入节点

内部插入:

var myNode=$("<h1>hello</h1>")

$("div").append(myNode);

在div标签最后插入一行文字。需要注意的是这是插入在div标签里面的。上面的代码等同于

$(selector).append("<h1>hello</h1>");

如果想要在指定节点里插入

$("div:eq(1)).append(content) 向页面中的第二个div标签内插入一个新的节点(在末尾)

$(content).addendTo(selector);将节点追加到另一个指定节点的末尾

$(selector).prepend(content),;将节点追加到另一个指定节点的头部 (相同的也有prependTo()方法)

外部插入:

内部插入的新节点和目标节点是父子关系

外部插入的新节点是目标节点的兄弟关系

$(selector).after(content);

在指定节点闭合后插入节点

$(content).insertAfter(selector);(和after方法一样。。。又是颠倒)

$(selector).before(content);

在指定节点开始前插入节点

$(content).insertBefore(selector);(懒得讲了。。。。。)

2,在DOM对象加载完成之后通常要为某些节点添加一些事件或者执行一些方法。js里用的就是onload().但是在jQuery框架里可以使用$(function(){      方法体  })来执行。

3,如果不适用form对象传统的发送数据就是根据id获取固定节点的值再通过ajax发送给后端

比如<input id="mybtn" value="hello"/>

var id=$("#mybtn").val();

此时就可以获得固定节点的值。

不和别人一样,不复制只真正理解
原文地址:https://www.cnblogs.com/Vinlen/p/12704935.html