jQuery Dom操作

• jQeury Dom操作
  1. Dom 内部追加

Js:appendChild(),insertBefore()

append()：父元素追加子元素，放到后面

prepend()：父元素追加子元素，放在前面

appendTo()：子元素追加到父元素后面

prependTo()：子元素追加到父元素前面

（选择器）.append(内容)：先后添加

（选择器）.prepend(内容)：先前添加

（内容）.appendTo(选择器)：先后添加

（内容）.prependTo(选择器)：先前添加

appendTo()和prependTo的内容里面一定要加html标签

$('<p>臣本布衣，躬耕于南阳</p>').appendTo('div');

$('<p>苟全性命于乱世，不求闻达于诸侯</p>').prependTo('div');

Dom 外部追加

after()：在指定的元素后面追加内容

before()：在指定的元素前面追加内容

insertAfter()：将添加的内容追加到指定的元素后面

insertBefore()：将添加的内容追加到指定的元素前面

Dom 删除节点

removeChild:js

remove():直接删除节点,事件也没有了。标签内容都删除

empty():仅仅清空内容。清空标签的内容，标签保留

克隆节点

cloneNode():js

clone()：克隆节点

语法：

$(selector).clone(true|false)

true:规定需复制事件处理程序。

false:默认。规定不复制事件处理程序。

• jQeury Dom遍历（重点）

祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞（兄弟姐妹）拥有相同的父。

2.1 jQuery 遍历 - 祖先

Js:parentNode

1. parent()：返回被选元素的直接父元素。
2. parents()：返回被选元素的所有祖先元素，直到根元素html。
3. parentsUntil()：返回两个被选元素之间的所有祖先元素。

jQuery 遍历 - 后代

Js:chiren(),childNodes

children()：返回被选元素的所有直接子元素。

find()：返回被选元素的后代元素，一路向下直到最后一个后代。

find()总结说明：

find(‘选择器’)里面一定要加参数

2.3 jQuery 遍历 - 同胞(siblings)

Js:nextSibligs(),previousSiblings()

同胞（同一级元素-兄弟姐妹同辈元素）拥有相同的父元素。

1. siblings()：返回被选元素的所有同胞元素。

next()：返回被选元素的下一个同胞元素。这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。

1. nextAll()：返回被选元素的所有跟随的同胞元素。
2. nextUntil()：返回介于的两个参数之间的所有跟随的同胞元素。

prev()：返回被选元素的上一个同胞元素，同胞元素就是其他的元素。不一定是同一个标签。

prevAll()：返回被选元素的所有前面的同胞元素。

prevUntil()：返回介于的两个参数之间的所有前面的同胞元素。

2.4 jQuery 遍历- 过滤

first()：返回被选元素的首个元素。

last()：返回被选元素的最后一个元素

eq(index)：返回被选元素中带有指定索引号的元素。

filter(expr) ：筛选出与指定选择器匹配的元素集合

三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。

2.5 jQuery 遍历-其他

addBack()：添加堆栈中元素集合到当前集合。

end()：将匹配的元素列表变为前一次的状态。