jQuery基础（二） DOM篇 - 13337159127/Note GitHub Wiki

1.jQuery节点创建与属性的处理？ 创建为属性节点：$("《div id='test' class='aaron'>我是文本节点《/div>") 2.DOM内部插入append()与appendTo():在被选元素的结尾插入内容 $(".content").append(《"div class='a'>append方法加元素《/div>") : append()前面是被插入的对象，后面是要在对象内插入的元素内容 $('《div class="appendTo">通过appendTo方法添加元素《/div>').appendTo($(".content")) : appendTo()前面是要插入的元素内容，而后面是被插入的对象 .append()和.appendTo()两种方法功能相同，主要的不同是语法,内容和目标的位置不同 3.DOM外部插入after()与before()：在被选元素的前面或者后面插入元素 $(".test1").before("《p style="color:red">匹配元素之前增加《/p>', '《p style="color:red">多参数《/p>'); 在指定元素前面插入节点 $(".test1").after('《p style="color:red">匹配元素之后增加《/p>', '《p style="color:red">多参数《/p>'); 在指定元素后面插入节点 after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入 before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插 4.DOM内部插入prepend()与prependTo() : 在被选元素的开头插入内容 $('.aaron1').prepend('《p>prepend增加的p元素《/p>') ：找到class="aaron1"的div节点，然后通过prepend在内部的首位置添加一个新的p节点 append与appendTo在元素的结尾插入指定内容，jQuery提供的方法是prepend与prependTo可以在被选元素之前插入， .prepend()和.prependTo()实现同样的功能，主要的不同是语法，插入的内容和目标的位置不同 5.DOM外部插入insertAfter()与insertBefore()：用来插入到集合中每个匹配元素的前面或者后面。 .before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。 .after()和.insertAfter() 实现同样的功能。主要的不同是语法——特别是（插入）内容和目标的位置。 $("《.test1").before('p style="color:red">before,在匹配元素之前增加《/p>',《'p style="color:red">多参数《/p>') 6.DOM节点删除之empty()的基本用法:从被选元素中删除子元素 《div class="hello">《p>慕课网《/p>《/div> : 通过empty去掉p元素 : $('.hello').empty()br> 清空节点，但是与删除又有点不一样，因为它只移除了指定元素中的所有子节点。它只是清空内部的html代码，但是标记仍然留在DOM中 7.DOM节点删除之remove()：删除被选元素（及其子元素）。 $(".test1").remove() 删除整个class=test1的div节点 $("p").remove(":contains('3')") 找到所有p元素中，包含了3的元素 9.DOM拷贝clone():复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。 $(".left").append($(this).clone().css('color', 'red')) : 只克隆节点,不克隆事件 $(".left").append($(this).clone(true).css('color', 'blue')) : 克隆节点,克隆事件 10.DOM替换replaceWith()和replaceAll(): .replaceWith( newContent )：删除集合中的内容并且替换它。 .replaceAll( target ) ：用集合的匹配元素替换每个目标元素 .replaceAll()和.replaceWith()功能类似，主要是目标和源的位置区别 $(".right>div:first p:eq(1)").replaceWith('《a style="color:red">replaceWith替换内容《/a>') 找到第二p元素，并且替换它的文本 $('a style="color:red">replaceAll替换第六段的内容/a>').replaceAll(".right>div:last P:last")找到最后一个div，最后一个p元素，并且替换它的文本 11.DOM包裹wrap()方法：将元素用其他元素包裹起来，也就是给它增加一个父元素， 《p>p元素《/p> $('p').wrap('《div>《/div>') 给p元素增加一个div 12.DOM包裹unwrap()方法 : 将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。 《div>《p>p元素《/p>《/div> ：$('p').unwarp('《div>《/div>');找到p元素，然后调用unwarp方法，这样只会删除父辈div元素了：结果：《p>p元素《/p> 13.DOM包裹wrapAll()方法:将 “集合中” 的元素用其他元素包裹起来，也就是给他们增加一个父元素 .wrapAll( wrappingElement )：给集合中匹配的元素增加一个外面包裹HTML结构 《p>p元素/p> 《p>p元素/p> 给所有p元素增加一个div包裹 : $('p').wrapAll('《div>/div>') 14.DOM包裹wrapInner()方法: .wrapInner( wrappingElement )：给集合中匹配的元素的内部，增加包裹的HTML结构