jQuery节点

                        jQuery节点

一、创建节点
1、下面是通过JavaScript原生接口创建节点的方法，它在处理上是非常复杂与繁琐的。
下面是它的创建流程，比较简单，大体上如下：
首先是创建节点（常见的元素、属性和文本）；其次是添加节点的一些属性；最后是加入到文档中去。
2、创建流程中涉及到的方法大致有：
（1）创建元素的document.createElement方法；
（2）设置属性的setAttribute方法；
（3）添加文本的innerHTML方法；
（4）加入文档的appendChild方法。
（5）查找指定元素（返回文档中匹配指定 CSS 选择器的一个元素）的querySelector() 方法。
（6）用于向指定元素添加事件句柄的addEventListener() 方法。
3、下面是我们通过使用jQuery来简化了的创建节点的流程。使用jQuery来创建节点可以有几种方式，后面会慢慢接触到。常见的就是直接把这个节点的结构通过HTML标记字符串描述出来，通过 $ ()函数处理。
4、使用jQuery来的创建节点的流程如下：
（1）创建元素节点： $ (“< div>”);
（2）创建文本节点（与创建元素节点类似，但它可以直接把文本内容一并描述出来）：
$ (“< div>文本节点”)；
（3）创建属性节点（与创建元素节点同样的方式）：
$ (“< div id=’content’ class=’content’>”)；
我们通过jQuery把上面的代码组合成一句代码，跟写HTML结构的方式是一样的：
$ (“< div>< div class=’content’>文本节点”)。
二、 DOM节点的插入（内、外）
（一）DOM内部插入append()与appendTo()、prepend()与prependTo()
1、在元素内部进行操作的方法，除了在被选元素的结尾（仍然在内部）通过append与appendTo插入指定内容外；还可以在被选元素之前通过prepend与prependTo插入内容。
2、append()方法的作用是向每一个匹配的元素内部追加内容。它的表达式是append(content|fn)。
3、append操作和对指定的元素执行appendChild方法从而把它们添加到文档中的情况相类似。
4、appendTo()方法的作用是把所有匹配的元素追加到另一个指定的元素集合中。它的表达式是appendTo(content)。
5、append（）方法和appendTo（）方法的内容和目标是相反的；如果说 $ (B).append(A)方法是把A追加到B中的话，那么 $ (B).appendTo(A)方法就是把B追加到A中。即我们可以理解成append（）方法是在元素B中添加内容A，而appendTo（）方法是把内容B添加到元素A中。
6、.append()和.appendTo()两种方法功能相同，主要的不同是语法。即内容和目标的位置不同。
append()前面是被插入的对象，后面是要在对象内插入的元素内容；而appendTo()前面是要插入的元素内容，而后面是被插入的对象。
7、prepend()方法的作用是向每一个匹配的元素内部前置内容；即是向所有匹配的元素内部的开始处插入内容。它的表达式是prepend(content)。
8、prependTo()方法的作用是把所有匹配的元素前置到另一个指定的元素集合中。它的表达式是prependTo(content)。
9、prepend（）方法和prependTo（）方法的内容和目标是相反的；下面是详细解释：
（1）如果说 $ (B). prepend (A)方法是把A前置到B中的话，那么 $ (B). prependTo (A)方法就是把B前置到A中。
（2）即在prepend ()方法中B是被插入的对象，A是要在对象内插入的元素内容；而在prependTo()方法中B是要插入的元素内容，而A是被插入的对象。
（二）DOM外部插入after()与before()、insertAfter()与insertBefore()
1、after()方法的作用是在每个匹配的元素之后插入内容。它的表达式是after(content|fn)。
2、before()方法的作用是在每个匹配的元素之前插入内容。表达式是before(content|fn)。
3、before()方法和before(content|fn)参数说明：content是插入到每个目标后的内容；function 函数必须返回一个html字符串。
4、insertAfter()方法的作用是把所有匹配的元素插入到另一个、指定的元素元素集合的后面。它的表达式是insertAfter(content)。
5、实际上，使用insertAfter(content)方法、是颠倒了常规的 $ (A).after(B)的操作；即不是把B插入到A后面，而是把A插入到B后面。
6、insertBefore()方法的作用是把所有匹配的元素插入到另一个、指定的元素元素集合的前面。它的表达式是insertBefore(content)。
7、实际上，使用insertBefore(content)方法是颠倒了常规的$(A).before(B)的操作；即不是把B插入到A前面，而是把A插入到B前面。
8、insertAfter(content)方法和insertBefore(content)方法的参数说明：content 用于匹配元素的jQuery表达式。
三、DOM节点的删除
1、DOM节点删除中的保留数据的删除操作是detach()方法；它的表达式是detach([expr])。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。它与remove()不同的是，它的所有绑定的事件、附加的数据等都会保留下来。
2、 $ (“div”).detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你使用append()方法之后，又重新回到了文档流中。就又显示出来了。
3、empty()方法的作用是删除匹配的元素集合中所有的子节点。
4、remove() 方法的作用是从DOM中删除所有匹配的元素。它的表达式是remove([expr])。
5、删除节点的参数说明：expr 用于筛选元素的jQuery表达式。
6、要用到移除指定元素的时候，jQuery提供了empty()与remove([expr])两个方法，虽然两个都是删除元素，但是两者还是有区别：
（1）严格地讲，empty()方法并不是删除节点，而是清空节点。它能清空元素中的所有后代节点，但不能删除自己本身所在的这个节点。
（2）remove()方法是把该节点与该节点所包含的所有后代节点同时删除的一个方法。它提供了传递一个筛选的表达式，以此来删除指定合集中的元素。