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

前端基础知识（HTML+CSS+JavaScript）

article 2024/11/13 14:52:06

文章目录

一、HTML
- 1.1 HTML 基础：
- - 1.1.1 HTML 的概念：
  - 1.1.2 认识 HTML 标签：
  - 1.1.3 HTML 文件基本结构：
  - 1.1.4 标签层次结构：
- 1.2 HTML 快速入门：
- 1.3 HTML常见标签：
- - 1.3.1 标题标签：h1-h6
  - 1.3.2 段落标签：p
  - 1.3.3 换行标签：br
  - 1.3.4 图片标签：img
  - 1.3.5 超链接：a
- 1.4 表格标签：
- 1.5 表单标签：
- - 1.5.1 form 标签：
  - 1.5.2 input 标签：
  - 1.5.3 select 标签：
  - 1.5.4 textarea 标签：
- 1.6 无语义标签：div & span
- 1.7 综合练习：用户注册
二、CSS
- 2.1 CSS 基本知识：
- - 2.1.1 基本语法规范：
  - 2.1.2 引入方式：
  - 2.1.3 规范：
- 2.2 CSS 选择器（重点）：
- 2.3 常用CSS：
- - 2.3.1 color：
  - 2.3.2 font-size：
  - 2.3.3 border：
  - 2.3.4 width/height：
  - 2.3.5 padding | margin：
三、JavaScript
- 3.1 初始 JavaScript：
- 3.2 基础语法：
- - 3.2.1 变量：
  - 3.2.2 数据类型：
  - 3.2.3 运算符：
- 3.3 JavaScript 对象：
- - 3.3.1 数组：
  - 3.3.2 函数：
  - 3.3.3 对象：
- 3.4 JQuery（重点）
- - 3.4.1 引入依赖：
  - 3.4.2 JQuery 语法：
  - 3.4.3 JQuery 选择器：
  - 3.4.4 JQuery事件：
  - 3.4.5 操作元素：
四、综合案例：
- 4.1 猜数字：
- 4.2 表白墙：

由于后续 Java Web 的需要，所以即使方向是后端，也需要学习一点前端知识。只需要了解即可，就是能看懂基础的前端代码即可（对于概念的东西，基本都不需要记，不要钻牛角尖）。我们需要学习的是前端三剑客（HTML，CSS，JavaScript）。其中对于我们后端人员来说，JavaScript 较前面两个会更加重要一点。好的学习工具能让我们事半功倍，这里推荐使用 VS Code 或者使用 IDEA 专业版（需要收费，有破解版，但是支持正版）。

前端的开发工具：Visual Studio Code（简称"VS Code"）或者 IDEA 专业版（这个就自己决定了）。

官网：VS Code 官网

进行下载安装，直接一路确定即可。

学习前端的一个重要小技巧：在浏览器页面按下F12，就会显示出对应的前端代码，可以用来调式自己的代码。 在这里插入图片描述

一、HTML

1.1 HTML 基础：

1.1.1 HTML 的概念：

HTML (Hyper Text Markup Language)，超文本标记语言。

超文本： 比文本要强大，通过链接和交互式的方式来组织和呈现信息的文本形式。不仅仅有文本，还可能包含图片，音频等等。

标记语言： 由标签构成的语言。

HTML 的标签都是提前定义好的，使用不同的标签，表示不同的内容，类似飞书文档，Word 文档。
在这里插入图片描述

如果选中文本，点击标题 1，就会使用标题 1 的样式来显示文本，上述标题 1 就是一个"标签"。

比如下面代码：

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

经过浏览器解析后的效果如下：

在这里插入图片描述

上面代码中的就是标签，学习 HTML 主要就是学习标签。

1.1.2 认识 HTML 标签：

HTML 代码是由 “标签” 构成的。

形如：

<h3 id="Myid">我是三级标题</h3>

标签名放到 <> 中，大部分标签成对出现。对于上述例子，<h3>为开始标签，</h3>为结束标签，少数标签只有开始标签，没有结束标签，称为 “单标签”，开始标签和结束标签之间，写的是标签的内容。开始标签中可能会带有 “属性”。id 属性相当于给这个标签设置了一个唯一的标识符（身份证号码）。

1.1.3 HTML 文件基本结构：

<html>
<head>
    <title>第⼀个⻚⾯</title>
</head>
<body>
hello world
</body>
</html>

html 标签是整个 html 文件的根标签（最顶层标签）。
head 标签中写页面的属性。
body 标签中写的是页面上显示的内容。
title 标签中写的是页面的标题（这个代码还不太完全，直接跑，有的地方会出现乱码）。

1.1.4 标签层次结构：

标签之间的结构关系，构成了一个 DOM 树。DOM 是 Document Object Mode（文档对象模型）的缩写。

在这里插入图片描述

1.2 HTML 快速入门：

在 VS Code 中创建文件 xxx.html，直接输入! ，按tab键，此时能自动生成代码的主体框架。

<!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>

细节解释：(了解即可，不必深究)。

<! DOCTYPE html>称为 DTD (文档类型定义)，描述当前的文件是一个 HTML5 的文件。
<html lang="en">其中 lang 属性表示当前页面是一个"英语页面"。这里暂时不用管。(有些浏览器会根据此处的声明，进行提示是否进行自动翻译)。
<meta charset="UTF-8">描述页面的字符编码方式，没有这一行可能会导致中文乱码。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> ，name=“viewport” 其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区域。content=“width=device-width, initial-scale=1.0” 在设置可视区和设备宽度等宽，并设置初始缩放为不缩放。（这个属性对于移动端开发更重要一些)。

在标签中，任意书写文字，按Ctrl + s 保持文件，通过浏览器访问即可。如：

<!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>
    你好 HTML
</body>
</html>

浏览器运行结果如下：

在这里插入图片描述

1.3 HTML常见标签：

1.3.1 标题标签：h1-h6

有六个，从 h1-h6，数字越大，则字体越小。

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

1.3.2 段落标签：p

在HTML中，换行符，空格都会失效，直接使用，不论多少都只会变成一个空格的效果，如果需要分成段落，需要使用专门的标签。

例如：

<!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>
    你好 哦对双方就哦啊司法窘境即（乱打的）
    
    
    佛埃及到i飞机阿迪斯哦               放假啊四哦发动机囧发大水
</body>
</html>

其效果为：

在这里插入图片描述

p 标签表示一个段落。

<p>这是⼀个段落</p>
<p>这是⼀个段落</p>
<p>这是⼀个段落</p>

效果如下：

在这里插入图片描述

p 标签描述的段落，前面没有缩进。(利用 CSS 可以做到)。

如果没有标签换行，会自动根据浏览器宽度来决定排版。

html 内容首尾处的换行，空格均无效。

在 html 中文字之间输入的多个空格只相当于一个空格。

html 中直接输入换行不会真的换行，而是相当于一个空格。

1.3.3 换行标签：br

想要完成换行的话，也可以通过标签来实现。br 是 break 的缩写，表示换行。

br 是一个单标签（不需要结束标签），是规范写法，不建议写成。

这是⼀个br标签<br/>
这是⼀个br标签<br/>
这是⼀个br标签<br/>

效果如下：

在这里插入图片描述

观察<p>标签和<br/>标签的区别，p 标签的间隙较 br/ 的间隙大。

1.3.4 图片标签：img

img 标签必须带有 src 属性，表示图片的路径。

<img src="rose.jpg">

此时要把 rose.jpg 这个图片文件放到和 html 中的同级目录中。

img 标签的其他属性：

width/height：控制宽度高度。高度和宽度一般改一个就行，另外一个会等比例缩放，否则就会图片失衡。

border：边框。参数是宽度的像素，但是一般使用 CSS 来设定。

注意点：

属性可以有多个，不能写到标签之前。
属性之间用空格分割，可以是多个空格，也可以是换行。
属性之间不分先后顺序。
属性使用 “键值对” 的格式来表示。

1.3.5 超链接：a

href：必须具备，表示点击后会跳转到哪个页面。

target：打开方式，默认是_self。如果是_blank则用新的标签页打开。

<a href="https://www.baidu.com">百度</a>

特殊的：空链接，使用#在 href 中占位。

1.4 表格标签：

table 标签：表示整个表格。
tr 标签：表示表格的一行。
td 标签：表示一个单元格。
table 包含 tr，tr 包含 td。

表格标签有一些属性，可以用于设置大小边框等，但是一般使用 CSS 方式来设置，这些属性都要放到 table 标签中。

<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500">
    <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>

align：是表格相对于周围元素的对齐方式（不是内部元素）。
border：表示边框。1 表示有边框（数字越大，边框越粗）""表示没边框。
cellpadding：内容距离边框的距离，默认1像素。
cellspacing：单元格之间的距离，默认为 2 像素。
width / height：设置尺寸。

1.5 表单标签：

表单是让用户输入信息的重要途径。

分成两个部分：

表单域：包含表单元素的区域。重点是 form 标签。
表单控件：输入框，提交按钮等。重点是 input 标签。

1.5.1 form 标签：

<form action="test.html">
 ... [form 的内容]
</form>

描述了要把数据按照什么方式，提交到哪个页面中。

1.5.2 input 标签：

各种输入控件，单行文本框，按钮，单选框，复选框。

type(必须有)，取值种类很多，button，checkbox，text，file，image，password。radio等。
name：给 input 起了个名字，尤其是对于单选按钮，具有相同的 name 才能多选一。
value：input 中的默认值。
checked：默认被选中。（用于单选按钮和多选按钮）

下面介绍一些常用的类型：

文本框：

<input type="text">

在这里插入图片描述

密码框：

<input type="password">

在这里插入图片描述

单选框：

<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">⼥

在这里插入图片描述

注意：单选框之间必须具备相同的 name 属性，才能实现多选一效果。

复选框：

<input type="checkbox"> 吃饭
<input type="checkbox"> 睡觉
<input type="checkbox"> 打游戏

在这里插入图片描述

普通按钮：

<input type="button" value="我是个按钮">

在这里插入图片描述

提交按钮：

<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>

在这里插入图片描述

注意：提交按钮必须放到 form 标签内，点击后就会尝试给服务器发送请求

1.5.3 select 标签：

下拉菜单。

option 中定义 selected = “selected” 表示默认选中。

<select>
 <option>北京</option>
 <option selected="selected">上海</option>
</select>

在这里插入图片描述

1.5.4 textarea 标签：

大的文本框。

<textarea rows="3" cols="50">
</textarea>

在这里插入图片描述

1.6 无语义标签：div & span

这两个标签，可以说是被使用最多的 HTML 标签之一了，友友们可以打开网页，按下f12，不难观察到无语义标签的数量是非常多的。

在这里插入图片描述

div 标签，division 的缩写，含义是分割，一个占一行。

span 标签，含义是跨度，一个占一行的一部分（主要作用是方便后续 Javascript 锁定元素）。

就是两个盒子，用于网页布局。

<div>
    <span>咬人猫</span>
    <span>咬人猫</span>
    <span>咬人猫</span>
</div>
<div>
    兔总裁
</div>

在这里插入图片描述

1.7 综合练习：用户注册

注意：本练习不涉及到前后端交互，主要是给友友们练习前面所学的 HTML 。

遇到没有学过的前端知识没有关系，可以去MDN Web Docs (mozilla.org)或者AI上查，前端就是东西比较杂。

设计页面如下：

在这里插入图片描述

提示用户输入，友友们可以试试，网上能不能查到。如果查不到的也没有关系，把其它的实现好，看下面的代码就知道了。

由于文章篇幅有限，只给出 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="text" placeholder="请输入密码"></td>
    </tr>
</table>
<div>
    <input type="button" value="注册">
    <span>已有账号? </span><a href="#">登录</a><br/>
</div>

二、CSS

2.1 CSS 基本知识：

CSS(Cascading Style Sheet)，层叠样式表，用于控制页面的样式。

CSS 能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果。能够做到页面的样式和结构分离。

CSS 可以理解为"东方四大邪术"之化妆术，对页面的展示进行"化妆"。

2.1.1 基本语法规范：

语法：选择器 + ⼀条/N条声明。

选择器决定针对谁修改(找谁)。

声明决定修改啥(干啥))。

声明的属性是键值对。使用;区分键值对，使用:区分键和值。

<style>
    p {
        /* 设置字体颜⾊ */
        color: red;
        /* 设置字体⼤⼩ */
        font-size: 30px;
    }
</style>

注意：

CSS 要写到 style 标签中（还有其他写法）。

style 标签可以放到页面任意位置，一般放到 head 标签内。

2.1.2 引入方式：

CSS有 3 种引入方式，语法如下表格所示：

在这里插入图片描述

3 种引入方式对比：

行内样式：代码冗余，对于多个元素具有相同样式时，会重复编写相同的样式代码。
内部样式：不能在多个页面之间共享，每个页面都需要重复编写相同的样式代码，增加了文件大小。
外部样式，html 和 css 实现了完全的分离，企业开发常用方式，方便进行维护（为了方便讲述，本文章不使用这种方法）。

2.1.3 规范：

虽然 CSS 不区分大小写，但是我们开发时统一使用小写字母。

空格规范：

冒号后面带空格。
选择器和 { 之间也有一个空格。

2.2 CSS 选择器（重点）：

CSS 选择器的主要功能就是选中页面指定的标签元素。选中了元素，才可以设置元素的属性。

CSS 选择器主要分以下几种：

标签选择器
class 选择器
id 选择器
复合选择器
通配符选择器

注意：下面的这些 CSS 代码，都要按照上面给出的引入方式进行引入。

标签选择器：

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

class 选择器：

类选择器，要配合 . + 类名来使用。

/* 选择class为font32的元素, 设置字体⼤⼩为32px */ 
.font32 {
 font-size: 32px;
}

一个类可以被多个标签使用，一个标签也能使用多个类（多个类名要使用空格分割，这种做法可以让代码更好复用）。

ID选择器：

id选择器，要配合 # + id来使用。

/* 选择id为submit的元素, 设置颜⾊为红⾊ */ 
#submit {
 color: red;
}

id 是唯一的，不能被多个标签使用（是和类选择器最大的区别）。

复合选择器：

/*只设置 ul 标签下的 li 标签下的 a 标签, 颜⾊为红色*/ 
ul li a {
 color: blue;
}

以上三个标签选择器 ul li a 中的任意，都可以替换成类选择器，或者 id 选择器，可以是任意选择器的组合，也可以是任意数量选择器的组合。

不一定是相邻的标签，也可以是"孙子"标签。

如果需要选择多种标签，可以使用,分割，如 p, div {} 表示同时选中 p 标签和 div 标签。逗号前后可以是以上任意选择器，也可以是选择器的组合。

通配符选择器

/* 设置⻚⾯所有元素, 颜⾊为红⾊*/ 
* {
 color: red;
}

2.3 常用CSS：

接下来学习一些常见的 css 样式。

准备如下 html。

<div class="text1">我是文本1</div>

2.3.1 color：

color：设置字体颜色。

.text1{
 color: red;
}

在这里插入图片描述

颜色有如下几种表达方式：

英文单词,如 red，blue。
rgb 代码的颜色，如 rgb(255,0,0)。
十六进制的颜色，如#ff00ff。

2.3.2 font-size：

font-size：设置字体大小。

.text1{
 font-size: 32px;
}

在这里插入图片描述

2.3.3 border：

border：边框。

边框是一个复合属性，可以同时设置多个样式，不分前后顺序，浏览器会根据设置的值自动判断。

.text1{
 border: 1px solid purple;
}

在这里插入图片描述

以上 border 属性的对应设置的维度分别为边框粗细，边框样式，边框颜色。

在这里插入图片描述

2.3.4 width/height：

width：设置宽度。

height：设置高度。

注意：只有块级元素可以设置宽高。

块级元素是 HTML 标签的一种显示模式，对应的还有行内元素。

常见块级元素：h1-h6，p，div等。

常见行内元素：a，span。

块级元素独占一行，可以设置宽高，行内元素不独占一行，不能设置宽高。

改变显示模式：

使用 display 属性可以修改元素的显示模式。

display：block 改成块级元素。

display：inline 改成行内元素。

2.3.5 padding | margin：

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

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

内容默认是顶着边框来放置的，用 padding 来控制这个距离。

在这里插入图片描述

三、JavaScript

3.1 初始 JavaScript：

JavaScript（简称 JS），是一个脚本语言，解释型或即时编译型的编程语言。虽然它是作为开发 Web 页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中。

JavaScript 和 HTML 和 CSS 之间的关系：

在这里插入图片描述

HTML：网页的结构(骨头)。

CSS：网页的表现(皮)。

JavaScript：网页的行为(魂)。

在这里插入图片描述

JavaScript快速上手：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    alert("Hello JavaScript")
</script>
</body>
</html>

运行结果：

在这里插入图片描述

引入方式：

JS有 3 种引入方式，语法如下表格所示：

在这里插入图片描述

三种方式的区别，和上面 CSS 引入方式的区别基本一致。

3.2 基础语法：

3.2.1 变量：

创建变量（变量定义 / 变量声明 / 变量初始化），JS 声明变量有 3 种方式：

在这里插入图片描述

var 和 let 基本可以认为是一样的。

注意：JavaScript 是一门动态弱类型语言，变量可以存放不同类型的值（动态）。比如：

var name = 'zhangsan';
var age = 20;

+ 表示字符串拼接。

\n 表示换行。

变量名命名规则：

组成字符可以是任何字母、数字、下划线（_）或美元符号（$）。
数字不能开头。
建议使用驼峰命名。

3.2.2 数据类型：

在这里插入图片描述

使用 typeof 函数可以返回变量的数据类型：

<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
</script>

注意：使用网页打开后，按下 F12 在 Console 中，进行查看。

在这里插入图片描述

3.2.3 运算符：

基本和 Java 一样，需要注意的就是 ==和===的区别。

<script>
    let a = 10;
    let b = "10";
    console.log(a == b);
    console.log(a === b);
</script>

二者都是判断是否相等，==只比较值，===除了比较值之外，还要比较类型。故运行结果如下：

在这里插入图片描述

3.3 JavaScript 对象：

在 JavaScript 中，几乎所有的事物都可以称为对象。

3.3.1 数组：

创建方式：

let arr = new Array();
let arr2 = [1,2,3,4];（注意这里是中括号）

数组删除元素：

语法：数组名.splice(n1,n2).（其中 n1 表示元素下标，n2 表示删除的长度）。

注意：如果下标超出范围读取元素，则结果为 undefined。

3.3.2 函数：

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

注意：实参和形参之间的个数可以不匹配，但是实际开发一般要求形参和实参个数要匹配。

如果实参个数比形参个数多，则多出的参数不参与函数运算。
如果实参个数比形参个数少，则此时多出来的形参值为 undefined。

3.3.3 对象：

创建对象一共有三种方式：

使用 { } 创建对象：

<script>
    let fb_player = {
        name: '姆巴佩',
        height: 178,
        weight: 150,
        sayHello: function() {
            console.log("hello");
        }
    }
</script>

注意：''和""在 JS 中基本没有区别。

键值对之间使用,分割。最后一个属性后面的,可有可无。

键和值之间使用:分割。

使用 new Object 创建对象：

let fb_player = new Object();
    fb_player.name = '姆巴佩';
    fb_player['height'] = 178;

这个和上面的思路是一样的就给出一部分，有需要的话，可以自己试试。

使用构造函数创建对象：

function 构造函数名(形参) {
 this.属性 = 值;
 this.⽅法 = function...
}
var obj = new 构造函数名(实参);

在构造函数内部使用 this 关键字来表示当前正在构建的对象。

构造函数的函数名首字母一般是大写的。

创建对象的时候必须使用 new 关键字。

3.4 JQuery（重点）

原生的 JavaScript 提供的 API 操作 DOM（Document Object Model）元素时，代码比较繁琐。我们学习使用 JQuery 来操作页面对象。‘

3.4.1 引入依赖：

使用 JQuery 需要先引入对应的库。

JQuery官网

在这里插入图片描述

Jquery 官方共提供了 4 种类型的 JQuery 库。

uncompressed：非压缩版本（易读，但是文件较大，传输速度慢）。

minified：压缩版（不易读，文件小，性能高，开发中推荐）。

slim：精简瘦身版，没有Ajax和一些特效。

slim minified：slim 的压缩版。

开发时，建议把 JQuery 库下载到本地，放在当前项目中。引入外部地址，会有外部地址不能访问的风险。

下载方式：

右键点击 minified ，使用新窗口打开。
右键点击后，选择另存为，保存到本地，放在项目中即可。
当你的项目目录出现 jquery，说明下载成功。

在使用 jQuery 时，只需要在 HTML 文档中加入如下代码：（如果下载成功的话，输入 src 的过程中会有提示，按照提示的来）。

<script src="jquery-3.7.1.min.js"></script>

其中， src 属性指明了 JQuery 库所在的URL。

3.4.2 JQuery 语法：

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

在这里插入图片描述

JQuery 的代码通常都写在 document ready函数中。（document：整个文档对象，一个页面就是一个文档对象，使用 document 表示。）

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在文档加载完成后才可以对页面进行操作。如果在文档没有完全加载之前就运行函数，操作可能失败。

$(document).ready(function(){
        // jQuery functions go here
    });

示例：

<button type="button">点我消失</button>

<script src="jquery-3.7.1.min.js"></script>

<script>
    $(document).ready(function(){
        $('button').click(function(){
            $(this).hide();
        });
    });
</script>

3.4.3 JQuery 选择器：

在这里插入图片描述

selector 部分要使用双引号或者单引号（除了 this）。如果是 class 要配合.,如果是 id 要配合#。和 CSS 选择器很类似。

3.4.4 JQuery事件：

事件由三部分组成（JQuery 代码的整个思路）：

事件源：哪个元素触发的。
事件类型：是点击，选中，还是修改？
事件处理程序：进一步如何处理。往往是一个回调函数。

常见的事件有：

在这里插入图片描述

3.4.5 操作元素：

获取/设置元素内容：

这三个方法即可以获取元素的内容，又可以设置元素的内容。有参数时，就进行元素的值设置，没有参数时，就进行元素内容的获取。

代码示例：

获取元素内容：

<div id="test"><span>你好</span></div>
<input type="text" value="hello">

<script src="jquery-3.7.1.min.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"></div>
<div id="test2"></div>
<input type="text" value="">
<script src="jquery-3.7.1.min.js"></script>
<script>
    $(document).ready(function () {
        $("#test").html('<h1>设置html</h1>');
        $("#test2").text('<h1>设置text</h1>');
        $("input").val("设置内容");
    });
</script>

获取/设置元素属性：

JQuery attr() 方法用于获取属性值。

代码示例：

获取元素属性：

<p><a href="https://www.baidu.com" id="baidu">百度</a></p>
<script src="jquery-3.7.1.min.js"></script>
<script>
    $(function(){
        var href = $("p a").attr("href")
        console.log(href);
    });
</script>

设置元素属性：

<p><a href="https://www.baidu.com" id="baidu">百度</a></p>
<script src="jquery-3.7.1.min.js"></script>
<script>
    $(function(){
        var href = $("p a").attr("href","https://www.csdn.net/");
        console.log(href);
    });
</script>

获取/返回css属性：

代码示例：

获取元素属性：

<div style="font-size: 36px;">我是一个文本</div>
<script src="jquery-3.7.1.min.js"></script>
<script>
    $(function(){
        var fontSize = $("div").css("font-size");
        console.log(fontSize);
    });
</script>

设置元素属性：

<div style="font-size: 36px;">我是一个文本</div>
<script src="jquery-3.7.1.min.js"></script>
<script>
    $(function(){
        var fontSize = $("div").css("font-size","24px");
        console.log(fontSize);
    });
</script>

添加元素：

其实就是添加 HTML 内容。

append()：在被选元素的结尾插入内容。

prepend()：在被选元素的开头插入内容。

after()：在被选元素之后插入内容。

before()：在被选元素之前插入内容。

代码示例：

<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>
<script src="jquery-3.7.1.min.js"></script>
<script>
    $(function () {
        $("ol").append("append");
        $("ol").prepend("prepend");
        $("ol").before("before");
        $("ol").after("after");
    });
</script>

删除元素：

删除元素和内容，一般使用以下两个 jQuery 方法：

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

这个直接调用即可，不涉及到参数，所以就不写代码示例了，友友可以自己写代码跑一下。

四、综合案例：

4.1 猜数字：

预期效果：
在这里插入图片描述

代码实现：

生成随机数的方法，友友们可以试着去网上找找（找不到也没有关系，看完下面的代码就明白了），我们学前端，就是不会就查。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>猜数字游戏</title>
</head>
<body>
<h1>猜数字游戏</h1>
<div>
    <input type="button" value="重新开始一局游戏" id="restart">
</div>
<div>
    <span>请输入要猜的数字: </span> <input type="text" id="inputNum" placeholder="请输入数字"> <input type="button" value="猜" id="guest">
</div>
<div>
    <span>已经猜的次数: </span> <span id="count">0</span>
</div>
<div>
    <span>结果: </span> <span id="result"></span>
</div>

<script src="jquery-3.7.1.min.js"></script>
<script>
    $(document).ready(function () {

        //重新开始
        $("#restart").click(function () {
            count = 0;
            randomNum = Math.floor(Math.random() * 100 + 1);
            console.log(randomNum);
            $("#guest").text("");
            $("#count").text(count);
            $("#result").text("");
            $("#inputNum").val("");
        });

        //主要逻辑
        //先生成随机数
        let randomNum = Math.floor(Math.random() * 100 + 1);

        console.log(randomNum);//方便测试
        let count = 0;//计数
        $("#guest").click(function () {
            count++;
            let inputNum = $("#inputNum").val();//获取猜的数字

            if (randomNum < inputNum) {
                //猜的大了
                $("#result").text("猜的大了").css("color","red");
            } else if (randomNum > inputNum) {
                //猜的小了
                $("#result").text("猜的小了").css("color","red");
            } else {
                //猜对了
                $("#result").text("猜对了").css("color","green");
            }
            //更新页面
            $("#count").text(count);

        });
    });
</script>
</body>
</html>

效果如下：

Alt

4.2 表白墙：

预期效果：

在这里插入图片描述

需求：按要求在文本框中输入内容，点击提交按钮，输入内容显示在页面下方。

提前准备如下 HTML 和 CSS 代码（因为我们不是专业前端，我们只需实现交互即可，也就是实现 submit 方法）：

<!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>

</body>

</html>

submit() 代码实现：

<script src="jquery-3.7.1.min.js"></script>
<script>
    function submit() {
        //先提取信息
        let from = $("#from").val();
        let to = $("#to").val();
        let say = $("#say").val();
        if(from == "" || to == "" || say == ""){
            return;
        }
        //提交数据
        let message = "<div>" + from + "对" + to + "说: " + say + "</div>";
        $(".container").append(message);
        //清空留言板
        $("#from").val("");
        $("#to").val("");
        $("#say").val("");
    }
</script>