jQuery DOM篇 学习手记

一、 jQuery节点创建与属性的处理
Query创建节点的方式，保留了HTML的结构书写方式，直接在$(" ")中按照HTML结构书写即可，例如：
$("<div>我是文本节点</div>")

$("<div class='right'><div class='aaron'>动态创建DIV元素</div></div>")

二、 节点的插入

1. 内部插入append()与appendTo()，prepend()与prependTo()
   .append(content) 为每个匹配的元素内部追加内容，作为最后一个元素。
   .appendTo(content) 把所有的匹配的元素追加到另一个、指定的元素集合中，作为最后一个元素。
   .prepend() 为每个匹配的元素内部追加内容，作为第一个元素。
   .prependTo() 把所有的匹配的元素追加到另一个、指定的元素集合中，作为第一个元素。

2. 外部插入after()与before()，insertAfter()与insertBefore()
   .after(content) 在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点，
   即将content插入匹配的元素后。
   .before(content) 在匹配元素的前面插入内容。
   2个方法都是都可以接收HTML字符串，DOM 元素，元素数组，或者jQuery对象，用来插入到集合中每个匹配元素的前面或者后面。

.insertAfter(content) 将每个匹配的元素集合插入到参数所指定元素后边，
即将匹配的元素插入到content后。
.insertBefore(content) 将每个匹配的元素集合插入到参数所指定元素前边 。
insertAfter()与insertBefore()不支持多元素。

三、 DOM节点的删除

1. .empty()的基本用法
   方法移除被选中元素的子元素（和其他后代元素），同样移除元素里的文本。元素本省并没有被移除。

2. remove()的用法 无参数，有参数
   remove()会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。
   remove比empty好用的地方就是可以传递一个选择器表达式用来过滤将被移除的匹配元素集合，可以选择性的删除指定的节点。例如：
   $("p").remove(":contains('3')")
   或者
   $("p").filter(":contains('3')").remove()

3. 保留数据的删除操作detach()
   这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
   $("div").detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。

四、 DOM节点的复制与替换

1. DOM拷贝clone()
   .clone()方法深度 复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。
   如果节点有事件或者数据之类的其他处理，我们需要通过clone(ture)传递一个布尔值ture用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了。
   HTML部分
   <div></div>
   JavaScript部分
   $("div").on('click', function() {//执行操作})

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

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

1. DOM替换replaceWith()和replaceAll()
   .replaceWith( newContent )：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
   .replaceAll( target ) ：用集合的匹配元素替换每个目标元素

2. 包裹wrap()方法 增加父级元素
   .wrap( wrappingElement )：在集合中匹配的每个元素周围包裹一个HTML结构
   <p>p元素</p>
   给p元素增加一个div包裹
   $('p').wrap('<div></div>')
   最后的结构，p元素增加了一个父div的结构
   <div>
   <p>p元素</p>
   </div>
   .wrap( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象

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

4. .wrapAll()方法
   wrap是针对单个dom元素处理，而wrapAll给集合中匹配的元素增加一个外面包裹HTML结构。

5. .wrapInner()方法
   wrap方法是用后边的元素把前边的元素包裹起来，wrapInner方法使用前边的元素把后边括号里边的元素包裹起来。

五、 jQuery遍历方法

1. children()方法 查找子元素
   如果想快速查找合集里面的第一级子元素，此时可以用children()方法。这里需要注意：.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈，这里可以理解为就是父亲-儿子的关系）
   .children()方法括号中的参数可接受选择器表达式。

2. find()方法 查找后代元素，（）中须有参数
   如果想快速查找DOM树中的这些元素的后代元素，此时可以用find()方法，这也是开发使用频率很高的方法。这里要注意 children与find方法的区别，children是父子关系查找，find是后代关系（包含父子关系）
   例如：
   <div class="div">
   <ul class="son">
   <li class="grandson">1</li>
   </ul>
   </div>
   代码如果是$("div").find("li")，此时，li与div是祖辈关系，通过find方法就可以快速的查找到了。

3. parent()方法 查找父元素
   如果想快速查找合集里面的每一个元素的父元素（这里可以理解为就是父亲-儿子的关系），此时可以用parent()方法。方法括号中的参数可接受选择器表达式。

4. parents()方法 查找祖辈元素
   如果想快速查找合集里面的每一个元素的所有祖辈元素，此时可以用parents()方法。一直查找到HTML元素。

5. closest()方法 查找祖辈元素，返回找到的第一个值。
   从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素。括号中为匹配项。

6. next()方法 查找相邻的后边的同辈元素。
   快速查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合，此时可以用next()方法。

7. prev()方法 查找相邻的前边的同辈元素
   查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合，此时可以用prev()方法。

8. siblings()方法 查找所有同辈元素
   查找指定元素集合中每一个元素的同辈元素，此时可以用siblings()方法。

9. add()方法 增加指定的元素
   例如：
   $('li').add('p').css('background', 'red') //将li元素和p元素都选中，添加样式

10. each() 方法 迭代jQuery对象合集中的每一个DOM元素
    .each() 方法就是一个for循环的迭代器，它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数。
    each通过回调的方式处理，并且会有2个固定的实参，索引与元素。
    each回调方法中的this指向当前迭代的dom元素。
    例子：
    $("li").each(function(index, element) {
    $(this).css('color','red')
    })
    // 遍历所有的li，修改每个li内的字体颜色

$("li").each(function(index, element) {
if (index % 2) {
$(this).css('color','blue')
}
}) //遍历所有的li，修改偶数li内的字体颜色