[Java EE] HTML·CSS·JavaScript基础

苏小瀚

760人浏览 · 2025-12-11 16:53:09

苏小瀚 · 2025-12-11 16:53:09 发布

2.7.6 表格标签 table tr td

2.7.7 表单标签 from input

1. 什么是JavaEE

JavaEE也就是Java平台企业版，是JavaSE的拓展，用于企业级开发，相当于定制一套Java规则用于在企业中进行使用。

2017年，Oracle将javaEE捐赠给Eclipse基金会，后来就改名字为JakartaEE。

而在利用JavaEE进行开发时，避免不了学习框架。

框架就是：一套标准，我们可以在标准上进行拓展，比如说：建造一套房子，工程方将房子建造好，将毛胚房卖给买家，买家再进行装修使用，这里的毛胚房就是框架。

2. HTML

2.1 什么是HTML

HTML：超文本标记语言。

我们平常使用的记事本就是文本语言只能用来写字。

超文本语言：可以添加图片，表格，音频等内容。

标记语言：由标签构成的语言，就是我们可以利用不同的标签修改文章的内容，比如设置标题和正文。例如：word文档。

而HTML就是由标签组成的语言，我们可以使用各种标签。

2.2 HTML标签介绍

比如：

<h1>一级标题</h1>

上面就是一个标签，表示一级标题。

大部分的标签都是成对存在，<....>开始，</....>结束。
少数标签只有一个开始标签，称为单标签。
开始标签和结束标签中间是标签的内容。
开始标签可能会带有属性，比如: id 之类的。

2.3 HTML文件基本结构

<html>
    <head>
        <title>网页显示名</title>
    </head>
    <body>
        内容和各种标签
    </body>
</html>

<html>标签是最外层标签。
<head>标签写页面的属性。
<body>标签写页面的内容。
<title>标签是页面的名字。

2.4 标签层次结构

标签与标签之间存在父子关系和兄弟关系。

<html>
    <head>
        <title>第一个网页</title>
    </head>
    <body>
        hello
    </body>
</html>

上面的head和body就是兄弟关系。

html 和 head 就是父子关系，title是head的子标签。

标签之间的结构构成DOM树：

2.5 开发工具

我们可以使用记事本编写代码，但是很不方便，我们可以使用专业的集成开发环境VScode来进行编写代码。

我们可以从官网下载：https://code.visualstudio.com/

2.6 第一个网页

我们在使用VScode时候，先创建一个HTML文件，然后我们可用！ + 回车快速生成下面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>first</title>
</head>
<body>
    第一个网页界面
</body>
</html>

<!DOCTYPE HTML>称为文档类型定义，表示当前文件是一个html文件。
<html lang = "en">：lang属性表示当前是一个英文界面，有些浏览器会根据此处判断是否要弹窗进行翻译。
<meta charset="UTF-8">：表示编码格式，防止乱码。
name = "viewport" 这里的"viewport"表示设备的屏幕上能显示当前网页的那块区域。
content="width=device-width, initial-scale=1.0"，设置网页可视区和设备宽度等宽，也就是根据设备宽度调整页面宽度，后面是设置页面缩放比例为初始值100%，不缩小也不放大。
在<body></body>里面填写网页内容。
<title>就是设置你打开网页后顶层显示的网页名字。

每次写完代码记得 ctrl + s 保存再在浏览器里面进行访问。

2.7 HTML常见标签

2.7.1 标题标签 h1~h6

从h1到h6标签表示的字体大小越来越小：

2.7.2 段落标签 p

p标签表示一个段落：

p标签表示的段落没有缩进。
而段落的排版会根据浏览器的宽度来自动排版。
在html中输入的多个空格只会当作一个空格。
在html中输入换行，不会真的换行，只是一个空格。
html中首位处的空格和换行都是无效的。
p标签会独占一行，默认具有换行效果。

2.7.3 换行标签 <br/>

我们可以使用<br/>标签来换行，<br/>标签是一个单标签，这里我们发现br标签换行的间隙没有p标签大的间隙大。

2.7.4 图片标签 img

路径的介绍：

我们在访问文件时候有两个路径：相对路径和绝对路径。

相对路径：以该代码所在的文件路径为基础进行寻找。

同级路径：直接写文件名就行。

上级路径：../图片所在文件夹名/图片名

下级路径：直接图片所在文件夹名/图片名

绝对路径：将该文件存储在硬盘上的位置的路径或者是网络上的路径。

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

当然img还包括其他属性:

height：表示图片高度。

weight：表示图片宽度，border：表示图片的边框宽度。

border：表示边框，单位是像素px。

<img src="1.jpg" width="1000px" height="1000px" border="5px">

这就是一个img标签，我们设置图片的长和宽时候，只用设置一个就行，浏览器会等比例缩放，如果两个都设置的话可能会导致图片变形。

2.7.5 超链接 a

<a href="http://www.baidu.com">百度网址</a>

href里面填写的是点击文字后会跳转到的地方，a标签还有一个属性target默认是_self表示在当前网页打开链接，可以设置成_blank表示在新的页面打开链接。

可以填写外部链接，相当于其它网站的链接。

可以填写内部链接，填写相对路径或者绝对路径来打开电脑上的其他前端文件。

可以是空链接，使用#来填写。

2.7.6 表格标签 table tr td

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

table包含tr，tr包含td。

表格标签中有一些属性可以设置表格的大小边框等，这些属性需要放在table标签里面：

align：表格在页面中的水平对齐方式（不是内部元素的对齐方式）。
border：表示边框，默认是0，表示没边框，数字越大，边框越粗。
cellpadding：单元格内容距离边框的距离，默认1像素。
cellspacing：单元格之间的距离，默认2像素。
width/height：设置尺寸。

    <!-- 表格标签 -->
    <table align="center" border="1" cellpadding="1" cellspacing="0" width="200px" height="100px">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>爱好</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>18</td>
            <td>打球</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>20</td>
            <td>唱歌</td>
        </tr>
    </table>

2.7.7 表单标签 from input

表单是让用户输入的重要途径，分为：

包含表单元素的区域，主要是from标签。

输入框，提交按钮等，主要是input标签。

from标签：

from标签用于创建一个表单，该表单手机用户的输入信息发送给服务器。

action属性：指定表单数据提交的目标的URL。
method属性：制定表单数据提交的方式，也就是http协议中的方法。

input标签：

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

主要属性：

type：该属性必须有，表示当前是什么输入框。
name：给input起名字，对于单选按钮来说，具有相同名字的才能多个选择一个。
value：input的默认值。
checked：默认被选中，对于单选框和多选框。
placeholder：输入框显示提示词。

文本框：

<input type="text">

密码框：

<input type="password">

单选框：

单选框必须属性具有相同的name才能实现多选一的效果。

性别：
<input type="radio" name="sex" checked="checked">男
<input type="radio" name="sex">女

复选框：

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

普通按钮：

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

提交按钮：

提交按钮必须放在from标签里面，这样才能将用户输入的数据发送给服务器。

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

select标签：

下拉菜单。

option标签用来表示每一个选项，option标签中使用selected属性，表示是下拉菜单的默认值。

textarea标签：

设置文本域，文本域的内容，也就相当于在记事本中输入一样。

下面代码是上面标签的使用：

里面的label标签作用是通过点击文字也可以勾选选项。

    <!-- 表单标签 -->
    <from action="test.html" method="get">
        用户名:<input type="text" size="30px" name="username" ><br/>
        密码:<input type="password" size="30px" name="password"><br/>
        性别:<input type="radio" name="gender" id="gender1" value="1"><label for="gender1">男</label>
            <input type="radio" name="gender" id="gender2" value="2"><label for="gender2">女</label>
            <input type="radio" name="gender" id="gender3" value="3"><label for="gender3">保密</label><br/>
        兴趣:<input type="checkbox" name="hobby" value="1">篮球
            <input type="checkbox" name="hobby" value="2.">足球
            <input type="checkbox" name="hobby" value="3">排球
            <input type="checkbox" name="hobby" value="4">乒乓球<br/>
        专业:
        <select>
            <option value="1">计算机科学与技术</option>
            <option value="2">软件工程</option>
            <option value="3">大数据</option>
            <option value="4" selected="selected">护理</option>
        </select><br/>
        个人描述：<br/><textarea rows="10" cols="50"></textarea><br/>
        <input type="button" name="" id="" value="按钮">
    </from>

此时里面的提交按钮还有一种写法：

<form action="test.html" method="get">
    <input type="submit" value="提交">
</form>

按钮还可以直接用button来写：

<button>注册</button>

这种提交方式，单击后就会跳转到test.html这个页面。

name属性相当于是表示一个参数，给后端传值。

当我点击提交按钮时候，上面的URL就会变成下面这样：

file:///D:/java/code/java-language-learning/H_C_J/test.html?username=%E5%BC%A0%E4%B8%89&password=123456&gender=1&hobby=1&hobby=2&hobby=3

key值就相当于设置的name属性，value就是设置的value属性。

2.7.8 无语义标签 div span

div和span标签就是两个盒子，用于网络布局。

div是一个大盒子，独占一行。

span是一个小盒子，不独占一行。

    <!-- 无语义标签 -->
    <div>
        <span>周一</span>
        <span>周二</span>
        <span>周三</span>
    </div>
        <div>
        <span>周四</span>
        <span>周五</span>
        <span>周六</span>

2.7.9 案例

实现用户注册界面：

代码如下：

<!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><br/>
    <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>
        <button>注册</button><span>已有账号?</span><a href="#">登录</a>
    </div>
</body>
</html>

3. CSS

3.1 什么是CSS

CSS是用来控制页面的样式的，可以对HTML元素进行样式的设置和排版。

3.2 基本语法规范

选择器 + { 1条或者多条声明 }

选择器决定针对谁进行修改。

声明决定具体的修改内容，声明的格式是键值对结构，键和值之间使用：分开，键值对之间使用；分开。

3.3 引入方式

3.3.1 行内样式

在标签内使用style属性来引入，属性值是键值对的形式，行内样式只能针对一些简单的属性设置。

    <!-- 行内样式 -->
    <div style="color: #ff0000">行内样式</div>

3.3.2 内部样式

定义<style>标签，在标签内部定义CSS样式，内部样式会造成大量代码冗余，很少使用。

head标签里面的代码：

    <!-- 内部样式 -->
    <style>
        h1 {
            color: aquamarine;
        }
    </style>

body标签里面的代码：

    <h1>内部样式</h1>

3.3.3 外部样式

定义<link>标签，通过href属性来引入外部CSS文件，外部样式将HTML和CSS分开，比较常用这种样式。

HTML文件里面的代码：

head标签里面的代码：

rel属性定义当前文件与资源的关系，href属性是引入资源的URL。

    <!-- 外部样式 -->
    <link rel="stylesheet" href="style.css">

body标签里面的代码：

    <p>外部样式</p>

CSS文件里面的代码：

p {
    color: #23ee30;
}

上面代码在前端页面如下：

3.4 CSS选择器

3.4.1 作用

CSS选择器是用来选中指定标签元素的，只有选中后才能对这些标签元素设置属性。

3.4.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>
        div {
            color:blue;
        }
        span {
            color:aqua;
        }
    </style>
</head>
<body>
    <div>标签选择器</div>
    <span>标签选择器</span>
</body>
</html>

3.4.3 class选择器

class选择器是针对具有class属性的标签进行设置样式的，一个标签可以有多个class属性（用空格分开）一个class属性可以给多个标签使用。

语法是以小数点开头后面跟上 {}。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>class选择器</title>
    <style>
        .class-style {
            color: blue;
        }
    </style>
</head>
<body>
    <div class="class-style">class选择器</div>
    <h1 class="class-style">h1标签</h1>
</body>
</html>

3.4.4 id选择器

id选择器适用于设置具有唯一id元素的属性，一个页面id每个标签都是独一份的。

使用#跟上id名字：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id选择器</title>
    <style>
        #id1 {
            color: aqua;
        }
        #id2 {
            color:blue;
        }
    </style>
</head>
<body>
    <span id="id1">span标签</span>
    <h1 id="id2">h1标签</h1>
</body>
</html>

3.4.5 通配符选择器

该选择器使用*开始，可以选择整个页面的所有标签元素或者选择某个标签下的所有子标签元素，设置它们的属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通配符选择器</title>
    <style>
        * {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>h1标签</h1>
    <span>span标签</span>
    <div>div标签</div>
</body>
</html>

3.4.6 复合选择器

复合选择器是通过特殊符号将多个基础选择器结合在一起，设置关系更加复杂的标签的属性。

后代选择器：

将某个标签内部的所有标签都设置属性，两个标签之间用空格隔开。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器</title>
    <style>
        ul li {
            color: blue;
        }
    </style>
</head>
<body>
    <ul>
        <li>无序第一个</li>
        <li>无序第二个</li>
        <li>无序第三个</li>
        <ol>
            <li>有序的</li>
        </ol>
    </ul>
</body>
</html>

子元素选择器：

该选择器只针对一个标签的直接子标签设置属性，孙子后的标签不设置属性，子元素选择器两个标签之间使用>分开。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器</title>
    <style>
        ul>li {
            color: blue;
        }
    </style>
</head>
<body>
    <ul>
        <li>无序第一个</li>
        <li>无序第二个</li>
        <li>无序第三个</li>
        <ol>
            <li>有序的</li>
        </ol>
    </ul>
</body>
</html>

相邻兄弟元素：

这个是设置跟自己相邻的第一个兄弟元素设置属性，必须是在同一个父标签下，两个标签之间通过+链接。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器</title>
    <style>
        span+h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <div>第一</div>
    <span>第二</span>
    <h1>第三</h1>
    <h1>第四</h1>
</body>
</html>

通用兄弟选择器：

在第一个元素之后的所有兄弟元素的属性都进行设置，两个标签之间使用~分开。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器</title>
    <style>
        span ~ h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <div>第一</div>
    <span>第二</span>
    <h1>第三</h1>
    <h1>第四</h1>
</body>
</html>

组合选择器：

可以将多种不同的基础选择器组合在一起，不使用分隔符连接。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器</title>
    <style>
        div.class1 {
            color: blue;
        }
        a#one {
            color: aqua;
        }
    </style>
</head>
<body>
    <div class="class1">第一</div>
    <a href="#" id="one">第二</a>
</body>
</html>

3.5 常用CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用CSS</title>
    <style>
        .text {
            /* 设置字体颜色 */
            color: blue;
            /* 设置字体大小 */
            font-size: 32px;
            /* 设置边框粗细 */
            border-width:1px 5px 10px 5px;
            /* border-top-width: 1px;
            border-right-width: 5px;
            border-bottom-width: 10px;
            border-left-width: 5px; */
            /* 设置边框样式 */
            border-style: solid;
            /* 设置边框颜色 */
            border-color: red green blue purple;
            /* 设置边框样式，颜色，宽度 */
            /* border: solid red 1px; */
            /* 设置块级元素宽度 */
            width: 500px;
            /* 设置块级元素高度 */
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="text">文本内容</div>
</body>
</html>

内边距：

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

外边距：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内外边距</title>
    <style>
        div {
            width: 300px;
            height: 100px;
            border: 1px solid black;
        }
        #div5 {
            width: 100px;
            height: 50px;
            border: 1px solid red;
            margin: 10px;
            padding: 20px;
        }
        #div1 {
            margin: 10px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div5">第一个div</div>
    </div>
    <div id="div2">第二个div</div>
</body>
</html>

4. JavaScript

4.1 什么是JavaScript

JavaScript是一个脚本语言，主要为页面添加一些交互性元素和动态效果。

4.2 JavaScript快速上手

<!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>
    <script>
        alert("hello JavaScript");
    </script>
</body>
</html>

运行上面代码会在网页产生一个弹窗，每次刷新一下就会有弹窗：

4.3 引入方式

4.3.1 行内引入

直接在标签属性里面写JS代码：

<!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 onclick="alert('你好')">点击我</button>
</body>
</html>

页面点击之后会有弹窗。

4.3.2 内部引入

内部样式是将JS代码使用script标签包裹起来，放到head标签里面。

<!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>
        function sayHello() {
            alert("hello world");
        }
    </script>
</head>
<body>
    <!-- 内部样式 -->
    <button onclick="sayHello()">点击我</button>
</body>
</html>

4.3.3 外部引入

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>
    <script src="script.js"></script>
</head>
<body>
    <!-- 外部样式 -->
    <button onclick="sayHello()">点击我</button>
</body>
</html>

JS里面的代码：

function sayHello() {
    alert("hello");
}

4.4 变量

JS声明变量有三种：

var：早期声明变量的关键字，作用域在语句所在的函数中。

let：ES6新增的声明变量的关键字，作用域在语句所在的方法。

const：声明常量的。

JavaScript是一种动态弱类型语言，设置的变量类型可以随意修改，变量可以存放不同类型的数据。

4.5 数据类型

4.6 运算符

JavaScript的运算符用法和Java基本相同：

4.7 JavaScript对象

4.7.1 数组

创建数组的两种方法：

    <script>
        // 数组
        var arr = new Array();
        var arr1 = [];
        var arr2 = [-1,1,'你好',3.14];
    </script>

4.7.2 数组操作

<body>
    <script>
        var arr = [1,2,'haha',false];
        //读取数组
        console.log(arr[0]);
        //添加元素
        arr[4] = "add";
        console.log(arr[4]);
        console.log(arr.length);//获取数组长度
        //修改数组元素
        arr[1] = 66;
        console.log(arr[1]);
        //删除元素
        arr.splice(4,1);//第一个参数表示从哪个位置开始删除，第二个参数表示删除元素个数
        console.log(arr[4]);//元素不存在，结果为undefined
        console.log(arr.length);
    </script>
</body>

网页的控制台显示JS代码的执行结果：

4.8 函数

函数的定义是使用function关键字来定义的，需要设置函数名，可以设置参数，可以设置返回值。

        //定义函数
        function sum(x,y) {
            console.log(x+y);
        }
        sum(10,20);

4.9 对象

在JS中字符串，数值，数组，函数都是对象。

        //创建对象
        //创建空对象
        let student = {};
        let student2 = {
            "name": "zhangsan",
            "age": 15
        };

        //读
        console.log(student2.name);
        console.log(student2["name"]);
        //修改
        student2.name = "lisi";
        console.log(student2.name);
        console.log(student2);
        //添加
        student.name = "空对象赋值";
        console.log(student);

5. JQuery

5.1 jQuery的介绍

jQuery是一个第三方库，封装了JavaScript常用的功能代码使其使用起来更加方便。

我们要想使用jQuery，需要先引入第三方的库，我们可以去官网进行下载：

官网

可以将这个包存到自己的项目里面。

5.2 jQuery语法

jQuery是通过选取HTML元素，对这些元素进行操作的。

$(selector).action()

$()：是一个函数，用来选择和操作HTML元素的。

selector：是一个选择器，用来选择元素的。

action()：是执行对元素的具体操作。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery</title>
    <script src="JQuery/jquery-3.7.1.min.js"></script>
</head>
<body>
    <script>
        $(document).ready(function() {
            //页面加载完之后弹窗
            alert("页面加载完成");
        });
    </script>
</body>
</html>

当页面加载完成就会弹窗：

5.3 jQuery选择器

jQuery基于CSS选择器之外还有一些其他的选择器：

5.4 jQuery事件

事件就是用户在操作网页时候，做的一些点击，选择等操作，会产生一些交互行为。

点击事件：

$("p").click(function(){
 //动作发⽣后执⾏的代码 
});

常见事件：

5.5 操作元素

5.5.1 获取/设置元素内容

上面三个方法就可以获取和设置元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery</title>
    <script src="JQuery/jquery-3.7.1.min.js"></script>
</head>
<body>
    <div id="one">
        <span id="two">页面元素</span>
    </div>
    <input type="text" value="nihao" id="in">

    <script>
        //点击
        $("#one").click(function() {
            //获取页面元素
            //console.log($(this).text()); //只会返回里面的文本内容
            //console.log($(this).html()); //获取里面的内容，包括HTML标签
            console.log($("#in").val()); //用来识别文本框内容的。
            //修改页面元素
            //$(this).text("<h1>我是点击后的内容</h1>"); //不会识别字符串里面的HTML标签
            //$(this).html("<h1>我是点击后的内容</h1>"); //会识别字符串里面的HTML标签
            $("#in").val("<h1>点击后的值</h1>"); //不会识别字符串里面的HTML标签
        })
    </script>
</body>
</html>

5.5.2 获取/设置元素属性

jQuery的attr()方法用来获取元素的属性。

<!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/jquery-3.7.1.min.js"></script>
</head>
<body>
    <a href="https://www.baidu.com">百度</a>
    
    <script>
        //获取href属性值
        console.log($("a").attr("href"));
        //修改属性的值
        $("a").attr("href","https://www.bilibili.com");
    </script>
</body>
</html>

5.5.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>
    <script src="JQuery/jquery-3.7.1.min.js"></script>
</head>
<body>
    <div style="font-size: 20px;">这是一个div</div>

    <script>
        //获取样式
        console.log($("div").css("font-size"));
        //修改样式
        $("div").css("font-size","60px");
    </script>
</body>
</html>

5.5.4 添加元素

添加元素有下面四种方法：

before():在被选元素之前插入内容（外部）

after():在被选元素之后插入内容（外部）

prepend():在被选元素内部的开头插入内容（内部）

append():在被选元素内部的结尾插入内容（内部）

演示结果：

代码演示：

<!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/jquery-3.7.1.min.js"></script>
</head>
<body>
    <ol>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
    </ol>

    <script>
        $("ol").append("append");
        $("ol").prepend("prepend");
        $("ol").after("after");
        $("ol").before("before");
    </script>
</body>
</html>

5.5.5 删除元素

一般使用下面两个方法：

remove()：删除被选元素以及其子元素。

empty()：删除被选元素的子元素。

<!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/jquery-3.7.1.min.js"></script>
</head>
<body>
    <ol>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
    </ol>

    <script>
        $("ol").remove();
        $("ol").empty();
    </script>
</body>
</html>

remove()删除效果：

empty()删除效果：

5.6 案例练习

5.6.1 猜数字

预期结果：

代码实现：

<!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>
    <button id="reset">重新开始一局游戏</button><br/>
    <span>请输入要猜的数字：</span>
    <input type="text" id="guessNum">
    <button id="guess">猜</button><br/>
    <span>已经猜的次数：</span>
    <span id="count">0</span><br/>
    <span>结果：</span>
    <span id="result"></span>

    <script src="JQuery/jquery-3.7.1.min.js"></script>
    <script>
        //猜的次数
        let count = 0;
        //生成1~100的随机数
        let number = Math.floor(Math.random() * 100) + 1;
        console.log(number);//将随机数打印在控制台上

        //点击猜按钮产生的效果
        $("#guess").click(function() {
            //每猜一次+1
            count++;
            //获取输入的值
            let guessNum = $("#guessNum").val();
            //将猜的次数更新
            $("#count").text(count);
            //判断猜的数对不对
            if(guessNum > number) {
                $("#result").text("猜大了");
                $("#result").css("color","red");
            }else if(guessNum == number) {
                $("#result").text("猜对了");
                $("#result").css("color","green");
            }else {
                $("#result").text("猜小了");
                $("#result").css("color","red");
            }
        });
        //点击重新开始一局游戏产生的效果
        $("#reset").click(function() {
            number = Math.floor(Math.random() * 100) + 1;
            console.log(number);
            count = 0;
            //结果清空
            $("#result").text("");
            //猜的次数清0
            $("#count").text(count);
            //输入框清空
            $("#guessNum").val("");
        });
    </script>
</body>
</html>

5.6.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;
            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>

    <script src="JQuery/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 html = "<div>" + from + " 对 " + to + " 说：" + say + "</div>";
            $(".container").append(html);

            $("#from").val("");
            $("#to").val("");
            $("#say").val("");
        }
    </script>
</body>
</html>