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