JQuery（二）DOM

创建节点：

1.$("<div></div>")：元素节点

2.$("<div>文本节点</div>") ：文本节点

3.$("<div id = 'id'>文本节点</div>") ：属性节点

内部插入：

append()：追加内容。例如：$(".content").append('<div class="append">通过append方法添加的元素</div>')

appendTo()：将要追加的内容插入到选择的对象中。例如：$('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"))

外部插入：

after()：后插入。例如：$(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>')

before()：前插入。例如：$(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>')

内部插入：

prepend()：向每个元素的内部前置内容。例如：$('.aaron1').prepend('<p>prepend增加的p元素</p>')

prependTo()：把所有匹配的元素前置到另一个指定的元素集合中。例如：$('<p>prependTo增加的p元素</p>').prependTo($('.aaron2'))

外部插入：不支持多参数

insertAfter()：在目标元素后面插入集合中每个匹配的元素。例如：$('<p style="color:red">测试insertAfter方法增加</p>').insertAfter($(".test2"))

insertBefore()：在目标元素前面插入集合中每个匹配的元素。例如：$('<p style="color:red">测试insertBefore方法增加</p>'').insertBefore($(".test1"))

清除节点：

empty()：移除指定元素中的所有子节点。例如：$("#test").empty()

remove()：移除自身元素及所有子元素。例如：$("p").remove(":contains('3')")

detach()：从当前页面中移除该元素，但保留这个元素的内存模型对象。var p = $("p").detach()

拷贝节点：

clone()：复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。

例如：$(".left").append( $(this).clone(true)) 包含true表示克隆事件，不含表示克隆节点

替换节点：

replaceWith(newContent)：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。

例如： $(".right > div:first p:eq(1)").replaceWith('<a style="color:red">replaceWith替换第二段的内容</a>')

replaceAll(target)：用集合的匹配元素替换每个目标元素。

例如：$('<a style="color:red">replaceAll替换第六段的内容</a>').replaceAll('.right > div:last p:last');

包裹节点：

warp(wrappingElement)：在集合中匹配的每个元素周围包裹一个html结构

warp(function)：一个回调函数，返回用于包裹匹配元素的HTML内容或JQuery对象

unwrap(unwrappingElement)：将匹配元素集合的父级元素删除，保留自身

unwrap(function)：一个回调函数，返回删除的父级元素

wrapAll(wrappingElement)：给集合中匹配的元素增加一个外面包裹HTML结构

wrapAll(function)：一个回调函数，返回用于包裹匹配元素的HTML内容或JQuery对象

wrapInner(wrappingElement)：给集合中匹配的元素的内部，增加包裹的html结构

wrapInner(function)：接收一个回调函数，每次遇到匹配元素时，该函数被执行，返回一个dom元素，JQuery对象，或者html片段，用来包住匹配元素的内容。

变量节点：

children(selector)：返回匹配元素集合中每个元素的子对象，selector参数 表示条件判断。例如：$('.div').children(':last').css('border', '3px solid blue')

find()：查询当前元素集合中每个元素的后代。例如： $(".left").find("li:last").css("border","1px solid blue");

parent()：返回匹配元素的父元素。

parents()：返回匹配元素的祖先元素。

closest()：返回匹配元素的父元素

next()：返回元素中紧邻的后面同辈元素的元素集合

prev()：返回元素中紧邻的前面同辈元素的元素集合

siblings()：返回元素中紧邻的前面和后面同辈元素的元素集合

add()：创建一个新的Query对象，元素添加到匹配的元素集合中

each(function)：for循环的包装迭代器。

例如：       

$("li").each(function(index, element) {
            $(this).css('color','red')
        })