【总结】慕课网jQuery基础

jQuery基础——DOM篇

1.DOM节点的创建
常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来，通过$()函数处理，$(“html结构”)
例：\$("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")

2.DOM节点的插入

• 内部插入append()与appendTo()，prepend()与prependTo()
  append(content):向每个匹配的元素内部追加内容至末尾(前面是被插入的对象，后面是插入内容)
  appendTo(collection):把所有匹配的元素追加到指定的元素集合中的末尾(与上述参数位置相反)
  prepend(content):向每个匹配的元素内部追加内容至开头
  prependTo(collection):把所有匹配的元素追加到指定的元素集合中的开头

• 外部插入after()与before()，insertAfter()与insertBefore()
  外部插入也就是在兄弟之间追加内容(各函数的参数规则与内部插入类似)

3.DOM节点的删除

• empty()
  empty只移除指定元素中的所有子节点。

• remove()
  remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。

• detach()
  临时删除页面上的节点，同时保留节点上的数据与事件。当再次append之后，就又重新回到了文档流中。

4.DOM节点的复制与替换

• clone()
  .clone()方法深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。
  然而clone()只是克隆单纯的节点结构，通过传入true参数，则同时会把附带的事件与数据给一并克隆。

• replaceWith()和replaceAll()
  .replaceWith(newContent):用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合

• wrap()
  .wrap( wrappingElement ):在集合中匹配的每个元素周围包裹一个HTML结构

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

• wrapAll()
  wrap是针对单个dom元素处理，如果要将集合中的元素用其他元素包裹起来，也就是给他们增加一个父元素，针对这样的处理，JQuery提供了一个wrapAll方法

• wrapInner()
  将合集中的元素内部所有的子元素用其他元素包裹起来，并当作指定元素的子元素

5.jQuery遍历

• children()
  jQuery是一个合集对象，如果想快速查找合集里面的第一级子元素，此时可以用children()方法。允许传一个选择器的表达式从而进行过滤

• find()
  children是父子关系查找，find是后代关系(包含父子关系)

• parent()
  查找合集里面的每一个元素的父元素

• parents()
  查找祖先节点

• closest()
  从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素

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

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

• siblings()
  查找指定元素集合中每一个元素的同辈元素

• add()
  jQuery是一个合集对象，通过$()方法找到指定的元素合集后可以进行一系列的操作。$()之后就意味着这个合集对象已经是确定的，如果后期需要再往这个合集中添加一新的元素则使用add方法，用来创建一个新的jQuery对象 ，元素添加到匹配的元素集合中

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