![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：并不是任何功能都要用jq, 原生方便就用原生, 别太在意这个
Collection
Collection
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Jquery - Dom</title></head><body><script src="js/jquery-3.5.1.js"></script><script>$("body").append("<p>jQuery-DOM基础</p>");//jQuery 页面中添加<P>标签$("p").after("<hr>");//添加一个hr标签$("hr").after("<ul>");//添加ULvar lis = "";//定义一个空值存放li$("ul").append(function(item){for(var i = 1; i < 5; i++){lis += "<li>item"+ i +"</li>";}return lis;});//使用循环添加li标签$("ul li").eq(0).attr("id","test");//为UL中的第一个li添加一个id$("<li>我是用appendto添加的</li>").appendTo("ul");//在ul>li中添加新标签$("ul").prepend("<li>我是用prepend添加的</li>");$("<li>我是用prependTo添加的</li>").prependTo("ul");$("#test").css("color","blue");$("#test").html("我是被更改的text");$("ul li").eq(2).addClass("test");$("ul li").eq(2).css({"color":"white","background":"green",});$("ul").after("<hr>");$("hr").after("<span>");$("span").eq(1).html("jQuery-form");$("span").eq(1).after("<p>");$("p:nth-of-type(2)").after("<form>");$("form").attr("id","form");$("form").attr("class","form");$("form").attr("method","get");$("<label>").appendTo("form");$("label").html("用户：");$("<input>").appendTo("form");$("input").attr("id","user");$("input").attr("type","text");$("input").css({"width":"130px","height": "25px","font-size":"14px","margin-bottom": "10px",});$("input").after("<br>");$("br").after("<label>");$("label:nth-of-type(2)").html("密码：");$("label:nth-of-type(2)").after("<input>");$("input").css({"width":"130px","height": "25px","font-size":"14px","margin-bottom": "10px",});$("input").eq(1).attr("type","password");$("input").eq(1).after("<br>");$("br").eq(1).after("<label>");$("label:nth-of-type(3)").html("存储：");$("label:nth-of-type(3)").after("<input>");$("input").eq(2).attr("type","radio");$("input").eq(2).after("<span>");$("span").eq(2).html("保存");$("span").eq(2).after("<input>");$("input").eq(3).attr("type","radio");$("input").eq(3).attr("checked",true);$("input").eq(3).after("<span>");$("span").eq(3).html("不保存");$("span").eq(3).after("<br>");$("br").eq(2).after("<button>")$("button").html("提交");$("button").css({"background-color": "#4CAF50","border": "1px solid green","color": "white","padding": "5px 24px","cursor": "pointer","float": "left","margin-top": "10px",});$("button").after("<button>");$("button").eq(1).html("重置");$("button").eq(1).css({"background-color": "#4CAF50","border": "1px solid green","color": "white","padding": "5px 24px","cursor": "pointer","float": "left","margin-top": "10px","margin-left":"10px",});$("button").eq(1).after("<br>");$("br").eq(3).after("<div>");$("div").attr("id","box");$("button").eq(0).click(function(ev) {ev.preventDefault();var user = $("#user").val();var tips = "";var users = ["admin","ynllww","dhhaha"];if(user.length === 0){tips = "用户名不能为空";}else if(users.indexOf(user)=== -1 ){tips = '用户名不存在' + '<button type="button">请注册</button>';}else{tips = '<i style="color:green">用户名正确<i>';}if($("#user").next().get(0).tagName !== "SPAN"){$("#user").after("<span>");$('span').eq(2).html(tips).css('color','red').insertAfter(user);}});$("button").eq(1).click(function(ev){$("#user").val("");$("#password").val("");});$("input").eq(2).click(function(){$("input").eq(2).prop("checked",true);$("input").eq(3).prop("checked",false);// prop() 方法设置或返回被选元素的属性和值});$("input").eq(3).click(function(){$("input").eq(2).prop("checked",false);$("input").eq(3).prop("checked",true);});</script></body></html>
示例图
总结：对于基础的掌握，借助手册和度娘，勉强写完。还需要多写多看
天蓬老师