jQuery筛选文档处理（三）
目录：
目录
一，查找
二，文档处理
1.内部插入
(1)append(content/fn)向当前元素追加内部的后置内容
（2)prepend(content/fn):将内容添加到指定元素的前面
2.外部插入
(1)after(content/fn)：在当前元素之后追加元素
(2)before(content/fn)：在当前元素之前追加元素
3.包裹
(1)wrap():将匹配到的元素用结构化方法包裹起来，一对一包装（匹配到几个元素包裹几次）
(2)unwrap()：除了当前元素外
(3)wrapAll()：将所有匹配到的元素包装到一起（包装一次）
4.替换
(1)replaceWith():后替换前
(2)replaceAll():前替换后
5.删除
(1)empty():删除匹配到的元素中的所有子节点（不包括匹配的元素）
(2)remove():删除匹配到的元素中的所有子节点（包括匹配的元素）
(3)detach():在jQuery对象中并没有删除，只是界面没有了，数据和事件之类任然存在。
6.复制
clone（deepEven）
7.文档处理案例
一，查找
| children() | 子标签中查找 |
| find() | 后代标签中查找 |
| parent() | 父标签 |
| prevAll() | 前面的所有兄弟标签 |
| nextAll() | 后面的所有兄弟标签 |
| siblings() | 前后所有的兄弟标签 |
代码展示
Hello, how are you?
二，文档处理
1.内部插入
(1)append(content/fn)向当前元素追加内部的后置内容
$(".small").append($(".a"));//将a元素放在small元素的后面//回调函数$(".small").append(function(index,html){console.log(index,html);//index返回的是当前元素的小标//HTML返回的是在当前元素的后面的元素//在此处返回就是})与append()方法类型的一个方法appendTo()：将当前所有元素追加到确定的一个集合内部 反向
//下面两行代码产生的效果是一致的$(".a").append($(".small"));$(".small").append($(".a"));（2)prepend(content/fn):将内容添加到指定元素的前面
$(".small").prepend($(".a"));$(".small").prepend(function(index, html) {console.log(index, html);//在此处返回就是})类似的还有prependTo(content):将当前所有元素前置追加到确定的一个集合内部 反向（与prepend()是一个颠倒的效果）
2.外部插入
(1)after(content/fn)：在当前元素之后追加元素
$(".a").after($(".small"));$(".a").after(function(index,html) {console.log(index,html);//控制台输出的是0 })insertAfter(content)将当前所有元素追加到确定元素的后面 反向
(2)before(content/fn)：在当前元素之前追加元素
$(".a").before($(".small"));$(".a").before(function(index,html) {console.log(index,html);//控制台输出的是0 })insertBefore(content)将当前所有元素追加到确定元素的后面 反向
3.包裹
hello world
(1)wrap():将匹配到的元素用结构化方法包裹起来，一对一包装（匹配到几个元素包裹几次）
用原先div的内容作为新div的class，并将每一个元素包裹起来
(2)unwrap()：除了当前元素外
Hello
cruel
World
(3)wrapAll()：将所有匹配到的元素包装到一起（包装一次）
//用一个生成的div将所有段落包裹起来
$("p").wrapAll(document.createElement("div"));4.替换
(1)replaceWith():后替换前
Hello
cruel
World
(2)replaceAll():前替换后
5.删除
(1)empty():删除匹配到的元素中的所有子节点（不包括匹配的元素）
(2)remove():删除匹配到的元素中的所有子节点（包括匹配的元素）
(3)detach():在jQuery对象中并没有删除，只是界面没有了，数据和事件之类任然存在。
6.复制
clone（deepEven）
参数deepEven为：
false（浅克隆，只是克隆DOM元素，默认值）
true（深克隆，克隆DOM元素外，还克隆了事件等）
, how are you?
7.文档处理案例
菜单选项收缩
Title 热门编程语言
Java
- JavaBase
- JavaAPI
- JavaOop
- JavaAdvance
- JavaSwing
数据库
- SQLserver
- Oracle
- MySQL
Python
- pyBase
- pyReptile
图片展示：
学会文档处理的方法，让我们在处理元素的时候更加便捷了，好啦，下期再见哈！
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！