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元素的内部所有子元素之后