jQuery筛选&文档处理（三）
2022/3/21 6:31:12
本文主要是介绍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() | 前后所有的兄弟标签 |
代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p><span>Hello</span>, how are you?</p>
<div></div>
<div></div>
<div></div>
<div></div>
<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$("p").find("span"); //结果为[ <span>Hello</span> ]
$("div:first").nextAll().addClass("after");
//结果为[ <div class="after"></div>, <div class="after"></div>, <div class="after"></div> ]
//查找span标签的父类元素
console.log($("span").parent()); //得到span标签的父类jquery对象
console.log($("span").parents()); //得到span标签的所有父类jquery对象
//给最后一个之前的所有div加上一个类
$("div:last").prevAll().addClass("before");
//结果如下
//[ <div class="before"></div>, <div class="before"></div>, <div class="before"></div> ]
console.log($("div").siblings());
//结果为[<p><span>Hello</span>, how are you?</p> <div></div> <div></div> <div></div>]
console.log($("p").children()); //结果为<span>Hello</span>
</script>
</body>
</html>
二，文档处理
1.内部插入
<!-- 处理文档 --> <div class="a"> <div class="b"></div> </div> <div class="small"></div>
(1)append(content/fn)向当前元素追加内部的后置内容
$(".small").append($(".a"));//将a元素放在small元素的后面
//回调函数
$(".small").append(function(index,html){
console.log(index,html);
//index返回的是当前元素的小标
//HTML返回的是在当前元素的后面的元素
//在此处返回就是<div class="a"><div class="b"></div></div>
})
与append()方法类型的一个方法appendTo()：将当前所有元素追加到确定的一个集合内部 反向
//下面两行代码产生的效果是一致的
$(".a").append($(".small"));
$(".small").append($(".a"));
（2)prepend(content/fn):将内容添加到指定元素的前面
$(".small").prepend($(".a"));
$(".small").prepend(function(index, html) {
console.log(index, html);
//在此处返回就是<div class="a"><div class="b"></div></div>
})
类似的还有prependTo(content):将当前所有元素前置追加到确定的一个集合内部 反向（与prepend()是一个颠倒的效果）
2.外部插入
(1)after(content/fn)：在当前元素之后追加元素
$(".a").after($(".small"));
$(".a").after(function(index,html) {
console.log(index,html);
//控制台输出的是0 <div class="b"></div>
})
insertAfter(content)将当前所有元素追加到确定元素的后面 反向
(2)before(content/fn)：在当前元素之前追加元素
$(".a").before($(".small"));
$(".a").before(function(index,html) {
console.log(index,html);
//控制台输出的是0 <div class="b"></div>
})
insertBefore(content)将当前所有元素追加到确定元素的后面 反向
3.包裹
<p class="a">hello world</p> <p class="b"></p> <ul> <li></li> </ul>
(1)wrap():将匹配到的元素用结构化方法包裹起来，一对一包装（匹配到几个元素包裹几次）
用原先div的内容作为新div的class，并将每一个元素包裹起来
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('.inner').wrap(function() {
return '<div class="' + $(this).text() + '" />';
});
//结果为<div class="container">
// <div class="Hello">
// <div class="inner">Hello</div>
// </div>
// <div class="Goodbye">
// <div class="inner">Goodbye</div>
// </div>
// </div>
</script>
</body>
</html>
(2)unwrap()：除了当前元素外
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
</div>
<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$("p").unwrap();
//结果如下
// <p>Hello</p>
// <p>cruel</p>
// <p>World</p>
</script>
</body>
</html>
(3)wrapAll()：将所有匹配到的元素包装到一起（包装一次）
//用一个生成的div将所有段落包裹起来
$("p").wrapAll(document.createElement("div"));
4.替换
(1)replaceWith():后替换前
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>Hello</p><p>cruel</p><p>World</p>
<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$("p").replaceWith("<b>Paragraph. </b>");
//结果如下
//<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>
</script>
</body>
</html>
(2)replaceAll():前替换后
5.删除
(1)empty():删除匹配到的元素中的所有子节点（不包括匹配的元素）
(2)remove():删除匹配到的元素中的所有子节点（包括匹配的元素）
(3)detach():在jQuery对象中并没有删除，只是界面没有了，数据和事件之类任然存在。
6.复制
clone（deepEven）
参数deepEven为：
false（浅克隆，只是克隆DOM元素，默认值）
true（深克隆，克隆DOM元素外，还克隆了事件等）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<b>Hello</b><p>, how are you?</p>
<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中
$("b").clone().prependTo("p");
//结果如下
//<b>Hello</b><p><b>Hello</b>, how are you?</p>
</script>
</body>
</html>
7.文档处理案例
菜单选项收缩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
/* 100%视图高度 */
height: 100vh;
/* 实现渐变色背景 */
background: linear-gradient(200deg, #8A2BE2, #FFf, #FFA07A);
}
li {
/*去除选项前面的点点*/
list-style: none;
}
ul {
/*调整了内边距*/
padding: 0px;
}
ol {
/*当前是不显示*/
display: none;
}
/*激活的样式*/
.active {
/* background: blue; */
color: red;
}
/*激活的时候 它地下的ol*/
.active ol {
display: block;
}
#H1 {
/* 设置h1标签居中 */
display: flex;
justify-content: center;
align-items: center;
}
#H1 h1 {
/* 设置字体的样式 */
color: lightsalmon;
/* 设置字体间距 */
letter-spacing: 6px;
}
</style>
</head>
<body>
<div id="H1">
<h1>热门编程语言</h1>
</div>
<ul>
<li>
<p>Java</p>
<ol>
<li>JavaBase</li>
<li>JavaAPI</li>
<li>JavaOop</li>
<li>JavaAdvance</li>
<li>JavaSwing</li>
</ol>
</li>
<li>
<p>数据库</p>
<ol>
<li>SQLserver</li>
<li>Oracle</li>
<li>MySQL</li>
</ol>
</li>
<li>
<p>Python</p>
<ol>
<li>pyBase</li>
<li>pyReptile</li>
</ol>
</li>
</ul>
<script src="js/jquery-3.5.1.js"></script>
<script>
//给所有的菜单设置点击事件
$("p").click(function() {
$("p>ol").fadeToggle(1000)
//this是js对象
let li = $(this).parents("li")
//移除其他(兄弟)菜单的激活样式
li.siblings().removeClass("active")
//给菜单添加激活的样式
if (li.hasClass("active")) {
return li.removeClass("active")
}
li.addClass("active")
})
//实现动画淡化
</script>
</body>
</html>
图片展示：
学会文档处理的方法，让我们在处理元素的时候更加便捷了，好啦，下期再见哈！
这篇关于jQuery筛选&文档处理（三）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-03-06jquery对css样式（jquery中的css方法）-icode9专业技术文章分享
- 2023-05-27JQuery的认识和安装
- 2023-01-06JQuery应用技巧：如何定义 HTML 模板并使用 JQuery 进行加载-icode9专业技术文章分享
- 2022-09-29复习-jQuery
- 2022-09-04Python3项目初始化10-->前端基础jquery、ajax，sweetalert--更新用户改造
- 2022-08-30day 27 jquery
- 2022-08-29jQuery筛选器，bootstrap
- 2022-08-20JQuery事件绑定
- 2022-08-20JQuery案例
- 2022-08-07关于jQuery的学习
