前端知识点

前端前戏
HTML部分
css部分
js部分

前端前戏

一、前端与后端的概念

什么是前端什么是后端？前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。多数后端开发人员从事于构建工作应用程序背后的实际逻辑。前后端需要相互配合，共同完成一个项目。

接下来小编带你一起来了解什么是前端什么是后端技术：

什么是前端开发？

任何与用户直接打交道的操作界面，都可以称之为前端>>>:接待员

1、前端概念：前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。

2、前端特点：前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，最新的高级版本HTML5、CSS3，以及SVG等。

3、前端主要技术：HTML、CSS、JavaScript

这三个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。

（1）HTML

指的是超文本标记语言 (Hyper Text Markup Language)，这个也是我们网页最常用普通的语言了，经历了多个版本的发展，已经发展到5.0版了，得力于W3C建立的标准和规范，已普遍升级到了XHTML，XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）， XHTML 于2000年的1月26日成为 W3C 标准，是更严格更纯净的 HTML 代码，XHTML 的目标是取代 HTML。XHTML 与 HTML 4.01 几乎是相同的，XHTML 是作为一种 XML 应用被重新定义的 HTML，是一个 W3C 标准。W3C 将 XHTML 定义为最新的HTML版本。所有新的浏览器都支持 XHTML。

（2）CSS

级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。

（3）JavaScript

是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。

什么是后端？

不直接与用户打交道，主要负责内部真正的业务逻辑的执行>>>:幕后操作者

1、后端概念：多数后端开发人员从事于构建他们正在工作的应用程序背后的实际逻辑。前端开发人员构建用户界面，而后端开发人员编写代码，使其工作。后端开发人员写可使得按钮工作的代码，通过指出从数据库中提取哪些数据并将其传回到前端。后端开发人员也可能会大量参与系统架构，决定如何组织系统的逻辑，以便能够正常维护和运行。

可能会参与构建框架或系统架构，以便于更容易编写程序。后端开发人员比前端开发人员花费更多的时间在实现算法和解决问题上。通常前端开发工作更多的是关于创建用户界面和与之相关的内容，而不是实现实际的业务逻辑，使应用程序工作。

2、后端开发主要技术

前端开发人员需要知道一系列用于创建用户界面的工具，而后端开发人员通常使用的是一套完全不同的工具和技能，以便于高效地完成他们的工作。后端开发人员所需的一个重要技能与SQL和数据库有关。大多数后端系统需要连接到存储应用程序数据的数据库。

后端开发人员通常的工作是从数据库或其他数据源写入、读取和处理数据，因此拥有SQL等技能会非常重要。后端开发人员——至少对于Web开发——也需要擅长他们正在使用的技术栈的服务器端语言。

后端开发人员需要更多地了解应用程序架构，因为大多数情况下，后端开发人员需要去构建应用程序的体系结构和内部设计。一个好的后端开发人员得知道如何使用各种框架和库，如何将它们集成到应用程序中，以及如何构建代码和业务逻辑，用一种使系统更易于维护的方式。

学习前端的目的

	专业的前端也需要培训至少六个月，而我们作为后端开发工程师，前端只学最基本最核心的一块，目的不是为了让你直接可以从事前端 而是给你以后的工作提供方便：
1.防止别人蒙你
2.可以自己编写简易的页面
3.逼急了甚至也可以转前端

前端三剑客

Web前端开发三剑客就是HTML、CSS、JavaScript。通过三种技术的融合产生了各式各样的网站。

HTML			 网页的骨架
CSS				 网页的样式
JavaScript		 网页的动态
"""
蜡笔小新光着身子 	    HTML
穿裙子 抹口红			 CSS
丢根钢管 舞起来		 JS
"""

二、前端前戏

1.编写服务端
2.浏览器充当客户端访问服务端
3.浏览器无法正常展示服务端内容(因为服务端的数据没有遵循标准)
4.HTTP协议>>>:最主要的内容就是规定了浏览器与服务端之间数据交互的格式

代码

import socket

server = socket.socket()
server.bind(('127.0.0.1', 8080))
server.listen(5)

while True:
    conn, address = server.accept()
    data = conn.recv(1024)
    print(data)
    conn.send(b'HTTP/1.1 200 OK\r\n\r\n')  # http协议规定的格式
    # conn.send(b'hello big baby!!!')  # 真实数据
    with open(r'a.txt','rb') as f:
        conn.send(f.read())

三、HTTP协议

1、四大特性

1.基于请求响应

客户端发送请求，服务端回应响应

2.基于TCP、IP作用于应用层之上的协议

该协议属于应用层

3.无状态

服务端不会保存客户端的状态(记不住人)
纵使见她千百遍，我都待她如初见

4.无\短连接

客户端与服务端不会长久保持连接
如果想要长链接：双方建立链接后默认不断开，websocket

2、报文格式

两个报文格式结构相似

1.请求格式
请求首行(请求方式(有很多种)、协议版本)
请求头(一大堆K:V键值对)
换行符：/r/n
请求体(存放敏感信息并不是所有的请求方式都有请求体)

2.响应格式

	响应首行(响应状态码 协议版本)
	响应头(一大堆K:V键值对)
	换行符：/r/n
	响应体(存放返回给浏览器、展示给用户看的数据)

3、响应状态码

HTTP 状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型。响应分为五类：信息响应(100–199)，成功响应(200–299)，重定向(300–399)，客户端错误(400–499)和服务器错误 (500–599)：

分类	分类描述
1**	信息，服务器收到请求，需要请求者继续执行操作
2**	成功，操作被成功接收并处理
3**	重定向，需要进一步的操作以完成请求
4**	客户端错误，请求包含语法错误或无法完成请求
5**	服务器错误，服务器在处理请求的过程中发生了错误

HTTP部分状态码列表：

状态码	状态码英文名称	中文描述
100	Continue	继续。客户端应继续其请求
101	Switching Protocols	切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议，例如，切换到HTTP的新版本协议
200	OK	请求成功。一般用于GET与POST请求
201	Created	已创建。成功请求并创建了新的资源
202	Accepted	已接受。已经接受请求，但未处理完成
203	Non-Authoritative Information	非授权信息。请求成功。但返回的meta信息不在原始的服务器，而是一个副本
204	No Content	无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档
205	Reset Content	重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文档视图。可通过此返回码清除浏览器的表单域
206	Partial Content	部分内容。服务器成功处理了部分GET请求
300	Multiple Choices	多种选择。请求的资源可包括多个位置，相应可返回一个资源特征与地址的列表用于用户终端（例如：浏览器）选择
301	Moved Permanently	永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替
302	Found	临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI（临时重定向）
303	See Other	查看其它地址。与301类似。使用GET和POST请求查看
304	Not Modified	未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源（永久重定向）
305	Use Proxy	使用代理。所请求的资源必须通过代理访问
306	Unused	已经被废弃的HTTP状态码
307	Temporary Redirect	临时重定向。与302类似。使用GET请求重定向
400	Bad Request	客户端请求的语法错误，服务器无法理解
401	Unauthorized	请求要求用户的身份认证
402	Payment Required	保留，将来使用
403	Forbidden	服务器理解请求客户端的请求，但是拒绝执行此请求（请求权限不够）
404	Not Found	服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面（请求资源不存在）
405	Method Not Allowed	客户端请求中的方法被禁止
406	Not Acceptable	服务器无法根据客户端请求的内容特性完成请求
407	Proxy Authentication Required	请求要求代理的身份认证，与401类似，但请求者应当使用代理进行授权
408	Request Time-out	服务器等待客户端发送的请求时间过长，超时
409	Conflict	服务器完成客户端的 PUT 请求时可能返回此代码，服务器处理请求时发生了冲突
410	Gone	客户端请求的资源已经不存在。410不同于404，如果资源以前有现在被永久删除了可使用410代码，网站设计人员可通过301代码指定资源的新位置
411	Length Required	服务器无法处理客户端发送的不带Content-Length的请求信息
412	Precondition Failed	客户端请求信息的先决条件错误
413	Request Entity Too Large	由于请求的实体过大，服务器无法处理，因此拒绝请求。为防止客户端的连续请求，服务器可能会关闭连接。如果只是服务器暂时无法处理，则会包含一个Retry-After的响应信息
414	Request-URI Too Large	请求的URI过长（URI通常为网址），服务器无法处理
415	Unsupported Media Type	服务器无法处理请求附带的媒体格式
416	Requested range not satisfiable	客户端请求的范围无效
417	Expectation Failed	服务器无法满足Expect的请求头信息
500	Internal Server Error	服务器内部错误，无法完成请求
501	Not Implemented	服务器不支持请求的功能，无法完成请求
502	Bad Gateway	作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应
503	Service Unavailable	由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中
504	Gateway Time-out	充当网关或代理的服务器，未及时从远端服务器获取请求
505	HTTP Version not supported	服务器不支持请求的HTTP协议的版本，无法完成处理

ps：在公司中我们还会自定义更多的响应状态码，通常以10000起步
可以使用聚合数据这个网站，进行获取数据，模拟请求等操作。

HTML部分

一、HTML概览

1.HTML简介

HTML：超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
网页文件的扩展名：.html或.htm

超文本标记语言特点:所见即所得(没有任何逻辑，是什么就是什么)

2.HTML注释语法

	<!--注释内容-->

3.HTML文档结构

	<html>		固定格式 html包裹
    	<head>主要放跟浏览器交互的配置</head>
       <body>主要放给用户查看的花里胡哨的内容</body>
    </html>

4.HTML标签分类

    单标签(自闭和标签)
    	<img/>
    双标签
    	<h1></h1>

二、预备知识

1、pycharm支持前端所有类型的文件编写，内置有自动补全的功能，我们只需要专注于标签名的编写即可。

2、html文件的打开——pycharm内置有自动调用浏览器的功能。

三、head内常见标签

小提示：pycharm中编写标签的时候写上英文，按Tab就可以快速补全。

1.title网页小标题

2.meta定义网页源信息(很多配置)

<meta name="keywords" content="查询关键字">
搜索引擎查询的时候会检索的关键字
<meta name="description" content="网页简介">
搜索引擎查询的时候，进入网页之前显示的介绍

3.style内部支持编写css代码

<style>
	h1 {
		color: greenyellow;
	}
</style>
这里的代码意思是修改h1标题的颜色

4.link引入外部css文件

	<link rel="stylesheet" href="mycss.css">

5.script支持内部编写js代码也可以引入外部js文件

	<script>
            prompt('好好活着','不要浪费生命')
   </script>
	<script src="myjs.js"></script>

prompt的作用是弹出一个提示窗口，第二断文本会出现在文本框内。

ps:了解每个标签大致的作用即可

四、body内基本标签

1.标题系列标签

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
我们也可以用h$*6一次性创建六种标签，修改后面的数字就可以创建更多种类。

2.段落标签

<p></p>

3.部分其他标签

语义	标签	说明
加粗	< strong >< /strong >或者< b >< /b >	更推荐使用< strong >< /strong >标签
倾斜	< em >< /em >或者< i >< /i >	更推荐使用< em >< /em >标签
删除线	< del >< /del >或者< s >< /s >	更推荐使用< del >< /del >标签
下划线	< ins >< /ins >或者< u >< /u >	更推荐使用< ins >< /ins >标签

ps:相同效果可能是有不同的标签实现的，不是独一无二的。

4.换行与分割线

<br>
相当于一个换行符
<hr>
会创建出一条分割线

5.图像标签

<img src=""/>
src中写图片的本地地址或是网址

图像路径

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级如< img src="img.jpg"/ >
下一级路径	/	图像文件位于HTML文件下一级如< img src="imges/img.jpg"/ >
上一级路径	../	图像文件位于HTML文件上一级如< img src="../img.jpg"/ >

五、标签的分类方式二

在html中标签可分为块级标签和行内标签

块级标签

块级标签特点

独占一行
可以换行
可以设置宽高（width:/height:）
可以设置边距（margin和padding）

常见的块级标签

div：盒子
p：段落
h1-h6：标题
hr：水平分割线
ul>li：无序列表
ol>li：有序列表
dl>dt（表头）>dd：定义列表
table>th>tr>td：表格（包括表格标题caption标签、表格头部thead标签、表格主体tbody标签）

行内标签

行内标签特点
1. 不会独占一行，与其他的行内标签共处一行
1. 不会换行
1. 不可以设置宽高，高度由内容撑开，若没有内容，则高度为空
1. 可以设置外边距（margin）左右（宽）生效，上下（高）不会生效，内边距padding则都会生效

常见行内标签

span：用来组合文档中的行内元素
a：超链接
b/strong：字体加粗
small：字体弱化
u：下划线
i/em：倾斜
s/del：删除线
sup/sub：上标/下标
audio：音频
video：视频
textarea：多行文本框
select：下拉菜单
img：图片
button：按钮

六、常见符号

1.&nbsp; 	空格
2.&gt;		大于
3.&lt;		小于
4.&amp;		&符
5.&yen;		¥
6.&copy;	© 
7.&reg;		®

七、body内布局标签

div
块儿级标签
span
行内标签

标签之间可以相互嵌套，并且理论上可以无线套娃
块儿级标签内部可以嵌套块儿级标签和行内标签
p标签虽然是块儿级标签，但是它的内部也不能嵌套块儿级标签
行内标签内部只能嵌套行内标签

八、body内常用标签

小知识点

标签括号内填写的什么=什么称之为的标签的属性
1.默认属性
标签自带的编写的时候有自动提示
2.自定义属性
用户自定义编写不会有提示甚至会飘颜色

定义超链接标签< a >

链接分类
①外部链接，记得加上http://

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

②内部链接:网站内部页面之间的相互链接。
直接链接内部页面名称即可,例如

< a href="index.html">首页</a >

③空链接:如果当时没有确定链接目标时。

<a href="#">首页</a>

④下载链接:如果href里面地址是一个文件或者压缩包,会下载这个文件。

<a href="xiazai.zip">下载文件</a>

⑤网页元素链接: 在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接.
锚点链接:点我们点击链接，可以快速定位到页面中的某个位置。

⑥锚点链接:点我们点击链接，可以快速定位到页面中的某个位置。

需要给href填写其他标签的id信息，才能具备锚点功能

在链接文本的href属性中,设置属性值为#名字的形式,

如<a href= " #two"> 52集 </a>

找到目标位置标签,里面添加一个id属性=刚才的名字

如: <h3 id= "two"> 第52集介绍 </h3>

href讲解

href: 用于指定链接目标的url地址， (必须属性) 当为标签应用href属性时，它就具有了超链接的功能。

说明：href 属性是用来指向你点击需要访问链接的地址，后面的写的”百度一下“是来告诉用户的,这里的百度一下可以换成图片等其他东西。
即：
点击之后就会自动跳转href后面所写的地址。

target的作用——指定链接页面的打开方式

<a href="https://www.baidu.com/" target="_self">点这里去百度</a>
默认情况下不写target属性就会使用_self，这种情况下会从原网页跳转到目标网页，也就是说原网页就没了。
<a href="https://www.baidu.com/" target="_blank">点这里去百度</a>
打开一个新的网页，原网页还在

其他target属性

_top 跳出框架打开网页。

_parent 在父窗口打开网页。

_ framename 在指定的框架中打开网页。

_self为默认值当前页面打开。

_blank为在新窗口中打开方式。

img标签——图片标签

语法

<img src="url" />

属性介绍

src属性指定图片存储的路径
width/height属性指定我们图片的宽度,高度会等比例缩放！不要两个属性一起改，会变形的。
title属性用来设置鼠标悬停时的提示信息
alt属性用来设置当我们图片加载失败的时候，显示的信息。

九、列表标签

无序列表
	 <ul>
        <li>手机</li>
        <li>衣物</li>
        <li>电子</li>
    </ul>
    ps:页面上所有有规则排列的横向或者竖向的数据 一般使用的都是无序列表
    
有序列表
	<ol type="I">
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ol>
	 ps:还可以通过type竖向切换数字
        
标题列表
	<dl>
        <dt>大标题</dt>
        	<dd>小标题1</dd>
        	<dd>小标题2</dd>
        <dt>大标题</dt>
        	<dd>小标题1</dd>
        	<dd>小标题2</dd>
        	<dd>小标题3</dd>
    </dl>

十、表格标签

1.先写基本骨架
	<table>
        <thead></thead>
        <tbody></tbody>
    </table>
2.再写表头及表单数据
	 <tr>  一个tr标签就表示一行
        <th>编号</th>  th主要用于表头字段中 用来加粗显示
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    
    <tr>
        <td>1</td>  td主要用于表达数据中 
        <td>jason</td>
        <td>18</td>
    </tr>
 

    <table>
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>jason</td>
                <td>18</td>
            </tr>
        </tbody>
    </table>

十一、表单标签

表单标签作用

表单是用来采集用户的输入数据，然后将数据提交给服务器

表单的组成

一个表单有三个基本组成部分：

①表单标签：这里面包含了处理表单数据所用程序的URL以及数据提交到服务器的方法。

②表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

③表单按钮：包括提交按钮、复位按钮和一般按钮；

form标签
action 控制数据的提交地址
method 控制数据的提交方法

input标签(类似于前端的变形金刚)
type属性
text 普通文本
password 密文展示
date 日期选项
email 邮箱格式
radio 单选
checkbox 多选
file 文件
submit 触发提交动作
reset 重置表单内容
button 暂无任何功能

select标签下拉框
option标签一个个选项

textarea标签获取大段文本

input标签应该有name属性
name属性相当于字典的键 input标签获取到的用户数据相当于字典的值
点击发送就会组织成字典的形式发送给服务端这样才具有明确意义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>用户注册页面</h2>
    <form action="">
        <p>username:
            <input type="text">
        </p>
        <p>password:
            <input type="password">
        </p>
        <p>birthday:
            <input type="date">
        </p>
        <p>email:
            <input type="email">
        </p>
        <p>gender:
            <input type="radio" name="gender" value="male">男
            <input type="radio" name="gender" value="female">女
            <input type="radio" name="gender" value="others">其他
        </p>
        <p>hobbies:
            <input type="checkbox">篮球
            <input type="checkbox">足球
            <input type="checkbox">双色球
            <input type="checkbox">rap球
            <input type="checkbox">各种球
        </p>
        <p>file:
            <input type="file">
        </p>
        <p>files:
            <input type="file" multiple>
        </p>
        <p>province:
            <select name="" id="">
                <option value="">北京</option>
                <option value="">上海</option>
                <option value="">深圳</option>
            </select>
        </p>
        <p>pre_GF:
            <select name="" id="" multiple>
                <option value="">小花</option>
                <option value="">小明</option>
                <option value="">小波</option>
                <option value="">小红</option>
                <option value="">小李</option>
            </select>
        </p>
        <p>info:
            <textarea name="" id="" cols="30" rows="10"></textarea>
        </p>
        <input type="submit" value="注册">
        <input type="reset" value="重置">
        <input type="button" value="按钮">
    </form>
</body>
</html>

十二、表单标签的补充说明

基于form表单发送数据

1.用于获取用户数据的标签至少应该含有name属性

<form action="">
	<input type="radio" name="nothing">好家伙
	<input type="radio" name="nothing">好东西
	<input type="radio" name="nothing">好宝贝

</form>

name属性相当于字典的键，用户输入的数据会被保存到标签的value属性中，拥有name属性的数据才能发送到后端被识别。
value属性相当于字典的值
radio类型的input标签需要设置统一的name属性才能实现单选的目的
没有name属性的标签，form表单会直接忽略，不会发送。

2.如果不需要用户填写数据只需要选择那么我们需要自己填写value

<input type="radio" name="gender" value="male">

这里的value就相当于默认参数，如果不写就是使用默认的值，如果写了就是使用我们给定的值。

3.针对input标签理论上应该配一个label标签绑定但是也可以不写

	<label for="d1">username:
        <input type="text" id="d1">
    </label>
   	<label for="d1">username:</label>
    <input type="text" id="d1">

用上这label标签后，我们点击网页中的username就会自动跳转到input的选项框中区。

4.标签的属性如果和属性值相等那么可以简写

	<input type="file" multiple="multiple">
	<input type="file" multiple>
    
<select name="" id="" multiple>
    <option value="" selected="selected">111</option>
</select>
<select name="" id="" multiple>
    <option value="" selected>222</option>
</select>

5.针对选择类型的标签可以提前设置默认选项

input标签使用checked属性设置默认值，select标签中的option标签需要设置selected属性设置默认值，两者因为属性值和属性名称一样，都可以省略值的书写。

	<input type="radio" name="gender" checked="checked">
 	<input type="radio" name="gender" checked>
 	<input type="checkbox" checked="checked">
   	<input type="checkbox" name="gender" checked>
	<option value="" selected="selected">222</option>
    <option value="" selected>222</option>

6.下拉框与文件上传可以复选

	<input type="file" multiple>
   	<select name="" id="" multiple>

在标签中加上属性multiple就可以设置成复选。

css部分

一、CSS：层叠样式表

css 介绍

css（Cascading Style Sheet，层叠样式表)，是一种样式表语言，用来描述HTML和XML文档的呈现（定义如何显示HTML元素）。
随着HTML的发展，为了满足页面设计者的要求，HTML添加了很多显示功能，但是随着这些功能的增加，使得HTML越来越杂乱
HTML 页面也越来越臃肿，CSS便随之诞生
CSS 用于简化HTML标签，把关于样式部分的内容提取出来，进行单独的控制，使结构与样式分离开发。
CSS 是以HTML为基础，设置网页的外观显示样式，如字体、颜色、背景的控制及整体的布局等，和HTML 类似
CSS也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

如何查找标签

思考:页面都是由HTML构成的，并且页面上有很多相同的HTML标签，但是相同的HTML标签在不同的位置可能有不同的样式。我们如何区分标签？

标签的两大重要属性>>>:用于区分标签

1.class属性
分门别类，主要用于批量查找
2.id属性
精确查找，主要用于点对点

    <div class="c1 c2 c3"></div>
    <p class="c1 c5"></p>
    <span class="c1 c8"></span>
    <div id="d1"></div>
    <a href="" id="d2"></a>

学习css的流程

肯定有同学会问，为啥不想学样式的具体内容，反而先学习如何查找标签，我们可以这样想，我们只有会找标签了，才能知道对应的css代码作用于什么标签上。

1.先学习如何查找标签
2.再学习如何调整样式

css语法基础知识

1.css语法结构

选择器 {

    样式名1:样式值1;

    样式名2:样式值2

}

2.css注释语法

注释是代码之母。

/*注释内容*/

3.引入css的多种方式
1.head内style标签内部编写(学习的时候使用)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

2.head内link标签引入(标准的方式)

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

3.标签内部通过style属性直接编写(不推荐)

<p style="color: red">Hello world.</p>

二、CSS选择器

1.CSS基本选择器
	1.标签选择器(直接按照标签名查找标签)
        div {
                color: red;
            }
 	2.类选择器(按照标签的class值查找标签)
    	 .c1 {
            color: green;
        }
 	3.id选择器(根据标签的id之精准查找标签)
    	#d1 {
            color: yellow;
        }
 	4.通用选择器(直接选择页面所有的标签)
    	* {
            color:blue;
        }
        
2.CSS组合选择器
    """
    预知知识点 我们对标签的嵌套有另外一套说辞
        <p>ppp</p>
        <p>ppp</p>
        <div>div
            <div>divdiv
                <p>divdivp
                    <span>divdivpspan</span>
                </p>
            </div>
            <p>divp</p>
            <span>divspan</span>
        </div>
        <p>ppp</p>
        <span>spanspan</span>
    针对标签的上下层级以及嵌套有另外的说法
        父标签 后代标签 子标签 弟弟标签 哥哥标签 祖先标签
    """
    1.后代选择器(空格隔开)
		div内部的span标签设置字体颜色
        div span {
                color: red;
            }
    2.儿子选择器(大于)
		选择所有父级是 <div> 标签的 <span> 标签
        div>span {
                color: yellow;
            }
    3.毗邻选择器(加号)
		符合条件（需要是span便签）并且与父标签（div）相邻
        div+span {
                color: yellow;
            }
    4.弟弟选择器(小波浪号)
		div后面所有的兄弟span标签（也就是同级标签）
        div~span {
                color: yellow;
            }

3.分组与嵌套
	同时查找div、p、span三种同级标签，修改他们的颜色，改为黄色
	div,p,span {  # 多个选择器合并查找
            color: yellow;
        }
	修改id值为d1的标签和class值为c1的标签，还有外层span标签的颜色，改为绿色
 	#d1,.c1,span {
            color: green;
        }

	div.c1 {  查找class含有c1的div
            color: red;
        }

	div#d1 {  查找id是d1的div
            color: red;
        }

	.c1 p.c2 {  查找含有c1的class值的标签里面的含有c2样式值的p标签
           color: antiquewhite; 
        }

4.属性选择器
	[username] {	按照属性名查找
        color: red;
    }

    [username='jason'] {  按照属性名等于属性值
        color: yellow;
    }

    div[username='jason'] {  查找div标签中username属性为jason的标签
        color: darkcyan;
    }

5.伪类选择器

伪类选择器是什么？

伪类选择器简称“伪类”，伪类是一种不存在的类，伪类用来表示元素的一种状态。
伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。
伪类就是开头为冒号的关键字，如:hover

用户行为伪类

一些伪类只会在用户以某种方式和文档交互的时候应用。这些用户行为伪类，有时叫做动态伪类，表现得就像是一个类在用户和元素交互的时候加到了元素上一样。案例包括：

:hover：只会在用户将指针挪到元素上的时候才会激活，一般就是链接元素；
:focus：只会在用户使用键盘控制，选定元素的时候激活（被点击之后采用的样式）；

ps：a标签补充说明，针对没有点击过的网址，默认是蓝色，点击过的则为紫色。

:hover示例

<!--css-->
a:hover{
    color:red;
}
<!--html-->
<div><a href="http://www.baidu.com" >百度</a></div>

:focus示例

<!--css-->
input:focus {
            background-color: red;
        }
<!--html-->
INPUT:<input type="text">

6.伪元素选择器

伪元素：用于创建一些不在文档树中的元素，并为其添加样式

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

常见的伪元素选择器：

::first-letter 选择元素文本的第一个字母。
::first-line 选择元素文本的第一行。
::before 在元素内容的最前面添加新内容。（常用）
::after 在元素内容的最后面添加新内容。（常用）
::selection匹配用户被用户选中或者处于高亮状态的部分
::placeholder匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效

作用：

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的HTML元素一样，而不是向现有的元素上应用类。

	    p:first-letter {  修改第一个字母的大小
            font-size: 48px;
            color: red;
        }
        p:before {		css添加文本无法正常选中
            content: '嘿嘿嘿';
            color: blue;
        }
        p:after {		css添加文本无法正常选中
            content: '呵呵呵';
            color: red;
        }

三、选择器优先级

1.选择器相同，导入方式不同
就近原则，代码处于下方的样式，会先被使用
2.选择器不同，导入方式相同
优先级：内联样式 > id选择器 > 类选择器 > 标签选择器

四、CSS样式调节

字体属性

字重（粗细）

font-weight用来设置字体的字重（粗细）。

值	作用描述
normal	默认值，标准粗细
bold	粗体
bolder	更粗
lighter	更细
100~900	设置具体粗细，400等同于normal，而700等同于bold
inherit	继承父元素字体的粗细值

文本颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

ps：取色器工具可以快速取得想要的颜色，以下两种软件有这种功能。
1.pycharm
2.微信截图功能，可以看rgb值

文字属性

文字对齐

text-align 属性规定元素中的文本的水平对齐方式。

值	作用描述
left	左边对齐默认值
right	右对齐
center	居中对齐
justify	两端对齐

文字装饰

text-decoration 属性用来给文字添加特殊效果。

值	作用描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
inherit	继承父元素的text-decoration属性的值。

常用的为去掉a标签默认的自划线：

a {
  text-decoration: none;
}

首行缩进

将段落的第一行缩进 32像素：

p {
  text-indent: 32px;
}

背景属性

	div {
            width: 800px;
            height: 800px;
        设置背景框的大小
            /*background-color: red;*/
        背景颜色
            /*background-image: url("https://img2.baidu.com/it/u=167083063,1652780278&fm=253&fmt=auto&app=138&f=JPEG?w=369&h=472");*/
        使用图片充当背景填充内容
            /*background-image: url("666.png");*/
        默认情况下使用背景填充内容会重复重复填充，直到填满背景框
            /*background-repeat: no-repeat;*/
        用了no-repeat之后就只填充一张图片，不会重复填充
            /*background-repeat: repeat-x;*/
        横向填充
            /*background-repeat: repeat-y;*/
        竖向填充
            /*background-position: center center;*/
        使图片在x轴和y轴上都处于中间，也就是正中间
            background:  url("666.png") blue no-repeat center center;
        }
    当多个属性名有相同的前缀 那么可以简写一次性完成

五、边框

边框简介

HTML中的任何块元素和行内元素几乎都可以设置边框属性，比如div元素、img元素、table元素等。每一个页面元素的边框都可以从3个方面描述：宽度、样式、颜色，这3个方面决定了边框所显示出来的外观。在CSS中可以通过下面3个属性来设定边框的3个方面：

border-width（边框宽度）
border-style（边框样式）
border-color（边框颜色）
border：上面三个边框属性的缩写

border-left-width: 5px;
border-left-style: dotted;
border-left-color: #0000ff;

通常使用简写方式：

border-left: 3px solid black;
border: 10px solid orange;

border-style——边框样式

值	作用描述
none	无边框
hidden	隐藏边框，与 "none" 类似
dotted	定义点状虚线边框
dashed	定义虚线边框
solid	定义实线边框
double	定义双实线边框，双实线边框的宽度等于 border-width 的值
groove	定义 3D 凹槽边框，其效果取决于 border-color 的值
ridge	定义 3D 垄状边框，其效果取决于 border-color 的值
inset	定义 3D 嵌入边框，其效果取决于 border-color 的值
outset	定义 3D 突出边框，其效果取决于 border-color 的值
inherit	从父元素继承边框样式

除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：

#i1 {
  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;
}

border-radius

用这个属性能实现圆角边框的效果。

将border-radius设置为长或高的一半即可得到一个圆形。

画圆
border-radius: 50%;

border-width——边框宽度

border-width 属性用来设置元素中所有边框的宽度，或者单独为某个边框设置宽度。

除了具体的宽度值（5px），还可以设置成属性。

border-width 属性的可选值如下：

值	描述
thin	定义较细的边框
medium	默认值，定义中等宽度的边框
thick	定义较粗的边框
length	使用数值加单位的形式设置具体的边框宽度，例如 2px
inherit	从父元素继承边框的宽度

border-color——边框颜色

border-color 属性用来设置元素中所有边框的颜色，或者单独为某个边框设置颜色。

border-color 属性的可选值如下：

值	描述
color_name	使用颜色名称来设置边框的颜色，例如 red
hex_number	使用颜色的十六进制值来设置边框的颜色，例如 #ff0000
rgb_number	使用 rgb() 函数设置边框的颜色，例如 rgb(255,0,0)
transparent	默认值，设置边框颜色为透明
inherit	从父元素继承边框的颜色

六、display属性

行内标签是无法设置长宽，只有块儿级可以设置

display 属性可以设置元素的外部和内部显示类型。元素的外部显示类型将决定该元素在流式布局中的表现（块级或行内元素）；元素的内部显示类型可以控制其子元素的布局（flex、grid 等）。

值	意义
display:"none"	HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block"	默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline"	按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block"	使元素同时具有行内元素和块级元素的特点。

ps：一些钓鱼网站就是用这样的方法，隐藏一些数据，达到修改转账对象的目的。

display:"none"与visibility:hidden的区别：

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

<div style="display:none">222</div>
彻彻底底的隐藏标签(页面上不会显示 也不会保留标签的位置)

<div style="visibility: hidden">222</div>
隐藏的不彻底

七、CSS盒子模型

概念

margin(外边距):用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding(内填充):用于控制内容与边框之间的距离；
Border(边框):围绕在内边距和内容外的边框。
Content(内容):盒子的内容，显示文本和图像。

举例：

我们可以将标签看成是一个盒子(快递盒)

1.快递包里面的实际物体

content(内容)

2.物体与内部盒子墙的距离

padding(内边距、内填充)

3.快递盒的厚度

border(边框)

4.快递盒之间的距离

margin(外边距)

看图：

margin外边距

很多标签都有默认自带的盒子模型：

p标签自带margin 16px

body默认margin 8px

ul默认padding-left=40

通过英语单词的意思，可以得知设置的分别是上、右、下、左的距离。

.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}

推荐使用简写：

.margin-test {
  margin: 5px 10px 15px 20px;
}

顺序：上右下左

常见居中：

上下距离为0，左右居中

.mycenter {
  margin: 0 auto;
}

padding内填充

.padding-test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}

推荐使用简写：

.padding-test {
  padding: 5px 10px 15px 20px;
}

顺序：上右下左

补充padding的常用简写方式：

提供一个，用于四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边；

/*    !*padding: 20px; 上下左右*!*/
/*    !*padding: 20px 40px;  上下   左右*!*/
/*    !*padding: 10px 20px 30px;上  左右  下*!*/
/*    !*padding: 10px 20px 30px 40px;上 右 下 左*!*/
margin与padding用法一致

针对标签的嵌套，水平方向可以居中
margin: 0 auto;

八、浮动

float

在 CSS 中，任何元素都可以浮动。

浮动元素会生成一个块级框，而不论它本身是何种元素。

关于浮动的两个特点：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样（块框边成了一条线，而浮动框浮在上方）。

三种取值

left：向左浮动

right：向右浮动

none：默认值，不浮动

float: left;
float: right;
float: none;

clear

clear属性规定元素的哪一侧不允许其他浮动元素。

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

注意：clear属性只会对自身起作用，而不会影响其他元素。

清除浮动

清除浮动的副作用（父标签塌陷问题）

主要有三种方式：

固定高度(在块框中设置固定高度)
伪元素清除法（使用clear属性用空的内容从底部撑起外面的框，添加了clear:both属性，左右两侧都不能有浮动元素出现）
overflow:hidden

伪元素清除法（使用较多）：

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

ps:浏览器会优先展示文本内容(如果被挡住)

九、溢出

overflow溢出属性

当框小于值的大小的时候，可以设置溢出属性调整样式

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

overflow（水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向）

圆形头像框的制作：

div {
            height: 150px;
            width: 150px;
            border: 5px solid greenyellow;
            border-radius: 50%;
            overflow: hidden;
        }
div img {
            max-width: 100%;
        }

设置边框为圆形，然后让图片百分百比例显示，多余部分不显示。

十、定位

定位（position）

标签在默认情况下都是无法通过定位的参数来移动

static

static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。

标签默认的状态无法定位移动

relative（相对定位）

相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

基于标签原来的位置进行定位

注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。

absolute（绝对定位）

定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

基于某个定位过的父标签做定位

重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。

另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。

fixed（固定）

fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。注意点：一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。

基于浏览器窗口固定不动

脱离文档流：

　　绝对定位

　　固定定位

不脱离文档流：

　　相对定位

        .c1 {
            background-color: red;
            height: 100px;
            width: 100px;
            position: relative;
        }
        .c2 {
            background-color: greenyellow;
            height: 100px;
            width: 200px;
            position: absolute;
            top: 100px;
            left: 100px;
        }
		.c1 {
            border: 5px solid black;
            height: 100px;
            width: 100px;
            position: fixed;
            right: 100px;
            bottom: 200px;
        }

十一、z-index

设置对象的层叠顺序。

z-index 值表示谁压着谁，数值大的压盖住数值小的，
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
从父现象：父亲怂了，儿子再牛逼也没用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>自定义模态框</title>
  <style>
    .cover {
      background-color: rgba(0,0,0,0.65);
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 998;
    }

    .modal {
      background-color: white;
      position: fixed;
      width: 600px;
      height: 400px;
      left: 50%;
      top: 50%;
      margin: -200px 0 0 -300px;
      z-index: 1000;
    }
  </style>
</head>
<body>

<div class="cover"></div>
<div class="modal"></div>
</body>
</html>

opacity

用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。

十二、简易博客页面搭建

1.分析页面结构
	利用布局标签div和span搭建架子
2.先编写网页骨架
	HTML
3.再编写CSS
4.最后编写JS

html文件代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>blogs</title>
    <link rel="stylesheet" href="blog.css">
</head>
<body>
    <div class="blog-left">
<!--        头像区开始-->
        <div class="blog-avatar">
            <img src="https://img1.baidu.com/it/u=2038196509,2247965757&fm=253&fmt=auto&app=138&f=JPEG?w=521&h=500" alt="">
        </div>
<!--        头像区结束-->
        <div class="blog-title">
            <span>剑来绝美短句文案</span>
        </div>
        <div class="blog-info">
            <span>大千世界，无奇不有。天道崩塌，我陈平安，唯有一剑，可搬山，断江，倒海，降妖，镇魔，敕神，摘星，摧城，开天。</span>
        </div>
        <div class="blog-link">
            <ul>
                <li><a href="https://baike.baidu.com/link?url=PSZ8EXuCPrJGIWLotOimSOQ9a8XVeSlHt1NOeTtsgVx7BoB60GLGt8jHRHMNjxzmblo0LlYcPUA0gxXdWoEC2MIJEbPIFRavLPome6I_RvhaynUj37nOedP2IQvpBVpdMe80_IdQoqgyAkntF8lBMK">作者：烽火戏诸侯</a></li>
                <li><a href="http://www.zongheng.com/book/672340.html">阅读地址</a></li>
            </ul>
        </div>
        <div class="blog-course">
            <ul>
                <li><a href="">#第四届橙瓜网络文学奖十大作品</a></li>
                <li><a href="">#第四届橙瓜网络文学奖最具潜力十大动漫IP</a></li>
                <li><a href="">#2020年10月《剑来》获第二届泛华文网络文学“金键盘”奖—最佳故事创意奖</a></li>
            </ul>
        </div>
    </div>
    <div class="blog-right">
        <div class="article-list">
            <div class="article-title">
                <span class="title">摘抄一</span>
                <span class="date">2022/12/02</span>
            </div>
            <div class="article-desc">
                <span>天上月，人间月，负笈求学肩上月，登高凭栏眼中月，竹篮打水碎又圆。山间风，水边风，御剑远游脚下风，圣贤书斋翻书风，风吹浮萍有相逢。</span>
            </div>
            <div class="article-end">
                <span>此身原本不知愁</span>
                <span>最怕万一见温柔</span>
            </div>
        </div>
        <div class="article-list">
            <div class="article-title">
                <span class="title">摘抄二</span>
                <span class="date">2022/12/02</span>
            </div>
            <div class="article-desc">
                <span>莫向外求。求神拜佛，先要精诚求己，再谈冥冥天命。</span>
            </div>
            <div class="article-end">
                <span>人生苦难书</span>
                <span>最能教做人</span>
            </div>
        </div>
        <div class="article-list">
            <div class="article-title">
                <span class="title">摘抄三</span>
                <span class="date">2022/12/02</span>
            </div>
            <div class="article-desc">
                <span>昨日种种譬如昨日死，今日种种譬如今日生。我们都各自努力，以善因结善果</span>
            </div>
            <div class="article-end">
                <span>观海者难为水</span>
                <span>痴心者难为情</span>
            </div>
        </div>
        <div class="article-list">
            <div class="article-title">
                <span class="title">摘抄四</span>
                <span class="date">2022/12/02</span>
            </div>
            <div class="article-desc">
                <span>山外风雨三尺剑，有事提剑下山去；云中花鸟一屋书，无忧翻书圣贤来。</span>
            </div>
            <div class="article-end">
                <span>遇事不决</span>
                <span>可问春风</span>
            </div>
        </div>
        <div class="article-list">
            <div class="article-title">
                <span class="title">摘抄五</span>
                <span class="date">2022/12/02</span>
            </div>
            <div class="article-desc">
                <span>世间情动，不过盛夏白瓷梅子汤，碎冰碰壁当啷响，愿得美人心。</span>
            </div>
            <div class="article-end">
                <span>人间万事细如毛</span>
                <span>我有小事大如斗</span>
            </div>
        </div>
        <div class="article-list">
            <div class="article-title">
                <span class="title">摘抄六</span>
                <span class="date">2022/12/02</span>
            </div>
            <div class="article-desc">
                <span>君子坐而论道，少年起而行之。</span>
            </div>
            <div class="article-end">
                <span>言念君子</span>
                <span>温其如玉</span>
            </div>
        </div>
        <div class="article-list">
            <div class="article-title">
                <span class="title">摘抄七</span>
                <span class="date">2022/12/02</span>
            </div>
            <div class="article-desc">
                <span>有些委屈，无论大小，只有受过同样委屈的人，才可以真正体会。否则旁人再好的善心善意，恐怕都无法让人真正心安。</span>
            </div>
            <div class="article-end">
                <span>你如何看待这个世界</span>
                <span>世界就会如何看你</span>
            </div>
        </div>
        <div class="article-list">
            <div class="article-title">
                <span class="title">摘抄八</span>
                <span class="date">2022/12/02</span>
            </div>
            <div class="article-desc">
                <span>人生不是书上的故事，喜怒哀乐，悲欢离合，都在书页间，可书页翻篇何其易，人心修补何其难。</span>
            </div>
            <div class="article-end">
                <span>相逢偶然</span>
                <span>离别悄然</span>
            </div>
        </div>
        <div class="article-list">
            <div class="article-title">
                <span class="title">摘抄九</span>
                <span class="date">2022/12/02</span>
            </div>
            <div class="article-desc">
                <span>看道家典籍，生中有死，有点冷。看佛家经文，苦中有乐，有点热。看儒家经义，规规矩矩，有点烦。</span>
            </div>
            <div class="article-end">
                <span>所有远游</span>
                <span>都是为了重逢</span>
            </div>
        </div>
        <div class="article-list">
            <div class="article-title">
                <span class="title">摘抄十</span>
                <span class="date">2022/12/02</span>
            </div>
            <div class="article-desc">
                <span>决定了，为人思虑周全，行事手段缜密，就叫周密好了。</span>
            </div>
            <div class="article-end">
                <span>尽人事听天命</span>
                <span>潜龙在渊</span>
            </div>
        </div>
    </div>
</body>
</html>

css文件代码

/*页面通用样式*/
body {
    margin: 0;
    background-color: #eeeeee;
}

a {
    text-decoration: none;
/*    让超链接自带的下划线消失*/
}

ul {
    list-style-type: none;
    padding-left: 0;
}

/*首页左侧样式*/
.blog-left {
    float: left;
    width: 20%;
    height: 100%;
    background-color: #000000;
    position: fixed;
    left: 0;
    top: 0;
}

.blog-avatar {
    border: 5px solid white;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    margin: 20px auto;
    overflow: hidden;
}

.blog-avatar img {
    max-width: 100%;
}

.blog-title,.blog-info {
    color: darkgray;
    text-align: center;
    margin: 10px auto;
}

.blog-link, .blog-course {
    text-align: center;
    margin: 8px auto;
}

.blog-link ul>li, .blog-course ul>li {
    padding: 8px;
}

.blog-link a,.blog-course a{
    color: darkgray;
    font-size: 24px;
}
.blog-link a:hover,.blog-course a:hover{
    color: white;
}

/*首页右侧样式*/
.blog-right {
    float: right;
    width: 80%;
    height: 100%;
}

.article-list {
    background-color: white;
    margin: 20px 50px 20px 20px;
    box-shadow: 20px 20px 20px rgba(0,0,0,0.8);
}

.article-list .article-title .title {
    font-size: 48px;
    border-left: 8px solid red;
    padding-left: 10px;
}

.article-list .article-title .date {
    font-size: 18px;
    font-weight: bolder;
    float: right;
    margin: 20px 20px;
}

.article-desc {
    font-size: 20px;
    font-weight: lighter;
    text-indent: 20px;
    border-bottom: 1px solid black;
}

.article-end {
    padding: 10px 10px 10px 20px;

}

js部分

一、JS简介

简介

JavaScript（简称“JS”）是一种轻量级的面向对象的编程语言，既能用在浏览器中控制页面交互，也能用在服务器端作为网站后台（借助 Node.js），因此 JavaScript 是一种全栈式的编程语言。
JavaScript和java没有任何关系，只是语法类似。JavaScript运行在浏览器中，代码由浏览器解释后执行。而Java运行在JVM中。
JavaScript 是一种跨平台的解释型语言，不需要提前编译，能在各种操作系统下运行。
虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
JavaScript是网景公司（NetScape)的 布兰登·艾奇 开发的，最初叫做LiveScript。LiveScript的出现让浏览器更加生动，使得页面更具有交互性。
1998年网景公司被“美国在线”公司收购。
网景公司最著名的就是“领航者浏览器”：Navigator浏览器。
LiveScript的出现，最初的时候是为Navigator浏览器量身定制一门语言，不支持其他浏览器。
1996年11月，JavaScript的创造者--Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这门语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。
该标准一开始就是针对JavaScript语言制定的，但是没有称其为JavaScript，有两个方面的原因。一是商标，JavaScript本身已被Netscape注册为商标。而是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开发性和中立性。
因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。

ps：它是一门前端工程师的编程语言，但是它本身有很多逻辑错误(不是很严谨)

ECMAScript的历史

年份	名称	描述
1997	ECMAScript 1	第一个版本
1998	ECMAScript 2	版本变更
1999	ECMAScript 3	添加正则表达式添加try/catch
	ECMAScript 4	没有发布
2009	ECMAScript 5	添加"strict mode"严格模式添加JSON支持
2011	ECMAScript 5.1	版本变更
2015	ECMAScript 6	添加类和模块
2016	ECMAScript 7	增加指数运算符（**）增加Array.prototype.includes

注：ES6就是指ECMAScript 6。

尽管 ECMAScript 是一个重要的标准，但它并不是 JavaScript 唯一的部分，当然，也不是唯一被标准化的部分。实际上，一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：

核心（ECMAScript）
文档对象模型（DOM） Document object model (整合js，css，html)
浏览器对象模型（BOM） Broswer object model（整合js和浏览器）

简单地说，ECMAScript 描述了JavaScript语言本身的相关内容。

JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易学习。

二、JS基础

1.注释语法

	// 单行注释
	/*多行注释*/

2.引入js的多种方式

1.head内script标签内编写

<script>
  // 在这里写你的JS代码
</script>

2.head内script标签src属性引入外部js资源

<script src="myscript.js"></script>

3.body内最底部通过script标签src属性引入外部js资源(最常用)

ps:注意页面的下载是从上往下的所以操作标签js代码一定要等待标签加载完毕再执行才可以正常运行

3.结束符号

分号(很多时候不写也没问题，这里就提现了js语言的不严谨)

三、变量与常量

编写和运行js代码的两种方式

1.pycharm创建js文件或者html文件(适合编写较为复杂的js代码，需要先编写html文件才能运行js文件)
2.浏览器提供编写js代码的环境(类似在cmd中运行python代码，适合写一些简单的代码，同时编写的代码不能被保存)

变量声明

JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。
声明变量使用 var 变量名; 的格式来进行声明

var name = "Alex";
var age = 18;

注意：

变量名是区分大小写的。

推荐使用驼峰式命名规则。

保留字不能用做变量名。

补充：

ES6新增了let命令，用于声明变量。其用法类似于var，但是所声明的变量只在let命令所在的代码块内有效（可以在局部定义变量不影响全局）。例如：for循环的计数器就很适合使用let命令。

for (let i=0;i<arr.length;i++){...}

ES6新增const用来声明常量。一旦声明，其值就不能改变。

const PI = 3.1415;
PI // 3.1415

PI = 3
// TypeError: "PI" is read-only

四、基本数据类型

在JS中查看数据类型的方式：typeof

1.数值类型(Number)

在JS中整型与浮点型不分家都叫Number
NaN也属于数值类型，意思是:不是一个数字(Not A Number)

parseInt

parseInt(string, radix) 解析一个字符串并返回指定基数的十进制整数，radix 是 2-36 之间的整数，表示被解析字符串的基数。

参数讲解

将一个字符串A转换成数字B;
第一个参数：需要转换的字符串A;
第二个参数：表示进制的基数（用我自己的大白话讲就是：解析字符串A的时候，把A当做多少进制的数字。）

console.log(parseInt('10')) // 10
console.log(parseInt('10a')) // 10

console.log(parseInt('111', 2)) // 7
console.log(parseInt('A12', 16)) // 2578

Number类型数据的代码实操

parseInt("123")  // 返回123，写小数的时候会自动砍掉小数部分
parseInt("ABC")  // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456")  // 返回123.456，写整数的时候会显示整数

2.字符类型(String)

var a = "Hello"
var b = "world;
var c = a + b; 
console.log(c);  // 得到Helloworld

ps：拼接字符串一般使用“+”

常用方法（类似python中对象调用方法）：

方法	说明
.length	返回长度
.trim()	移除空白
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.charAt(n)	返回第n个字符
.concat(value, ...)	拼接
.indexOf(substring, start)	子序列位置
.substring(from, to)	根据索引获取子序列
.slice(start, end)	切片
.toLowerCase()	小写
.toUpperCase()	大写
.split(delimiter, limit)	分割

.substring(from, to)和.slice(start, end)都是切片取值，但是又有所不同：

string.slice(start, stop)和string.substring(start, stop)：

两者的相同点：
如果start等于end，返回空字符串
如果stop参数省略，则取到字符串末
如果某个参数超过string的长度，这个参数会被替换为string的长度

substirng()的特点：
如果 start > stop ，start和stop将被交换
如果参数是负数或者不是数字，将会被0替换

silce()的特点：
如果 start > stop 不会交换两者
如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)

补充：

ES6中引入了模板字符串。模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

// 普通字符串
`这是普通字符串！`
// 多行文本
`这是多行的
文本`
// 字符串中嵌入变量
var name = "jason", time = "today";
`Hello ${name}, how are you ${time}?`

注意：

如果模板字符串中需要使用反引号，则在其前面要用反斜杠转义。

JSHint启用ES6语法支持:/* jshint esversion: 6 */

3.布尔值(Boolean)

区别于Python，true和false都是小写。

var a = true;
var b = false;

""(空字符串)、0、null、undefined、NaN都是false。

4.null和undefined

null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null（即值被清除了）;
undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined（即没有给这个变量绑定过值）。还有就是函数无明确的返回值时，返回的也是undefined。

null表示变量的值是空(null可以手动清空一个变量的值，使得该变量变为object类型，值为null)，undefined则表示只声明了变量，但还没有赋值。

还不明白，上图吧！

这里就表示的是null，曾经拥有过，但是现在没了

这里表示的就是undefined，从来没有过，没有给变量绑定值的时候就处于undefined状态。

5.对象(Object)

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。

JavaScript 提供多个内建对象，比如 String、Date、Array 等等。

总结：

1.首先Object类型是所有类型的超类，自定义的任何类型，默认继承Object。

2.Object的prototype属性
作用：给类动态地扩展属性和函数。

对象只是带有属性和方法的特殊数据类型。

数组(Array)

数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表。

var a = [123, "ABC"];
console.log(a[1]);  // 输出"ABC"

常用方法：

方法	说明
.length	数组的大小
.push(ele)	尾部追加元素
.pop()	获取尾部的元素
.unshift(ele)	头部插入元素
.shift()	头部移除元素
.slice(start, end)	切片
.reverse()	反转
.join(seq)	将数组元素连接成字符串
.concat(val, ...)	连接数组
.sort()	排序
.forEach()	将数组的每个元素传递给回调函数
.splice()	删除元素，并向数组添加新元素。
.map()	返回一个数组元素调用函数处理后的值的新数组

forEach()

语法：

forEach(function(currentValue, index, arr), thisValue)**
**

参数：

参数	描述
function(currentValue, index, arr)	必需。数组中每个元素需要调用的函数。函数参数:
thisValue	可选。传递给函数的值一般用 "this" 值。如果这个参数为空， "undefined" 会传递给 "this" 值

ps：如果打印处的参数少了，就只打印指定参数的值，不会多打印。同时多了就报错

splice()

语法：

splice(index,howmany,item1,.....,itemX)

参数：

参数	描述
index	必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany	必需。规定应该删除多少元素。必须是数字，但可以是 "0"。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, ..., itemX	可选。要添加到数组的新元素

ps：可以删除多个元素，也可以一次性添加多个元素，或是添加一个列表。

map()

可以跟python中的map()方法放一起记忆，都是映射的作用

语法：

map(function(currentValue,index,arr), thisValue)

参数：

参数	描述
function(currentValue, index,arr)	必须。函数，数组中的每个元素都会执行这个函数函数参数:
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"

sort()注意事项

关于sort()需要注意：

如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。

如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。

function sortNumber(a,b){
    return a - b
}
var arr1 = [11, 100, 22, 55, 33, 44]
arr1.sort(sortNumber)

sort

可以使用以下方式遍历数组中的元素：

var a = [10, 20, 30, 40];
for (var i=0;i<a.length;i++) {
  console.log(i);
}

*补充：*

ES6新引入了一种新的原始数据类型（Symbol），表示独一无二的值。它是JavaScript语言的第7种数据类型。

6.类型查询

typeof "abc"  // "string"
typeof null  // "object"
typeof true  // "boolean"
typeof 123 // "number"

typeof是一个一元运算符（就像++，--，！，- 等一元运算符），不是一个函数，也不是一个语句。

对变量或值调用 typeof 运算符将返回下列值之一：

undefined - 如果变量是 Undefined 类型的
boolean - 如果变量是 Boolean 类型的
number - 如果变量是 Number 类型的
string - 如果变量是 String 类型的
object - 如果变量是一种引用类型或 Null 类型的

7.自定义对象

JavaScript的对象（Object）本质上是键值对的集合（Hash结构），但是只能用字符串作为键。

对象之自定义对象(Object)>>>:类似于python的字典，用花括号来书写。

对象属性是 name:value 对，由逗号分隔。

实例

var person=new Object();  // 创建一个person对象
person.name="Alex";  // person对象的name属性
person.age=18;  // person对象的age属性


var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

五、运算符

1.算术运算符

+ - * / %（取余数） ++(自增1) --(自减1)
	var x=10;
	var res1=x++;  加号在后面	先赋值后自增
	var res2=++x;	加号在前面	 先自增后赋值
	res1;
	10
	res2;
	12

2.比较运算符

	!=(值不等 弱) ==(值相等 弱) ===(值相等 强) !==(值不等 强)
1 == “1”  // true  弱等于
1 === "1"  // false 强等于
ps:所谓的强等于弱等于，表示在比较的时候会不会自动转换类型，弱等于在比较的时候会自动转换类型，而强等于不会。

3.逻辑运算符

	&&(与)	||(或)  !(非)

4.赋值运算符

跟python中的一样

= += -= *= /=

六、流程控制

1、分支结构if

1.单if分支
	if (条件){
        条件成立执行的代码
    }
2.if...else分支
	if(条件){
        条件成立执行的代码
    }else{
        条件不成立执行的代码
    }
3.if...else if...else分支
	if(条件1){
        条件1成立执行的代码
    }else if(条件2){
        条件1不成立条件2执行的代码
    }
    else{
        条件1和2都不成立执行的代码
    }
4.如果分支结构中else if很多还可以考虑使用switch语法
	switch(条件){
        case 条件1:
        	条件1成立执行的代码;
        	break;  如果没有break会基于某个case一直执行下去
        case 条件2:
        	条件2成立执行的代码;
        	break;
        case 条件3:
        	条件3成立执行的代码;
        	break;
       	case 条件4:
        	条件4成立执行的代码;
        	break;
        default:
  			 条件都不满足执行的代码
    }

ps：在使用switch语法的时候，中间的break不能省略，会导致代码的运行流程发生变化。去掉break之后就变成了从符合条件的地方开始运行，直到遇到break停止运行，或是直接运行后续所有的代码。

2、循环结构for和while以及三元运算

for循环
	for(起始条件;循环条件;条件处理){
        循环体代码
    }
	for(let i=0;i<10;i++){
       	 console.log(i)
    }
 	let dd = {'name':'jason','age':18}
   for(let k in dd){
        console.log(k)
    }

while循环
	while(循环条件){
        循环体代码
    }
    
"""
三元运算
	python中:   值1 if 条件 else 值2
	JS中:	   条件?值1:值2
"""

js的循环方式

<script>


    //1 js 的循环 基于索引的循环   python  没有基于索引的循环，python都是基于迭代的循环
    var a = [4, 5, 6, 7]
    for(i=0;i<10;i++){
    for (i = 0; i < a.length; i++) {
        // console.log(i)
        console.log(a[i])
    }}


    // 2 js 的in 循环  拿到的是索引    跟vue的v-for区分
    var a = [4, 5, 6, 7]
    for (i in a) {
        // console.log(i)
        console.log(a[i])
    }

    // 3 es 6语法  of  循环（基于迭代，循环出来的就是值）
    var a = [4, 5, 6, 7]
    for (item of a) {
        console.log(item)
    }


    // 4 数组的方法，forEach可以循环
    var a = [4, 5, 6, 7]
    a.forEach(function (item) {
        console.log('----',item)
    })

    // 5 jq 的循环  循环数组，对象
    var a = [4, 5, 6, 7]
    $.each(a, function (index, item) {
        console.log(index)
        console.log(item)
	// index表示索引，item表示数组中的值
    })


</script>

七、函数

"""
python中函数的定义
    def 函数名(形参):
        '''函数注释'''
        函数体代码
        return 返回值
"""
function 函数名(形参){
    // 函数注释
    函数体代码
    return 返回值
}
# 匿名函数(下方的s1只是给这个匿名函数绑个名称)
var s1 = function(a, b){
  return a + b;
}
# 箭头函数
var f = v => v;
// 等同于
var f = function(v){
  return v;
}

var f = () => 5;
// 等同于
var f = function(){return 5};

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
  return num1 + num2;  
  //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}

注意事项：

1.JS中函数的形参与实参个数可以不对应
传少了就是undefined 传多了不用
2.函数体代码中有一个关键字arguments用来接收所有的实参

function add(a,b){
	console.log(a+b);
	console.log(arguments.length);　						console.log(arguments[0]);
    //arguments相当于将出传入的参数全部包含，这里取得就是第一个元素1
}

add(1,2)
结果如下：
3
2
1

3.函数的返回值如果有多个需要自己处理成一个整体

八、内置对象

Date对象

创建Date对象

//方法1：不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3：参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());

//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒并不直接显示

Date对象的方法：

var d = new Date(); 
//getDate()                 获取日
//getDay ()                 获取星期
//getMonth ()               获取月（0-11）
//getFullYear ()            获取完整年份
//getYear ()                获取年
//getHours ()               获取小时
//getMinutes ()             获取分钟
//getSeconds ()             获取秒
//getMilliseconds ()        获取毫秒
//getTime ()                返回累计毫秒数(从1970/1/1午夜)

JSON对象

跟python 的json模块一样，用于数据的序列化和反序列化。

var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象（反序列化）
var obj = JSON.parse(str1); 
// 对象转换成JSON字符串（序列化）
var str = JSON.stringify(obj1);

RegExp对象

应用正则表达式的对象

定义正则表达式两种方式

var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;

// 正则校验数据
reg1.test('jason666')
reg2.test('jason666')

注意事项

注意事项一：正则表达式中不能有空格

注意事项二:全局匹配时有一个lastIndex属性

// 全局匹配
var s1 = 'egondsb dsb dsb';
s1.match(/s/)
s1.match(/s/g)
//使用match进行匹配的时候，返回的是一个对象，如果有值就会在前面显示出来

var s1 = 'asfdasddfasf aqgwefqwef asdfae'

s1.match(/s/)
结果：['s', index: 1, input: 'asfdasddfasf aqgwefqwef asdfae', groups: undefined]
s1.match(/s/g)
结果：(4) ['s', 's', 's', 's']

var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('egondsb');
reg2.test('egondsb');
reg2.lastIndex;

当我们在正则表达式的后面写上一个g的时候表示全局匹配，这时候光标的移动跟文件的读取相似，当读取到末尾的时候会出现没有数据可读的情况，这时候就会返回false，并且重置光标到开头，我们可以使用lastIndex方法来查看光标目前所在的位置。

注意事项三：test匹配数据不传默认传undefined

// 校验时不传参数
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test();
reg2.test(undefined);

var reg3 = /undefined/;
reg3.test();

九、BOM操作

BOM概念

	BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”
	BOM对象：分为window对象和window子对象（screen对象，location对象，navigator对象，history对象）。

window对象

window对象是BOM顶层对象。

window对象是JS访问浏览器窗口的一个接口

window对象是一个全局对象,声明的所有的全局变量，全局方法函数最终都是window对象的属性或者方法。

一些常用的Window方法：

window.open() ：打开一个新的浏览器窗口，接受四个参数（URL/打开方式/窗口参数/是否取代当前页面历史记录的布尔值）。

window.open('https://www.mzitu.com/','','height=520px,width=521px,top=520px,left=521px');  // 右侧
window.open('https://www.mzitu.com/','','height=250px,width=251px,top=250px,left=251px');  // 左侧

window.close() ：关闭新打开的窗口（仅限open（）打开的窗口）。

window.moveTo()：移动当前窗口。

window.resizeTo()：调整当前窗口的尺寸。

window.innerHeight - 浏览器窗口的内部高度

window.innerWidth - 浏览器窗口的内部宽度

window对象指代的就是浏览器窗口
window.innerHeight;  //  浏览器窗口的高度
150
window.innerWidth;  // 浏览器窗口的宽度
702

window的子对象

navigator对象（了解即可）

浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。

navigator.appName　　// Web浏览器全称
navigator.appVersion　　// Web浏览器厂商和版本的详细字符串
navigator.userAgent　　// 客户端绝大部分信息（爬虫中用于标识自己是一个浏览器）
navigator.platform　　　// 浏览器运行所在的操作系统

screen对象（了解即可）

屏幕对象，不常用。

一些属性：

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

history对象（了解即可）

window.history 对象包含浏览器的历史。

浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用来前进或后退一个页面。

history.forward()  // 前进一页
history.back()  // 后退一页
history.go(参数)  前进后退功能，参数如果是1前进一个页面，如果是-1后退一个页面，如果是N则前进或后退N个页面

location对象

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

常用属性和方法：

location.href  
// 获取URL
window.location.href
// 获取当前页面所在的网址(URL)，也可以再加赋值符号和网址，即跳转新页面
location.href="URL" 
// 跳转到指定页面
location.reload() 
// 重新加载页面
window.location.reload()
// 刷新当前页面

ps：window可以省略不写

其他方法拓展

location.hash 返回URL中的hash（#号后跟零或多个字符）    

location.host 返回服务器名称和端口号

location.port 返回服务器端口号  

location.pathname 返回URL中的目录和文件名

location.hostname 返回不带端口号的服务器名称
 
location.protocol 返回页面使用的协议（http://或https://)
  
location.search 返回URL的查询字符串，字符串以问号开头

弹出框

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

警告框

警告框经常用于确保用户可以得到某些信息。

当警告框出现后，用户需要点击确定按钮才能继续进行操作。

语法：

alert("你看到了吗？");

确认框（了解即可）

确认框用于使用户可以验证或者接受某些信息。

当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。

如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。

语法：

confirm("你确定吗？")

提示框（了解即可）

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

语法：

prompt("请在下方输入","你的答案")

计时相关

通过使用 JavaScript，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

setTimeout()

经过一定的毫秒后，执行第一个参数中的JS语句（只执行一次）。

语法：

var t=setTimeout("JS语句",毫秒)

setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。

setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。

第二个参数指示从当前起多少毫秒后执行第一个参数（1000 毫秒等于一秒）。

clearTimeout()

取消定时任务

语法：

clearTimeout(setTimeout_variable)

举个例子：

// 在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout设置
clearTimeout(timer);

setInterval()

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法：

setInterval("JS语句",时间间隔)

返回值

一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

clearInterval()

clearInterval() 方法可取消由 setInterval() 设置的 timeout。

clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

语法：

clearInterval(setinterval返回的ID值)

举个例子：

// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);

弹出三次警告弹窗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    // function showMsg() {
    //     alert('快来爬取美女图片吧~')
    // }
    // let t = setTimeout(showMsg, 3000)  // 等待3000毫秒执行
    // clearTimeout(t)  // 取消任务
    let s;
    function func() {
        alert('快来爬取美女图片吧~')
    }
    s = setInterval(func, 3000)  // 每隔3000毫秒执行一次

    function inner() {
            clearInterval(s)
        }
    setTimeout(inner, 9000)
</script>
</body>
</html>

十、DOM操作

理解JS中的DOM

1.DOM是文档对象模型：当网页被加载时，浏览器会创建页面的文档对象模型。

2.通过 DOM，可访问 JavaScript HTML 文档的所有元素。

3.DOM 模型被构造为对象的树：通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

ps：既然DOM操作是通过js代码来操作标签，所以我们需要先学习如何查找标签之后才能给标签绑定一些JS代码(DOM操作)，这里类似css的学习过程。

十一、BOM和DOM的对比（简单比较）

1.DOM 是为了操作文档出现的 API，document 是其的一个对象
2.BOM 是为了操作浏览器出现的 API，window 是其的一个对象

3.BOM是浏览器对象模型，DOM是文档对象模型，前者是对浏览器本身进行操作，而后者是对浏览器（可看成容器）内的内容进行操作

十二、查找标签

预备知识

1.js中变量名的命名风格推荐是驼峰体
2.js代码查找到的标签如果需要反复使用可以用变量接收规律 xxxEle

查找标签的方式

1.获取HTML元素（三种方法）

1）根据id获取HTML元素：
查找到的结果时一个标签对象

document.getElementById("id名")
document.getElementById('d1')
	结果就是标签对象本身

2）根据标签名获取HTML元素：
查找到的结果时一个数组，在一个对象内部

document.getElementsByTagName("标签名");
document.getElementsByClassName('c1')
	结果是数组里面含有多个标签对象

3）根据类名获取HTML元素：
查找到的结果时一个数组，在一个对象内部

document.getElementsByClassName("类名");
document.getElementsByTagName('span')
	结果是数组里面含有多个标签对象

2.改变HTML

1）改变页面中的 HTML 内容

document.getElementById(id).innerHTML=新的 HTML

涉及到DOM操作的JS代码应该放在文档的哪个位置。

间接查找

parentElement            父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素

十三、操作节点

createElement(标签名)：创建节点（创建标签）

appendChild()：添加标签到某个标签的尾部

removeChild()：删除HTML节点（删除标签）

insertBefore(newnode,某个节点)：添加新标签到该标签之前。

somenode.replaceChild(newnode, 某个节点)

获取文本节点的值：

var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML

设置文本节点的值：

var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"

attribute操作

js代码创建一个标签

let aEle = document.createElement('a')

js代码操作标签属性

aEle.href = 'http://www.lsmpx.com/'  只能添加默认的属性
setAttribute()兼容默认属性和自定义属性
getAttribute("age")
removeAttribute("age")

js代码操作标签文本

aEle.innerText = '这个很攒劲!'

js代码查找div标签并将a追加到div内部

let divEle = document.getElementsByTagName('div')[0]
divEle.appendChild(aEle)


.innerText  		 获取标签内部所有的文本内容
.innerText = '文本'  替换/设置标签内部的文本(不识别标签语法)

.innerHTML			获取标签内部所有的标签包含文本
.innerHTML = '文本'  替换/设置标签内部的文本(识别标签语法)

attribute操作

attribute方法用于获取、修改、设置标签的属性值

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")

// 自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src="..."

十四、获取值操作

1.针对用户输入的和用户选择的标签
	标签对象.value
2.针对用户上传的文件数据
	标签对象.files    	
    fileList  [文件对象、文件对象、文件对象]
    当上传很多个文件的时候会产生文件对象列表
	标签对象.files[0]	 
    这时候使用索引取值获得文件对象

十五、class与css操作

js操作标签css样式

标签对象.style.属性名(下划线没有 变成驼峰体)

1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如：

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

2.js操作标签class属性

	标签对象.classList.add()	添加类
	标签对象.classList.contains()	存在返回true，否则返回false
    标签对象.classList.remove()	删除指定类
    标签对象.classList.toggle()	存在就删除，否则添加

十六、事件

概念

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。

事件可以简单的理解为通过js代码给html标签绑定一些自定义的功能

常用事件

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               // 练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。

绑定事件的多种方式

	<!--绑定事件的方式1-->
    <button onclick="showMsg()">快按我</button>
    <!--绑定事件的方式2-->
    <input type="button" value="快快快" id="d1">

        <script>
            function showMsg() {
                let msg = prompt('你确定要这样吗?');
                console.log(msg)
            }

            let inputEle = document.getElementById('d1');
            inputEle.onclick = function () {
                alert('谁在那里点我!!!')
            }
        </script>

事件函数中的this关键字

this指代的就是当前被操作的标签对象本身	
如果事件函数内有多层嵌套那么最好在一开始用变量存储一下防止后续变化

onload方法

当我们给页面上的元素绑定事件的时候，必须等到文档加载完毕。因为我们无法给一个不存在的元素绑定事件。

window.onload事件在文件加载过程结束的时候触发。此时，文档中的所有对象都位于DOM中，并且所有图像，脚本，链接和子框架都已完成加载。

XXX.onload 等待XXX加载完毕之后再执行后面的代码

注意：.onload()函数存在覆盖现象。

十七、事件实战案例

登陆案例

<input type="text" value="游戏机" id="d1">

<script>
        let inputEle = document.getElementById('d1')
        inputEle.onfocus = function () {
            this.value = ''
        }
        inputEle.onblur = function () {
            this.value = '下次再来哟!'
        }
</script>


    <p>username:
        <input type="text" id="d1">
        <span style="color: red"></span>
    </p>
    <p>password:
        <input type="text" id="d2">
        <span style="color: red"></span>
    </p>
    <button id="suBtn">提交</button>

    <script>
        // 1.查找提交按钮的标签
        subEle = document.getElementById('suBtn')
        // 2.给按钮标签绑定点击事件
        subEle.onclick = function (){
            // 3.查找获取用户输入的标签并获取数据
            let userNameEle = document.getElementById('d1')
            let passWordEle = document.getElementById('d2')
            if(userNameEle.value === 'jason'){
                userNameEle.nextElementSibling.innerText = '用户名不能是Jason'
            }
            if(passWordEle.value === '123'){
                passWordEle.nextElementSibling.innerText = '密码不能是123'
            }
        }
    </script>

select联动

省:
<select name="" id="d1">

</select>

市:
<select name="" id="d2">

</select>
<script>
    let data = {
        "河北": ["廊坊市", "邯郸市"],
        "北京": ["朝阳区", "海淀区"],
        "山东": ["威海市", "烟台市"],
        "安徽": ["芜湖市", "合肥市"],
        "上海": ["浦东新区", "静安区"]
    }
    // 提前查找好省和市的select标签
    let proSeEle = document.getElementById('d1');
    let citySeEle = document.getElementById('d2');
    // 1.获取所有的省信息
    for (let pro in data) {
        // 2.创建option标签
        let proOpEle = document.createElement('option');
        // 3.添加文本及属性
        proOpEle.innerText = pro;
        proOpEle.setAttribute('value', pro);
        // 4.将创建好的option标签添加到省下拉框中
        proSeEle.appendChild(proOpEle)
    }
    // 5.给省标签绑定文本域变化事件 onchange
    proSeEle.onchange = function () {
        citySeEle.innerHTML = '';  // 每次操作市之前清空市数据
        // 6.获取用户选择的省信息 根据省获取市信息
        let targetProData = this.value;
        let cityDataList = data[targetProData];
        // 7.循环获取每一个市信息 创建option标签 添加到市下拉框中
        for (let i = 0; i < cityDataList.length; i++) {
            let cityOpEle = document.createElement('option');
            cityOpEle.innerText = cityDataList[i];
            cityOpEle.setAttribute('value', cityDataList[i]);
            citySeEle.appendChild(cityOpEle)
        }
    }
</script>

十八、jQuery类库

jQuery介绍

jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

jQuery的优势

一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

ps：因为IE浏览器不兼容，所以有些时候我们不能使用jQuery，需要单独编写一份js代码

优势概括：

1.加载速度快
2.选择器更多更好用
3.一行代码走天下
4.支持ajax请求(重点)
5.兼容多浏览器

jQuery的中文使用说明文档

文档地址：https://jquery.cuishifeng.cn/

jQuery的两种导入方式

1.下载核心文件到本地引入(没有网络也可以使用)

官网地址：https://jquery.com/

步骤一：打开官网点击download jQuery

步骤二：点击下面两个选项可以分别得到压缩过的和未压缩的jQuery文件

步骤三：点击跳转后，会进入一个新的网页，我们先按F12打开浏览器的控制台功能

步骤四：保持控制台窗口存在的情况下按F5刷新页面，然后点击控制台中的Network选项，接着点击all，就能看到左边出现了一个jquery文件，后缀名中有.min的就是压缩过的jquery文件

步骤五：左键点击左侧的jquery文件，选中后右键，在出现的弹窗中点击最下方的save as...选项，然后保存到本地即可

下载后直接导入使用

<script src="jQuery3.6.js"></script>

2.CDN网络资源加载(必须有网络才可以使用)

CDN介绍

CDN 是构建在数据网络上的一种分布式的内容分发网。 CDN 的作用是采用流媒体服务器集群技术，克服单机系统输出带宽及并发能力不足的缺点，可极大提升系统支持的并发流数目，减少或避免单点失效带来的不良影响。

简单来说，就是在全国各地部署了很多分布式的小服务器，将一些数据保存到这些小服务器中，当有很远的客户端远程请求的主服务器的时候，如果一些资源（比如图片等资源）在小服务器上有保存，就会直接发送给客户端，加快访问速度。

我使用的是这个网址：https://www.bootcdn.cn/

打开后进入下图界面，然后点击jquery图标

这时候我们就可以根据需求选择导入方式了，选择复制链接就是复制网络地址，赋值scrip标签就省去了一部分编写的步骤。

复制链接
https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js
   https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js
复制scrip标签
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>

jQuery的其他知识点

jQuery导入之后需要使用关键字才可以使用

默认的关键字就是jQuery但是不好输入，因此产生了快捷符号>>>: $

jQuery封装了JS代码，让编写更简单，但是有时候JS代码更快

js代码与jQuery代码对比（执行修改颜色的代码）

    let pEle = document.getElementsByTagName('p')[0]
    undefined
    pEle.style.color = 'red'
    'red'
    pEle.nextElementSibling.style.color = 'green'

    $('p').first().css('color','yellow').next().css('color','blue')

十九、标签对象与jQuery对象

1.不同的对象能够调用的方法是不同的
在编写代码的时候一定要看清楚手上是什么对象
2.两者可以互相转换

	标签对象转jQuery对象		
    	$(标签对象)
 	jQuery对象转标签对象
    	jQuery对象[0]

二十、jQuery查找标签

可以和css的选择器对比记忆，基本相似

基本选择器

id选择器：

$("#id")

标签选择器：

$("tagName")

class选择器：

$(".className")

配合使用：

$("div.c1")  // 找到有c1 class类的div标签

所有元素选择器：

$("*")

组合选择器：

$("#id, .className, tagName")

层级选择器

x和y可以为任意选择器

$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y

基本筛选器

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

$('li:first')	优化   $('li').first()

例子：

$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

属性选择器

[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于

例子：

// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

表单筛选器

:text
:password:file
:radio
:checkbox
:submit
:reset
:button

例子：

$(":checkbox")  // 找到所有的checkbox

表单对象属性:

:enabled
:disabled
:checked
:selected

	$(':checked')		checked与selected都会找到
 	$(':selected')		selected

例子：

找到可用的input标签

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

$("input:enabled")  // 找到可用的input标签

找到被选中的option：

<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">广州市</option>
  <option value="shenzhen">深圳市</option>
</select>

$(":selected")  // 找到所有被选中的option

筛选器方法

下一个元素：

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

上一个元素：

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

父亲元素：

$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

儿子和兄弟元素：

$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

查找

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

$("div").find("p")

等价于$("div p")

筛选

筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

$("div").filter(".c1")  // 从结果集中过滤出有c1样式类的

等价于 $("div.c1")

补充：

.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素

示例：左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>左侧菜单示例</title>
  <style>
    .left {
      position: fixed;
      left: 0;
      top: 0;
      width: 20%;
      height: 100%;
      background-color: rgb(47, 53, 61);
    }

    .right {
      width: 80%;
      height: 100%;
    }

    .menu {
      color: white;
    }

    .title {
      text-align: center;
      padding: 10px 15px;
      border-bottom: 1px solid #23282e;
    }

    .items {
      background-color: #181c20;

    }
    .item {
      padding: 5px 10px;
      border-bottom: 1px solid #23282e;
    }

    .hide {
      display: none;
    }
  </style>
</head>
<body>

<div class="left">
  <div class="menu">
    <div class="item">
      <div class="title">菜单一</div>
      <div class="items">
        <div class="item">111</div>
        <div class="item">222</div>
        <div class="item">333</div>
    </div>
    </div>
    <div class="item">
      <div class="title">菜单二</div>
      <div class="items hide">
      <div class="item">111</div>
      <div class="item">222</div>
      <div class="item">333</div>
    </div>
    </div>
    <div class="item">
      <div class="title">菜单三</div>
      <div class="items hide">
      <div class="item">111</div>
      <div class="item">222</div>
      <div class="item">333</div>
    </div>
    </div>
  </div>
</div>
<div class="right"></div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script>
  $(".title").click(function (){  // jQuery绑定事件
    // 隐藏所有class里有.items的标签
    // $(".items").addClass("hide");  //批量操作
    // $(this).next().removeClass("hide");
    
    // jQuery链式操作
    $(this).next().removeClass('hide').parent().siblings().find('.items').addClass('hide')
  });
</script>

左侧菜单栏

二十一、操作标签

样式操作（class操作）

样式类

ps：与js语法对比

1.添加指定的CSS类名
	addClass()							classList.add()
    
2.移除指定的CSS类名
    removeClass() 						classList.remove()
    
3.判断样式是否存在
    hasClass() 							classList.contains()
    
4.切换CSS类名，如果有就移除，如果没有就添加进去
    toggleClass()						classList.toggle()

示例：开关灯和模态框

CSS

css("color","red")//DOM操作：tag.style.color="red"

示例：

$("p").css("color", "red"); //将所有p标签的字体设置为红色

位置操作

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。

和 .position()的差别在于： .position()是相对于相对于父级元素的位移。

尺寸

height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

文本操作

ps：与js语法对比

HTML代码：

html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容

html()					innerHTML

文本值：

text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容

text()					innerText

值：

val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值

val()					value

例如：

<input type="checkbox" value="basketball" name="hobby">篮球
<input type="checkbox" value="football" name="hobby">足球

<select multiple id="s1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

设置值：

$("[name='hobby']").val(['basketball', 'football']);
$("#s1").val(["1", "2"])

示例：

获取被选中的checkbox或radio的值：

<label for="c1">女</label>
<input name="gender" id="c1" type="radio" value="0">
<label for="c2">男</label>
<input name="gender" id="c2" type="radio" value="1">

可以使用：

$("input[name='gender']:checked").val()

文件：

jQuery对象[0].files	  files[0]

创建标签

document.createElement()     $('<a>')

属性操作

用于ID等或自定义属性：

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性

等于把js中的xxxAttribute()操作全部整合成了attr()\removeAtter()方法

ps：attr针对动态变化的属性获取会失真

prop('checked') prop('selected')

用于checkbox和radio

prop() // 获取属性
removeProp() // 移除属性

注意：

在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")。

<input type="checkbox" value="1">
<input type="radio" value="2">
<script>
  $(":checkbox[value='1']").prop("checked", true);
  $(":radio[value='2']").prop("checked", true);
</script>

prop和attr的区别：

attr全称attribute(属性)

prop全称property(属性)

虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。

举个例子：

<input type="checkbox" id="i1" value="1">

针对上面的代码，

$("#i1").attr("checked")  // undefined
$("#i1").prop("checked")  // false

可以看到attr获取一个标签内没有的东西会得到undefined，而prop获取的是这个DOM对象的属性，因此checked为false。

如果换成下面的代码：

<input type="checkbox" checked id="i1" value="1">

再执行：

$("#i1").attr("checked")   // checked
$("#i1").prop("checked")  // true

这已经可以证明attr的局限性，它的作用范围只限于HTML标签内的属性，而prop获取的是这个DOM对象的属性，选中返回true，没选中返回false。

接下来再看一下针对自定义属性，attr和prop又有什么区别：

<input type="checkbox" checked id="i1" value="1" me="自定义属性">

执行以下代码：

$("#i1").attr("me")   // "自定义属性"
$("#i1").prop("me")  // undefined

可以看到prop不支持获取标签的自定义属性。

总结一下：

对于标签上有的能看到的属性和自定义属性都用attr
对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。

文档处理

添加到指定元素内部的后面

$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B

添加到指定元素内部的前面

$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

添加到指定元素外部的后面

$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

添加到指定元素外部的前面

$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

移除和清空元素

remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。

例子：

点击按钮在表格添加一行数据。

点击每一行的删除按钮删除当前行数据。

替换

replaceWith()
replaceAll()

克隆

clone(bool)// 参数

参数 bool 是一个布尔值，可规定是否复制元素的所有事件处理，取值为 true 或 false，默认值为 false。true 表示不仅复制元素，还会复制元素所绑定的事件。false 表示仅仅复制元素，但不会复制元素所绑定的事件。

二十二、jQuery事件

把js中的各种事件简化了

JS绑定事件

	标签对象.on事件名 = function(){}

jQuery事件绑定

	方式1:
		jQuery对象.事件名(function(){})
 	方式2:
    	jQuery对象.on('事件名称',function(){}

ps:默认就用方式1，不行了再用方式2。

常用事件

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

事件绑定

.on( events [, selector ],function(){})

events：事件
selector: 选择器（可选的）
function: 事件处理函数

移除事件

.off( events [, selector ][,function(){}])

off() 方法移除用 .on()绑定的事件处理程序。

events：事件
selector: 选择器（可选的）
function: 事件处理函数

阻止后续事件执行

return false; // 常见阻止表单提交等
e.preventDefault();

注意：

像click、keydown等DOM中定义的事件，我们都可以使用.on()方法来绑定事件，但是hover这种jQuery中定义的事件就不能用.on()方法来绑定了。

想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件：

$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件
    $(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件
    $(this).removeClass('hover');
});

二十三、事件相关补充

阻止事件冒泡

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <script>
        $(function () {
            
        })
    </script>
</head>
<body>
    <div>div
        <p>div>p
            <span>div>p>span</span>
        </p>
    </div>
    <script>
        $('div').click(function () {
            alert('我是div')
        })
        $('p').click(function () {
            alert('我是p')
            return false
        })
        $('span').click(function (e) {
            alert('我是span')
            // return false
            e.stopPropagation()
        })
    </script>
</body>
</html>

情况说明：

当return false和e.stopPropagation()被注释后，会出现调用内部的span标签是同时弹出三个标签的点击事件，点击p标签的时候，也会出现div标签的点击事件。

解决方法：

当我们在p标签和span标签的点击事件下方加上retun false或是e.stopPropagation()都可以解决事件的冒泡现象。

等待页面加载完毕再执行代码

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

两种写法：

$(document).ready(function(){
// 在这里写你的JS代码...
})

简写：

$(function(){
// 你在这里写你的代码
})

文档加载完绑定事件，并且阻止默认事件发生：

与window.onload的区别

window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）

事件委托

事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。

主要针对动态创建的标签也可以使用绑定的事件

示例：

将body内所有的单击事件委托给button标签执行

$('body').on('click','button',function(){
  // 事件
})

二十四、jQuery动画效果(了解)

动画效果

// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])

自定义动画示例(点赞特效)：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>点赞动画示例</title>
  <style>
    div {
      position: relative;
      display: inline-block;
    }
    div>i {
      display: inline-block;
      color: red;
      position: absolute;
      right: -16px;
      top: -5px;
      opacity: 1;
    }
  </style>
</head>
<body>

<div id="d1">点赞</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
  $("#d1").on("click", function () {
    var newI = document.createElement("i");
    newI.innerText = "+1";
    $(this).append(newI);
    $(this).children("i").animate({
      opacity: 0
    }, 1000)
  })
</script>
</body>
</html>

二十五、补充

.each

jQuery.each(collection, callback(indexInArray, valueOfElement))：

描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。

li =[10,20,30,40]
$.each(li,function(i, v){
  console.log(i, v);//index是索引，ele是每次循环的具体元素。
})

输出：

.each(function(index, Element))：

描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。

.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。

// 为每一个li标签添加foo
$("li").each(function(){
  $(this).addClass("c1");
});

注意: jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的 .each()方法：

也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了：

$("li").addClass("c1");  // 对所有标签做统一操作

注意：

在遍历过程中可以使用 return false提前结束each循环。

终止each循环

return false；

伏笔...

.data()

在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

.data(key, value):

描述：在匹配的元素上存储任意相关数据。

$("div").data("k",100);//给所有div标签都保存一个名为k，值为100

.data(key):

描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。

$("div").data("k");//返回第一个div标签中保存的"k"的值

.removeData(key):

描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。

$("div").removeData("k");  //移除元素上存放k对应的数据

示例：

模态框编辑的数据回填表格

二十六、Bootstrap页面框架

Bootstrap页面框架

使用Bootstrap页面框架，就相当于使用别人已经提前写好了的一大堆css和js，我们只需要引入之后按照人家规定好的操作方式即可使用所有的样式和功能。

官网地址：https://v3.bootcss.com/

点击下载Bootstrap进入下方页面

这里我们下载v3的版本，如果需要使用别的版本，在上方更换即可。

文件结构
bootstrap.css
bootstrap.js
ps:如果我们想要在js中使用Bootstrap是需要依赖于jQuery的

CDN的导入

网址：https://www.bootcdn.cn/twitter-bootstrap/

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

pycharm自动提示问题

当我们第一次在pycharm中使用Bootstrap的时候会发现在编写代码的时候并不会出现自动提示。

解决方法就是先在pycharm中本地导入几次，之后在使用的时候就会出现自动提示了。

二十七、核心部分讲解

我们在使用Bootstrap的时候其实就是给需要添加样式的标签添加class类，添加了对应的类，就可以产生对应的美化效果。

官网教学文档：https://v3.bootcss.com/css/#forms-horizontal

其他文档也在官网

部分功能介绍

布局容器
	class = "container"				
    网页两侧有留白
 	class = "container-fluid"		 
    网页两侧没有留白
栅格系统
	class = "row"					
    一行均分12份（或是把所占空间分成十二份）
	class = "col-md-8"			 
    划分一行的12份，取其中的八份
屏幕参数
针对不同的屏幕尺寸，可以设置不同的划分方式，也叫响应式布局
	col-md-6 col-xs-2 col-sm-3 col-lg-3
栅格偏移
	col-md-offset-3
    右移三个栅格空间

二十八、重要样式

1.表格样式
	<table class="table table-hover table-striped">
	颜色
 	<tr class="success">
2.表单标签
	class = "form-control"
3.按钮组
	class = "btn btn-primary btn-block"

二十九、组件

1.图标
	<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
    
如果想要获取更多的图标可以从下方的网站获取
	https://fontawesome.com.cn/
导入方式一：本地导入
他需要下载一个font文件包，类似Bootstrap一样的导入方式
导入方式二：CDN
CDN网址：https://www.bootcdn.cn/font-awesome/
    
2.导航条
	class="navbar navbar-inverse"
3.其他

posted @ 2022-12-04 17:52 致丶幻阅读(38) 评论(0) 编辑收藏举报

刷新页面返回顶部

zhihuanzzh

前端知识点

前端前戏

一、前端与后端的概念

什么是前端开发？

什么是后端？

学习前端的目的

前端三剑客

二、前端前戏

三、HTTP协议

1、四大特性

2、报文格式

3、响应状态码

HTML部分

一、HTML概览

1.HTML简介

2.HTML注释语法

3.HTML文档结构

4.HTML标签分类

二、预备知识

三、head内常见标签

四、body内基本标签

1.标题系列标签

2.段落标签

3.部分其他标签

4.换行与分割线

5.图像标签

五、标签的分类方式二

块级标签

行内标签

六、常见符号

七、body内布局标签

八、body内常用标签

小知识点

定义超链接标签< a >

img标签——图片标签

九、列表标签

十、表格标签

十一、表单标签

表单标签作用

表单的组成

十二、表单标签的补充说明

1.用于获取用户数据的标签至少应该含有name属性

2.如果不需要用户填写数据 只需要选择 那么我们需要自己填写value

3.针对input标签理论上应该配一个label标签绑定 但是也可以不写

4.标签的属性如果和属性值相等 那么可以简写

5.针对选择类型的标签可以提前设置默认选项

6.下拉框与文件上传可以复选

css部分

一、CSS：层叠样式表

css 介绍

如何查找标签

学习css的流程

css语法基础知识

二、CSS选择器

三、选择器优先级

四、CSS样式调节

字体属性

字体大小

字重（粗细）

文本颜色

文字属性

文字对齐

文字装饰

首行缩进

背景属性

五、边框

边框简介

border-style——边框样式

border-width——边框宽度

border-color——边框颜色

六、display属性

七、CSS盒子模型

概念

margin外边距

padding内填充

八、浮动

float

三种取值

clear

2.如果不需要用户填写数据只需要选择那么我们需要自己填写value

3.针对input标签理论上应该配一个label标签绑定但是也可以不写

4.标签的属性如果和属性值相等那么可以简写