Web前端技术

最新推荐文章于 2025-05-18 21:31:21 发布

原创最新推荐文章于 2025-05-18 21:31:21 发布 · 2.4w 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

该文章已生成可运行项目，

Web前端技术

一、HTTP协议

HTTP协议(HyperText Transfer Protocol,超文本传输协议), 针对网络资源的请求和响应定义的网络应用协议。网络资源一般是HTML网页、CSS样式、Javascript脚本、json以及音/视频等媒体资源。

1.1 请求报文

客户端发起请求之前，首先要确认url（统一资源定位符）和请求方法 method(GET、POST、PUT、PATCH、DELETE、OPTION等)；其次确定请求的数据body和请求头 header。

【如】在浏览器发起 https://www.baidu.com/s?wd=python,发送的报文如下：

GET /s HTTPS/1.1
Host: www.baidu.com

wd=python

【注意】生成完的报文是浏览器基于socket网络通信底层功能将报文的字节码发送给服务器。（Socket通信之三次握手和四次挥手）

【说明】请求报文的第一行

GET 是请求方法
/s  请求路径 path
HTTPS 请求的类型，一般是 HTTP （非安全性的）和 HTTPS(安全性的，即使用SSL加密)
1.1  版本号，一般是1.0、1.1和2.0

请求报文的第二行开始是请求头，基于 Key：Value方式声明。常用的请求头的key(属性)有：

Host 
Content-Type
content-Length
Connection
User-Agent
Cookie

请求头和请求体body（数据）之间必须存在一个空行进行分隔。

1.2 响应报文

相对于请求报文是由客户端发送给服务端，服务端接收并解释报文，根据报文的请求资源（path, 请求头、数据body)进行处理，处理的结果封闭成报文并发送给客户端。

HTTPS/1.1  200 OK
Content-Type: text/html;charset=utf-8
Content-Length: 100

<html>
....
</html>

【说明】第一行是协议类型和版本号、响应的状态码及状态码描述

200表示响应成功， OK是200状态码描述。

第二行开始即是响应头，使用key:value形式。

响应头和响应数据body中间存在一个空行。

二、HTML标准

HTML (Hyper Text Markup Language 超文本标记语言)，通过不同的标签（HTML标签）描述不同的数据，如文本、图片、表格、表单、视频、音频、Flask动画等。

HTML标签一般由浏览器来解析和渲染的；浏览器按W3C标准来解释和渲染（绘制）。

HTML也可以是一个文本的数据类型（text/html），如网页文件（index.html、index.htm）。它的文件内容是相关的HTML标签。

目前大多数浏览器支持HTML5标准，同时兼容HTML4（简称HTML）标准。

2.1 HTML文件结构

<!DOCTYPE html>
<html>
    <head>
        <!-- 注释 -->
        <title>浏览器中显示的标题</title>
        <!-- meta 元信息，设置浏览器解析时的相关属性设置 -->
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        
        <!-- 引入样式 -->
        <link rel="" href="">
        <style>
          <!-- 当前页面中设置的样式 -->
        </style>
        
        <!-- 引入javascript脚本: 声明了一些函数或类 -->
        <script></script>
    </head>
    <body>
        <!-- 显示的内容 -->
        <!-- 引入javascript ： 调用了一些函数或输出数据 -->
        <script>
            // 当前页面中使用的函数或脚本
        </script>
    </body>
</html>

【重要】HTML中所有标签都具有父子关系，每一个标签可以理解为DOM节点或Element元素。标签有开始和结束，当然也有自闭合标签，如<img />

HTML4的文件第一行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2.2 标签的分类

总分为三类：内联标签、块级标签和行内标签

【内联标签】没有自己的宽和高，它的高和宽由标签内容来决定的

【块级标签】标签占整行，即宽度是整个窗口的宽度，高度是根据内容来计算的。

【行内标签】具有自己的宽和高，但不占整行

三种分类可以通过样式的display属性来设置：

#content{
   display:  block|inline-block|inline|none;  
}

三、HTML标签

3.1 文本标签

3.1.1 Hn的标题标签

文本内容是黑色加粗，块级标签

<h1> - <h6>
<h1> 最大的
<h6> 最小的

3.1.2 常用文本标签

span 普通的文本标签
label
p 段落的文本标签，也是块级标签
div 层级标签
b 加粗
i 倾斜
del删除线
font 字体标签，在HTML5中不用。

3.2 媒体标签

3.2.1 图片标签

img标签是行内标签

<img 
  src="本地的图片文件或网络的URL或base64格式图片内容"
  width="宽度（默认单位是像素px）或百分比"
  height="高度"
  title="提示信息"
>

3.2.2 音频标签

audio 行内标签

<audio controls="controls" autoplay width="" height="" >
   <source src="音频文件的位置">
</audio>

3.2.3 视频标签

video 行内标签

<video controls autoplay width="" height="" >
   <source src="音频文件的位置">
</video>

3.2.4 其它外部文件

引入样式文件：

<link rel=""  href="">

引入js（javascript）文件

<script src=""> </script>

引入html文件的链接

<a href="引入html文件位置"  target="_self|_blank|iframe的名称">名称</a>

3.3 表格标签

table标签，块级

3.3.1 table

<table border="1" cellspacing="0" cellpadding="0" width="80%" align="left|center|right">
    <caption>表的标题</caption>
    <thead>
    <!-- 表头部分 -->
    </thead>
    <tbody>
    <!-- 表内容部分 -->
        <tr align="水平对齐方式" valign="垂直对齐方式 top|bottom|middel">
        	<td align="" valign="" width="列宽度" height="列的高度">列1</td>
            <td>列2</td>
            <td rowspan="跨行的个数" colspan="跨列的个数">
            	<table>
                    <tr>
                    	<td></td>
                    </tr>
                </table>
            </td>
        </tr>
    </tbody>
    
    <tfoot>
    <!-- 表的底部部分 -->
    </tfoot>
</table>

【注】table的align属性针对整个表格的外部对齐。

3.3.2 tr行

tr标签在表格内部使用，可以在thead、tbody和tfoot内部使用。

<table>
   <tr align="left|center|right"></tr>
   <tr></tr>
</table>

<table>
    <thead>
    	<tr>
            <th></th>
        </tr>
    </thead>
</table>

【注】th标签主要用于thead中的（列），默认样式加粗居中。

3.3.3 td列

td标签显示内容的最核心的，表格中的内容最终由td标签包裹的。

<table>
 <tr>
    <td> 第一行第一列 </td>
    <td> 第一行第二列</td>
 </tr>
 <tr>
    <td colspan="2"  rowspan="1" align="" valign="top|middle|bottom">
    </td>
 </tr>
</table>

【注】align是水平方向的对齐， valign是垂直方向的对齐

3.4 表单标签

form表单标签，作用同table一样。

使用场景：收集用户输入的信息， form标签提供相关的属性，对数据的提交行为和编码提供相关的功能

<form action="" method="get|post" 
      enctype="application/x-www-form-urlencoded">
    <input type="text|password|number|email|date|time|radio|checkbox|file|hidden"
           name="字段名" 
           value="字段值|输入的内容"
           disabled 不准用户修改的
           placeholder="输入前的提示信息，输入时将会消失"
           onchange="内容发生变化的事件回调,指定一个事件处理的函数"
           onblur="失去焦点事件时的回调函数">
    <button type="button|submit|reset" onclick="点击按钮时回调事件函数"></button>
    <textarea name="" rows="行数" cols="列数">多行文本的内容</textarea>
    <select name="字段名" onchange="">
        <option value="字段值">显示的字段内容</option>
    </select>
    <hidden></hidden>
</form>

【注意】当提交表单（点击提交按钮）时，浏览器根据表单的数据生成请求报文向服务器发送。

3.4.1 输入框

input标签, 行内标签, 宽度尽量使用提供size属性来指定.当然也可以使用CSS样式.

input标签内提供相关的属性,其中最核心的如下:

<input 
  type="text|password|date|time|number|email|radio|checkbox|reset|submit|hidden|file"
  name="字段名"
  value="字段值"
  placehold="提示信息"
  size="输入框的尺寸(英寸)"
>

3.4.2 单选按钮

<input type="radio" name="sex" checked value="男"> 男
<input type="radio" name="sex" value="女"> 女

只能选择一项.

3.4.3 多选按钮

<input type="checkbox" value="" checked > 文本

表单的POST请求的报文格式:

POST /bank1/regist.html HTTP/1.1
Host: 127.0.0.1:8848
Content-Type: application/x-www-form-urlencoded;charset=utf-8
...


username=disen&pwd=123&sex=%E7%94%B7&lovies=%E6%89%93%E7%90%83&lovies=%E5%96%9D%E8%8C%B6

3.4.4 下拉列表

select+option两个标签组合

<select name="字段名">
    <option value="">提示信息</option>
    <option value="" selected >默认选择项</option>
</select>

3.4.5 文本域（框）

可以输入多行多列的文本信息, 一般用于内容编辑或留言板.

<textarea cols="" rows="" name=""></textarea>

3.4.6 提交按钮

第一种方式:

<input type="submit"/>
<input type="reset" />
<input type="button" />

第二种方式:

<button type="button" >内容可以文本也可以是图片 </button>

扩展后台服务

安装flask及flask-cors

pip install flask flask-cors

创建server.py脚本:

from flask import Flask, jsonify, request
from flask_cors import CORS
import os

app = Flask(__name__)
CORS(app)

# 获取当前server.py脚本文件所在的目录
BASE_DIR = os.path.dirname(os.path.abspath(__file__))

# 声明或创建一个静态资源文件的目录 static
STATIC_DIR = os.path.join(BASE_DIR, 'static')

@app.route('/upload', methods=['POST'])
def upload():
    photo = request.files.get('photo')
    full_path = os.path.join(STATIC_DIR, photo.filename)
    photo.save(full_path)
    
    return jsonify({'url': 'http://10.36.174.51:5000/static/%s' % photo.filename})

@app.route('/registed', methods=["POST"])
def registed():
    # 接收表单上传的数据
    name = request.form.get('username', '')
    pwd= request.form.get('pwd', '')
    sex = request.form.get('sex', '男')
    lovies = request.form.get('lovies', [])
    photo_url = request.form.get('photo_url', '')

    data = locals() # 将局部变量转化为字典
    print(data) # {'name': name,  'pwd': pwd}
    return jsonify(data)

前端的异步请求

function showImage(file){
    let url = "http://10.36.174.51:5000/upload"
    // method: post
    // formdata:  图片字段名  photo
    let data = new FormData()
    data.append('photo', file)

    fetch(url, {
        method: 'POST',
        body: data
    }).then(function(resp){return resp.json()}).then(data => {
        console.info(data)
        preImage.setAttribute('src', data.url)
        document.forms[0].photo_url.value = data.url
    })
}

3.5 列表标签

3.5.1 ul列表

无序列表

<ul type="circle|disc|square">
    <li>列表项的内容</li>
    <li>...</li>
</ul>

【提示】circle 空心圆， disc 实心圆， square 实心方块

3.5.2 dl列表

自定义列表

<dl>
  <dt>标题</dt>
  <dd>列表项的内容</dd>
  <dd>xxx</dd>
</dl>

3.5.3 ol列表

有序列表，每个列表项前存在有序符号，默认为数字。

<ol type="1|a|A|I|i">
    <li>...</li>
    <li>...</li>
</ol>

3.6 iframe标签

iframe是内嵌窗口的标签，即在页面中嵌入类似于Window窗口。

作用：将ａ标签链接的网页资源指定显示到 iframe窗口中。

3.6.1 声明iframe

<iframe name="main" src="初始显示的网页文件" width=""  height="">
  
</iframe>

3.6.2 使用iframe

主要使用 a标签的target属性，通过target属性指定显示的位置（iframe窗口）。

<a href="login.html" target="main"> 登录</a>

【提示】a标签的target属性默认是_self, 其它可选：_blank。target属性的功能同window.open()函数中target参数一致的。

3. 7 服务器部署前端页面

3.7.1 docker下载nginx

docker pull nginx

启动nginx

docker run -itd --name web1 -p 80:80 nginx

通过日志，查看到nginx的html静态资源存放在/usr/share/nginx/html，即将我们的资源复制到容器的此目录中。

进入自己web资源目录下：

mkdir web1
cd web1
docker cp . web1:/usr/share/nginx/html

3.7.2 配置nginx

可以进入到容器中查看

docker exec -it web1 bash
> cd /etc/nginx
> cat nginx.conf
> cat conf.d/default.conf

nginx容器中的配置文件目录： /etc/nginx

主要的配置文件是： nginx.conf

配置文件的其它文件： conf.d/default.conf

四、CSS样式

CSS样式分两大版本：普通CSS样式和 CSS3 样式

https://www.w3school.com.cn/cssref/index.asp

4.1 通用样式

4.1.1 样式分类

标签内样式

主要是标签的style属性，只作用于当前的标签
```
<a style="color:blue;">
```
页内样式

使用<style>标签，声明在head部分，只作用于当前页
标签样式

在样式中，通过标签名方式声明它的样式，如
```
a {
   color: red;
}
```
id 样式

通过标签的id属性，设置它的样式
```
<div id="main">
</div>
```
为id为main的div标签声明样式：
```
#main{
    color: red;
}
```

class样式

为标签的class属性指定样式

<div class="menu">
</div>

.menu {
    
}

后代样式

标签存在直接或间接父子关系，可以后代样式指定子标签的样式

<div id="main">
    <div class="menu">
    </div>
    <div class="content">
        <div class="top_wrap">
            
        </div>
        <div class="bottom_wrap">
            
        </div>
    </div>
</div>

/* 为id为main的标签中直接div的子标签 */
#main > div{
   color: blue;
}

/* 为id为main的标签中div的后代标签 */
#main div{
    
}

兄弟样式

为多个同级的标签设置样式

<a name="a"></a>
<div class="main">
    <span name="b"></span>
</div>

<label name="c"></label>

/* 为a和span两个兄弟标签同时设置样式 */
/* 理解为同时为多个标签设置样式*/
a, .main > span {
    
}

属性样式

根据标签的同一属性不同的属性值的标签设置样式

<input type="text">
<input type="password">
<input type="number">

/* 设置文本输入框的样式 */
input[type="text"]{

}

/* 设置密码输入框的样式 */
input[type="password"]{

}

4.1.2 样式选择优先级

- 标签内样式 > 页内样式 > 外部引入的样式  【从引入的时】
- id样式 > class样式 > 标签样式 【样式选择器】
  
 【重要】除了样式属性后带 !important 之外

4.1.3 常用样式

color 字体颜色 color 属性规定文本的颜色。
backgroud-color 背景颜色
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-We0foXfw-1641114325702)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210917195101250.png)]
backgroud-image 背景图片, url(https://blog.csdn.net/%E2%80%9C%E5%9B%BE%E7%89%87%E7%9A%84URL%E5%9C%B0%E5%9D%80%E2%80%9D)，一般和backgroud-repeat (属性设置是否及如何重复背景图像)、background-size、backgroud-position组合使用。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ov1QLUnc-1641114325704)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210917194747188.png)]
```
background: linear-gradient(45deg, #ffaaff84, #aaffff84);
```
font-size 字体大小，如 large|medium|small|12px
font-family 字体名称，如宋体，黑体
display 显示的特性，常用inline, inline-block, block, none,flex; display 属性规定元素应该生成的框的类型。
width 宽度
height 高度
padding 内边距

格式1： top+bottom left+right

格式2： top right+left bottom

格式3： top right bottom left
margin 外边距

格式1： top+bottom left+right

格式2： top right+left bottom

格式3： top right bottom left
border 边框，格式: width line-style color

line-sytle: solid | dashed | dotted | double
box-shadow 阴影，格式：x y height color
border-radius 圆角
text-align 文本对齐方式,不能用于内联标签. 可选:　left|right|center

4.2 盒子模式(Box Model)

每个标签可以理解为一个四方形盒子，主要涉及到边框、内边距、外边距、阴影等相关的属性

https://www.runoob.com/css/css-boxmodel.html

标签的高度：内容本身的高度＋内边距（top+bottom）

标签的宽度：内容宽度 + 内边距（left + right）

外边距：两个标签之间的距离（边框间隔）

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

4.3 伪样式

定义样式时, 在标签名之后通过:伪样式名 方式定义

单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Aacklqgp-1641114325705)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210917205848342.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qpwOF1NG-1641114325706)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210917205932726.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wYuspdR9-1641114325706)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210917205946030.png)]

/* 鼠标悬浮在标签上的样式 - 动态的效果 */
div:hover{
    color: red;
    background-color: #87CEEB;
    cursor: pointer;
    box-shadow: 5px 5px 5px orangered;
}

/* 在标签内的最末尾的位置插入 content指定的内容 
   思考:如何支持 html 标签
*/
div::after{
    content: "abc";
    display: inline-block;
}

/* 在标签内的开头的位置插入 content指定的内容*/
div::before{
	content: "￥";
}

[文本修饰] text-decoration 样式的属性指定文本的装饰线( underline | overline | line-through | none )

a {
     text-decoration:  none
}

[光标样式] cursor 样式, 指定鼠标的形状( pointer | crosshair | cell| row-resize|col-resize none )

4.4 浮动布局

浮动布局是种响应式布局, 标签根据父级标签的宽度自动排列子标签.

问题: 高度塌陷

属性: float

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动布局</title>
		<style>
			ul,li {
				list-style: none;
				padding: 0;
				margin: 0;
			}
			ul {
				background-color: #FF0000;
			}
			li {
				display: inline-block;
				padding: 100px 100px;
				background-color: #87CEEB;
				margin: 5px;
				float: left
			}
			/* 清除li的浮动产生的高度塌陷问题 */
			ul::after{
				content: "";
				display: block;
                /* 溢出的部分显示的方式：scroll|hidden|auto */
				overflow: hidden;
				clear: both;
			}
			
		</style>
	</head>
	<body>
		<ul>
			<li> A </li>
			<li> B </li>
			<li> C </li>
			<li> D </li>
		</ul>
		
	</body>
</html>

[提示] 其它布局(position : 相对＼绝对 ) 可能使用 top, left, right , bottom, x, y等属性.

练习任务-完成首页:

https://ebank.pingan.com.cn/station/activity/loan/brandzone/index.html?channelId=BD&nav_id=0&downapp_id=AM001000065&source=sa0000008&outerSource=bpbz_main_dk&outerid=ou0000246&cid=bpbz_main_dk&utm_medium=bp&utm_source=bz&utm_term=bpbz_main_dk

4.5 弹性盒子

主要属性: display: flex; flex-direction: row | column ; flex-wrap: nowrap | wrap|auto; justify-content: space-between | flex-start | flex-end | center; align-items: center|left|right|baseline;

4.5.1 行方向

<div class="row">
    <div class="logo">
        <img class="circle" src="images/10489s.jpg"/>
    </div>

    <div class="userinfo">
        <form>
            <div>
                <label>用户名</label>
                <input name="name"/>
            </div>
            <div>
                <label>口令</label>
                <input name="pwd"/>
            </div>
            <div class="buttons">
                <button>用户登录</button>
            </div>

        </form>
    </div>
</div>

 .circle {
	width: 100px;
	height: 100px;
	border-radius: 50%;
}

.row{
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	background: linear-gradient(45deg, rgba(0,0,255,0.5), rgba(255, 0,0,0.5));
}

.sep {
	height: 5px;
	background-color: lightyellow;
}

.userinfo {
	margin: 10px;
	background-color: #F0F8FF;
	opacity: 0.8;
	padding: 5px;
	border: 1px solid lightgray;
}

.userinfo label{
	display: inline-block;
	width: 50px;
	text-align: right;
}

.userinfo .buttons {
	text-align: right;
	padding: 10px;
}

.row2 {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

4.5.2 列方向

<div class="row2">
    <div class="column">
    	<span>ABC</span>
    </div>
    <div class="column">
    	<span>DEF</span>
    </div>
</div>

.column {
	display: flex;
	height: 100px;
	width: 200px;
	text-align: center;
	flex-direction: column;
	background-color: #87CEEB;
	justify-content: center;
}

4.6 动画

4.6.1 transform属性

属性动画,可以修改标签的位置、旋转、缩放等属性.

一般要配合 hover 伪样式,效果最好

移动位置

transform:  translate(tx, ty)

tx和ty是相对当前位置,向x和y坐标移动

［注意］tx和ty是负值时,即为反方向(从右到左, 从下到上).

旋转

transform:  rotateX() | rotateY()

目前transform中只能在X和Y方向上进行旋转.

缩放

transform:  scale(sx, sy)

sx, sy 属性值是小数, 表示当前大小的倍数,即 1.5 表示放大1.5倍.

4.6.2 transition属性

过渡动画的一种, 比tranform的效果更好一些, 包含动画执行的时间和加速减速函数.

/* transition: transform 3s linear 1s; */
transition-property: all;
transition-timing-function: ease;
transition-duration: 3s;
transition-delay: 0.5s;

all 表示所有的属性, 也可以指定个别的属性, 如果是多个属性时,使用逗号分隔.

ease表示动画执行时间间隔插值的计算方法, 先快后加速, 另外常用 linear均速时间插值函数.

4.6.3 animation属性

帧动画, 可以实现Flash动画的效果.比transform和trasition更强大,支持3D动画效果.

一般同@keyframes 一起使用.

animation语法:

animation: name duration animation-timing-function delay iteration-count direction

动画的name 由 @keyframes声明的, 它的语法:

@keyframes 名称 {
   from|30% {
      样式集
   }
   to|70% {
      样式
   }
}

30%表示动画执行的时间位置.

[注意] 通过animation-play-state 指定动画的状态, 提供paused(暂停)和runing(运行).

[练习]

#advice{
    height: 50px;
    text-align: left;
    line-height: 50px;
    border: 1px solid #87CEEB;
}

#advice{
    animation: slidein_right 5s linear 0.1s infinite alternate;
}


@keyframes slidein_right{
    from {
        background-color: #0000FF;
        color: #00FFFF;
    }
    to {
        background-color: #FF0000;
        color: #F0F8FF;
    }
}

[练习]

@keyframes slidein_right{
    5% {
        background-color: #0000FF;
        color: #00FFFF;
        transform: translateX(-200px);
    }
    50% {
        background-color: #FF0000;
        color: #F0F8FF;
        transform: translateX(-500px);
    }

    95% {
        background-color: yellowgreen;
        color: red;
        transform: translateX(-1200px);
    }
}

[参考文档]

https://developer.mozilla.org/en-US/docs/Web/Tutorials

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide

五、javascript脚本

主要应用于HTML网页中的编程语言, 类似于python,属于脚本语言.

主要提供的功能: ECMAScript (基本语法和模块), DOM(操作文档中的Element标签节点), BOM(操作浏览器窗口).

[文档]https://www.runoob.com/js/js-tutorial.html

https://www.w3school.com.cn/js/index.asp

5.1 ES核心语法

ECMAScript (以下简称 ES), 主要有两大版本的区别即 ES5和ES6, 目前大多数浏览器都支持ES6的语法.

5.1.1 数据类型

字符串类型 String

数值类型 Number, 包含 Integer / Float

日期时间: Date, Timestramp

布尔值： true, false

定义变量

var  全局变量
let  区域变量
const 常量

语法

var age=10;  // 在js脚本中，或者在<script>标签内
let sex='男';  // 在函数内
const height = 180;

// 控制台输出 
console.info([age, sex, height])

数组类型:

// 数组中的元素类型必须是统一的 [原则]
let ages = [1, 2, 3, 4]

// 创建类的实例必须使用 new 关键字
let ages2 = new Array()  // 数组类

// 数组中的操作:   
//   push(item) 尾部压入  
//   shift() 弹出左边的一个元素
//   unshift(item) 从头部或左边 压入一个元素
//   pop() 弹出右边的一个元素 
//   slice(start, end)  切片操作，不包含end位置的元素
//   .length  获取数组的长度
//   .forEach( (item, index) => { } )  迭代数组中的每一个元素

字符串对象操作

索引:
  - obj[index]
  - obj.slice(start, end)
  
转化数值
   - parseInt(obj) 将左边数字转化为整型数值，一直到非数字截止。如果第一个字符为非数字，则返回NaN
   - parseFloat(obj) 
   - Number(obj)  与以下两个不同的是字符串存在非数字时，则返回NaN
 
非字符串转化为字符串
   - obj.toString()
   - String(obj)

字符串查找
	- obj.indexOf('查找内容') 返回索引位置, 索引从0开始，未找到时返回 -1
	- obj.lastIndexOf('查找的内容')
	- obj.startsWith('')
	- obj.endsWith('')

字符串替换
    - obj.replace(regex, newSubStr)

5.1.2 函数和面向对象

5.1.2.1 函数定义***

定义函数

function 函数名(形参列表){
   函数体
   return 处理结果
}

匿名函数

function(形参列表){ 函数体  [return ] }

箭头函数

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

有参数

// 单参数
response => 单语句表达式   // 单语句表达式,表示函数返回结果

fetch(url).then(response => response.json() )

fetch(url).then(function(response){
    return response.json()
})

无参数

() => {} | 单语句表达式

function(){}

多参数

(a, b, c) => {} | 表达式

function(a, b, c) {}

5.1.2.2 常用的函数

- console.info(msg...)  正常控制台打印输出, error()/warn()/debug()
- alert('弹出对话框')
- confirm('询问是否操作')  如果选择 `OK` 函数返回true , 反则返回false
- setInterval(function(){}, interval) 每间隔 interval 时间,执行一次function;函数返回一个数值, 可以通过clearInterval(数值)取消定时任务

- setTimeout(function(){}, delay) 延时delay时间,执行function函数,返回延时任务num编号, 可以通过clearTimeout(num) 取消延时任务.

- open(url, target) 以get请求方式打开url, 并指定响应数据显示的位置,默认`_blank`,  可以指定 `_self`(当前页签)

- fetch(url, data, config).then(callback).then(callback).catch(error_callback)
  网络异步请求

[练习]定时任务

<div id="ret" onclick="closeInterval()"></div>
<script>
// 定时任务
var counter=0;
let interval_num = setInterval(function(){
    // document.write('当前秒：'+counter)
    document.getElementById('ret').innerHTML = '当前秒：'+counter
    counter++  // 等价 counter += 1
    }, 
1000)

function closeInterval(){
	clearInterval(interval_num)
}
</script>

[练习] 单词翻译

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>英汉翻译</title>
	</head>
	<body>
		<form>
			<input name="kw" placeholder="请输入英文单词"/>
			<button type="button" onclick="handle()">翻译</button>
		</form>
		
		<script>
			function handle(){
				// 获取输入的内容
				let kw = document.forms[0].kw.value 
				
				url = "https://fanyi.baidu.com/sug"
				fetch(url, {
					method: 'POST',
					body: 'kw='+kw,
					mode: 'no-cors',
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
					}
				}).then(resp => {
					console.info(resp)
					return resp.data
				}).then(data => {
					console.info(data)
				})
			}
		</script>
	</body>
</html>

[注意] 跨域请求的问题可以尝试使用 mode 属性指定no-cors.

[练习] 通过IP地址获取当前城市

url = "https://apis.map.qq.com/ws/location/v1/ip?callback=QQmap&key=WGQBZ-HFAWG-EROQ4-IRJR7-5E52F-LCFLZ&output=json"

// GET请求方法
// 控制台中显示内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>城市定位</title>
	</head>
	<body>
		<div>
			<label>城市定位：</label>
			<b id="cityName"> 正在定位...</b>
		</div>
		
		<script>
			// 当前页面所有元素加载完成
			// onload 表示页面的就绪事件处理函数
			window.onload = function(){
				let url = "https://apis.map.qq.com/ws/location/v1/ip?callback=QQmap&key=WGQBZ-HFAWG-EROQ4-IRJR7-5E52F-LCFLZ&output=json"
				
				fetch(url).then(resp=>resp.json()).then(data=>{
					console.info(data)
					const {city, province} = data.result.ad_info
					document.getElementById('cityName').innerHTML = province+" " + city
				})
			}
		</script>
	</body>
</html>

5.1.3 内置类和对象

ES内置在浏览器的类非常丰富, 便于开发者使用

5.1.3.1 Date类

创建日期方法

new Date();
new Date(value);
new Date(dateString);
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);

日期对象的方法:

.getTime()  时间戳,  单位是毫秒
.getDate()  日
.getDay()   星期
.getMonth() 月,  从0开始的, 如四月是 3
.getFullYear() 4位年
.getHours() 小时
.getMinutes() 分钟
.getSeconds() 秒
.toLocaleDateString() 转化为本地的日期字符串

5.1.3.2 Math类

数学计算的相关方法

Math.round()
Math.ceil()
Math.floor()
Math.random()  随机产生 [0, 1) 区间的小数
Math.sin()
Math.pow()
Math.PI

[练习] 猜一猜是多少

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.ok{
				background-color: red;
				color: gold;
				padding: 10px;
			}
			
			.fail{
				background-color: white;
				color: blue;
				padding: 5px;
			}
		</style>
	</head>
	<body>
		<div id="current_date_dom" style="font-size: 20px;"></div>
		<div>
			<label>猜一猜1-100之间的整数</label>
			<br>
			<input id="num" type="text" size="20">
			<button type="button" onclick="guess()">试试</button>
			<div id="ret"></div>
		</div>
		<script>
			setInterval(()=>{
				let current_date = new Date()
				let year = current_date.getFullYear()
				let month = current_date.getMonth()+1
				let day = current_date.getDate()
				let hour = current_date.getHours()
				let minutes = current_date.getMinutes()
				let seconds = current_date.getSeconds()
				current_date_dom.innerHTML = year+'年' +month+ '月'+day+'日 '+hour+'时'+minutes+'分'+seconds+'秒'
			}, 1000)
			
			const random_n = Math.ceil(Math.random()*99 + 1)
			
			function guess(){
				const input_n = num.value
				if(random_n == input_n){
					ret.innerHTML = '恭喜您，获得了一枚彩票!'
					ret.setAttribute('class','ok')
				}else if(random_n < input_n){
					ret.innerHTML = 'Sorry, 你猜大了!'
					ret.setAttribute('class','fail')
				}else{
					ret.innerHTML = 'Sorry, 你猜小了!'
					ret.setAttribute('class','fail')
				}
			}
		</script>
	</body>
</html>

5.1.3.3 RegExp类

声明正则表达式对象:

let regexp = /<正则表达式>/[<标识>]

常见正则表达式包含转义字符和量词

\w   字母\数字和下划线
\d   数字
\s   空白(\t,  \n, \f, \r, 空格)
. 任意一个字符 (除换行符)

+ 
?
*
{n, }
{n, m}
{n}

[练习] 表单验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>正则表达式</title>
	</head>
	<body>
		<form onsubmit="return validForm(this)" >
			<input name="name" placeholder="用户名">
			<br>
			<input type="password" name="pwd" placeholder="口令" />
			<br>
			<input type="number" name="phone" placeholder="手机号" />
			
			<button>提交</button>
		</form>
		
		<script>
			function validForm(form){
				// 验证用户名不能包含中文
				let zh_regexp = /[\u4e00-\u9fa5]+/
		
				if(zh_regexp.test(form.name.value)){
					console.info('用户名不能存在中文')
					return false
				}
				
				//验证口令不能少于10位的英文和数字字符
				if(! /[a-zA-Z0-9]{10,}/.test(form.pwd.value)){
					console.info('口令不能少于10位字母和数字')
					return false
				}
				
				//验证手机号
				if(! /1[3-9]\d{9}/.test(form.phone.value)){
					console.info('手机号不合法')
					return false
				}
				return true
			}
		</script>
	</body>
</html>

[注意] 实例对象的方法中存在的this, 代表是拥有当前方法的实例对象. form表单在提交时调用它的onsubmit()方法, 如果此方法返回false,表示取消提交(验证数据不通过时).

5.1.3.4 JSON类

JSON(javascript object notation) 是 js对象的简洁描述, 即对象中只描述属性没有行为(方法)

json类的实例存在两种类型: json对象, json数组

// json 对象
let person1 = {
    id: 1001,
    name: 'disen',
    'age': 20,
    'sex': '男'
}

// json数组
let person_list = [
   {
      id: 1,
      name: '李超波'
   },
   {
      id: 2,
      name: '李涛',
      age: 18,
      grades: [
          {no: 1001, date: '2011-03-15', money:9000, type: 1},
          {no: 1002, date: '2011-03-16', money: 12000, type: 1}
      ]
   }
]

[重要] json对象和字符串相互转化使用JSON类的parse()和stringify()

// 将 json对象或数组转化为 json字符串 (目标: 发请求报文)
// 如果请求报文中的body是json字符串时, 请求头的Content-Type应该是application/json
let ps1 = JSON.stringify(person1)
// {"id":1001,"name":"disen","age":20,"sex":"男"}

let ps2 = JSON.stringify(person_list)
/*
[{"id":1,"name":"李超波"},{"id":2,"name":"李涛","age":18,"grades":[{"no":1001,"date":"2011-03-15","money":9000,"type":1},{"no":1002,"date":"2011-03-16","money":12000,"type":1}]}]
*/

// 将json格式的字符串转化为 对象或数组 (目标: 解析响应的数据)
let ps2obj = JSON.parse(ps2)
console.info(ps2obj[1].name)

[扩展] kjson.com 格式化json内容

[练习]识别以下字符串是否符号json格式:

1:    {"id": 10001,  "name": 'disen'}
2:    {'id': 10001, 'name': 'disen', 'age': [10, 20, 30]}
3:    {"id": 1001, "name": "disen", "age": [10, 20, 30]}
4:    [ {"id": "123", "url": "/static/images/1.png"},  {"id":"456", "url": "/static/images/2.png"}]

合法是: 3, 4

5.1.3.5 window对象

window代表当前窗口, 调用它的方法或属性时可以省略不写.

桌面屏幕大小:　使用window.screen对象

{
    availHeight: 920
    availLeft: 0
    availTop: 0
    availWidth: 1440
    colorDepth: 24
    height: 960
    orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
    pixelDepth: 24
    width: 1440
}

当前窗口的大小

window.innerHeight
window.innerWidth

当前页面的大小: 通过window.document来获取

document.documentElement.clientWidth
document.documentElement.clientHeight

当前页面位置 location对象

hostname 返回 web 主机的域名
pathname 返回当前页面的路径和文件名
port 返回 web 主机的端口 （80 或 443）
protocol 返回所使用的 web 协议（http: 或 https:）
href   返回当前页面的完整URL

[练习] 从URL中读取请求参数

/* "http://127.0.0.1:8848/bank1/js5.html?name=disen&pwd=1234567901234&phone=17791692095"
*/

let url = location.href
let params = {}
url.slice(url.indexOf('?')+1).split("&").forEach(item => {
    const kv = item.split('=')
    params[kv[0]] = kv[1]
}) // 返回数组

数据存储: localStorage, sessionStorage

localStorage 是本地浏览器存储数据, 用于缓存
sessionStorage 存储数据于当前会话,如果会话关闭,数据自动会清除.

[作用] 需要存储一些重要数据时,如用户登录之后的头像和用户名. 选择的主题颜色

onload = ()=>{
    // 判断对象是否存在属性名
    if(localStorage.hasOwnProperty('bgColor')){
        document.bgColor = localStorage.bgColor

        colorSelector.value = localStorage.bgColor
    }
}

function handeColor(color){
    document.bgColor = color
    // js对象添加新的属性时: obj[name]=value,  obj.name = value
    localStorage['bgColor'] = color
}

localStorage对象的用法:

localStorage.新属性 = 值
localStorage.getItem('属性名')
localStorage.clear() 清空
localStorage['新属性'] = 值
localStorage.setItem('属性', 值)
localStorage.removeItem('属性')

判断 对象是否存在某一个属性:  
'属性名'  in  obj

5.2 DOM操作

文档中的dom节点（Node）或Element元素操作

DOM节点： Element标签元素， AtrributeNode, TextNode

5.2.1 查找DOM

document.forms 获取当前文档中所有的form表单，是一个数组类型

document.getElementById('id')  查找单个标签(Element元素对象)
document.getElementsByName('name') 根据name属性查找相关的标签(NodeList 节点数组)
document.getElementsByTagName('标签名') 
document.getElementsByClassName('classname') 根据标签的class属性查找

5.2.2 添加DOM对象

append方式

let p = document.createElement('标签名')
p.innerHTML|innerText = "内容"

div.appendChild(p)

// 文本内容
div.append('内容')

innerHTML

div.innerHTML = "html标签的文本描述"

5.2.3 修改DOM对象

div.setAttribute('属性名', 属性值) 设置属性值
div.removeAttribute('属性') 删除属性值， 如果原有的标签中默认是存在的，不能删除。
div.getAttribute('属性名')  获取属性值
div.hasAttribute('属性名') 是否存在属性

# python反射（自省）
setattr(obj, '属性名', value)
delattr(obj, '属性名')
getattr(obj, '属性名')
hasattr(obj, '属性名')

5.2.4 删除DOM对象

https://www.w3school.com.cn/jsref/event_onclick.asp

// 为p元素dom对象添加事件监听器
p.addEventListener('click', e=>{
    console.info(e.target)  // e是事件的实例，target是事件的源（谁被点击了）
    // 通过父标签删除子标签
    div.removeChild(e.target)

})

[综合练习]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Dom操作</title>
		<style>
			p {
				height: 50px;
				width: 200px;
				background-color: #87CEEB;
			}
			
			p:hover{
				cursor: pointer;
				background-color: aliceblue;
			}
			
			.selected{
				background-color: #8B0000;
			}
			
		</style>
	</head>
	<body>
		<button onclick="addNodeHandle()">添加新成员</button>
		<div id="result"></div>
		
	   
		<script type="text/javascript">
			let div = document.getElementById('result')
	    	function addNodeHandle(){
				let p = document.createElement('p')
				p.innerText = '我是新增的'+ new Date().getTime()
				
				// 为新的Element元素标签添加事件
				
				p.addEventListener('click',function(e){
					// div.removeChild(e.target)
					console.info(this.hasOwnProperty('class'))
					if('class' in e.target){
						e.target.removeAttribute('class')
					}else{
						e.target.setAttribute('class', 'selected')
					}
					
				}, true)
			
				div.appendChild(p)
				// div.innerHTML += "<p>"+'我是新增的'+ new Date().getTime()+"</p>"
			}
	    </script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>DOM操作之选择或删除</title>
		<style>
			p{
				padding: 10px;
				background-color: azure;
			}
			
			p:hover{
				opacity: 0.8;
				cursor: pointer;
			}
			p:active{
				background-color: #F0FFFF;
			}
			
			.selected{
				background-color: bisque;
			}
		</style>
	</head>
	<body>
		<button onclick="addNode()">添加新成员</button>
		<button onclick="getSelected()">获取选择的结果</button>
		<div id="result"></div>
		
		<script>
			let result_div = document.getElementById('result')
			function addNode(){
				let p = document.createElement('p')
				p.append('新增的p标签-'+new Date().toLocaleString())
				
				// 事件名，事件的监听回调函数（事件发生后的处理函数），事件的传播行为（涉及到父子标签的事件处理顺序）
				p.addEventListener('click', e=>{
					console.info(e)
					// result_div.removeChild(e.target)
					
					// 修改class类
					let class_name = e.target.getAttribute('class')
					if(class_name ===null || class_name=== ''){
						e.target.setAttribute('class', 'selected')
					}else{
						e.target.setAttribute('class', '')
					}
					
				}, false)
				
				result_div.appendChild(p)
			}
			function getSelected(){
				let selected_ps = document.getElementsByClassName('selected')
				
				let datas = ''
				for(let i=0;i<selected_ps.length;i++){
					let p = selected_ps[i]
					console.info(p.innerHTML)
					
					datas += p.innerHTML + ( i != selected_ps.length-1 ?',':'')
				}
				alert(datas)
			}
		</script>
	</body>
</html>

5.2.5 事件

5.2.5.1 通用事件

所有标签都具有的事件

click 点击事件，  事件的处理函数（监听函数）是 onclick
change 内容发生事件， 处理函数 onchange
double click 双击事件，处理函数 ondblclick
input 输入事件发生的时候，处理函数 oninput
focus 获取焦点事件，  onfocus()
blur 失去焦点事件，   onblur()
mousedown 鼠标按下事件
mouseup 鼠标抬起事件
mouseover 鼠标悬浮事件
mouseleave 鼠标离开事件
mouseenter 鼠标进入事件
mouseout 鼠标离开事件
mousemove 鼠标移动事件

[练习]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件函数</title>
		<style type="text/css">
			#content {
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div id="content" ondblclick="changeBg(this)" onchange="changeBg(this)" onclick="changeContent(this)">内容</div>
		<script type="text/javascript">
			function changeBg(div){
				// 随机产生颜色
				let colors = "rgba("
				for(var i =0; i<4; i++){
					// 三目表达式
					// 条件表达式 ? 为true的内容: 为false内容
                    if(i<3)
					   colors  += Math.floor(Math.random()*256)+","
                    else
                        // 颜色的alpha值的范围是[0,1]
                        // 随机产生是0.5-1之间
                       colors +=  (1-Math.random()*0.5)+")"
                    
				}
				console.info(colors)
				
				div.setAttribute('style', 'background-color: '+ colors)
			}
			
			function changeContent(div){
				div.innerHTML = "当前时间"+ (new Date().getTime())
				div.onchange() // 当内容发生变化后，主动调用内容修改事件
			}
		</script>
	</body>
</html>

5.2.5.2 输入框事件

主要针对 input标签的

input 输入事件，  oninput
change 发生变化事件， onchange
focus  焦点事件，  onfocus 获取焦点事件， onblur 失去焦点事件

[练习]

<div>
    <input type="text">
    <input type="text">
    <input type="text">
</div>

onload = ()=>{
    // HtmlCollection集合
    let inputs = document.getElementsByTagName("input"); // NodeList
    for(let i=0; i<inputs.length; i++ ){
        console.info(inputs[i])
        // 添加失去焦点事件，验证数据
        inputs[i].addEventListener('blur', e=>{
            // e 表示 event事件
            // e.target 表示事件发生的目标源，即哪一个input标签
            let val = e.target.value
            if(! /\w{3,}/.test(val)){
                alert('当前的输入内容不能少于3个字符')
                e.target.value = ''
                e.target.setAttribute('placeholder', '内容不能少于3个字符')
            }
    	})
    }
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>当前窗口就绪事件</title>
		<style>
			.error{
				color: red;
			}
			
			.success{
				color: green;
			}
		</style>
	</head>
	<body>
		<input type="text"> <span></span>   <br>
		<input type="text"> <span></span>   <br>
		<input type="text"> <span></span>   <br>
		<button onclick="cancelValid(this)">取消验证</button>
		<script>
			function blurHandler(e){
				let span = e.target.nextElementSibling
				if(!/\w{3,}/.test(e.target.value)){
					span.innerHTML = '*输入的内容不能少于3个字符'
					span.setAttribute('class', 'error')
				}else{
					span.innerHTML = '验证通过'
					span.setAttribute('class', 'success')
				}
			}
			
			function cancelValid(btn){
				let inputs = document.getElementsByTagName('input')
				let toggle = btn.getAttribute('toggle')
	
				console.info(toggle, typeof(toggle))
				for(let i=0;i<inputs.length; i++){
					if (toggle=== null || toggle === 'false' ){
						// 删除事件监听
						inputs[i].removeEventListener('blur', blurHandler, false)
						btn.setAttribute('toggle', true)
						btn.innerHTML = '添加验证'
					}else{
						inputs[i].addEventListener('blur', blurHandler, false)
						// inputs[i].addEventListener('blur', blurHandler2, false)
						// inputs[i].addEventListener('blur', blurHandler3, false)
						// inputs[i].addEventListener('blur', blurHandler4, false)
						btn.setAttribute('toggle', false)
						btn.innerHTML = '取消验证'
					}
						
				}
			}
			
			// 指定当前窗口就绪的事件监听回调函数
			onload = function() {
				console.info('当前窗口就绪')
				// this代表是当前Window窗口对象
				console.info(this)
				let inputs = document.getElementsByTagName('input')
				for(let i=0;i<inputs.length;i++){
					let input = inputs[i]
					input.addEventListener('blur', blurHandler, false)
				}
			}
		</script>
	</body>
</html>

5.2.5.3 鼠标事件

mouse up:   onmouseup
mouse down: onmousedown
mouse over: onmouseover

5.3 BOM操作

browser浏览器相关的操作

[自学任务] 总结js操作浏览器函数

六、jQuery框架

jQuery是一个javascript框架，主要用于快速定位和操作DOM元素

jQuery版本： 1.8.x 经典/ 2.x / 3.x

[选择]jQuery 2.x 使用【CDN加速】或下载到本地

【百度CDN加速】https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js

min: 代表是一种文件内容压缩格式，即去掉空白和换行，在生产环境下使用。

6.1 引入jQuery

一般情况下，在head标签内引入

<head>
    <script src="js/jquery.min.js"></script>
</head>

初始使用， jQuery的重要的对象或函数【非常重要】

$:  jQuery()类对象
- 定位dom, 可以通过id/class/tag/tag[属性=值]/后代等选择器方式来获取DOM对象
  $('#id')/('.error')/('div')...  
  返回结果是 jQuery对象，类似于数组结构或HTMLCollection集合
- jQuery对象 转化为 DOM 对象（Element）
  obj[索引]  => DOM对象
  
- DOM对象 转化为 jQuery对象， 目标调用jquery对象的方法。
  $(obj)  => jQuery对象
  jQuery(obj) => jQuery对象

【练习】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery第一次使用</title>
		<script src="js/jquery.min.js"></script>
		<style>
			.error{
				border-color: red;
			}
		</style>
	</head>
	<body>
		<input type="text">
		<input type="text">
		<input type="text">
		<script>
			// $(function) 等价于 onload = function
			$(()=>{
				$('input').blur(e=>{
					console.info(e.target)
					if(! /\w{3,}/.test(e.target.value)){
						//e.target.value = ''
						$(e.target).val('')
						$(e.target).attr('class','error')
						$(e.target).attr('placeholder', '不能少于3个字符')
					}
				})
			})
		</script>
	</body>
</html>

6.2 样式选择器深入

6.2.1 位置选择

:first  第一个元素
:last   最后一个元素
:even   偶数位置的元素
:odd    奇数位置的元素
:eq(index)  第index位置的元素，  index从0开始的
:gt(index) 大于index位置的元素
:lt(index) 小于index位置的元素
:parent  父标签

【练习】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<ul>
			<li>A</li>
			<li>B</li>
			<li>Comming 1</li>
			<li>Comming 2</li>
			<li>Comming 3</li>
		</ul>
		<button onclick="submitSelected()">确认选择</button>
		<script type="text/javascript">
			$(()=>{
				// 就绪状态下调用的函数
				$('li:last').css('color', 'red')
				// $('li').css('border', '1px solid red')
				// jQuery对象调用的方法返回默认还是jQuery对象
				$('li').mouseover(e=>{
					if(! e.target.selected)
						$(e.target).css('background-color', 'red')
				}).mouseout(e=>{
					if(!e.target.selected)
						$(e.target).css('background-color', 'white')
				}).click(e=>{
					// 动态为DOM对象添加新的属性
					if(e.target.selected){
						e.target.selected = false
						$(e.target).css('background-color', 'white')
					}else{
						e.target.selected = true
						$(e.target).css('background-color', 'blue')
					}
					
					
				})
			})
			
			function submitSelected(){
				//let liElements = $('li') 
				// for(let i=0; i<liElements.length; i++){
				// 	const li = liElements[i]
				// 	if(li.selected)
				// 	   console.info(li.innerHTML)
				// }
                // jQuery的each迭代函数， 同Array对象的forEach((li, index) => {})
				$('li').each((index, li) => {
					if(li.selected)
						console.info(index, li.innerHTML)
				})
			}
		</script>
	</body>
</html>

【注意】jQuery对象的迭代方法是 each( function(index, domElement ))

6.2.2 子元素选择器

根据父标签选择子标签

样式的写法：父标签子标签:first-child

:first-child  第一个子元素
:last-child   最一个子元素
:nth-child 从头开始，第几个子元素
:nth-last-child  最后开始，第几个子元素

【练习】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<p id="userInfo">
			<span>Hi</span>
			<span>Disen</span>
			<span>10000</span>
		</p>
		
		<script type="text/javascript">
			$(()=>{
				// 页面就绪
				// 获取 userInfo下的第一个span标签
				//console.info($('#userInfo>span:first').text())
				console.info($('#userInfo span:nth-last-child(2)').text())
			})
		</script>
	</body>
</html>

6.2.3 表单选择

- 输入框及类型
:input  输入框
:text   文本框
:submit 提交按钮
:reset 重置按钮 
:radio  单选按钮
:checkbox 复选按钮
:password 密码框
:file

- 状态
:selected  选择的项
:checked   勾选的项
:enabled   可用的项
:disabled  禁用的项

【练习】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单选择器</title>
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<form>
			<input type="text" placeholder="用户名">
			<br><input type="password" placeholder="口令">
			<br><input type="password" placeholder="确认口令">
			<br><input type="radio" name="sex" value="男" checked>男
			<input type="radio" name="sex" value="女">女
			<br><input type="checkbox" value="1" name="food"> 米饭
			<input type="checkbox" value="2" checked name="food"> 包子
			<input type="checkbox" value="3" name="food"> 饺子
			<select name="city">
				<option value="北京">北京</option>
				<option value="西安" selected>西安</option>
				<option value="成都">成都</option>
			</select>
		</form>
        <script type="text/javascript">
			$(()=>{
				// $('form :selected').each((index, el) => {
				// 	console.info(el.value)
				// })
				$(':checkbox').each((index, el) => {
					console.info(el.value, el.checked)
				})
			})
		</script>
	</body>
</html>

6.3 常用的方法

获取标签的文本和html内容

.text() |('新值')
.html() |('新值')

获取input标签的内容

.val('新值')  
.val() 获取

将jQuery对象转成数组

.toArray()
.each( function(index, dom_element){})

修改样式

.css('样式名', '样式值')
.css('样式名')

修改属性

.attr('属性名', 值)
.attr('属性名')

查询子节点

- $(domElement).children('子标签')
- $(domElement).find('子标签')

查找兄弟节点

- next() 下一个兄弟标签
- prev() 上一个兄弟标签
- nextAll()
- prevAll()
- nextUtil(e) 直到某一个兄弟标签位置结束 
- siblings() 其它所有的兄弟标签（上或下）

6.4 动画效果

jQuery中提供了一些基本的动画效果

隐藏与显示

.show()
.hide()
.toggle()

上下滑动效果

slideUp()
slideDown()
slideToggle()

淡入淡出

fadeIn()
fadeOut()
fadeToggle()

七、bootstrap第三方样式

CSS样式集合

官网： https://www.bootcss.com/

部分UI组件是基于jQuery, jQuery版本要根据Bootstrap版本来选择, jQuery 2.x即可.

7.1 基础模板

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
		
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="container">
			<!-- 正文 -->
		</div>
		<script>
			$(()=>{
				//核心代码
			})
		</script>
	</body>
</html>

7.2 栅格系统

7.3 重要的组件

7.3.1 表格

7.3.2 标签页

7.3.3 导航

7.3.4 表单

7.3.5 分页

［作业］实现http://www.xzsec.com/product.html 页面设计

“utf-8”>
表单选择器




### 6.3 常用的方法

获取标签的文本和html内容

.text() |(‘新值’)
.html() |(‘新值’)


获取input标签的内容

.val(‘新值’)
.val() 获取


将jQuery对象转成数组

.toArray()
.each( function(index, dom_element){})


修改样式

.css(‘样式名’, ‘样式值’)
.css(‘样式名’)


修改属性

.attr(‘属性名’, 值)
.attr(‘属性名’)


查询子节点

$(domElement).children(‘子标签’)
$(domElement).find(‘子标签’)


查找兄弟节点

next() 下一个兄弟标签
prev() 上一个兄弟标签
nextAll()
prevAll()
nextUtil(e) 直到某一个兄弟标签位置结束
siblings() 其它所有的兄弟标签（上或下）




### 6.4 动画效果

> jQuery中提供了一些基本的动画效果

隐藏与显示

.show()
.hide()
.toggle()


上下滑动效果

slideUp()
slideDown()
slideToggle()


淡入淡出

fadeIn()
fadeOut()
fadeToggle()




## 七、bootstrap第三方样式

> CSS样式集合
>
> 官网： https://www.bootcss.com/
>
> 部分UI组件是基于jQuery, jQuery版本要根据Bootstrap版本来选择, jQuery 2.x即可.



### 7.1 基础模板

```html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
		
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="container">
			<!-- 正文 -->
		</div>
		<script>
			$(()=>{
				//核心代码
			})
		</script>
	</body>
</html>