前端基础知识

Ne0inhk

15 Mar 2026 — 34 min read

前端基础知识

HTML
CSS
JavaScript
猜数字案例

HTML

HTML基本概念

HTML(Hyper Text Markup Language), 超⽂本标记语⾔
超文本：比文本更强大，可以表示图片、音频、视频等等
其中通过标签进行控制，这些标签都是定义好的

<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3>

这里的<h1、h2和h3就是标签

标签名body放到<>中

标签是成对出现的<h1> 为开始标签,</h1> 为结束标签

这里开始和结束标签中存放的就是此时这个标签的内容，此时开始标签中可能会带有"属性"，并且有的标签也可能是单个标签

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>测试</title></head><body> hello world </body></html>

结构之间的结构关系，构成一个DOM树

工具推荐
这里使用记事本编辑html比较不是特别方便这里推荐使用

Visual Studio Code这个软件可以运行在Window、macOS 、Linux上，并且功能丰富
快速开发 VS Code上使用！+ enter / Tab都可以快速创建一个html框架，这里不会自动保存

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body></body></html>

HTML常用标签

段落标签：p

原本这里内容是不会自动换行，因此这里可以使用 p 进行换行

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>测试</title></head><body><!-- 段落标签 p 如果没有p就不会自动换行，此时这里前面也没有缩进 --><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p></body></html>

1.p标签描述的段落，没有缩进
2.内容首尾部出换行，这里空格是无效的
3.html里面换行不是真的换行，换行需要使用对应标签

换行标签：br

br是一个单标签，并且间隙没有p标签大

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>测试</title></head><body><!-- 此时这里br也可以表示换行 其是一个单行标签 --> 换行标签 <p>这是一个段落</p><p>这是一个段落</p> 这是一个换行<br/> 这是一个换行<br/> 这是一个换行<br/></body></html>

p是段落标签，这里换行以后每一段之间有一行间距
br换行标签，所以行之间没有间距隔开

图片标签：img

<imgsrc="C:/Users/zxc06/OneDrive/图片/Screenshots/xingye.jpg"alt="">

此时这里的src表示的是这个图片的路径，alt表示如果这个图片没有正常显示这里就会显示alt内容
此时就会将这个图片显示出来

上面这个是绝对路径，但是我们可以使用相对路径 …/表示上一级目录

绝对路径 <imgsrc="C:/Users/zxc06/OneDrive/图片/Screenshots/xingye.jpg"alt=""> 相对路径 <imgsrc="../xingye.jpg"alt="这是一个人物"width="500px"height="500px"style="border: 2px solid black;">

此时这里src目录就是以此时html所在位置为基准，在其上一级目录中找是否有这个图片
此时这个上一级中有这个图片
并且这里的style中border进行了设置了黑色边框

如果上一级中有这个图片文件，此时可以点击这个连接，并显示图片，反之如果找不到就不会显示

VS Code直接可以看

//此时这里的 ./表示当前目录，但是当前目录并没有这个图片，因此就点击不出来 <imgsrc="./xingye.jpg"alt="这是一个人物"width="500px"height="500px"style="border: 2px solid black;">

此时这里没有找到图片，打开的时候就会显示原本 alt中的内容

超链接：a

href：表示点击后跳转哪个页面
target:打开⽅式.默认是_self.如果是_blank则⽤新的标签⻚打开

外部链接：href直接引用对应地址即可

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>测试</title></head><body> 外部连接 <ahref="https://wap.baidu.com/">百度</a></body></html>

此时这里就是一个链接可以点击进入对应的页面，这里是百度的页面点击就会进入百度页面

<ahref="https://wap.baidu.com/"target="_blank">百度</a>

这里target默认是当前页面打开，但是这里_blank表示在新的页面打开

内部连接：网站内部之间的链接，写相对路径即可

<ahref="demo1.html"target="_blank">点击后会跳转到demo1.html</a>

此时这里自己跳转自己

此时点击这个链接就可以进行下载这个zip

空链接：使用#在href中占位

<ahref="#">空链接</a>

此时这里的空链接点击也没有效果

表格标签table

table 标签：表示整个表格
tr : 表示表格的一行
td : 表示一个单元格
thead:表格的头部区域
tbody : 表格的主体区域

align 是表格对齐方式 algin = “center”
border表示边框
cellpadding : 内容距离边框的距离，默认1像素
cellspacing : 单元格之间的距离，默认为2像素
wideth/height : 设置尺寸

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>测试</title></head><body><tablealign="center"border="1"cellpading="0"cellspacing="0"width="500"height="500"><tr><td>名字</td><td>性别</td><td>年龄</td></tr><tr><td>张三</td><td>男</td><td>18</td></tr><tr><td>李四</td><td>女</td></tr></table></body></html>

<tablealign="center"border="1"cellpading="0"cellspacing="0"width="500"height="500"><tr><td>名字</td><td>性别</td><td>年龄</td></tr><tr><td>张三</td><td>男</td><tdrowspan="2"> 18 </td></tr><tr><td>李四</td><td>女</td></tr><tr><tdcolspan="2">李四</td></tr></table>

此时这里的rowspan表示的占据多少行
colspan表示占据多少列

表单标签

form

<formaction="test.html"><!-- form内容 --></form>

input&label

各种输入控制，文本框，按钮，单选框，复选框
type:可以取值，text , button , checkbox , file,radio等等
name : 给此时input起个名字，尤其是单选按钮，必须有相同名字才可以是单选
value : input中的默认值
checked：默认被选中，用于单选和复选按钮中

<formaction="test.html"> 账号：<inputtype="text"name="Users"id=""></br> 密码：<inputtype="password"name="password"id=""></br> 性别：<inputtype="radio"name="sex"id="male"value="0"><labelfor="male">男 </label><inputtype="radio"name="sex"id="female"value="1"><labelfor="female">女</label></br></form>

此时这里text表示文本框，password表示密码框，radio表示单选框
此时密码框写的内容会被隐藏
这里都给性别中男和女起了一个相同的名字，这样其才是单选框，如果没有这样做其就没有这种单选效果

像下面这样如果没有给input起相同名字，此时就没有起到单选的效果

<formaction="test.html"> 账号：<inputtype="text"name="Users"id=""></br> 密码：<inputtype="password"name="password"id=""></br> 性别：<inputtype="radio"> 男 <inputtype="radio">女 </form>

此时这里的lable是让此时选择性别的是，点击男或者女字，其也可以进行选择性别

checkbox

复选框

 爱好： <inputtype="checkbox"name="chec">吃饭 <inputtype="checkbox"name="chec">睡觉 <inputtype="checkbox"name="chec">打游戏

select标签

学历：<selectname="sel"id=""><optionvalue="0">小学</option><optionvalue="1">初中</option><optionvalue="2">高中</option><optionvalue="3"selected="selected">高中及以上</option></select>

此时这里selected = "selected"是让这里的高中及以上是默认选择

textarea&button

textarea标签和button按钮
文本域中内容

 简介：<textarearows="10"cols="100"></textarea></br> 注册：<inputtype="button"value="注册"><inputtype="submit"value="注册">

此时这里button按钮是没有用的，因为其并没有提交，所以这里点击第一个并没有任何效果，但是第二个会，因为其会提交

提交以后这里上面就会有一些账号密码信息，和一些键值对表示的信息

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>测试</title></head><body><div>我是一个div</div><div>我是一个div</div><div>我是一个div</div><span>我是一个span</span><span>我是一个span</span><span>我是一个span</span></body></html>

小问题：使用html写一个注册表格

这里用户注册是一个h1标题
此时就是使用一个table表格即可，放入用户名、手机号和密码，这里的注册是一个button按钮，这里登录是一个超链接

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>用户注册</title></head><body><h1>用户注册</h1><table><tr><td>用户名</td><td><inputtype="text"name=""id=""placeholder="请输入用户名"></td></tr><tr><td>手机号</td><td><inputtype="number"name=""id=""placeholder="请输入手机号"></td></tr><tr><td>密码</td><td><inputtype="password"name=""id=""placeholder="请输入密码"></td></tr></table><div><inputtype="submit"value="注册"><span>已有账号?</span><ahref="#">登录</a></div></body></html>

CSS

前端中html可以表示这个页面有什么，但是这样并不美观，因此CSS就可以对其页面进行美化
CSS(Cascading Style Sheet)，层叠样式表, ⽤于控制⻚⾯的样式
CSS能够对⽹⻚中元素位置的排版进⾏像素级精确控制,实现美化⻚⾯的效果.能够做到⻚⾯的样式和结构分离

CSS引入方式

选择器 + { 声明} 这里选择器可以确定修改谁 声明决定修改成啥，并且这里的声明都是一些键值对

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><p>一个段落</p><p>一个段落</p><div>一个div</div><div>一个div</div><ahref="#">超链接</a><ahref="#">超链接</a><ahref="#">超链接</a></body></html>

此时上面并没有颜色，因此可以使用上面三种方式对其进行修改

1.内部样式
这里的内部标签通常放到head中，但是放到body中也能被正常解析

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><!--内部标签 --><style>p{color: red }div{color:rgb(180, 220, 22)}span{color: blue }</style></head><body><p>一个段落</p><p>一个段落</p><div>一个div</div><div>一个div</div><ahref="#">超链接</a><ahref="#">超链接</a><ahref="#">超链接</a></body></html>

这里可以通过color进行颜色选择，也可以使用rgb进行颜色选择

但是写在这里的head内部只可以当前这一个文件写，因此可以将这里style放到一个css文件中，然后引用这个css文件即可

2.外部样式

一个css代码 p{color: red }

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><linkrel="stylesheet"href="demo.css"></head><body><p>一个段落</p><p>一个段落</p><div>一个div</div><div>一个div</div><ahref="#">超链接</a><ahref="#">超链接</a><ahref="#">超链接</a></body></html>

这里通过一个link进行外部CSS文件进行解析

<linkrel="stylesheet"href="demo.css">

这样的确可以实现其他html文件也可以使用这里的CSS的代码，但是上面这样修改都是修改这里的所有 p 、div标签等等，因此这里有了行内样式

3.行内样式

<pstyle="color: red;">一个段落</p><pstyle="color: blue;">一个段落</p><div>一个div</div><div>一个div</div><ahref="#">超链接</a><ahref="#">超链接</a><ahref="#">超链接</a>

这里可以在其标签里面进行样式控制，但是如果这里面控制样式比较多，此时代码美观就不是特别好

CSS选择器

1.标签选择器
上面head标签中设置器格式中内部标签其实就是标签选择器

/* 选择所有的a标签, 设置颜⾊为红⾊ */a{color: red;}/* 选择所有的div标签, 设置颜⾊为绿⾊ */div{color: green;}

2.类选择器
还是将其放到style进行使用，但是其使用方式不同

<style>.red{color: red;}.blue{color: blue;}</style>

此时这里使用需要用到class

<pclass="red">一个段落</p><pclass="blue">一个段落</p>

3.ID选择器

<style>.red{color: red;}.blue{color: blue;}/* id选择器 */#div1{font-size: 32px;}</style>

<pclass="red"id="div1">一个段落</p><pclass="blue">一个段落</p>

这里标签中需要使用id来进行使用，这里就进行字体大小修改

4.通配符
就是将页面中的所有格式都修改成同一个格式

<style>/* .red{ color: red; } .blue{ color: blue; } id选择器 #div1{ font-size: 32px; *//* } */*{color: #ff0000;}</style>

这里颜色选择是16进制方式进行选择，这里表示的是红色，也就是将rgb转化成16进制

5.复合选择器

<style>/* 表示子孙 */ul a{color: red;}ol li{color: purple;}</style>

此时这里这里的 ul 和 a并不一定是相邻标签，这里是其孩子标签

<style>/* 表示子孙 */li>a{color: red;}ol li{color: purple;}</style>

但是如果是 li > a，那此时a是li的孩子标签才可以进行修改，如果不是则修改无效

<ul><li>aaa</li><li>bbb</li><li><ahref="#">ccc</a></li></ul><ol><li>1111</li><li>2222</li><li>3333</li></ol>

常用的CSS

<style>/* 颜色 */.text{color: red;}/* 字体大小 */.text{font-size: 32px;}</style>

此时颜色可以使用英文单词、rgb、十六进制表示

border边框
border-width 设置边框粗细
border-style 设置边框类型 dotted(点)，solid:实线,double:双线，dashed:虚线
border-color 设置边框颜色

<style>div{border: red solid 1px;}span{border: blue solid 1px;}</style>

<div>我是一个div</div><div>我是一个div</div><div><ahref="#">超链接</a></div><span>span111</span>

<style>div{border: red solid 1px;}div{border-width: 1px;border-color: red;border-style: solid;}</style>

此时这两个div表示的意思是一样的，只不过上面这个全部放一起了

width/height 宽度和高度
只有块级元素：h1 - h6，p ，div等
行内元素：a span
此时这里的块级元素独占一行，才可以进行设置宽高
行内元素不独占一行，所有不可以设置宽高

<style>div{border: red solid 1px;width: 500px;height:50px;}span{border: blue solid 1px;/* 此时这里不能独占一行的进行设置宽和高是没有意义的 */width: 500px;height:50px;}</style>

<div>我是一个div</div><div>我是一个div</div><div><ahref="#">超链接</a></div><span>span111</span>

此时就对其进行了修改，但是这里span不是独占一行，所以这里设置宽和高是没有意义的

可以使用
display: block将其修改称为块级元素
display: inline将其修改成行级元素

<style>span{display: block;border: blue solid 1px;/* 此时这里不能独占一行的进行设置宽和高是没有意义的 */width: 500px;height:50px;}</style>

此时这里将其span修改成了块级元素，此时就可以进行修改了

此时也可以对边框每个方向的宽度进行设置

<style>div{border: red solid 1px;border-top-width: 2px;border-left-width: 3px;border-right-width: 5px;border-bottom-width: 7px;width: 500px;height:50px;}</style>

<style>div{border: red solid 1px;border-top-width: 2px;border-left-width: 3px;border-right-width: 5px;border-bottom-width: 7px;border-top-style: solid;border-left-style: double;border-right-style: dashed;border-bottom-style: dotted;width: 500px;height:50px;}</style>

此时的边框样式也可以进行修改

这里border-width 和 border-style可以直接传入多个参数，有对应意义

只给两个参数

<style>div{border-color: red;border-style: dotted double;width: 500px;right: 100px;}</style>

此时第一个参数表示上下，第二个参数表示左右

<style>div{border-color: red;border-style: dotted double solid;width: 500px;right: 100px;}</style>

三个参数，第一个表示顶部，第二个表示左右，第三个表示底部

<style>div{border-color: red;border-style: dotted double solid dashed;width: 500px;right: 100px;}</style>

四个参数，依次顶 -》右-》底-》左

padding
设置内容和边框之间的距离

原本这里是这样的，但是我们认为这里

<style>div{border-color: red;border-style: dotted double solid dashed;padding: 100px;width: 500px;right: 100px;}</style>

这里进行修改后就会变成这样

这里依旧是可以设置4个方向的值，并且也可以直接使用一个padding给其参数的个数，参数个数不同其含义也不同，和上面的一样

margin：外边距，设置元素和元素之间的距离

<style>div{border-color: red;border-style: dotted double solid dashed;padding: 100px;/* margin: 100px; */width: 500px;right: 100px;}</style>

此时这里距离就和上面不一样了
此时这里仍然是可以设置4个方向的值

JavaScript

JavaScript基本概念

JavaScript(简称JS),是⼀个脚本语⾔,解释型或即时编译型的编程语⾔.虽然它是作为开发Web⻚⾯的脚本语⾔⽽出名，但是它也被⽤到了很多⾮浏览器环境中
最初是由JavaScript之⽗布兰登.艾奇(Brendan Eich)编写的，由于当时他对Java并不感兴趣，所有仅仅使用短短10天就搞出来了，但是时间短也导致了当时一些这个语言编写的东西有些混乱
但是其实Java和JavaScript并没有关系，这里只不过JavaScript是为了蹭一下Java热度，当时Java比较火，一次编写到处运行，但是这个大佬还是瞧不起Java

HTML : 网页的结构(骨)
CSS : 网页的表现(皮)
JavaScript : 网页的行为(魂)

引入方式
和CSS类似，也是有3种

行内样式

<body><inputtype="button"value="点击一下"onclick="alert('hello world')"></body>

内部样式
CSS将这里的内部样式放到了head中，但是此时JavaScript建议的是放到body中，但是放到head中也是可以的

<body><inputtype="button"value="点击一下"onclick="alert('hello world')"><script>//内部样式alert('hello JavaScript')</script></body>

此时这里进入这个就直接显示了alert的内容

外部样式
将这里js代码放到一个文件中，直接引用这个文件即可使用

alert('hello Script')

<body><inputtype="button"value="点击一下"onclick="alert('hello world')"><scriptsrc="js.js"></script></body>

基础语法

数据类型

命名规则：组成字符可以是任何字⺟、数字、下划线（_）或美元符号（$）
数字不能开头，建议使用大驼峰
+可以进行字符串拼接

JavaScript是一门动态弱类型语言，此时var类型可以放不同类型的值，随着程序运行，变量类型可能发生改变

<script>var name ='zhangsan'; console.log(typeof name); name =12; console.log(typeof name);</script>

此时这里console是可以打印日志，这样在其网页可以使用F12开发者工具的console看日志信息

<script>var a =10; console.log(typeof a);//numbervar b ='hello'; console.log(typeof b);//stringvar c =true; console.log(typeof c);//booleanvar d; console.log(typeof d);//undefinedvar e =null; console.log(typeof e);//null</script>

此时这里如果没有初始化器类型就是undefined，如果是空的话就是object是

运算符
此处的运算符大部分和Java类似，但是有些Java并没有

此时 == 比较相等，会进行隐式类型转化, ===比较相等不会进行隐式类型转化

<script> console.log(1=='1'); console.log(1==='1');</script>

此时==比较的是里面的内容，而 ===比较内容和类型

JavaScript对象

数组

<script>var arr =newArray();var arr2 =[];var arr3 =[1,2,'hello',true]; console.log(typeof arr); console.log(typeof arr2); console.log(typeof arr3);</script>

js中并不要求数组中元素类型必须是相同类型，这里可以不同
数组增删查改

<script>//查找var arr =newArray();var arr2 =[];var arr3 =[1,2,'hello',true]; console.log(arr3);//数组内容 console.log(arr3.length);//数组长度</script>

<script>//增var arr3 =[1,2,'hello',true]; arr3[4]=123;//添加一个元素 console.log(arr3);</script>

<script>//改var arr3 =[1,2,'hello',true]; arr3[3]=false;//修改元素 console.log(arr3);</script>

<script>//删var arr =newArray();var arr2 =[];var arr3 =[1,2,'hello',true]; arr3.splice(3,1); console.log(arr3); console.log(arr3.length);</script>

这里splice表示的是从3下标开始删除1个元素

函数

// 创建函数/函数声明/函数定义 function 函数名(形参列表) { 函数体 return 返回值; } // 函数调⽤ 函数名(实参列表) // 不考虑返回值 返回值 = 函数名(实参列表) // 考虑返回值

<script>functionhello(){ console.log('hello');}hello();</script>

参数匹配问题

<script>//参数问题functionadd(a,b){ sum = a+b; console.log(sum);return sum;}add(10);add(10,20,30);add('aa',3);add('aa');</script>

参数少的话就会出现未定义问题，参数多的话就回来进行截取，把后面多的元素截取掉

对象

<script>var a ={};// 创建了⼀个空的对象 var student ={ name:'张三', age:18,sayHello:function(){ console.log("hello");}}; console.log(a); console.log(student.name); console.log(student['age']); student.sayHello();</script>

此时这里a并没有初始化，所以是一个Object对象

<script>//通过构造方法创建对象functionCat(name , type){this.name = name;this.type = type;this.miao=function(){ console.log('喵喵喵');}}var mimi =newCat('咪咪','中华田园猫'); console.log(mimi.name +" "+ mimi.type); mimi.miao();</script>

JQuery

JQuery是一个快速、简洁且功能丰富的JavaScript框架，对JavaSript常用功能进行了封装，提供了选择器和DOM操作，让其编写代码更加高效
直接可以通过引入对应库就可以使用

<scriptsrc="https://code.jquery.com/jquery-3.7.1.min.js"></script>

地址https://releases.jquery.com/

uncompressed: ⾮压缩版本(易读,但是⽂件较⼤,传输速度慢)
minified:压缩版(不易读,⽂件⼩,性能⾼,开发中推荐)
slim:精简瘦⾝版,没有Ajax和⼀些特效
slim minified: slim的压缩版
但是使用外部库，这样可能出现不可以访问的问题，所以此时推荐将其下载到本地，放到项目中也可以使用
此时就可以这样使用了

<scriptsrc="jquery-3.7.1.js"></script>

<script>$(selector).action();</script>

$( )是JQuery提供的一个全局函数，用于选择和操作 HTML元素
selector选择器，用来查询 HTML元素
action操作，是对元素的操作

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><scriptsrc="jquery-3.7.1.js"></script></head><body><buttontype="button"> 点击消失 </button><script>//此时这里等东西全部加载好才可以执行$(document).ready(function(){$('button').click(function(){$(this).hide();})});</script></body></html>

此时这里只要点击button按钮，这个按钮就会消失

JQuery选择器
这里选择器都以$开头的
并且和CSS类似，可以通过标签选择，也可以通过 .class选择，也可以通过#id进行选择

JQuery事件
JS想要创建动态页面，必须感知用户的行为，此时页面中的一些操作都会产生一个事件被JS获取到，从而执行其他复杂操作

事件组成
1.事件源：那个元素触发的
2.事件类型:点击、选中、修改
3.事件处理程序：如何处理

操作元素

获取和修改元素内容

这里可以对其内容进行获取，也可以进行修改，有参数的时候就是修改，没有参数的时候就是获取

获取元素

</script><divid="div"><span> hello world</span></div><inputtype="text"id='input'value="你好"><script>let html =$('#div').html(); console.log(html);let val =$('#input').val(); console.log(val);let text =$('#div').text(); console.log(text);</script>

此时这里html()会返回元素内容并且也包含html标签
val() 返回当前表单的值
text() 返回所选元素内容

设置元素内容

<divid="test"></div><divid="test2"></div><inputtype="text"value=""><script>$(document).ready(function(){$("#test").html('<h1>设置html</h1>');//修改格式和内容$("#test2").text('<h1>设置text</h1>');//修改内容$("input").val("设置内容");});</script>

此时这里会进行修改，如果这后面方法中有参数就是要修改成的内容

获取 / 设置元素属性
JQuery 中 attr()⽅法⽤于获取属性值.同理有参数就是设置属性

<ahref="https://www.jd.com/"id='jd'>超链接</a><script>let href =$('#jd').attr("href"); console.log(href);</script>

获取这里面超链接的值

设置

<ahref="https://www.jd.com/"id='jd'>超链接</a><script> console.log($('#jd').attr("href"));$('#jd').attr("href","https://www.baidu.com/"); console.log($('#jd').attr("href"));</script>

此时这里原本是jd的链接，现在修改成baidu的链接了

获取/设置CSS属性

<divstyle="color: red;">一个文本</div><script>let color =$('div').css('color'); console.log(color);</script>

这里也可以获取其此时CSS里面的属性，此时获取上面这个颜色

<divstyle="color: red;">一个文本</div><script>let color =$('div').css('color'); console.log(color);$('div').css('color','blue'); console.log($('div').css('color'));</script>

此时这里对其颜色进行修改

添加元素

append()：在被选元素的尾部插入内容
prepend()：被选元素头部插入内容
after()：被选元素之后插入内容
before()：被选元素前插入内容

<ol><li>List item 1</li><li>List item 2</li><li>List item 3</li></ol><imgsrc="../xingye.jpg"style="width: 200px;height: 200px;"><script>$('ol').append('我是append');$('ol').prepend('我是prepend');$('ol').before('我是before');$('ol').after('我是after');</script>

删除元素
remove()：删除被选元素及其子元素
empty()：删除被选元素的子元素

<ol><li>List item 1</li><li>List item 2</li><li>List item 3</li></ol><imgsrc="../xingye.jpg"style="width: 200px;height: 200px;"><script>$('ol').remove();//移除整个元素//$('ol').empty();//清空$('ol').append('我是append');$('ol').prepend('我是prepend');$('ol').before('我是before');$('ol').after('我是after');</script>

<ol><li>List item 1</li><li>List item 2</li><li>List item 3</li></ol><imgsrc="../xingye.jpg"style="width: 200px;height: 200px;"><script>//$('ol').remove();//移除整个元素$('ol').empty();//清空$('ol').append('我是append');$('ol').prepend('我是prepend');$('ol').before('我是before');$('ol').after('我是after');</script>

猜数字案例

每次要输入猜的数字，点击猜这个按钮，就会猜的次数++，结果显示猜大了，还是猜小了
点击这里重新开始就会重新生成1~100之间的数字，猜的次数重置为0
1.此时这里先生成一个随机数
2.获取其输入框中内容进行比较输出结果
3.猜对了以后，可以点击重新开始游戏进行将一些数据重置

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>猜数字</title><scriptsrc="jquery-3.7.1.js"></script></head><body><divstyle="margin: 0 auto;width: 500px;"><buttonid="reset">从新开始游戏</button><br/> 请输入要猜的数字：<inputtype="number"id="inputNum"><buttonid="guess">猜</button><br/> 已经猜的次数：<spanid="count"> 0 </span><br/> 结果：<spanid="result"></span></div><script>let randNum = Math.floor(Math.random()*100)+1;//生成1~100之间的随// 机数 console.log(randNum);let count =0;//猜数$('#guess').click(function(){//更新猜的次数 count++;$('#count').text(count);//获取输入文本框中内容，并进行比较let inputNum =$("#inputNum").val();if(inputNum < randNum){$("#result").text("猜小了");$("#result").css('color','red');}elseif(inputNum > randNum){$("#result").text("猜大了");$("#result").css('color','red');}else{$("#result").text("猜对了");$("#result").css('color','green');}});$("#reset").click(function(){ count =0; randNum = Math.floor(Math.random()*100)+1;$("#inputNumber").val("");$("#count").text(count);$("#result").text("");});</script></body></html>