前端开发基础涵盖 HTML 结构、CSS 样式及 JavaScript 交互逻辑。文章介绍了标签使用、选择器原理、DOM 操作及常见表单组件，并通过猜数字案例演示了事件处理与 DOM 修改的实际应用。适合初学者系统了解 Web 前端核心概念。
HTML (Hyper Text Markup Language)，超文本标记语言。 超文本：比文本更强大，可以表示图片、音频、视频等。 通过标签进行控制，这些标签都是定义好的。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
这里的 h1、h2 和 h3 就是标签。
标签名 body 放到<>中。
<!-- 标签是成对出现的 -->
<h1>开始标签</h1>
<h1>结束标签</h1>
开始和结束标签中存放的是此时这个标签的内容。开始标签中可能会带有"属性"，并且有的标签也可能是单个标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试</>
hello world
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online
结构之间的结构关系，构成一个DOM 树。
工具推荐 建议使用 Visual Studio Code 编辑 HTML。它支持 Windows、macOS、Linux，功能丰富。 在 VS Code 中使用 Emmet 语法可以快速创建 HTML 框架（如输入
!+Enter）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body></body>
</html>
段落标签：p
原本内容不会自动换行，可以使用 p 进行换行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试</title>
</head>
<body>
<!-- 如果没有 p 就不会自动换行 -->
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
</body>
</html>
换行标签：br br 是一个单标签，间隙没有 p 标签大。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试</title>
</head>
<body>
换行标签
<p>这是一个段落</p>
<p>这是一个段落</p>
这是一个换行<br/>
这是一个换行<br/>
这是一个换行<br/>
</body>
</html>
p 是段落标签，换行以后每一段之间有一行间距。 br 换行标签，所以行之间没有间距隔开。
图片标签：img
<img src="C:/Users/zxc06/OneDrive/图片/Screenshots/xingye.jpg" alt="">
src 表示图片路径，alt 表示图片未正常显示时显示的内容。
上面是绝对路径，也可以使用相对路径 ../ 表示上一级目录。
<!-- 绝对路径 -->
<img src="C:/Users/zxc06/OneDrive/图片/Screenshots/xingye.jpg" alt="">
<!-- 相对路径 -->
<img src="../xingye.jpg" alt="这是一个人物" width="500px" height="500px" style="border: 2px solid black;">
src 目录以当前 HTML 所在位置为基准。style 中 border 设置了黑色边框。
如果找不到图片，点击连接不会显示图片，而是显示 alt 中的内容。
VS Code 可以直接预览。
// ./ 表示当前目录，若当前目录没有该图片则无法显示
<img src="./xingye.jpg" alt="这是一个人物" width="500px" height="500px" style="border: 2px solid black;">
超链接：a href：点击后跳转的页面。 target：打开方式。默认
_self。如果是_blank则用新标签页打开。
外部链接：href 直接引用对应地址即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试</title>
</head>
<body>
外部连接
<a href="https://wap.baidu.com/">百度</a>
</body>
</html>
<a href="https://wap.baidu.com/" target="_blank">百度</a>
target 默认是当前页面打开，_blank 表示在新页面打开。
内部连接：网站内部之间的链接，写相对路径即可。
<a href="demo1.html" target="_blank">点击后会跳转到 demo1.html</a>
点击链接可以进行下载。
空链接：使用 # 在 href 中占位。
<a href="#">空链接</a>
点击没有效果。
table 标签：表示整个表格。 tr：表示表格的一行。 td：表示一个单元格。 thead：表格的头部区域。 tbody：表格的主体区域。
align：表格对齐方式，align = "center"。 border：表示边框。 cellpadding：内容距离边框的距离，默认 1 像素。 cellspacing：单元格之间的距离，默认为 2 像素。 width/height：设置尺寸。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试</title>
</head>
<body>
<table align="center" border="1" cellpadding="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>
<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="500">
<tr>
<td>名字</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td rowspan="2">18</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
</tr>
<tr>
<td colspan="2">李四</td>
</tr>
</table>
rowspan 表示占据多少行，colspan 表示占据多少列。
form
<form action="test.html">
<!-- form 内容 -->
</form>
input & label
各种输入控制，文本框、按钮、单选框、复选框。 type：取值 text, button, checkbox, file, radio 等。 name：给 input 起个名字，尤其是单选按钮，必须有相同名字才可以是单选。 value：input 中的默认值。 checked：默认被选中，用于单选和复选按钮中。
<form action="test.html">
账号：<input type="text" name="Users" id="">
<br/>
密码：<input type="password" name="password" id="">
<br/>
性别：
<input type="radio" name="sex" id="male" value="0">
<label for="male">男</label>
<input type="radio" name="sex" id="female" value="1">
<label for="female">女</label>
</form>
text 表示文本框，password 表示密码框，radio 表示单选框。密码框写的内容会被隐藏。 这里都给性别中男和女起了一个相同的名字，这样其才是单选框。
像下面这样如果没有给 input 起相同名字，此时就没有起到单选的效果。
<form action="test.html">
账号：<input type="text" name="Users" id="">
<br/>
密码：<input type="password" name="password" id="">
<br/>
性别：
<input type="radio"> 男
<input type="radio"> 女
</form>
label 是让选择性别的时候，点击男或者女字，其也可以进行选择性别。
checkbox
复选框
爱好：
<input type="checkbox" name="chec">吃饭
<input type="checkbox" name="chec">睡觉
<input type="checkbox" name="chec">打游戏
select 标签
学历：
<select name="sel" id="">
<option value="0">小学</option>
<option value="1">初中</option>
<option value="2">高中</option>
<option value="3" selected="selected">高中及以上</option>
</select>
selected = "selected" 是让这里的高中及以上是默认选择。
textarea & button
textarea 标签和 button 按钮
简介：<textarea rows="10" cols="100"></textarea>
<br/>
注册：<input type="button" value="注册">
<input type="submit" value="注册">
button 按钮是没有用的，因为它并没有提交，所以点击第一个没有任何效果。第二个会提交。
提交以后上面就会有一些账号密码信息，和一些键值对表示的信息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="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 按钮，登录是一个超链接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户注册</title>
</head>
<body>
<h1>用户注册</h1>
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="" id="" placeholder="请输入用户名"></td>
</tr>
<tr>
<td>手机号</td>
<td><input type="number" name="" id="" placeholder="请输入手机号"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="" id="" placeholder="请输入密码"></td>
</tr>
</table>
<div>
<input type="submit" value="注册">
<span>已有账号？</span>
<a href="#">登录</a>
</div>
</body>
</html>
前端中 HTML 可以表示这个页面有什么，但是这样并不美观，因此 CSS 就可以对其页面进行美化。 CSS (Cascading Style Sheet)，层叠样式表，用于控制页面的样式。 CSS 能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果。能够做到页面的样式和结构分离。
选择器 + { 声明 }
选择器可以确定修改谁，声明决定修改成啥，并且声明都是一些键值对。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>一个段落</p>
<p>一个段落</p>
<div>一个 div</div>
<div>一个 div</div>
<a href="#">超链接</a>
<a href="#">超链接</a>
<a href="#">超链接</a>
</body>
</html>
此时上面并没有颜色，因此可以使用三种方式进行修改。
1.内部样式
这里的内部标签通常放到 head 中，但是放到 body 中也能被正常解析。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="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>
<a href="#">超链接</a>
<a href="#">超链接</a>
<a href="#">超链接</a>
</body>
</html>
可以通过 color 进行颜色选择，也可以使用 rgb 进行颜色选择。
但是写在这里的 head 内部只可以当前这一个文件写，因此可以将 style 放到一个 css 文件中，然后引用这个 css 文件即可。
2.外部样式
/* demo.css */
p { color: red; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<p>一个段落</p>
<p>一个段落</p>
<div>一个 div</div>
<div>一个 div</div>
<a href="#">超链接</a>
<a href="#">超链接</a>
<a href="#">超链接</a>
</body>
</html>
通过 link 进行外部 CSS 文件进行解析。
<link rel="stylesheet" href="demo.css">
这样的确可以实现其他 html 文件也可以使用这里的 CSS 的代码，但是上面这样修改都是修改这里的所有 p、div 标签等等，因此这里有了行内样式。
3.行内样式
<p style="color: red;">一个段落</p>
<p style="color: blue;">一个段落</p>
<div>一个 div</div>
<div>一个 div</div>
<a href="#">超链接</a>
<a href="#">超链接</a>
<a href="#">超链接</a>
可以在其标签里面进行样式控制，但是如果这里面控制样式比较多，此时代码美观就不是特别好。
1.标签选择器
上面 head 标签中设置器格式中内部标签其实就是标签选择器。
/* 选择所有的 a 标签，设置颜色为红色 */
a { color: red; }
/* 选择所有的 div 标签，设置颜色为绿色 */
div { color: green; }
2.类选择器
还是将其放到 style 进行使用，但是其使用方式不同。
<style>
.red { color: red; }
.blue { color: blue; }
</style>
此时这里使用需要用到 class。
<p class="red">一个段落</p>
<p class="blue">一个段落</p>
3.ID 选择器
<style>
.red { color: red; }
.blue { color: blue; }
/* id 选择器 */
#div1 { font-size: 32px; }
</style>
<p class="red" id="div1">一个段落</p>
<p class="blue">一个段落</p>
这里标签中需要使用 id 来进行使用，这里就进行字体大小修改。
4.通配符
就是将页面中的所有格式都修改成同一个格式。
<style>
* { 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><a href="#">ccc</a></li>
</ul>
<ol>
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ol>
<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><a href="#">超链接</a></div>
<span>span111</span>
<style>
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><a href="#">超链接</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>
此时第一个参数表示上下，第二个参数表示左右。
三个参数，第一个表示顶部，第二个表示左右，第三个表示底部。
四个参数，依次 顶 -> 右 -> 底 -> 左。
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 (简称 JS)，是一个脚本语言，解释型或即时编译型的编程语言。虽然它是作为开发 Web 页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中。 最初是由 JavaScript 之父 布兰登.艾奇 (Brendan Eich) 编写的，由于当时他对 Java 并不感兴趣，所以仅仅使用短短 10 天就搞出来了，但是时间短也导致了当时一些这个语言编写的东西有些混乱。 但是其实 Java 和 JavaScript 并没有关系，这里只不过 JavaScript 是为了蹭一下 Java 热度，当时 Java 比较火，一次编写到处运行，但是这个大佬还是瞧不起 Java。
HTML：网页的结构 (骨)。 CSS：网页的表现 (皮)。 JavaScript：网页的行为 (魂)。
引入方式
和 CSS 类似，也是有 3 种。
行内样式
<body>
<input type="button" value="点击一下" onclick="alert('hello world')">
</body>
内部样式
CSS 将这里的内部样式放到了 head 中，但是此时 JavaScript 建议的是放到 body 中，但是放到 head 中也是可以的。
<body>
<input type="button" value="点击一下" onclick="alert('hello world')">
<script>
// 内部样式
alert('hello JavaScript');
</script>
</body>
此时这里进入这个就直接显示了 alert 的内容。
外部样式
将这里 js 代码放到一个文件中，直接引用这个文件即可使用。
// js.js
alert('hello Script');
<body>
<input type="button" value="点击一下" onclick="alert('hello world')">
<script src="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); // number
var b = 'hello';
console.log(typeof b); // string
var c = true;
console.log(typeof c); // boolean
var d;
console.log(typeof d); // undefined
var e = null;
console.log(typeof e); // object
</script>
此时这里如果没有初始化器类型就是 undefined，如果是空的话就是 object。
运算符
此处的运算符大部分和 Java 类似，但是有些 Java 并没有。
此时 == 比较相等，会进行隐式类型转化，=== 比较相等不会进行隐式类型转化。
<script>
console.log(1 == '1');
console.log(1 === '1');
</script>
此时 == 比较的是里面的内容，而 === 比较内容和类型。
数组
<script>
var arr = new Array();
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 = new Array();
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 = new Array();
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>
function hello() {
console.log('hello');
}
hello();
</script>
参数匹配问题
<script>
// 参数问题
function add(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>
// 通过构造方法创建对象
function Cat(name, type) {
this.name = name;
this.type = type;
this.miao = function() {
console.log('喵喵喵');
};
}
var mimi = new Cat('咪咪', '中华田园猫');
console.log(mimi.name + " " + mimi.type);
mimi.miao();
</script>
JQuery 是一个快速、简洁且功能丰富的 JavaScript 框架，对 JavaScript 常用功能进行了封装，提供了选择器和 DOM 操作，让其编写代码更加高效。 直接可以通过引入对应库就可以使用。
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
uncompressed：非压缩版本 (易读，但是文件较大，传输速度慢)。 minified：压缩版 (不易读，文件小，性能高，开发中推荐)。 slim：精简瘦身版，没有 Ajax 和一些特效。 slim minified：slim 的压缩版。
但是使用外部库，这样可能出现不可以访问的问题，所以此时推荐将其下载到本地，放到项目中也可以使用。 此时就可以这样使用了。
<script src="jquery-3.7.1.js"></script>
<script>
$(selector).action();
</script>
$() 是 JQuery 提供的一个全局函数，用于选择和操作 HTML 元素。 selector 选择器，用来查询 HTML 元素。 action 操作，是对元素的操作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.7.1.js"></script>
</head>
<body>
<button type="button">点击消失</button>
<script>
// 此时这里等东西全部加载好才可以执行
$(document).ready(function() {
$('button').click(function() {
$(this).hide();
});
});
</script>
</body>
</html>
此时这里只要点击 button 按钮，这个按钮就会消失。
JQuery 选择器
这里选择器都以 $开头的。 并且和 CSS 类似，可以通过标签选择，也可以通过 .class 选择，也可以通过 #id 进行选择。
JQuery 事件
JS 想要创建动态页面，必须感知用户的行为，此时页面中的一些操作都会产生一个事件被 JS 获取到，从而执行其他复杂操作。
事件组成
操作元素
获取和修改元素内容
这里可以对其内容进行获取，也可以进行修改，有参数的时候就是修改，没有参数的时候就是获取。
获取元素
</script>
<div id="div"><span> hello world</span></div>
<input type="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() 返回所选元素内容。
设置元素内容
<div id="test"></div>
<div id="test2"></div>
<input type="text" value="">
<script>
$(document).ready(function() {
$("#test").html('<h1>设置 html</h1>'); // 修改格式和内容
$("#test2").text('<h1>设置 text</h1>'); // 修改内容
$("input").val("设置内容");
});
</script>
此时这里会进行修改，如果这后面方法中有参数就是要修改成的内容。
获取 / 设置元素属性
JQuery 中 attr() 方法用于获取属性值。同理有参数就是设置属性。
<a href="https://www.jd.com/" id='jd'>超链接</a>
<script>
let href = $('#jd').attr("href");
console.log(href);
</script>
获取这里面超链接的值。
设置
<a href="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 属性
<div style="color: red;">一个文本</div>
<script>
let color = $('div').css('color');
console.log(color);
</script>
这里也可以获取其此时 CSS 里面的属性，此时获取上面这个颜色。
<div style="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>
<img src="../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>
<img src="../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>
<img src="../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。
<!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="jquery-3.7.1.js"></script>
</head>
<body>
<div style="margin: 0 auto; width: 500px;">
<button id="reset">从新开始游戏</button>
<br/>
请输入要猜的数字：<input type="number" id="inputNum">
<button id="guess">猜</button>
<br/>
已经猜的次数：<span id="count"> 0 </span>
<br/>
结果：<span id="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');
} else if (inputNum > randNum) {
$('#result').text("猜大了");
$('#result').css('color', 'red');
} else {
$('#result').text("猜对了");
$('#result').css('color', 'green');
}
});
$('#reset').click(function() {
count = ;
randNum = .(.() * ) + ;
$().();
$().(count);
$().();
});
</script>
</body>
</html>
