目录
1 HTML
- 浏览器右键都有个查看源代码功能，里面就是 html，html 是超文本标记语言
- 超文本比文本能表示更多的内容，记事本是文本，word 属于超文本，除了编辑文本还能设置格式
- 标记语言指由标签构成的语言，标签写说明是如何显示的
学习目标
- 认识常见标签
- 后序不认识标签通过网络能认识（解决问题的能力）
标签
- 标签名放 <> 中
- html 标签大多是成对出现的，有开始标签和结束标签，中间是内容
- 少数标签只有开始标签，称为 “单标签”
- 标签就是提前预设了一定格式
比如下方代码
这个代码并不规范，但浏览器能运行成功，是因为浏览器具有非常强的鲁棒性
HTML 文件基本结构
<html>
<head>
<title>第⼀个⻚⾯</title>
</head>
<body>
hello world
</body>
</html>- html 标签是整个 html 文件的根标签
- head 标签中写页面属性
- body 标签中写页面显示的内容
- title 标签中写页面标题
- head 和 body 是html 的子标签，html 是head 和 body 的父标签
- title 是 head 的子标签，head 是title 的父标签
- head 好和 body 之间是兄弟关系
查找页面元素
HTML 开发工具
- 可以 idea，也可以使用记事本，常使用 Visual Studio Code （简称 “VS Code” ）
- 在储存文件中双击访问 html，不建议在开发工具里面访问
VS Code 使用
- 首先建立一个文件，在 VS Code 里面打开文件，新建一个 html 可以进行编辑
- “！+ 回车” 会自动生成预设代码
<!DOCTYPE html> //声明 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>HTML 常见标签
html 每个标签都有它的样式
标题标签：h1 - h6
有六个，从 h1 - h6，数字越大，则字体越小
< h1 >hello</ h1 >
< h2 >hello</ h2 >
< h3 >hello</ h3 >
< h4 >hello</ h4 >
< h5 >hello</ h5 >
<h6>hello</h6>
h1 - h6 提前预设了字体大小、加粗、换行
段落标签：p
html 中任何内容都要通过代码实现，比如空格、换行，代码加空格、换行是不会实现的
<p>这是⼀个段落</p>
<p>这是⼀个段落</p>
<p>这是⼀个段落</p>p 标签不会首行缩进，需要用到 css
换行标签：br
- br 标签不像 p 标签那样带有很大空隙，段落标签换行比换行标签换行要宽阔一些
- br 是一个单标签（不需要结束标签）, <br/> 是规范写法，不建议写成 <br>
这是⼀个br标签<br/>图片标签：img
img 标签必须带有 src 属性，表示图片路径，例：<img src="dog.jpg">
src 标签的属性，一个标签可以有多个属性，后面跟路径，可以是相对路径，也可以是绝对路径，网络路径
- 相对路径：以 html 位置为基准，找到图片位置，与 html 同级直接写或者./；在当前目录下一级，兄弟目录一级一级写；在当前目录上一级则../
- 绝对路径：一个完整的磁盘路径或者网络路径
<!-- 相对路径 -->
<img src="hzw.jpg">
<!-- 网络路径 -->
<img src="https://cssl.dtstatic.com/uploads/blog/202408/01/
B8SxBB2DSlnDML3.thumb.1000_0.jpg">
<!-- 绝对路径 -->
<img src="C:/Users/PC/OneDrive/图片/图1/787b850d9ad4e72dafebe4db28f3e70a3e112513.jpg">【注释 ctrl + /】
图片设置大小
<img src="../dog.jpg" width="200px" height="200px" border="5px">- width / height：控制宽度高度，一般宽和高设置一个就可以了，图片会等比例缩放，如果全部设置图片可能变形
- border：边框，参数是宽度的像素，一般使用 css 来设定
- px 是一个长度单位，通常前端用的长度单位是 px（像素）、em，数字越大越长
注意
- 属性可以有多个，不能写在标签之前
- 属性之间用空格分割，可以是多个空格，也可以是换行
- 属性之间不分先后顺序
- 属性使用 “键值对” 的格式来表示
遇到不认识的标签
当遇到不认识的标签，在搜索词前面加上 html，搜索其它东西也是，例如 Java、spring
超链接标签：a
- 属性 href：必须具备，表示点击后会跳转到哪个页面
- 属性 target：打开方式，默认是 _self 在当前自己页面跳转，如果是 _blank 则用新的标签页打开
<a href="https://www.baidu.com/" target="_self">百度页面</a>表格标签
生成表格快捷方式
table 标签：表示整个表格
tr 标签：行
td 标签：列
- table 包含 tr，tr 包含 td
- 表格标签有一些属性，可以用于设置大小边框，但一般使用 css 方式设置，这些属性都要放入 table 标签中
- align 是表格相对于周边元素的对齐方式，例 align="center"，不是内部元素对齐方式
- border 表示边框
- cellpadding：内容距离边框的距离，默认 1 像素
- cellspacing：单元格之间的距离，默认为 2 像素
- width / height：设置尺寸
- 注意，这几个属性，vscode 都提示不出来
<table border="1px" align="center" cellpadding="20" cellspacing="0">>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>10</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>11</td>
</tr>
</table>
</body>
</html>表单标签
表单是让用户输入信息的重要途径，如登录界面用户需要输入信息进行登录
表单分为两个部分
- 表单域：包含表单元素的区域，重点是 form 标签
- 表单控件：输入框，提交按钮等，重点是 input 标签
form 标签
<form action="test.html">
... [form 的内容]
</form>描述了要把数据按照什么方式，提交到哪个界面中
关于 form 需要结合后端代码来进一步理解，后面再详细研究
input 标签
各种输入控件，如单行文本框、按钮、单选框、复选框
type 属性必须有，取值种类很多，如 button（普通按钮）、text（文本框）
可以使用快捷键，input: 后直接输入类型
一些常用类型：
1. 普通按钮
<input type="button" value="我是个按钮">
2. 文本框
<input type="text"> 
文本框也可以提前写一些信息
<input type="text" placeholder="请输入昵称">
3. 单选按钮
<input type="radio" name="" id="">没有 name 和 id，当出现多个单选按钮无法选中单个
name 用于标记同一组单选
<input type="radio" name="gender" id="">男<br/>
<input type="radio" name="gender" id="">女<br/>
暂时不考虑 id
4. 复选框
<input type="checkbox" name="运动" id="">篮球
<input type="checkbox" name="运动" id="">乒乓球
<input type="checkbox" name="运动" id="">跑步
5. 密码框
<input type="password" name="" id="">看不到输入内容
6. 提交按钮
- 搭配 form 标签一起使用，提交按钮必须放到 form 标签内，点击后会尝试给服务器发送请求
- 只会提交 form 标签括着的
<body>
<form action="hello.html">
<input type="button" value="我是一个按钮"><br/>
<input type="text" placeholder="请输入昵称"><br/>
<input type="radio" name="gender">男<br/>
<input type="radio" name="gender">女<br/>
<input type="checkbox">篮球
<input type="checkbox">乒乓球
<input type="checkbox">跑步<br/>
<input type="password" name="" id="">
<input type="submit" value="提交">
</form>
</body>点击提交当前页面就会跳转到 hell.html 页面，加入属性 target="_blank" 会打开新的标签页
<form action="hello.html" target="_blank">- 此时提交上去 URL 的 ？后面并未看到提交的参数，因为提交信息需要用到 name、id、value 赋值
- “ ？” 后面是查询字符串，多个 key、value 组成
- key：表单的 name 值
- value：对应表单输入的值
<body>
<form action="hello.html" target="_blank">
<input type="button" value="我是一个按钮"><br/>
<input type="text" placeholder="请输入昵称" name="userName"><br/>
<input type="radio" name="gender" value="1">男<br/>
<input type="radio" name="gender" value="2">女<br/>
<input type="checkbox">篮球
<input type="checkbox">乒乓球
<input type="checkbox">跑步<br/>
<input type="password" name="password">
<input type="submit" value="提交">
</form>
</body>
</html>
select 标签
【下拉菜单】
option 中定义 select 表示默认选中
<select>
<option>北京</option>
<option selected="selected">上海</option>
</select>
textarea 标签
【文本域】
<textarea rows="3" cols="100">
</textarea>
- 文本域是多行的，可以放大缩小，文本框是单行的，不可以放大缩小
- 文本域中的内容是默认内容，空格也会有影响，rows 和 cols 一般使用 css 修改并不直接使用
<textarea rows="3" cols="100">
123 456
</textarea>
<textarea rows="3" cols="100">123 456
</textarea>
无语意标签：div & span
- div 标签是 division 的缩写，含义是分割，span 标签含义是跨度，div 会自动进行换行，span 不会
- div 和 span 是为了后面样式美化和网页布局
- div 独占一行是一个大盒子，span 不独占一行是一个小盒子
<div>我是一个div</div>
<div>我是一个div</div>
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
综合练习
用户注册界面
<!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>
<h1>用户注册</h1>
<table>
<tr>
<td>用户名</td>
<td><input type="text" placeholder="请输入用户名"></td>
</tr>
<tr>
<td>手机号</td>
<td><input type="text" placeholder="请输入手机号"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" placeholder="请输入密码"></td>
</tr>
</table>
<div>
<input type="button" value="注册">
<span>已有账号？</span>
<a href="#">登录</a>
</div>
</body>
</html># 作为占位符
2. CSS
css 能够对网页元素进行美化，一般放在 style 标签，head 里，因为网页从上往下加载，放在后面容易样式未加载出来
css 修饰前后
选择器
选择元素，对哪个或者哪些元素进行修饰 【就近选择，从上往下加载】
<style>
span{
color: red;
}
</style>- 选择器 span{}
- 修饰 color: red
- 基础选择器包括标签选择器、class 选择器、id 选择器
标签选择器
html 标签，如 span，div
/* 选择所有的div标签, 设置颜⾊为绿⾊ */
div {
color: green;
}class 选择器
对元素进行分类，通过 class 来标识类名，“.” 为类选择器标识
/* 选择class为font32的元素, 设置字体⼤⼩为32px */
.font32 {
font-size: 32px;
}id 选择器
对元素进行起名，通过 id 来标识，id 不能重复，“#” 为 id 选择器标识
/* 选择id为submit的元素, 设置颜⾊为红⾊ */
#submit {
color: red;
}通用选择器
也叫通配符选择器，“*” 为通用选择器标识，表示选择所有元素
/* 设置⻚⾯所有元素, 颜⾊为红⾊*/
* {
color: red;
}复合选择器
由多个单选择器组成，选择器之间使用空格隔开
/*只设置 ul标签下的 li标签下的 a标签, 颜⾊为红⾊*/
ul li a {
color: blue;
}引入方式
css 有 3 种引入方式
常用 CSS
color
颜色
颜色表示：
- 英文单词，如 blue、red
- rjb（三色符），如（255,0,0），每一个数字都是 2 个字节，即 0-255
- 十六进制表示法（通过 # 表示，rjb 中数字用十六进制表示，每两位表示一个），如 #ff00ff
- 还可以表示透明度，加入第四位则表示透明度，如 #56f90552、rgba(86,249,5,0.322)，1 的时候表示不透明，0 的时候就不显示了，为完全透明
font-size
设置字体大小，chrome 浏览器默认字体大小是 16px，不同浏览器显示的可能不一样，因此需要通配符进行默认设置
<!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>
.font32{
font-size: 50px;
color: blue;
}
</style>
</head>
<body>
<div class="font32">我是一个div</div>
<div>我是一个div</div>
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
</body>
</html>通过 class 来标识则需要加上 “.”
border
边框是一个复合属性，可以同时设置多个样式，不分先后顺序
.text1{
border: 1px solid purple;
}以上属性对应边框粗细，边框样式，边框颜色
也可以分开来设置
.text1{
border-color: red;
border-width: 2px;
border-style: solid;
}
width、height
只有块级元素可以设置宽度高度（如快递只计算外包箱宽度高度而不是里面东西）
- 独占一行的叫块级元素，不能独占一行叫行内元素
- 常见块级元素：h1-h6，p，div 等
- 常见行内元素：a span
.text1{
font-size: 32px;
border-color: red;
border-width: 5px;
border-style: solid;
width: 500px;
height: 200px;
}
padding
内边距，设置内容和边框之间的距离
- padding margin 是一个复合样式，顺序上右下左，写一个上下左右一样，写两个左和右一样，上和下一样，写三个下改为第三个，左右一样，如果只想调一个，可以分开设置
- padding-top
- padding-bottom
- padding-left
- padding-right
margin
外边距，设置元素和元素之间距离
- margin 是一个复合样式，顺序上右下左，写一个上下左右一样，写两个左和右一样，上和下一样，写三个下改为第三个，左右一样，如果只想调一个，可以分开设置
- margin-top
- margin-bottom
- margin-left
- margin-right
<!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>
.font32{
font-size: 50px;
color: blue;
}
.text1{
font-size: 32px;
border-color: red;
border-width: 5px;
border-style: solid;
width: 500px;
height: 200px;
}
</style>
</head>
<body>
<div class="font32">我是一个div</div>
<div class="text1">我是一个div</div>
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
</body>
</html>
【内外边距是一个相对概念，如果是对于 html，那么此时内边距就是原来外边距】
3. JavaScript
JavaScript 简称 JS，是一个脚本语言，与 Java 无关，带有 Java 名是由于 Java 热度高，一般定义在 script 标签，body 里，因为用户进来以后不会立马点击页面互动，1 秒加载很够用了
- HTML：表示页面上有哪些元素
- CSS：页面 上元素样式、布局
- JavaScript：页面元素交互
引入方式
行内样式
<input type="button" value="点我⼀下" onclick="alert('haha')">
onclick 标签为鼠标点击
内部样式
<script>
alert("你好");
</script>
alert 标签为弹框
基本语法
JavaScript 是一个动态弱语言类型，Java 是一个强语言类型
变量
创建变量（变量定义/变量初始化/变量声明），JS 申明变量有 3 种方式
【注意】
1. JavaScript 是一们动态弱语言类型语言
① 变量可以存放不同类型的值（动态）
var name = xiatian;
var age = 10；② 随着程序的运行，变量的类型可能会发生改变（弱变量）
var a = 10; // 数字
a = "hehe"; // 字符串观察 a 的类型，通过打印日志的方式
使用 typeof 可以返回数据类型变量
<script>
var a = 10;
console.log(typeof a);
a = "nihao";
console.log(typeof a);
</script>运行然后按 F12 看控制台
也就是第一次是 number 类型，随后变成了 string 类型，说明类型并不固定
【补充】
学习 html 看页面源代码（右键检查/F12）里面的 Elements
学习 JavaScript 看页面源代码（右键检查/F12）里面的 Console（控制台）
类似于 idea 中的日志
2. 变量命名规则
- 组成字符可以是任何字母、数字、下划线（_）或者美元符号（$）
- 数字不能开头
- 建议使用驼峰命名
- + 表示字符串拼接，也就是把两个字符串首尾相接变成一个字符串
- \n 表示换行
和 Java 类似
数据类型
分为原始类型和引用类型
<script>
var a = 10;
console.log("a:"+(typeof a));//number
var b = 'hello';
console.log("b:"+(typeof b));//string
var c = true;
console.log("c:"+(typeof c));//boolean
var d;
console.log("d:"+(typeof d));//undefined
var e = null;
console.log("e:"+(typeof e));//null
</script>对应的打印结果
运算符
JavaScript 运算符和 Java 用法基本相同
<script>
var age = 20;
var age1 = "20";
var age2 = 20;
console.log(age == age1);//true, ⽐较值
console.log(age === age1);//false, 类型不⼀样
console.log(age == age2);//true, 值和类型都⼀样
</script>
1JavaScript 对象
数组
JS 数组当中元素并不要求是同一类型
1. 数组定义
创建数组有两种方式
方式 1：使用 new 关键词创建
// Array 的 A 要⼤写
var arr = new Array();方式 2：使用字面量方式创建（常用）
var arr = [];
var arr2 = [1, 2, 'haha', false]; // 数组中保存的内容称为 "元素"2. 数组操作（读增改删）
<script>
arr = [1, 2, 'haha', false , 456];
//读取数组
console.log(arr[0]); //1
//添加数组元素
arr[5] = "add"
console.log(arr[5]);//add
console.log(arr.length);//6, 获取数组的⻓度
//修改数组元素
arr[5] = "update"
console.log(arr[5]);//update
//删除数组元素
arr.splice(4,2);// 第⼀个参数表⽰从下标为4的位置开始删除. 第⼆个参数表⽰要删除几个元素
console.log(arr[5]);//undefined 元素已经删除, 如果元素不存在, 结果为undefined
console.log(arr.length);//4, 获取数组的⻓度
</script>【如果下标超出范围读取元素，则结果为 undefined】
可以隔空赋值
arr = [1, 2, 'haha', false , 456];
arr[100] = 1;
console.log(arr);
当数组下标变成其它进行赋值时数组长度不变
arr = [1, 2, 'haha', false , 456];
arr["h"] = 1;
console.log(arr["h"]);
函数
函数定义（声明）
function add(x,y){
console.log(x+y);
}
console.log(typeof add);函数可以赋值给一个变量
var a = function add(x,y){
console.log(x+y);
}
console.log(typeof a);函数调用
function add(x,y){
console.log(x+y);
}
add(1,2);var a = function add(x,y){
console.log(x+y);
}
a(1,2);var a = function(x,y){
console.log(x+y);
}
a(1,2);//匿名函数
var a = function(x,y){
console.log(x+y);
}
a(1,2);上述函数参数传一个数字的时候
var a = function(x,y){
console.log(x+y);
}
a(1);//NaN ，1 和一个 undefined 相加得到的不是一个数字上述函数参数传一个字符串的时候
var a = function(x,y){
console.log(x+y);
}
a("nihao");//nihaoundefined ，字符串相加拼接在一起上述函数参数多传的时候只取前两个
【实参和形参之间个数可以不匹配，但实际开发一般要求要匹配】
对象
Java 对象一定是基于类创建的，JavaScript 可以没有类只有对象
1. 使用 {} 创建对象
var a = {}; // 创建了⼀个空的对象
var student = {
name: '蔡徐坤',
height: 175,
weight: 170,
sayHello: function() {
console.log("hello");
}
};获取对象属性
//使⽤ . 成员访问运算符来访问属性 `.` 可以理解成 "的"
console.log(student.name);
//使⽤ [ ] 访问属性, 此时属性需要加上引号
console.log(student['height']);添加属性（Java 中只能添加类里面有的属性，而 JavaScript 添加属性不需要类里面有）
student.age = 18;
student["gender"] = "男";【属性要加引号】
2. 使用 new Object 创建对象
var student = new Object(); // 和创建数组类似
student.name = "蔡徐坤";
student.height = 175;
student['weight'] = 170;
student.sayHello = function () {
console.log("hello");
}3. 使用构造方法创建函数
function 构造函数名(形参) {
this.属性 = 值;
this.⽅法 = function...
}
var obj = new 构造函数名(实参);- 在构造函数内部使用 this 关键字来表示当前正在构建的对象
- 构造函数的函数名首字母一般大写
- 构造函数的函数名可以是名词
- 构造函数不需要 return
- 创建对象的时候必须使用 new 关键字
实例
function Cat(name, type, sound) {
this.name = name;
this.type = type;
this.miao = function () {
console.log(sound); // 别忘了作⽤域的链式访问规则
}
}
var mimi = new Cat('咪咪', '中华⽥园喵', '喵');
var xiaohei = new Cat('⼩⿊', '波斯喵', '猫呜');
var ciqiu = new Cat('刺球', '⾦渐层', '咕噜噜');
console.log(mimi);
mimi.miao(); // 调用方法记得加()补充：作用域的链式访问规则
假设有如下代码
function outer() {
var outerVar = '我是外部变量';
function inner() {
console.log(outerVar); // 试图访问外部变量
}
inner();
}
outer(); // 输出: 我是外部变量在这个例子中，当 inner 函数尝试访问 outerVar 时，它实际上是通过 outer 函数的作用域来查找 outerVar 的，因为 inner 函数是在 outer 函数的作用域内部定义的，所以它的作用域链会指向 outer 函数的作用域，这就是作用域的工作方式
jQuery
快速简洁且功能丰富的 JavaScript 框架
引入依赖
使用 jQuery 前要引入对应的库
在使用 jQuery CDN 时，只需要在 HTML 文档中加入如下代码
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>其中 src 属性指明 jQuery 库所在的 URL ，这个 URL 是 CDN（内容分发网络服务商）服务提供商为 jQuery 库提供一个统一资源定位符，也可以使用其他公司提供的 CDN 地址
如需其它版本可在官网下载， 参考地址：https://releases.jquery.com/
选择其它版本
jQuery 官方共提供了 4 种类型 jQuery 库
- uncompressed：非压缩版本（易读，但文件较大，传输速度慢）
- minified：压缩版（不易读，文件小，性能高，开发中推荐）
- slim：精简瘦身版，没有 Ajax 和一些特效
- slim minified：slim 的压缩版
也可以从其他 CND 上下载引用 jQuery
1 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>【开发时建议把 jQuery 库下载到本地放入当前项目，引入外部地址会有外部地址不能访问风险】
【复制链接打开右键另存到自己当前项目下 js 文件夹就可以存到本地了】
jQuery 语法
示例：给按钮添加了 click 事件，点击后元素消失
<!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>
<button id="test">点我看看</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>
$(document).ready(function(){
$("#test").click(function(){
$(this).hide();
});
})
</script>
</body>
</html>$(selector).action- $() 是 jQuery 提供的一个全局函数，用于选择和操作 HTML 元素
- selecter 是选择器（对应上面案例中 "#test" ），用来查询和查找 HTML 元素
- action 是操作（对应上面案例中 .click ），执行对元素的操作
$(document).ready(function(){
// jQuery functions go here
});- jQuery 代码通常写在 document read 函数中
- document 表示整个文档对象，一个页面就是一个文档对象
简洁写法
$(function(){
$("#test").click(function(){
$(this).hide();
});
});也可以直接写，但不建议这样写
$("#test").click(function(){
$(this).hide();
});jQuery 选择器
- jQuery 选择器基于已经存在的 CSS 选择器，还有一些自定义的选择器
- jQuery 当中所有选择器都以 $ 开头：$()
jQuery 事件
- JS 要构造动态的界面，就需要感知到用户的行为
- 用户对于页面的一些操作（点击，选择，修改等）都会在浏览器中产生一个事件，被 JS 获取到，从而进行更复杂的交互操作
事件由三部分组成
- 事件源：哪个元素触发
- 事件类型：是点击、选中还是修改等
- 事件处理程序：进一步如何处理，往往是一个回调函数
常见的事件有
更多事件参考 jQuery 事件参考手册：https://www.w3school.com.cn/jquery/jquery_ref_events.asp
操作元素
1. 获取/设置元素内容
三个简单获取元素内容的 jQuery 方法
获取元素内容
<div id="test"><span>你好</span></div>
<input type="text" value="hello">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>
$(document).ready(function () {
var html = $("#test").html();
console.log("html内容为:"+html);
var text = $("#test").text();
console.log("⽂本内容为:"+text);
var inputVal = $("input").val();
console.log(inputVal);
});
</script>设置元素属性
<div id="test"><span>你好</span></div>
<input type="text" value="hello">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>
$("#test").text("<h1>你好</h1>");
</script>
<div id="test"><span>你好</span></div>
<input type="text" value="hello">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>
$("#test").html("<h1>你好</h1>");
</script>
<div id="test"><span>你好</span></div>
<input type="text" value="hello">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>
$(":input").val("Java");
</script> 
2. 获取/设置元素属性
jQuery attr() 方法用于获取/设置属性值，() 里只有属性是获取，既有属性又有值是赋值
<p><a href="https://www.bitejiuyeke.com/index" id="bite">bit</a></p>
<img src="hzw.jpg" width="200px"/>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>
//获取元素的属性
var a = $("p a").attr("href");
console.log(a);
//设置元素属性
$("p a").attr("href","http://www.baidu.com");
$(img").attr("width","500px");
</script>3. 获取/设置 CSS 属性
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>
<div style="font-size: 36px">我是⼀个⽂本</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>
var fontSize = $("div").css("font-size");
console.log(fontSize);
$("div").css("font-size","20px");
$("div").css("color","red");
</script>
</body>
</html>4. 添加元素
添加 HTML 元素
- append()：在被选元素的结尾插入内容
- prepend()：在被选元素的开头插入内容
- after()：在被选元素之后插入内容
- before()：在被选元素之前插入内容
未加入 li 标签定义列表
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>
$("ol").append("append");
$("ol").prepend("append");
</script>
加入 li 标签定义列表
$("ol").append("<li>append</li>");
$("ol").prepend("<li>append</li>");
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>
$("ol").append("append");
$("ol").prepend("append");
$("img").before("图⽚前插⼊");
$("img").after("图⽚后插⼊");
</script>
【按住 Ctrl 键点击图片链接可以知道图片是否存在】
5. 删除元素
删除元素和内容一般使用以下两种 jQuery 方法
- remove()：删除被选元素（及其子元素）
- empty()：删除被选元素的子元素
<body>
<div id="div1">我是⼀个div</div>
<button id="remove">删除 div 元素</button>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="empty">清空o1子元素</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>
$("#remove").click(function(){
$("#div1").remove();
})
$("#empty").click(function(){
$("ol").empty();
})
</script>
</body>【id 认为在一个页面内是唯一的，动作区分通常加 id，样式通常加 class】
综合案例
1. 猜数字
<!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>
<button type="button" id="reset">重新开始一局游戏</button>
<br>
请输入要猜的数字：<input type="text" id="number">
<button type="button" id="guess">猜</button>
</br>
<br>
已经猜的次数：<span id="count">0</span>
<br/>
<br>
结果：<span id="result"></span>
<br/>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>
$(function() {
//随机生成 1-100 的数字
var guessNumber = Math.floor(Math.random() * 100) + 1;
console.log(guessNumber);
//Math.random() 生成[0，100)，+1后生成[1,101)
//Math.floor(x) x表示数字，返回小于或等于数字 x 的最大整数 (向下取整)
var count = 0;
$("#guess").click(function() {
count++;
$("#count").text(count);
var userGuess = $("#number").val();
if(userGuess == guessNumber) {
$("#result").text("猜对了");
$("#result").css("color","gray");
} else if(userGuess < guessNumber) {
$("#result").text("猜小了");
$("#result").css("color","blue");
} else {
$("#result").text("猜大了");
$("#result").css("color","red");
}
})
$("#reset").click(function() {
guessNumber = Math.floor(Math.random() * 100) + 1;
console.log(guessNumber);
count = 0;
$("#number").val("");
$("#count").text(count);
$("#result").text("");
})
})
</script>
</body>
</html>2. 表白墙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>留言板</title>
<style>
.container {
width: 350px;
height: 300px;
margin: 0 auto;
/* border: 1px black solid; */
text-align: center;
}
.grey {
color: grey;
}
.container .row {
width: 350px;
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
.container .row input {
width: 260px;
height: 30px;
}
#submit {
width: 350px;
height: 40px;
background-color: orange;
color: white;
border: none;
margin: 10px;
border-radius: 5px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>留言板</h1>
<p class="grey">输入后点击提交, 会将信息显示下方空白处</p>
<div class="row">
<span>谁:</span> <input type="text" name="" id="from">
</div>
<div class="row">
<span>对谁:</span> <input type="text" name="" id="to">
</div>
<div class="row">
<span>说什么:</span> <input type="text" name="" id="say">
</div>
<input type="button" value="提交" id="submit" onclick="submit()">
<!-- <div>A 对 B 说: hello</div> -->
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
function submit(){
//1. 获取留言的内容
var from = $('#from').val();
var to = $('#to').val();
var say = $('#say').val();
if (from== '' || to == '' || say == '') {
return;
}
//2. 构造节点
var divE = "<div>"+from +"对" + to + "说:" + say+"</div>";
console.log(divE);
//3. 把节点添加到页面上
$(".container").append(divE);
//4. 清空输入框的值
$('#from').val("");
$('#to').val("");
$('#say').val("");
}
</script>
</body>
</html>总结
- HTML 是一种超文本标记语言，主要用于页面内容显示和排版，主要学习标签
- CSS 主要用于页面元素美化，重点学习 CSS 选择器的使用
- JavaScript 是一个脚本语言，和 Java 没关系，jQuery 是一个 JavaScript 框架
- 如果需要更漂亮的样式展示和页面效果， HTML 需要搭配 CSS 和 JavaScript 来使用