jQuery学习笔记（二）--DOM篇

DOM节点插入

插入对象.append(插入内容)：这个操作与对指定的元素执行原生的appendChild方法，将它们添加到文档中的情况类似。

插入内容.appendTo(插入对象):实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

插入对象.after(插入内容):在元素节点后插入内容。

插入对象.before(插入内容):在元素节点之前插入内容。

插入对象.prepend(插入内容):在元素内部插入子元素，并作为第一个子元素。

插入内容.prependTo(插入对象):在元素内部插入子元素，并作为第一个子元素。

插入内容.insertBefore(插入对象)：在元素节点之前插入内容。

插入内容.insertAfter(插入对象):在元素节点后插入内容。

 

DOM节点删除

empty()：删除目标所有子节点，包括文本。

remove():删除目标及其内部元素，参数可填选择器表达式用来过滤将被移除的匹配元素集合，可以选择性的删除指定的节点。

detach():删除后保留对象，对象的数据，事件都不会被影响，再次插入即可使用。

 

DOM节点复制与替换

clone()：拷贝节点，参数为true时拷贝附加节点数据与事件。

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

替换内容.replaceAll( 替换对象) ：用集合的匹配元素替换每个目标元素。

wrap( wrappingElement )：在集合中匹配的每个元素周围包裹。

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

unwrap()：将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。

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

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

wrapInner( function ) ：允许我们用一个callback函数做参数，每次遇到匹配元素时，该函数被执行，返回一个DOM元素，jQuery对象，或者HTML片段，用来包住匹配元素的内容。

children(selector) :返回匹配元素集合中每个元素的所有子元素（仅儿子辈，不管祖孙关系）

find():返回元素所有符合条件的子元素（儿子辈、祖孙辈都包含）

parent():返回父元素，参数可填写选择器表达式。

parents():返回从父元素开始所有祖辈元素，直到根元素（html）为止的集合，参数可填写选择器表达式。

closest():返回从元素自身开始逐级递增查找符合条件的元素。

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

prev():返回指定元素集合每一个元素紧邻的前一个元素。

siblings():返回指定元素的所有同辈元素。

add():创建一个新的jQuery对象 ，元素添加到匹配的元素集合中

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

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