Jquery之DOM（二）

jQuery之DOM篇
jQuery引入创建节点及节点属性的原因：
通过JavaScript可以方便的获取DOM节点元素，从而进行一系列的DOM操作，但实际上，一般开发者都习惯性的先定义html结构，就很不灵活。
JavaScript中创建节点元素，添加节点属性，并把节点加入到文档中。
document.creatElement    setAttribute    innerHTML    appendChild
javaScript 的缺陷：a、每一个元素节点都必须单独的创建；b、节点的属性需要单独设置，并且设置到接口不是很统一。c、添加到指定的元素位置不灵活。 d、要考虑浏览器的兼容问题。
因此，jQuery给出了一套非常完美的接口方法。
一、jQuery创建节点
$(“<div></div>”)  创建元素节点
$(“<div>我是文本节点</div>”)      创建文本节点
$(“<div id=’test’ class=’arron’>我是文本节点</div>”)    创建属性节点
二、jQuery的内部插入append()与appendTo()方法；prepend()和prependTo()方法
插入到被选元素的内部
注意：仅仅是动态的创建元素是不够的 ，它只是临时存放在内存中，最终我们需要放到页面文档并呈现出来。
他们的原生方法是appendChild()方法。
.append()和.appendTo()方法的功能是相同的，主要不同点是----内容和目标的位置不同
.append()方法：前面是被插入的对象，后面是要在对象内插入的元素内容；
.appendTo()方法：前面是要插入的元素内容，而后面是被插入的对象。
与append和appendTo()方法正好相反，prepend（）方法和prependTo（）方法是将指定元素插入到匹配元素里面作为它的第一个子元素。这两方法也是功能相同，不同点是：内容和目标的位置不同。
.prepend()方法：前面是被插入的对象，后面是要在对象内插入的元素内容；
.prependTo()方法：前面是要插入的元素内容，而后面是被插入的对象。

三、jQuery的外部插入.after()和.before()；insertAfter()和insertBefore()
after（）和before（）
1、Before和after都是用来对相对选中元素外部添加相邻的兄弟节点。
2、两个方法都是可以接收html字符串，DOM元素，元素数组，或者jQuery对象，用来插入到集合中每个匹配元素的前面或者后面。
3、这两个方法都支持多个参数的传递。
注意：
1、after向元素的后边添加html代码，如果元素后面有了元素，那将后面的元素后移，然后将html代码插入
2、before向元素的前面添加html代码，如果元素的前面有了元素，那将前面的元素前移，然后将html代码插入。
.insertAfter（）和.insertBefore()
注意：
.insertAfter()和.after()实现的功能一样，但是内容和目标的位置不一样，还有insertAfter和insertBefore不支持多参数。
.after()是，内容作为参数，前面是被插入的对象；insertAfter():前面是内容，后面是被插入的对象。
.before()是，内容作为参数，前面是被插入的对象；insertBefore():前面是内容，后面是被插入的对象。
insertAfter（）方法将jQuery封装好的元素插入到指定的元素后面，如果元素后面有元素了，那将后面的元素后移，然后将jQuery对象插入，insertBefore方法同理；
四、DOM节点的删除
（1）.empty（）方法：是清空方法，它只移除指定元素中的所有子节点，这个方法不仅移除指定元素的子元素（和其后代元素），同样移除元素里面的文本，也就是元素里面的任何文本字符串都被看做是该元素的子节点。
例子：<div class=”hello”><p>muke</p></div>
使用.empty()方法，$(‘.hello’).empty();
清除后：<div class=”hello”></div>
（2）.remove()的有参和无参的基本用法
该方法也是移除方法，但是与.empty()最大的不同是，remove方法会将元素的自身移除，同时也会移除元素内部的一切，包括绑定的事件以及与元素相关的jQuery数据。
前端开发者注意：元素绑定的事件，在不用时一定要记得销毁，以免出现内存泄露。
.remove(参数)，该方法的有参数用法，可以通过$()选择一组相同的元素，在通过传递的参数（选择器表达式），找到匹配的元素，并将其删除。
$(“p”).remove(“:contains(‘3’)”);
总结：.empty()和.remove()方法的区别：
.empty()方法：empty方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点，empty不能删除自己本身的这个节点。
.remove()方法：清除该节点与该节点所包含的所有后代节点的同时删除。并且该方法提供筛选表达式，删除集合中的元素。
（3）detach()方法：
该方法不会把匹配元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素，与remove()不同的是，该元素有所绑定的事件和附加的数据等都会保留下来。
也就是说，$(“div”).detach();该语句会移除 对象，仅仅是显示效果没有了，但是内存中是存在的，当append之后，就会重新回到文档流中，就又显示出来了。该方法是jQuery特有的，所有它只能处理通过jQuery的方法绑定的事件或者数据。
例子：   p=$(“p”).detach()      $(‘body’).append(p);//有加了回来。
小结：.detach()和.remove()方法的区别
.remove()：移除节点
无参数：移除自身整个节点以及该节点的内部所有的节点，包含节点上的事件与数据。
有参数：移除筛选出的节点以及该节点的内部的所有节点，包括节点上的事件。
.detach():移除节点
移除的处理和remove一样，也分为有参数和无参数
不同处是，所有绑定的事件，附加的数据等都会保留下来。通过append后，又重新回到了文档流中。就有显示出来了。
五、DOM节点的复制与替换
A、clone（）方法
.clone():深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素下级元素、文字节点。此时知识克隆单纯的节点结构。
.clone(true):此时不仅仅是克隆单纯的节点结构，还要把附带的事件和数据一并克隆。
注意：clone（）方法是Jquery扩展的，只能处理Jquery绑定的事件与数据。
B、replaceWith()和replaceAll()

.replaceWith(新内容)：用提供的内容替换集合中所有匹配的元素并返回被删除元素的集合。即用$()选择一个节点a，之后该节点调用replaceWith方法，传入一个新的内容（html字符串，DOM元素，或Jquery对象）,用来替换选中的节点a。

例子：

.replaceAll(目标)：用集合元素匹配替换每个目标元素。
该方法和.replaceWith(内容)的功能一致，但是目标和源相反。
例子:
$(‘<a style=”color:red”>替换第二段内容</a>).replaceAll(‘p:eq(1)’);


小结：
1、.replaceWith()和.replaceAll()功能类似，主要是目标和源的位置区别。
2、.replaceWith()和.replaceAll()方法会删除与节点相关的所有数据和事件处理程序。
3、.replaceWith()方法返回的Jquery对象引用的是替换前的节点，而不是通过replaceWith/replaceAll方法替换后的节点。


C、包裹wrap（）方法,unwrap()方法，wrapAll（），wrapInner()方法
如果要将元素用其他元素包裹起来，也就想给一个元素增加父元素，Jquery提供了wrap方法。
.wrap(要增加父元素的元素)：为集合中匹配的元素包裹一个html结构；
例子：

.wrap(function):一个回调函数，返回用于包裹匹配元素的html内容或Jquery对象。
该方法和直接传递参数的效果是一样的，只不过可以把代码写在函数体内部，写法不同而已。
.unwrap()方法和.wrap()方法正好相反，删除选中元素的父元素。但是会保留自身（和兄弟元素）在原来的位置上。该方法不接受任何参数。
.wrapAll(要包裹的元素)：wrap（）方法是针对单个DOM元素处理，而.wrapAll()是针对集合中的元素，整体加上父元素。

.wrapInner()方法例子

六、Jquery遍历

A、children()

返回匹配元素集合中每个元素的所有子元素，仅儿子辈的；

例子：

<div class=’div’>

      <ulclass=’son’>

           <liclass=’grandson’>l</li>

     </ul>

</div>

当使用：$(‘div’).children()；该语句只能找到ul，找不到li；

若有参数时，是选择性地接收同一类选择器表达式

$(‘div’).children(‘.selected’);

 

B、find()：必须有参数，参数是选择器表达式

children是父子关系的查找，find是后代关系的查找（包括父子关系）；

注意：

1、find是遍历当前元素集合中每个元素的后代，只要符合，不管是儿子辈分还是孙子辈都可以；

2、选择器表达式对于.find()方法是必须的参数。如果想实现对后代所有元素的取回，可以传递通配选择器（*）

3、find只在后代中遍历，不包括自己；

 

C、parent（）：查找集合里面每个元素的父元素，只针对父子关系

无参数：在一个集合对象中，使用parent（）方法匹配出集合中每个元素的父元素。

有参数：在一个集合对象中， 要对这个集合对象进行一定的筛选时，要找出目标元素，就允许传一个选择器的表达式。

D、parents（）：查找集合元素里面的每一个元素的所有祖辈元素。

无参数：通过parents方法匹配集合中所有元素的祖辈元素，返回元素的秩序是从离他们最近的父元素开始的。

有参数：允许传递一个选择器表达式作为参数，可以对集合中的元素进行筛选

注意：

$(‘html’).parent()方法返回一个包含document的集合；

$(‘html’).parents()方法返回一个空集合；

E、closet()方法

可以有参数，和parents方法有点相似。

不同点：

1、起始位置不同，.closet开始于当前元素，.parent开始于父元素。

2、遍历的目标不同，.closet（）要查找指定的目标，.parentes遍历到文档的根元素，.closet()向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素并将匹配的元素加入集合。

3、结果不同：.closet()方法返回的是包含零个或一个元素的Jquery对象，parents返回的是包含零个或多个元素的Jquery集合。

 

F、next（），prev（），siblings（）

.next()：快速查找指定元素集合中每一个元素紧邻的后面同辈元素集合。

无参数:通过next匹配集合中每一个元素的下一个兄弟元素。

有参数：允许传入一个选择器的表达式，可以对集合对象进行一定的筛选

 

.prev()：快速查找指定元素集合中每一个元素紧邻的前面同辈元素集合。

无参数:通过next匹配集合中每一个元素的上一个兄弟元素。

有参数：允许传入一个选择器的表达式，可以对集合对象进行一定的筛选

 

.siblings()：快速查找指定元素集合中每一个元素的所有同辈元素。

无参数:通过next匹配集合中每一个元素的所有同辈兄弟元素。

有参数：允许传入一个选择器的表达式，可以对集合对象进行一定的筛选

 

G、add（）方法

$()找到指定的集合元素，想要往这个集合中加一个新的元素，使用add方法；

三种方法：

$(‘li’).add(‘选择器’)；

$(‘li’).add(‘传递DOM元素’)；如：$(‘li’).add(‘document.getElementsByTagName(‘p’)[

0])；

$(‘li’).add(‘<p></p>’).appendTo(‘目标’)；动态的创建标签，加入到集合中，然后插入到指定的位置，这会改变元素本身的排列。

 

H、each（）方法

Each是一个for循环的包装迭代器。

Each通过回调的方式处理，并两个固定的参数，索引和元素。

Each回调方法中的this指向当前迭代的DOM元素。