![[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
attr(name): getterattr(name, value): setter<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>getter和setter - 1</title><script src="lib/jquery-3.5.1.js"></script></head><style>body{display: flex;flex-direction: column;align-items: center;}form{width: 350px;/* height: 150px; */border: 1px solid #aaa;padding: 20px 10px;background-color: cyan;box-shadow: 0 0 5px #aaa;box-sizing: border-box;border-radius: 5px;display: grid;grid-template-columns: 60px 200px;place-content: center center;gap: 5px;}button:hover{color:white;background-color: #888;border: none;cursor: pointer;}</style><body><h3>用户登录</h3><form action="handle.php" method="post"><label for="">邮箱</label><input type="email" name="email" id="email" value = "abc@php.cn" autofocus required ><label for="">密码</label><input type="password" name="password" id="password" value = "不少于八位密码" required><label for="">记住我</label><div><input type="radio" name="save" id="confirm" value="1"><label for="" checked>保存</label><input type="radio" name="save" id="cancel" value="0"><label for="">放弃</label></div><button>提交</button></form></body></html><script>var cl = console.log.bind(console);// 1. attr(): html属性进行操作// attr(name): getter// attr(name, value): settervar inputs = $("input");cl(inputs.attr("name"));inputs.attr("value","peter@qq.com");</script>
实例效果：
不仅可以获取到style属性的值,还可以获取到该元素所有样式
<script>
// 2. css(): 针对 html元素的style属性进行操作
// 原生
cl(window.getComputedStyle(document.querySelector(“form”)).width);
// JQ
var forms = $(“form”);
cl(forms.css(“width”));
forms.css({
backgroundColor:”wheat”,
})
inputs.css(“background-color” , “cyan”);
// 这是一个每次刷新随机返回表单背景色的实例forms.css("background-color",function(){// 这是一有多个颜色值的数组, 目标是从这个数组中随机返回一个值var bgcolor = ["wheat","cyan","pink","tan","lime"];// 返回哪个值, 由一个随机索引决定, 索引必须在0 -3 之间var rndcolorindex = Math.floor(Math.random() * bgcolor.length);return bgcolor[rndcolorindex];});</script>
实例效果：
<script>// 3. val():表单元素的值cl($("#email").val());$("#email").val("andy@qq.com");// 获取选中按钮的值cl($("input:radio[name=save]:checked").val());// 回调返回默认值$("#email").val(function(){return this.defaultValue;});</script>
实例效果：
<script>// 4. html()/text(): 元素内容操作// innerText ===> text();// 原生// document.querySelector("h2").innerHtml = '<span style="color:red">请登录</span>';// jQuery// $("h3").text("请登录");$("h3").html('<span style="color:red">LOGIN IN</span>');</script>
实例效果：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>常用的DOM操作</title><script src="lib/jquery-3.5.1.js"></script></head><body></body></html><script>var cl = console.log.bind(console);// 1. 元素的插入与替换, 父元素.append(子元素)$("body").append("<ol>");$("<li>").text("手提电脑").appendTo("ol");$("ol").append("<li>激光电视");$("<li>").addClass("active").text("智能5G手机").appendTo("ol");$("<li>",{id:"news",style:"background-color:cyan",}).html("<a href=''>最新商品1</a>").appendTo("ol");// append(callback)$("ol").append(function(){var res = "";for(var i=0; i <=5; i++){res += "<li>最新商品"+(i+2);}return res;});// 从第3个元素前面添加<li>, before(), 在某个元素之前添加$("ol>li:nth-of-type(3)").before("<li>VR游戏机</li>");// insertAfter()$("<li>北斗导航仪</li>").insertAfter("ol>li:nth-of-type(5)");// prepend(), prependTo(), 将新元素插入到头部$("<li>最新潮流</li>").prependTo("ol");// 元素的换: replaceWith()$("ol>li:last-of-type").replaceWith("<h4>This is The END!</h4>");$("<p>This is Begin...</p>").replaceAll("ol > li:first-of-type");</script>
实例效果：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>过滤器</title><script src="lib/jquery-3.5.1.js"></script></head><body><ul id="first"><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul><ul id="second"><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul></body></html><script>var cl = console.log.bind(console);//方法 childrenvar ul1 = $("ul").filter("#first");var childrens = ul1.children();// first():返回第一个childrens.first().css("background", "lightblue");// last(): 返回最后一个childrens.last().css("background", "lightgreen");// eq(n): 返回任何一个childrens.eq(2).css("background", "lightcyan");// 仅获取第2个和第3个子元素$("ul#second >li:nth-of-type(-n+3):not(li:first-of-type)").css("color","red");</script>
实例效果：
总结：