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匹配到的元素