【 HTML + CSS + JavaScript 学习速通 max】

HTML + CSS + JavaScript 学习速通

本节目标

认识 HTML 的基本结构，学习常用的 HTML 标签。
掌握 CSS 基本语法规范和CSS选择器的各种用法，熟练使用CSS的常用属性。
了解什么是JavaScript，学习JavaScript的常见操作，以及使用JQuery完成简单的页面元素操作。

1. HTML

1.1 HTML基础

1.1.1 什么是HTML

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

超文本：比文本要强大。通过链接和交互式方式来组织和呈现信息的文本形式。不仅仅有文本，还可能包含图片，音频，或者自己已经审阅过它的学者所加的评注、补充或脚注等等。
标记语言：由标签构成的语言
- HTML的标签都是提前定义好的，使用不同的标签，表示不同的内容。
  类似飞书文档，Word文档，选中文本点击标题1，就会使用标题1的样式来显示文本，上述标题1就是一个"标签"。

代码示例：

html 复制代码

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

学习HTML 主要就是学习标签。

1.1.2 认识 HTML 标签

HTML 代码是由 "标签" 构成的。

形如：

html 复制代码

<h3>我是三级标题</h3>

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

代码示例：

html 复制代码

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

1.1.3 HTML 文件基本结构

html 复制代码

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

html 标签是整个 html 文件的根标签(最顶层标签)
head 标签中写页面的属性。
body 标签中写的是页面上显示的内容
title 标签中写的是页面的标题。

1.1.4 标签层次结构

父子关系
兄弟关系

html 复制代码

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

其中：

head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)
title 是 head 的子标签。head 是 title 的父标签。
head 和 body 之间是兄弟关系。
- 可以使用 chrome 的开发者工具查看页面的结构。
  F12 或者右键审查元素，开启开发者工具，切换到 Elements 标签，就可以看到页面结构细节。

标签之间的结构关系，构成了一个 DOM树

DOM 是 Document Object Mode (文档对象模型) 的缩写。

1.2 HTML 快速入门

1.2.1 开发工具

HTML 可以使用系统自带的记事本来编写，但是非常不方便，课程中使用前端专业的开发工具：Visual Studio Code

Visual Studio Code(简称"VS Code")是Microsoft在2015年4月30日Build开发者大会上宣布的一款跨平台源代码编辑器。可以运行在Windows，macOS 和Linux上。它具有对JavaScript，TypeScript和 Node.js的内置支持，并具有丰富的其他语言(例如C++，C#，Java，Python，PHP，Go)。

官网：https://code.visualstudio.com 进行下载，安装即可。

1.2.2 快速开发

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

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>

</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"> viewport 指设备屏幕上显示网页的区域，设置可视区和设备宽度等宽，初始缩放为不缩放。

在<body></body>标签中书写文字，Ctrl + S保存，浏览器访问即可。

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>
  第一个HTML页面
</body>
</html>

1.3 HTML常见标签

1.3.1 标题标签 h1-h6

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

html 复制代码

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

1.3.2 段落标签: p

在HTML中，段落，换行符，空格都会失效，如果需要分成段落，需要使用专门的标签。

p 标签表示一个段落。

html 复制代码

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

注意：

p 标签描述的段落，前面没有缩进。(未来 CSS 会学)
自动根据浏览器宽度来决定排版。
html 内容首尾处的换行，空格均无效。
在 html 中文字之间输入的多个空格只相当于一个空格。
html 中直接输入换行不会真的换行，而是相当于一个空格。

1.3.3 换行标签: br

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

br 是一个单标签(不需要结束标签)
br 标签不像 p 标签那样带有一个很大的空隙。
<br/> 是规范写法。不建议写成 <br>

html 复制代码

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

1.3.4 图片标签: img

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

html 复制代码

<img src="rose.jpg">

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

img 标签的其他属性：

width/height: 控制宽度高度。高度和宽度一般改一个就行，另外一个会等比例缩放。否则就会图片失衡。
border: 边框，参数是宽度的像素。但是一般使用 CSS 来设定。

html 复制代码

<img src="rose.jpg" width="500px" height="800px" border="5px">

注意：

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

关于目录结构：

相对路径：以 html 所在位置为基准，找到图片的位置。
- 同级路径：直接写文件名即可 (或者 ./)
- 下一级路径：image/1.jpg
- 上一级路径：.../image/1.jpg
绝对路径：一个完整的磁盘路径，或者网络路径。例如
- 磁盘路径 D:/rose.jpg ( 最好使用 / ，不要使用 \ )
- 网络路径 https://img2.baidu.com/it/u=3359649605,3626874592\&fm=253\&fmt=auto\&app=138\&f=JPEG?w=500\&h=752

1.3.5 超链接: a

href: 必须具备，表示点击后会跳转到哪个页面。
target: 打开方式。默认是 _self。如果是 _blank 则用新的标签页打开。

html 复制代码

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

链接的几种形式：

外部链接：href 引用其他网站的地址

html 复制代码

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

内部链接：网站内部页面之间的链接。写相对路径即可。

html 复制代码

<!-- 1.html -->
我是 1.html
<a href="2.html">点我跳转到 2.html</a>
<!-- 2.html -->
我是 2.html
<a href="1.html">点我跳转到 1.html</a>

空链接：使用 # 在 href 中占位。

html 复制代码

<a href="#">空链接</a>

1.4 表格标签

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

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

这些属性都要放到 table 标签中。

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

html 复制代码

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

1.5 表单标签

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

分成两个部分：

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

1.5.1 form 标签

html 复制代码

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

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

1.5.2 input 标签

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

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

文本框

html 复制代码

<input type="text">

密码框

html 复制代码

<input type="password">

单选框

html 复制代码

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

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

复选框

html 复制代码

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

普通按钮

html 复制代码

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

当前点击了没有反应。需要搭配 JS 使用。

html 复制代码

<input type="button" value="我是个按钮" onclick="alert('hello')">

提交按钮

html 复制代码

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

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

1.5.3 select 标签

下拉菜单

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

html 复制代码

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

1.5.4 textarea 标签

html 复制代码

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

文本域中的内容，就是默认内容，注意，空格也会有影响。

rows 和 cols 也都不会直接使用，都是用 css 来改的。

1.6 无语义标签: div&span

div 标签，division 的缩写，含义是分割
span 标签，含义是跨度
就是两个盒子。用于网页布局
div 是独占一行的，是一个大盒子。
span 不独占一行，是一个小盒子。

html 复制代码

<div>
  <span>咬人猫</span>
  <span>咬人猫</span>
  <span>咬人猫</span>
</div>
<div>
  <span>兔总裁</span>
  <span>兔总裁</span>
  <span>兔总裁</span>
</div>
<div>
  <span>阿叶君</span>
  <span>阿叶君</span>
  <span>阿叶君</span>
</div>

1.7 综合练习: 用户注册界面

html 复制代码

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

2. CSS

2.1 CSS介绍

2.1.1 什么是CSS?

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

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

2.1.2 基本语法规范

选择器 + {一条/N条声明}

选择器决定针对谁修改 (找谁)
声明决定修改啥。(干啥)
声明的属性是键值对。使用 ; 区分键值对，使用 : 区分键和值。

html 复制代码

<style>
p {
  /* 设置字体颜色 */
  color: red;
  /* 设置字体大小 */
  font-size: 30px;
}
</style>
<p>hello</p>

注意：

CSS 要写到 style 标签中(后面还会介绍其他写法)
style 标签可以放到页面任意位置。一般放到 head 标签内。
CSS 使用 /* */ 作为注释。(使用 ctrl + / 快速切换)。

2.1.3 引入方式

引入方式	语法描述	示例
行内样式	在标签内使用style属性，属性值是css属性键值对	`<div style="color:green">绿色</div>`
内部样式	定义`<style>`标签，在标签内部定义css样式	`<style> h1 {...} </style>`
外部样式	定义`<link>`标签，通过href属性引入外部css文件	`<link rel="stylesheet" href="[CSS文件路径]">`

3种引入方式对比：

内部样式会出现大量的代码冗余，不方便后期的维护，所以不常用。(课堂上为了方便讲解，使用该方式)
行内样式，只适合于写简单样式。只针对某个标签生效。缺点是不能写太复杂的样式。
外部样式，html和css实现了完全的分离，企业开发常用方式。

2.1.4 规范

样式大小写：虽然 CSS 不区分大小写，开发时统一使用小写字母
空格规范：冒号后面带空格；选择器和 { 之间也有一个空格。

2.2 CSS选择器

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

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

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

示例HTML：

html 复制代码

<div class="font32">我是一个div，class为font32</div>
<div class="font32">我是一个div，class为font32</div>
<div><a href="#">我是一个div</a></div>
<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>
<button id="submit">提交</button>

标签选择器

css 复制代码

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

类选择器

css 复制代码

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

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

ID选择器

css 复制代码

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

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

通配符选择器

css 复制代码

/* 设置页面所有元素，颜色为红色*/
* {
  color: red;
}

复合选择器

css 复制代码

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

以上三个标签选择器 ul li a 中的任意，都可以替换成类选择器，或者id选择器，可以是任意选择器的组合，也可以是任意数量选择器的组合
不一定是相邻的标签，也可以是"孙子"标签
如果需要选择多种标签，可以使用 , 分割，如 p，div { } 表示同时选中p标签和div标签。逗号前后可以是以上任意选择器，也可以是选择器的组合。

2.3 常用CSS

准备HTML：

html 复制代码

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

2.3.1 color

color：设置字体颜色

css 复制代码

.text1{
  color: red;
}

颜色表达方式：

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

2.3.2 font-size

font-size：设置字体大小

css 复制代码

.text1{
  font-size: 32px;
}

2.3.3 border

border：边框

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

css 复制代码

.text1{
  border: 1px solid purple;
}

等同于：

css 复制代码

.text1 {
  border-width: 1px;
  border-style: solid;
  border-color: purple;
}

样式	说明	取值
border-width	设置边框粗细	数值
border-style	设置边框样式	dotted：点状；solid：实线；double：双线；dashed：虚线
border-color	设置边框颜色	同 color

2.3.4 width/height

width：设置宽度

height：设置高度

只有块级元素可以设置宽高

常见块级元素：h1-h6，p，div 等
常见行内元素：a span
块级元素独占一行，可以设置宽高
行内元素不独占一行，不能设置宽高

改变显示模式：

display: block 改成块级元素 [常用]
display: inline 改成行内元素 [很少用]

css 复制代码

.text1 {
  width: 200px;
  height: 100px;
}

2.3.5 padding

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

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

css 复制代码

.text1 {
  padding: 20px;
}

可分方向设置：

padding-top
padding-bottom
padding-left
padding-right

2.3.6 margin

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

css 复制代码

.text1 {
  margin: 20px;
}

可分方向设置：

margin-top
margin-bottom
margin-left
margin-right

3. JavaScript

3.1 初识 JavaScript

3.1.1 JavaScript 是什么

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

发展历史：

1994年，网景公司(Netscape)发布了Navigator浏览器0.9版，需要网页脚本语言实现交互
1995年Sun公司将Oak语言改名为Java，网景公司与Sun结盟
1995年4月，Brendan Eich 入职网景公司
1995年5月，Brendan Eich用10天设计出JavaScript，最初命名LiveScript，后改名JavaScript

Java和JavaScript的关系，就像雷锋和雷峰塔、印度和印度尼西亚一样。

三者关系：

HTML：网页的结构(骨)
CSS：网页的表现(皮)
JavaScript：网页的行为(魂)
JavaScript和HTML和CSS之间的关系

3.1.2 JavaScript快速上手

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

3.1.3 引入方式

引入方式	语法描述	示例
行内样式	直接嵌入到 html 元素内部	`<input type="button" value="点我一下" onclick="alert('haha')">`
内部样式	定义`<script>`标签，写到 script 标签中	`<script> alert("haha"); </script>`
外部样式	定义`<script >`标签，通过src属性引入外部js文件	`<script src="hello.js"></script>`

3种引入方式对比：

内部样式会出现大量的代码冗余，不方便后期的维护，所以不常用。(课堂上为了方便讲解，使用该方式)
行内样式，只适合于写简单样式。只针对某个标签生效。缺点是不能写太复杂的js。
外部样式，html和js实现了完全的分离，企业开发常用方式。

3.2 基础语法

3.2.1 变量

JS声明变量有3种方式：

关键字	解释	示例
var	早期JS中声明变量的关键字，作用域在该语句的函数内	var name = 'zhangsan';
let	ES6 中新增的声明变量的关键字，作用域为该语句所在的代码块内	let name = 'zhangsan';
const	声明常量的，声明后不能修改	const name = 'zhangsan';

注意事项：

JavaScript 是一门动态弱类型语言，变量可以存放不同类型的值，类型可随时改变
变量名命名规则：组成字符可以是任何字母、数字、下划线(_)或美元符号($)；数字不能开头；建议使用驼峰命名
- 表示字符串拼接
\n 表示换行

3.2.2 数据类型

数据类型	描述
number	数字。不区分整数和小数。
string	字符串类型。字符串字面值需要使用引号引起来，单引号双引号均可。
boolean	布尔类型。true 真，false 假
undefined	表示变量未初始化。只有唯一的值 undefined。

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

javascript 复制代码

<script>
let a = 10;
console.log(typeof a);//number
let b = 'hello';
console.log(typeof b);//string
let c = true;
console.log(typeof c);//boolean
let d;
console.log(typeof d);//undefined
let e = null;
console.log(typeof e);//null
</script>

3.2.3 运算符

运算符类型	运算符
算术运算符	+，-，*，/，%
自增自减运算符	++，--
赋值运算符	=，+=，-=，*=，/=，%=
比较运算符	<，>，<=，>=，!=，!==；==比较相等(会进行隐式类型转换)
逻辑运算符	&&，
位运算符	按位与&、按位或
移位运算符	<<左移、有符号右移(算术右移)、无符号右移(逻辑右移)>>>
三元运算符	条件表达式?true_value:false_value

javascript 复制代码

<script>
let age = 20;
let age1 = "20";
let age2 = 20;
console.log(age == age1);//true，比较值
console.log(age === age1);//false，类型不一样
console.log(age == age2);//true，值和类型都一样
</script>

3.3 JavaScript对象

3.3.1 数组

3.3.1.1 数组定义

使用 new 关键字创建

javascript 复制代码

// Array 的 A 要大写
let arr = new Array();

使用字面量方式创建 [常用]

javascript 复制代码

let arr = [];
let arr2 = [1，2，'haha'，false];

JS 的数组不要求元素是相同类型。

3.3.1.2 数组操作

读：使用下标的方式访问数组元素(从 0 开始)
增：通过下标新增，或者使用 push 进行追加元素
改：通过下标修改
删：使用 splice 方法删除元素

javascript 复制代码

<script>
let arr = [1，2，'haha'，false];
//读取数组
console.log(arr[0]); //1
//添加数组元素
arr[4] = "add"
console.log(arr[4]);//add
console.log(arr.length);//5，获取数组的长度
//修改数组元素
arr[4] = "update"
console.log(arr[4]);//update
//删除数组元素
arr.splice(4，1);// 第一个参数表示从下标为4的位置开始删除。第二个参数表示要删除的元素个数是 1 个
console.log(arr[4]);//undefined 元素已经删除，如果元素不存在，结果为undefined
console.log(arr.length);//4，获取数组的长度
</script>

注意：

如果下标超出范围读取元素，则结果为 undefined
不要给数组名直接赋值，此时数组中的所有元素都没了。

3.3.2 函数

3.3.2.1 语法格式

javascript 复制代码

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

函数定义并不会执行函数体内容，必须要调用才会执行。调用几次就会执行几次。

javascript 复制代码

function hello() {
  console.log("hello");
}
// 如果不调用函数，则没有执行打印语句
hello();

函数的定义和调用的先后顺序没有要求。

3.3.2.2 关于参数个数

实参和形参之间的个数可以不匹配。实际开发一般要求形参和实参个数要匹配

实参个数比形参个数多，多出的参数不参与函数运算
实参个数比形参个数少，多出来的形参值为 undefined

3.3.2.3 函数表达式

javascript 复制代码

let add = function() {
  var sum = 0;
  for (var i = 0; i < arguments.length; i++) {
    sum += arguments[i];
  }
  return sum;
}
console.log(add(10，20)); // 30
console.log(add(1，2，3，4)); // 10
console.log(typeof add); // function

JS 中函数是一等公民，可以用变量保存，也可以作为其他函数的参数或者返回值。

3.3.3 对象

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

属性：事物的特征。
方法：事物的行为。

使用字面量创建对象 [常用]

javascript 复制代码

var a = {}; // 创建了一个空的对象
var student = {
  name: '蔡徐坤',
  height: 175,
  weight: 170,
  sayHello: function() {
    console.log("hello");
  }
};

使用对象的属性和方法：

javascript 复制代码

// 1. 使用 . 成员访问运算符来访问属性 `.` 可以理解成 "的"
console.log(student.name);
// 2. 使用 [ ] 访问属性，此时属性需要加上引号
console.log(student['height']);
// 3. 调用方法，别忘记加上 () 
student.sayHello();

使用 new Object 创建对象

javascript 复制代码

var student = new Object(); 
student.name = "蔡徐坤";
student.height = 175;
student['weight'] = 170;
student.sayHello = function () {
  console.log("hello");
}
console.log(student.name);
console.log(student['weight']);
student.sayHello();

使用构造函数创建对象

javascript 复制代码

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

注意：

在构造函数内部使用 this 关键字来表示当前正在构建的对象。
构造函数的函数名首字母一般是大写的。
构造函数的函数名可以是名词。
构造函数不需要 return
创建对象的时候必须使用 new 关键字。

示例：

javascript 复制代码

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();

3.4 JQuery

jQuery是一个快速、简洁且功能丰富的JavaScript框架，于2006年发布。它封装JavaScript常用的功能代码，提供简洁强大的选择器和DOM操作方法。

3.4.1 引入依赖

使用CDN引入：

html 复制代码

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

或国内CDN：

html 复制代码

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

JQuery库类型：

uncompressed：非压缩版本(易读，文件较大)
minified：压缩版(文件小，性能高，开发推荐)
slim：精简瘦身版，无Ajax和特效
slim minified：slim压缩版

开发时,建议把JQuery库下载到本地,放在当前项⽬中.引⼊外部地址,会有外部地址不能访问的⻛险.下载⽅式:
1. 通过浏览器访问上述连接
2. 右键->另存为...保存到本地,放在项⽬中即可

3.4.2 JQuery 语法

基础语法：$(selector).action()

$()：jQuery 提供的全局函数，用于选择和操作 HTML 元素。
Selector：选择器，查询查找 HTML 元素
action：执行对元素的操作

JQuery 代码通常写在 document ready 函数中，防止文档未加载完成执行代码失败。

javascript 复制代码

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

简洁写法：

javascript 复制代码

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

示例：

html 复制代码

<button type="button">点我消失</button>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
  $('button').click(function(){
    $(this).hide();
  });
});
</script>

3.4.3 JQuery 选择器

语法	描述
$("*")	选取所有元素
$(this)	选取当前HTML元素
$("p")	所有元素
$("p:first")	选取第一个元素
$("p:last")	最后一个元素
$(".box")	所有 class="box" 的元素
$("#box")	id="box" 的元素
$(".intro.demo")	所有 class="intro" 且 class="demo" 的元素
$("p.intro")	选取 class 为 intro 的元素
$("ul li:first")	选取第一个 * 元素的第一个 * 元素
$(":input")	所有元素
$(":text")	所有 type="text" 的元素
$(":checkbox")	所有 type="checkbox" 的元素

3.4.4 JQuery事件

事件组成：事件源、事件类型、事件处理程序

常见事件：

事件	代码
文档就绪事件(完成加载)	$(document).ready(function)
点击事件	$(selector).click(function)
双击事件	$(selector).dblclick(function)
元素的值发生改变	$(selector).change(function)
鼠标悬停事件	$(selector).mouseover(function)

3.4.5 操作元素

3.4.5.1 获取/设置元素内容

JQuery方法	说明
text()	设置或返回所选元素的文本内容
html()	设置或返回所选元素的内容(包括 HTML 标签)
val()	设置或返回表单字段的值

获取内容示例：

html 复制代码

<div id="test"><span>你好</span></div>
<input type="text" value="hello">
<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>

设置内容示例：

html 复制代码

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

3.4.5.2 获取/设置元素属性

attr() 方法用于获取/设置属性值。

获取：

html 复制代码

<p><a href="https://www.bitejiuyeke.com/index" id="bite">比特就业课</a></p>
<script>
$(function(){
  var href = $("p a").attr("href")
  console.log(href);
});
</script>

设置：

html 复制代码

<p><a href="https://www.bitejiuyeke.com/index" id="bite">比特就业课</a></p>
<script>
$(function(){
  $("p a").attr("href","baidu.com")
  console.log($("p a").attr("href"));
});
</script>

3.4.5.3 获取/返回css属性

css() 方法设置或返回被选元素的一个或多个样式属性

获取：

html 复制代码

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

设置：

html 复制代码

<div style="font-size: 36px;">我是一个文本</div>
<script>
$(function(){
  $("div").css("font-size","24px");
});
</script>

3.4.5.4 添加元素

append()：在被选元素的结尾插入内容
prepend()：在被选元素的开头插入内容
after()：在被选元素之后插入内容
before()：在被选元素之前插入内容

html 复制代码

<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>
<img src="pic/rose.jpg">
<script>
$(function () {
  $("ol").append("<li>append</li>");
  $("ol").prepend("<li>prepend</li>");
  $("img").before("图片前插入");
  $("img").after("图片后插入");
});
</script>

3.4.5.5 删除元素

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

删除元素：

html 复制代码

<div id="div1">我是一个div</div>
<button>删除 div 元素</button>
<script>
$(function () {
  $('button').click(function(){
    $('#div1').remove();
  });
});
</script>

删除子元素：

html 复制代码

<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>
<button>删除列表元素</button>
<script>
$(function () {
  $('button').click(function(){
    $('ol').empty();
  });
});
</script>

3.5 综合案例

3.5.1 猜数字

html 复制代码

<button type="button" id="reset">重新开始一局游戏</button>
<br>
请输入要猜的数字:<input type="text" id="number">
<button type="button" id="button">猜</button>
<br>
已经猜的次数:<span id="count">0</span>
<br>
结果:<span id="result"></span>
<script>
$(function () {
  // 随机生成一个 1-100 的数字
  var guessNumber = Math.floor(Math.random() * 100) + 1
  var count = 0;
  $("#button").click(function () {
    count++;
    $("#count").text(count);
    var userGuess = parseInt($("#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
    count = 0;
    $("#count").text(count);
    $("#result").text("");
    $("#number").val("");
  });
});
</script>

3.5.2 表白墙

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>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .container {
      width: 400px;
      margin: 0 auto;
    }
    h1 {
      text-align: center;
      padding: 20px 0;
    }
    p {
      color: #666;
      text-align: center;
      font-size: 14px;
      padding: 10px 0;
    }
    .row {
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    span {
      width: 100px;
      line-height: 40px;
    }
    .edit {
      width: 200px;
      height: 30px;
    }
    .submit {
      width: 304px;
      height: 40px;
      color: white;
      background-color: orange;
      border: none;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>表白墙</h1>
    <p>输入后点击提交，会将信息显示在表格中</p>
    <div class="row">
      <span>谁: </span>
      <input class="edit" type="text">
    </div>
    <div class="row">
      <span>对谁: </span>
      <input class="edit" type="text">
    </div>
    <div class="row">
      <span>说什么: </span>
      <input class="edit" type="text">
    </div>
    <div class="row">
      <input type="button" value="提交" class="submit">
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $(function () {
      $(".submit").click(function () {
        var from = $('.edit:eq(0)').val();
        var to = $('.edit:eq(1)').val();
        var message = $('.edit:eq(2)').val();
        if (from == '' || to == '' || message == '') {
          return;
        }
        var html = '<div class="row">' + from + '对' + to + '说: ' + message + '</div>';
        $('.container').append(html);
        $(":text").val("");
      });
    });
  </script>
</body>
</html>

4. 总结

HTML是一种超文本标记语言，主要用于页面内容的显示和排版。如果需要更漂亮的样式展示和页面效果，需要搭配CSS和JavaScript来使用
学习HTML主要是学习标签，HTML的标签特别多，了解基本语法即可
CSS重点是学习CSS的选择器使用，更多样式可参考CSS:层叠样式表 | MDN
JavaScript是一个脚本语言，和Java没有关系。JQuery是一个JavaScript框架，使用JQuery可以轻松地选择和操作HTML元素，提高开发效率。
前端开发对于后端开发人员而言不是很重要，不必花费过多时间在这个上面。达到借助网络能阅读代码的水平即可。