• DOM节点的创建
  • DOM节点创建及属性
  • jQuery节点创建与属性的处理
• DOM节点的插入
  • DOM内部插入append()与appendTo()
  • DOM内部插入prepend()与prependTo()
  • DOM外部插入after()与before()
  • DOM外部插入insertAfter()与insertBefore()
  • 各种插入方法的区别
• DOM节点的删除
  • DOM节点删除之empty()
  • DOM节点删除之remove()
  • DOM节点删除之detach()
• DOM节点的复制与替换
  • DOM拷贝clone()
  • DOM替换replaceWith()和replaceAll()
  • DOM包裹wrap()方法
  • DOM包裹unwrap()方法
  • DOM包裹wrapAll()方法
  • DOM包裹wrapInner()方法
• jQuery遍历
  • jQuery遍历之children()方法
  • jQuery遍历之find()方法
  • jQuery遍历之parent()方法
  • jQuery遍历之parents()方法
  • jQuery遍历之closest()方法
  • jQuery遍历之next()方法
  • jQuery遍历之prev()方法
  • jQuery遍历之siblings()
  • jQuery遍历之add()方法
  • jQuery遍历之each()

DOM节点的创建

DOM节点创建及属性

• 创建元素：document.createElement
• 设置属性：setAttribute
• 添加文本：innerHTML
• 加入文档：appendChild

jQuery节点创建与属性的处理

var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>");
$body.append(div);

DOM节点的插入

DOM内部插入append()与appendTo()

• append()前面是被插入的对象，后面是要在对象内插入的元素内容
• appendTo()前面是要插入的元素内容，而后面是被插入的对象

A.append(B) // 将B添加到A
A.appendTo(B) // 将A添加到B

DOM内部插入prepend()与prependTo()

• prepend()向每个匹配的元素内部前置内容
• prependTo()把所有匹配的元素前置到另一个指定的元素集合中

DOM外部插入after()与before()

• .after(content) :在匹配的元素集合的每个元素后面插入指定内容；若元素后面有元素，先将原元素后移，再插入
• .before(content) :在匹配的元素前面插入内容；若元素前面有元素，在将元素前移，再插入

before与after都是用来对相对选中元素外部增加相邻的兄弟节点

2个方法都是都可以接收HTML字符串，DOM 元素，元素数组，或者jQuery对象，用来插入到集合中每个匹配元素的前面或者后面

2个方法都支持多个参数传递after(div1,div2,….) 可以参考右边案例代码

DOM外部插入insertAfter()与insertBefore()

• .insertAfter(content) :在目标元素前面插入集合中每个匹配的元素；若前面有元素，则将元素前移之后再将对象插入；不支持多参数处理
• .insertBefore(content) :在目标元素后面插入集合中每个匹配的元素，若后面有元素，则将元素后移之后再将对象插入；不支持多参数处理

各种插入方法的区别

.before()，.after()，.insertAfter()，.insertBefore()是处理兄弟关系

prepend()，prependTo() ，append()，appendTo()，是处理父子关系

• .append()向每个匹配的元素内部追加内容
• .prepend()向每个匹配的元素内部前置内容
• .appendTo()把所有匹配的元素追加到另一个指定元素的集合中
• .prependTo()把所有匹配的元素前置到另一个指定的元素集合中
• .after() :在匹配的元素集合的每个元素后面插入指定内容
• .before() :在匹配的元素集合的每个元素前面插入内容
• .insertAfter() :在目标元素前面插入集合中每个匹配的元素
• .insertBefore() :在目标元素后面插入集合中每个匹配的元素

DOM节点的删除

DOM节点删除之empty()

• .empty() ： 移除指定元素中的所有子节点（元素本身未被移除）

DOM节点删除之remove()

• .remove() ： 将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据

• .remove(selector) ： 选择性的删除指定的节点

$("p").remove(":contains('3')");  // 移除所有包含文本“3”的p元素

DOM节点删除之detach()

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

$(“div”).detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。

$("#bt1").click(function() {
    if (!$("p").length) return; //去重
    //通过detach方法删除元素
    //只是页面不可见，但是这个节点还是保存在内存中
    //数据与事件都不会丢失
    p = $("p").detach()
});

$("#bt2").click(function() {
    //把p元素在添加到页面中
    //事件还是存在
    $("body").append(p);
});

DOM节点的复制与替换

DOM拷贝clone()

• $("div").clone() //只克隆了结构，事件丢失

• $("div").clone(true) //结构、事件与数据都克隆

DOM替换replaceWith()和replaceAll()

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

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

.replaceAll()和.replaceWith()功能类似，但是目标和源相反

.replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序

.replaceWith()方法返回的jQuery对象引用的是替换前的节点，而不是通过replaceWith/replaceAll方法替换后的节点

DOM包裹wrap()方法

• .wrap( wrappingElement ) ：在集合中匹配的每个元素周围包裹一个HTML结构

$('p').wrap('<div></div>');
// 最后的结构，p元素增加了一个父div的结构
<div>
    <p>p元素</p>
</div>

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

$('p').wrap(function() {
    return '<div></div>';   //与第一种类似，只是写法不一样
})

DOM包裹unwrap()方法

• .unwrap() ：作用与wrap方法是相反的。将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。

// 原结构
<div>
    <p>p元素</p>
</div>

// unwrap方法处理
$('p').unwrap();

//结果
<p>p元素</p>

DOM包裹wrapAll()方法

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

// 源代码
<p>p元素</p>
<p>p元素</p>
// wrapAll方法处理
$('p').wrapAll('<div></div>')
// 结果
<div>
    <p>p元素</p>
    <p>p元素</p>
</div>

用wrap也可以给所有p元素增加div，但不是同一个div。而wrapALL能给所有p元素增加一个共同的div

DOM包裹wrapInner()方法

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

// 源代码
<div>p元素</div>
<div>p元素</div>
// wrapAll方法处理
$('div').wrapInner('<p></p>')
// 结果
<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>

jQuery遍历

jQuery遍历之children()方法

• children() ： 在DOM树中对这些元素的直接子元素进行搜索，并且构造一个新的匹配元素的jQuery对象

• .children()方法选择性地接受同一类型选择器表达式 $("div").children(".selected")

$('.div').children().css('border', '3px solid red');
$('.div').children(':last').css('border', '3px solid blue');

jQuery遍历之find()方法

• find() ： 对匹配元素的后代元素进行搜索，并且构造一个新的匹配元素的jQuery对象

children与find方法的区别，children是父子关系查找，find是后代关系（包含父子关系）

选择器表达式对于 .find()是必需的参数。如果我们需要实现对所有后代元素的取回，可以传递通配选择器

选择器 context 是由 .find() 方法实现的；因此，$(‘.item-ii’).find(‘li’) 等价于 $(‘li’, ‘.item-ii’)(找到类名为item-ii的标签下的li标签)。

$(‘li’, ‘li.item-ii’) 这种写法是正确的意思是
$(子， 父) 在父元素中查找子元素
$(“父 子”)也能实现这样的功能

$("p").find($spans).css('color', 'red');

jQuery遍历之parent()方法

• parent() ： 对匹配元素的父元素进行搜索，并且构造一个新的匹配元素的jQuery对象

因为是父元素，这个方法只会向上查找一级

$('.level-3').parent().css('border', '1px solid red');
$('.item-a').parent(':last').css('border', '1px solid blue');

jQuery遍历之parents()方法

• parents() ： 对匹配元素的祖辈元素进行搜索，并且构造一个新的匹配元素的jQuery对象

$( "html" ).parent()方法返回一个包含document的集合，而$( "html" ).parents()返回一个空集合。

$('.item-b').parents().css('border', '2px solid red');
$('.item-b').parents('.first-div').css('border', '2px solid blue');

jQuery遍历之closest()方法

• .closest(selector) ：从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素

.parents()和.closest()的区别

• 起始位置不同：.closest开始于当前元素 .parents开始于父元素
• 遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合
• 结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象

$('li.item-1').closest('.item-b').css('border', '1px solid blue');

jQuery遍历之next()方法

• .next() ：查找紧邻匹配元素的后一个直接兄弟元素，并根据匹配的元素创建一个新的 jQuery 对象。

$('.item-1').next().css('border', '1px solid red');
$('.item-1').next(':first').css('border', '1px solid blue');

jQuery遍历之prev()方法

• .prev() ：查找紧邻匹配元素的前一个直接兄弟元素，并根据匹配的元素创建一个新的 jQuery 对象。

$('.item-3').prev().css('border', '1px solid red');
$('.item-3').prev(':last').css('border', '1px solid blue');

jQuery遍历之siblings()

• .siblings() ：查找匹配元素的所有直接兄弟元素，并根据匹配的元素创建一个新的 jQuery 对象。

$('.item-2').siblings().css('border', '2px solid red');
$('.item-2').siblings(':last').css('border', '2px solid blue');

jQuery遍历之add()方法

• .add() ：将元素添加到匹配的元素集合中

// 处理一：传递选择器
$('li').add('p')
// 处理二：传递dom元素
$('li').add(document.getElementsByTagName('p')[0])
// 处理二：传递HTML片段
$('li').add('<p>新的p元素</p>').appendTo(目标位置)

$('li').add('<p>新的p元素</p>').appendTo($('.right'))

jQuery遍历之each()

• each是一个for循环的包装迭代器
• each通过回调的方式处理，并且会有2个固定的实参，索引与元素
• each回调方法中的this指向当前迭代的DOM元素

$("li").each(function(index, element) {
    if (index % 2) {
        $(this).css('color','blue')
    }
})