当前位置：首页 > news >正文

HTML + CSS + JavaScript

news 2025/7/10 11:41:57

1 HTML

HTML 文件基本结构

HTML 开发工具

HTML 常见标签

标题标签：h1 - h6

段落标签：p

换行标签：br

图片标签：img

超链接标签：a

表格标签

表单标签

form 标签

input 标签

select 标签

textarea 标签

无语意标签：div & span

综合练习

2. CSS

选择器

标签选择器

class 选择器

id 选择器

通用选择器

复合选择器

引入方式

常用 CSS

color

font-size

border

width、height

padding

margin

3. JavaScript

引入方式

基本语法

变量

数据类型

运算符

JavaScript 对象

数组

函数

对象

jQuery

引入依赖

jQuery 语法

jQuery 选择器

jQuery 事件

操作元素

综合案例

总结

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));//numbervar b = 'hello';console.log("b:"+(typeof b));//stringvar c = true;console.log("c:"+(typeof c));//booleanvar d;console.log("d:"+(typeof d));//undefinedvar 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>
1

JavaScript 对象

数组

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]);//addconsole.log(arr.length);//6, 获取数组的⻓度//修改数组元素arr[5] = "update"console.log(arr[5]);//update//删除数组元素arr.splice(4,2);// 第⼀个参数表⽰从下标为4的位置开始删除. 第⼆个参数表⽰要删除几个元素console.log(arr[5]);//undefined 元素已经删除, 如果元素不存在, 结果为undefinedconsole.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>

地址：https://www.bootcdn.cn/jquery/

【开发时建议把 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>