jQuery进行DOM操作记录

1.在元素内部插入DOM元素

①插入到元素内部原有元素之后

append(content) 返回值:jQuery 参数-content:要插入的元素String,Element,jQuery

为每一个匹配的元素内添加一些元素,参数既可以是字符串也可以是jQuery对象,如下:

$("#1").append("input type='button' value='确定'/>") 在1的内部元素的后面添加一个按钮

$("#1").append($(".class")[0]) 在1的内部元素的后面添加css类为class的元素集中的第一个元素

appendTo(content) 返回值:jQuery 参数-content:被插入的元素StringElement,jQuery

把所有匹配的元素添加到指定的元素内,参数既可以是字符串也可以是jQuery对象,如下:

$("#1").appendTo($("#2")) 在2的内部元素的后面添加1

②插入到元素内部原有元素之前

prepend(content) 返回值:jQuery 参数-content:要插入的元素String,Element,jQuery

prependTo(content) 返回值:jQuery 参数-content:要插入的元素String,Element,jQuery

它们分别与append(content)和appendTo(content)的用法一致,但区别是它们是在被插元素的内部元素之前插入元素

以上函数都只能匹配div等容器性质的元素,因为这些函数是为匹配元素内部添加元素,如一下给input添加元素会出错,因为input不能包含元素

$("input").append("ABC");

2.在元素外部插入DOM元素

①插入到元素外部之后

after(content) 返回值:jQuery 参数-content:要插入的元素String,Element,jQuery

为每一个匹配的元素后面添加一些元素,参数既可以是字符串也可以是jQuery对象

insertAfter(content) 返回值:jQuery 参数-content:要插入的元素String,Element,jQuery

把所有匹配的元素添加到指定的元素后面

$("#1").after($("#2")) 把2添加到1后面 $("#1").insertAfter($("#2")) 把1添加到2后面

②插入到元素外部之前

before(content) 返回值:jQuery 参数-content:要插入的元素String,Element,jQuery

insertBefore(content) 返回值:jQuery 参数-content:要插入的元素String,Element,jQuery

它们分别与after(content)和insertAfter(content)的用法一致,但区别是它们是在被插元素的外部之前插入元素

3.包裹DOM元素

①包裹外部元素

wrap(content) 返回值:jQuery 参数-content:包裹元素的元素Element,String,jQuery

为每一个匹配的元素外面包上一层元素

$(".1").wrap("#2") 为css类是1的元素外面包上2元素 $(".1").wrap("<div class='3'></div>") 包上<div>

wrapAll(content) 返回值:jQuery 参数-content:包裹元素的元素Element,String,jQuery

为所有匹配元素只在他们外面包裹一个元素

$(".1").wrapAll("<div class='3'></div>") 为所有css类是1的元素外面只包一层<div>

②包裹内部元素

wrapInner(content) 返回值:jQuery 参数-content:包裹元素的元素Element,String,jQuery

为每一个匹配元素内的所有子元素外部包一层元素

4.替换DOM元素

replaceAll(selector) 返回值:jQuery 参数-selector:被替换的元素Element,jQuery

用匹配的元素替换掉所有selector匹配的元素

$("#1").replaceAll(".class") 用1替换掉所有css类是class的元素

replaceWith(content) 返回值:jQuery 参数-content:用来替换的元素String,Element,jQuery

将所有匹配的元素用指定的HTML或DOM元素替换

$(".class").replaceWith("#1") 用1替换掉所有css类是class的元素

$(".class").replaceWith("<div class='3'></div>") 用div替换掉所有css类是class的元素

5.删除DOM元素

empty() 返回值:jQuery 删除所有匹配元素的内容,只是内容,还剩架子

remove(expr) 返回值:jQuery 参数-expr:筛选元素的表达式String 删除所有匹配的DOM元素

6.克隆DOM元素

clone(true) 返回值:jQuery 参数-true:是否将被克隆的元素的所有事件也克隆到新的元素上

$("#1").clone(true).appendTo("#2")

将1连其绑定的事件一起克隆,然后将克隆的新元素添加到2元素的内部所有子元素之后