![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：代码看得好累, 为什么不排版一下, 放在代码块中呢
Collection
Collection
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="static/js/jquery-3.4.1.min.js"></script>
</head>
<body>
<h2>文档处理</h2>
<div id="div1" class="class1">
<p id="i1" class="c1">1</p>
<p id="i2" class="c3">2</p>
</div>
<div id="div2" class="class1">
<p id="i3" class="c3">3</p>
<ul>
<li>12</li>
<li>11</li>
<li> <p id="i7" class="c8">8</p></li>
</ul>
</div>
<p id="i6" class="c6">6</p>
<div id="div3" class="class3">
<p id="i5" class="c5">5</p>
</div>
<div id="div4" class="class4">
<ul>
<li>12</li>
<li>11</li>
<li> <p id="i4" class="c4">4</p></li>
</ul>
<script type="text/javascript">
//在每个匹配元素里面的末尾处插入参数内容。
$(‘#div3’).append(‘末尾追加’);
$(‘.c4’).append($(‘h2’));
$(‘#div2’).append( $(‘<p>最后面2</p>‘));
//将匹配的元素插入到目标元素的最后面
$(‘.class4’).appendTo($(‘#div1’));
$(‘<p>最后面</p>‘).appendTo($(‘#div2’));
//参数内容插入到每个匹配元素的前面（元素内部）。
$(‘.class3’).prepend(‘前面追加’);
$(‘.class3’).prepend($(‘<p>前面追加2</p>‘));
//将所有元素插入到目标前面（元素内）。
$($(‘<p>前面追加3</p>‘)).prependTo(‘.class3’);
//在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。
$(‘.class3’).after(‘外部追加’);
$(‘#div3’).after($(‘<p>外部追加2</p>‘));
//在匹配元素的前面插入内容
$(‘.class3’).before(‘外部前面追加’);
$(‘#i5’).before($(‘<div><p>外部前面追加2</p></div>‘))
//从DOM中移除集合中匹配元素的所有子节点。 还有空壳
$(‘#i5’).empty();
$(‘.class3’).empty();
//将匹配元素集合从DOM中删除
$(‘#div2’).remove();
</script>
</div>
</body>
</html>#筛选<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="static/js/jquery-3.4.1.min.js"></script>
</head>
<body>
<h2> 筛选</h2>
<div id="div1" class="class1">
<p id="i1" class="c1">1</p>
<p id="i2" class="c3">2</p>
</div>
<div id="div2" class="class1">
<p id="i3" class="c3">3</p>
<ul>
<li>12</li>
<li>11</li>
<li> <p id="i7" class="c8">8</p></li>
</ul>
</div>
<p id="i6" class="c6">6</p>
<div id="div3" class="class3">
<p id="i5" class="c5">5</p>
</div>
<div id="div4" class="class4">
<ul>
<li>12</li>
<li>11</li>
<li> <p id="i4" class="c4">4</p></li>
</ul>
</div>
<div id="mydiv" class="foo bar"></div>
<script type="text/javascript">
//减少匹配元素的集合为指定的索引的哪一个元素。
// $(‘li’).eq(3).css(‘background-color’,’red’);
$(‘div’).eq(2).css(‘background-color’,’red’);
//获取匹配元素集合中第一个元素
$(‘li’).first().css(‘background-color’,’blue’);
//获取匹配元素集合中最后一个元素。
$(‘li’).last().css(‘background-color’,’red’);
//确定任何一个匹配元素是否有被分配给定的（样式）类。
$(‘#div4’).hasClass(‘class4’);
$(‘#mydiv’).hasClass(‘foo’);
</script>
</body>
</html>#hasClass<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 8px; font-size:16px; }
.selected { color:red; }
</style>
<script src="static/js/jquery-3.4.1.min.js"></script>
</head>
<body>
<p>123</p>
<p class="selected">456</p>
<div id="result1">789 </div>
<div id="result2">112 </div>
<div id="result3">123 </div>
<script>
$(“div#result1”).append($(“p:first”).hasClass(“selected”).toString());
$(“div#result2”).append($(“p:last”).hasClass(“selected”).toString());
$(“div#result3”).append($(“p”).hasClass(“selected”).toString());
</script>
</body>
</html>#属性css类<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p { margin: 8px; font-size:16px; }
.selected { color:red; }
.highlight {
background: yellow;
}
.hides{display:none;}
/.shows{display: block;}/
</style>
<script type="text/javascript" src="static/js/jquery-3.4.1.min.js"></script>
</head>
<body>
<h2>属性css类</h2>
<p onclick="pro(this)">123</p>
<p class="selected" onclick="pro(this)">456</p>
<p onclick="pro(this)">789</p>
<p onclick="pro(this)">112</p>
<p onclick="pro(this)">123</p>
<div>
<label onclick="mytoggleClass(this)">日报汇总</label>
<div class="hides">
<p>北京日报</p>
<p>上海日报</p>
</div>
</div>
<script type="text/javascript">
//为每个匹配的元素添加指定的样式类名
$(‘div:first’).addClass(‘selected’);
$(‘div:last’).addClass(‘highlight’);
//移除集合中每个匹配元素上一个，多个或全部样式。
$(‘div:last’).removeClass(‘highlight’);
//为匹配的元素集合中的每个元素上添加或删除一个或多个样式类
function mytoggleClass(obj) {
// console.log($(‘label + div’));
// $(‘label + div’).toggleClass(‘hides’);
// $(‘label + div’).toggle(‘hides’);
// $(‘label + div’).show(‘hides’);
// $(‘.hides’).attr(‘style’,’display:block’);
// $(‘.hides’).css(‘display’,’block’);
// $(‘label + div’).show(1000);
$(‘label + div’).toggle(1000);
}
//确定任何一个匹配元素是否有被分配给定的（样式）类。
function pro(obj) {
var flag = $(obj).hasClass(‘selected’);
// console.log(flag);
if(flag){
$(obj).removeClass(‘selected’);
}else {
$(obj).addClass(‘selected’);
}
}
</script>
</body>
</html>`
学习了文档处理、筛选、属性css类，基本知道了这些类如何使用。