jQuery遍历方法与文档处理

1 jQuery遍历概念

• jQuery 遍历，可以理解为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

1.1 向上遍历

• $(“select”).parent() ：返回被选元素的直接父元素
• $(“select”).parents() ：返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()
• $(“select”).parentsUntil(“指定祖先”) :返回介于两个给定元素之间的所有祖先元素

1.2 向下遍历

• $(“select”).children() ：返回被选元素的所有直接子元素
• $(“select”).find() ：返回被选元素的后代元素

1.3 兄弟遍历

• $(“select”).siblings() ：返回被选元素的所有同胞元素
• $(“select”).next() ：返回被选元素的下一个同胞元素。
• $(“select”).nextAll() :返回被选元素的所有跟随的同胞元素。
• $(“select”).nextUntil() :获得每个元素所有跟随的同胞元素，但不包括被选择器、DOM 节点或已传递的 jQuery 对象匹配的元素。该方法有两个参数，如果加上产数就是返回参数范围内的之后的同级元素。
• $(“select”).prev() :返回被选元素的上一个同胞元素。
• $(“select”).prevAll() ：返回被选元素的所有往上的同胞元素。
• $(“select”).prevUntil() ：返回元素之前的所有同级元素，该方法有两个参数，如果加上产数就是返回参数范围内的之前的同级元素。

2 jQuery 文档处理

注意：content 代表可以解析标签或者可以解析jQuery对象。

2.1内部插入(父子之间)

• 插入尾部 ：$(“select”).append(content)；
• 插入开头：$(“selector”).prepend(“content”)；
• $(“对象”).html(“str”) 与 $(“对象”).text(“str”) 括号里什么都不写的话 是获取方法；

2.2外部插入(兄弟之间)

• 插入尾部：$(“selector”).after(“content”)；
• 插入开头：$(“selector”).before(“content”)；

2.3删除

• 删除自身与后代： $(selector).remove()
• 删除被选元素的子元素：$(selector). detach()
• 标签还在,清空内部内容和后代： $(selector). empty()

2.4替换

• 替换匹配元素集中的每个元素：$(selector). replaceWith(content)
• 替换目标元素集中的所有元素：$(content). replaceAll(selector）。

2.5 克隆

• 克隆自身与后代,克隆后不出现在页面里,需要输出到页面，其中默认值false,代表不克隆事件。 若为true,克隆事件 ：$(selector).clone(boolean)

2.6包装(包裹)

• $(selector).wrap(包裹元素的格式) 每一个被选中的jQuery对象各自被包裹
• $(selector).wrapAll(wrapper) 把所有选中的jQuery对象包裹起来
• $(selector).wrapInner(wrapper) 把每一个jQuery对象里的内容各自包裹起来
• $(selector).unwrap() 删除包裹