jQuery操作DOM节点

jQuery操作DOM节点

1、新建节点

直接将HTML代码传人jQuery核心函数,如:newjqobj=$("<span>我是新增节点</span>");

2、添加节点

2.1、内部插入

将元素添加到指定元素内部的最后 $(selector).append(newjqobj); $(selector).appendTo(oldjqobj);

将元素添加到指定元素内部的最前面 $(selector).prepend(newjqobj); newjqobj.prependTo($(selector));

2.2、外部插入

将元素添加到指定元素外部的后面 $(selector).after(newjqobj); newjqobj.insertAfter($(selector));

将元素添加到指定元素外部的前面 $(selector).before(newjqobj); newjqobj.insertBefore($(selector));

2.3、同一个新建节点被执行多次插入操作时,以最后一次插入为准。

3、删除节点

3.1、删除指定元素:jqobj.remove()、jqobj.detach()

两者都可以接受一个选择器参数,当调用者是一个集合时,用于缩小删除范围,不传参则默认删除所有方法调用者。

两者都会返回调用方法的jQuery对象,而不是被删除的jQuery对象 利用remove删除之后再重新添加,原有的事件无法响应 利用detach删除之后再重新添加,原有事件可以响应

3.2、删除指定元素的内容和子元素, 指定元素自身不会被删除:jqobj.empty() 没有参数和返回值。

4、复制节点clone(true/false)

如果传入false就是浅复制, 如果传入true就是深复制,默认值为false 浅复制只会复制元素, 不会复制元素的事件,深复制会复制元素和元素的事件

5、替换节点

$(selector).replaceWith(newjqobj):将$(selector)中的所有元素替换为newjqobj newjqobj.replaceAll(selector):用newjqobj替换掉所有selector匹配到的元素

猜你喜欢

转载自www.cnblogs.com/chuanzi/p/9459104.html