jQuery-DOM节点操作

我为什么要看jQuery呢！我也不知道…..强迫症吧，看着学习进度不是100%就难受
~~也许是想放松下，看点简单的~~

jQuery还是很强大的！

创建节点

使用Jquery创建节点变的非常容易，直接书写HTML就可以了

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

插入节点

内部插入常用的几种方法：
append：这个操作与对指定的元素执行原生的appendChild方法，将它们添加到文档中的情况类似。
appendTo：实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

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

在元素内部进行操作的方法，除了在被选元素的结尾（仍然在内部）通过append与appendTo插入指定内容外，相应的还可以在被选元素之前插入，jQuery提供的方法是prepend与prependTo，和上面的两个其实类似，只是是插入到前面

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

//参数是将要插入的内容。在内部后面追加
$(".content").append('<div class="append">通过append方法添加的元素</div>')

//.appendTo()刚好相反，内容在方法前面，
//无论是一个选择器表达式 或创建作为标记上的标记
//它都将被插入到目标容器的末尾。
$('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"))

//找到class="aaron1"的div节点
//然后通过prepend在内部的首位置添加一个新的p节点
$('.aaron1').prepend('<p>prepend增加的p元素</p>')

//找到class="aaron2"的div节点
//然后通过prependTo内部的首位置添加一个新的p节点
$('<p>prependTo增加的p元素</p>').prependTo($('.aaron2'))

外部插入的几种方法：
before(向前面)与after(向后面)都是用来对相对选中元素外部增加相邻的兄弟节点
两个方法都是都可以接收HTML字符串，DOM 元素，元素数组，或者jQuery对象，用来插入到集合中每个匹配元素的前面或者后面，都支持多个参数传递after(div1,div2,....)
jQuery由于内容目标的位置不同，然增加了2个新的方法insertAfter与insertBefore
.before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。对于before()选择表达式在函数前面，内容作为参数，而insertBefore()刚好相反，内容在方法前面，它将被放在参数里元素的前面
.after()和.insertAfter() 实现同样的功能。主要的不同是语法——特别是（插入）内容和目标的位置。对于after()选择表达式在函数的前面，参数是将要插入的内容。对于 insertAfter(), 刚好相反，内容在方法前面，它将被放在参数里元素的后面
before、after与insertBefore。insertAfter的除了目标与位置的不同外，后面的不支持多参数处理

//在匹配test1元素集合中的每个元素前面插入p元素
$(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>')

//在匹配test1元素集合中的每个元素后面插入p元素
$(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>')

//在test1元素前后插入集合中每个匹配的元素
//不支持多参数，“多参数” 内容无效
$('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1"))

//在test2元素前后插入集合中每个匹配的元素
//不支持多参数
$('<p style="color:red">测试insertAfter方法增加</p>').insertAfter($(".test2"))

移除节点

使用empty()方法会移除指定元素中的所有子节点，但是调用的节点还是存在的
remove()与empty一样，都是移除元素的方法，但是remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据

$(".test1").remove()

//找到所有p元素中，包含了3的元素
//这个也是一个过滤器的处理
$("p").remove(":contains('3')")
//也可以这样：$("p").filter(":contains('3')").remove()

如果我们希望临时删除页面上的节点，但是又不希望节点上的数据与事件丢失，并且能在下一个时间段让这个删除的节点显示到页面，这时候就可以使用detach方法来处理，也就是它只会从显示上移除
但是：detach方法是JQuery特有的，所以它只能处理通过JQuery的方法绑定的事件或者数据

//通过detach方法删除元素
//只是页面不可见，但是这个节点还是保存在内存中
//数据与事件都不会丢失
p = $("p").detach()
//还原操作
$("body").append(p);

复制与替换

复制也就是克隆，使用.clone()方法深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。
clone方法比较简单就是克隆节点，但是需要注意，如果节点有事件或者数据之类的其他处理，我们需要通过clone(ture)传递一个布尔值ture用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了
使用时需要注意的一些细节：

clone()方法时，在将它插入到文档之前，我们可以修改克隆后的元素或者元素内容，如可以使用 $(this).clone().css('color','red')增加了一个颜色
通过传递true，将所有绑定在原始元素上的事件处理函数复制到克隆元素上
clone()方法是jQuery扩展的，只能处理通过jQuery绑定的事件与数据
元素数据（data）内对象和数组不会被复制，将继续被克隆元素和原始元素共享。深复制的所有数据，需要手动复制每一个

至于替换，使用的是replaceWith方法，用$()选择节点A，调用replaceWith方法，传入一个新的内容B（HTML字符串，DOM元素，或者jQuery对象）用来替换选中的节点A
replaceAll()和replaceWith()功能类似，但是目标和源相反

replaceAll()和replaceWith()功能类似，主要是目标和源的位置区别
replaceWith()与replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序
replaceWith()方法，和大部分其他jQuery方法一样，返回jQuery对象，所以可以和其他方法链接使用
replaceWith()方法返回的jQuery对象引用的是替换前的节点，而不是通过replaceWith/replaceAll方法替换后的节点

如果要将元素用其他元素包裹起来，也就是给它增加一个父元素，针对这样的处理，JQuery提供了一个wrap方法
比如给p元素增加一个div包裹$('p').wrap('<div></div>')也可以这样用，使用一个函数：

// 与上面是一个效果
$('p').wrap(function() {
    return '<div></div>';
})

jQuery还提供了一个unwarp()方法，作用与wrap方法是相反的。将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。
上面说的是包裹一个元素的，相应的也就有包裹多个的方法：wrapAll( wrappingElement)给集合中匹配的元素增加一个外面包裹HTML结构，不过这里需要注意的是，如果是通过回调的方式可以单独处理每一个元素

<p>p元素</p>
<p>p元素</p>

<script>
$('p').wrapAll('<div></div>')
</script>

<div>
    <p>p元素</p>
    <p>p元素</p>
</div>
-------------------------------------------------------
<script>
$('p').wrapAll(function() {
    return '<div><div/>'; 
})
</script>

<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>

如果要将合集中的元素内部所有的子元素用其他元素包裹起来，并当作指定元素的子元素，针对这样的处理，JQuery提供了一个wrapInner方法，用法和上面的是一样的

遍历

jQuery是一个合集对象，如果想快速查找合集里面的第一级子元素，此时可以用children()方法。这里需要注意：.children(selector)方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈，这里可以理解为就是父亲-儿子的关系）意思就是可以不传入参数返回第一级的子元素，也可以传入表达式进行筛选
如果想快速查找DOM树中的这些元素的后代元素，此时可以用find()方法，这也是开发使用频率很高的方法。这里要注意 children与find方法的区别，children是父子关系查找，find是后代关系（包含父子关系）使用find方法需要注意的：

find是遍历当前元素集合中每个元素的后代。只要符合，不管是儿子辈，孙子辈都可以。
与其他的树遍历方法不同，选择器表达式对于.find()是必需的参数。如果我们需要实现对所有后代元素的取回，可以传递通配选择器 ‘*’。
find只在后代中遍历，不包括自己。
选择器 context 是由 .find() 方法实现的；因此，$('.item-ii').find('li') 等价于 $('li', '.item-ii') (找到类名为item-ii的标签下的li标签)。

类似的就有找父亲的方法，parent()这个方法只会向上查找一级，相应的parents()方法就可以查找到所有的祖辈元素
$( "html" ).parent()方法返回一个包含document的集合，而$( "html" ).parents()返回一个空集合。

Jquery还提供了一个closest()方法接受一个匹配元素的选择器字符串从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素，至于和parents的区别

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

其他的还有next方法和prev方法，他们应该是一对，一前一后，用法和上面一样，看名字也能知道是干什么的siblings方法是查找兄弟节点，使用add添加节点，它的参数可以几乎接受任何的$()，包括一个jQuery选择器表达式，DOM元素，或HTML片段引用：

1
2
3

$('li').add('p')
$('li').add(document.getElementsByTagName('p')[0])
$('li').add('<p>新的p元素</p>').appendTo(目标位置)

.each()方法就是一个for循环的迭代器，它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)

<ul>
  <li>慕课网</li>
  <li>Aaron</li>
</ul>

<script>
  $("li").each(function(index, element) {
    // index 索引 0,1
    // element是对应的li节点
    // this 指向的是li
  })
</script>

对象转换

jQuery 对象和 JavaScript 的对象是不同的，简单说 jQuery 把 js 原生的对象外面加了一层包装，相当于套了一层数组，然后能使用 jq 中定义的各种事件和方法，他们之间互相独立的，方法不能混用，但是对象之间可以进行转换。
js 对象转 jq：$(obj) 直接套一下就 ok；
jq 对象转 js：obj[0] 或者 obj.get(0) 毕竟外面套的是数组。
为了便于区分，jq 对象一般的命名是以 $ 开头。