华清远见-重庆中心-前端技术个人总结

JS

js简介

Javascript简称JS，是由网景（NetScape）推出的脚本语言，是一门轻量级，弱类型，面对对象的解释型语言。弱类型，没有数据类型限制，声明变量时不需要指定数据类型。解释型 不需要预先编译，边解释边运行，浏览器就是一个解释器。脚本(Script) 一系列的指令

js的作用

HTML用于定义页面的内容

CSS用于设置内容的样式

JS用于控制HTML元素的行为

在页面中动态嵌入HTML元素

可以操作浏览器

可以和用户数据交互

JS的组成

1.ECMAScript语法

简称ES，是JS的语法规范，比如数据类型，流程控制语句等

２.DOM（Document　Object　Model）　文档对象模型

文档指HTML页面，可以通过DOM控制页面中的元素

3.BOM（Browser　Object　Model）　浏览器对象模型

可以通过BOM控制浏览器的行为

JS中数据类型分为原始值（基本类型）和对象（复杂类型）

原始值

1.Number 数值

整数1

小数1.2

特殊值 NaN（非法数值）

infinity 无限大的数字

2.BigInt 大整数

3.String 字符串

转义字符 \：let str = "这是一个双引号\"\"。"

模板字符串 ``：let str = `这是一个模板字符串`

4.Boolean 布尔值

true

false

5.Null 空值

含义：对象类型的空引用（空指针）

6.Undefined 未定义

变量声明但未赋值，则这个变量就是undefined

7.Symbol

对象

Object

类型转换

1.boolean 转换为其他类型

转换为数值 Number()

转换为字符串 String()

隐式转换 非字符串+''

2.Number 转换为其他类型

转换为boolean Boolean()

0为false 非0数值为true

转换为字符串 String()

3.字符串 转换为其他类型

转换为boolean Boolean()

空值为false 有值为true

转换为number Number()

"111"为111，不是数值类型的为NaN，在数字类型的字符串前加正号(+)，可以隐式转换为number类型

运算符

算术运算符（双目）

+ - * / %

注意：

1.字符串参与算术运算时，如果为数字类型，会当作数值类型来运算，先将字符串隐式转换为数值再参与运算

2.运算数值显示正常结果，显示小数

关系运算符

> < >= <= == === !=

注意：

1.==和!= 只检查数值是否相等，不检查类型

2.===和!== 判断值和数据类型是否相等

逻辑运算符

&& || !

注意：

1.&& 短路效果 比如：表达式1 && 表达式2 当表达式1为false 则表达式2不会执行

2.|| 短路效果 比如：表达式1 && 表达式2 当表达式1为true 则表达式2不会执行

赋值运算符

= += -= *= /= %=

注意：

1.运算顺序：从右到左

自增自减运算符

++ --

条件运算符（三目）

表达式1 ? 表达式2:表达式3 比如 3>2?"ok":"no"

表达式1为true 返回表达式2

表达式为false 返回表达式3

运算符的优先级

1.()

2.单目运算符 ！++ --

3.算术运算符 * / % + -

4.关系运算符 > < >= <= == != === !==

5.逻辑运算符 && ||

6.条件运算符

7.赋值运算符

jQuery

jQuery的引入和使用

引入jQuery库，就是向这个网页添加了一个函数jQuery/$

$是jQuery的核心函数，jQuery的所有功能都是通过这个函数来进行的

DOM和BOM

DOM

DOM简介

DOM Document Object Model 文档对象模型

- Document 文档，这里指整个网页html

- Object DOM将整个网页都抽象转换为了对象

- Model 模型是指文档中个对象之间的关系 比如父子关系，兄弟关系

事件绑定

事件：用户和页面之间发生的交互行为，比如：当用户点击鼠标时，就修改背景颜色

总之：当某种情况发生时，就执行了一段代码，完成了一些操作，这里的某种情况就是事件

如何为一个元素绑定事件

1. 用元素的addEventListener('事件名称',事件处理函数名)方法绑定

步骤：

1.获取元素对象

2.声明一个事件处理函数

3.给元素对象添加事件监听器，也就是调用addEventListener方法

2. 为元素的特定属性设置事件处理函数

特定属性： 带有on开头的属性

元素对象.事件属性名 = function(){//代码}

注意：这个方法可以为一个元素绑定多个事件，但是一个事件只能绑定一个处理函数

3. 直接在标签中设置事件属性

<button 事件属性名="函数名()">点我</button>

注意函数名后有括号，因为是事件触发的时候调用函数

注意：这个方法可以为一个元素绑定多个事件，一个事件可以绑定多个处理函数

解绑事件

元素对象.removeEventListener('要解绑的事件','这个事件对应的要解绑的处理函数')

操作标签的属性

1.获取：元素对象.属性名

修改：元素对象.属性名 = 新的属性值

2.setAttribute('属性名','属性值') 为元素设置属性

getAttribute('属性名') 获取元素的属性值

removeAttribute('属性名') 删除元素的属性

定时器

在JS中定时器就是一种函数，这种函数可以设置在指定时间后触发一段代码

1.setTimeout(要执行的函数,延迟的时长(单位：ms));

返回值：计时器对应的编号id

停止定时器 clearTimeout(timerId)

2.循环计时器

setInterval(要执行的函数,每次循环间隔的时间)

停止计时器clearInterval(计时器编号)

BOM

BOM简介

BOM浏览器对象模型

BOM为我们提供了一组对象， 通过这组对象可以完成对浏览器的名种操作

常见的BOM对象

window代表浏览器窗口, 是全局对象

navigator代表浏览器对象， 可用于识别浏览器

Location浏览器的地址栏信息

History浏览器的历史纪录(控制浏览器的前进和后退)

screen屏幕的信息

BOM对象对象都是作为window对象的属性保存的，可以直接在js中访问

window的相关属性和方法，调用时可以省略window这个词

CSS

CSS简介

网页的web标准：

-结构 (HTML)

-样式 (CSS)

-行为 (JavaScript)

CSS

- 层叠样式表 Cascading Style Sheets

- 用来设置网页元素的外观样式，比如颜色，背景，间距等等

代码规范

- 语法

选择器 {

//样式声明，一个或多个属性

属性名: 属性值;

属性名: 属性值;

}

代码风格

选择器，属性可以是全小写或者全大写，但是推荐小写

选择器和括号直接有一个空格

冒号和属性值之间有一个空格

CSS的使用方法

行内样式 (内嵌、内联样式)

-位置

在元素标签里定义一个style属性，它的属性值就是样式属性键值对

- 特点

只能对当前的一个元素起作用，多个元素需要一个个设置，不方便修改

行内样式优先级最高，基本不能通过其他两种方式修改

开发时尽量少用

内部样式

- 位置

在页面head标签中的style标签里定义

- 特点

可以同时为多个标签定义相同的样式，修改方便

只对当前页面起作用，不能跨页面使用

外部样式

- 位置

定义一个独立的.css文件，通过link引入到需要设置样式的HTML文件中

<link rel="stylesheet" href="css文件的地址">

- 特点

可以跨页面使用

选择器

标签选择器

选择器的作用

1. 用来匹配页面中符合条件的元素

2. 为这些元素设置样式

选择器的语法

- 语法

标签名 {} 标签名：h1，p，span...

- 特点

找到body下所有同名的标签

当页面有多个同名标签时，没有办法为某个标签单独设置样式

id选择器

- 使用方法

1.为对应的标签设置id属性

2.在css中通过#id属性值匹配该标签

- 一个页面中id属性的值不能重复

类选择器

- 使用方法

1.为对应的标签设置class属性，属性值称为类名

2.在css中通过.类名 匹配这些标签

- 和id选择器的区别

- 类名可以在一个页面中重复使用，只要需要设置的样式相同，就可以使用

- class属性可以有多个属性值，类名与类名之间用空格隔开

- 开发时通常用类选择器

通配符选择器

- 语法

* {}

- 特点

1.选中body中所有的元素

2.通常用于清楚默认样式

后代选择器

- 语法：

祖先选择器a 后代选择器b {}

两个选择器直接有一个空格，这两个选择器可以是标签名，类名，id选择器

- 特点

选中a下面的所有的b，b可以是a的儿子，孙子，曾孙...

子代选择器

-语法

父亲选择器a > 儿子选择器b {}

- 特点

b是a的儿子

伪类选择器

- 用于处于特定状态的元素的类（伪的，不是真的写在class里的类）

特定状态：比如某个元素的第一个子元素，鼠标移上去时的元素

-语法

标签名:伪类 {}

属性选择器

[标签的属性名] 选中带有这个属性名的标签

[属性名='属性值'] 选中带有这个属性名且属性值也相等的标签

CSS的三大特性

1. 继承

在祖先元素中设置的样式，同样应用到了它的后代元素中

不是所有的样式都会继承

常见可以继承的样式

color font-, text-, line-

常见不可以继承的样式

背景相关 background-，布局相关 width

2. 优先级

- 样式的冲突需要用优先级来解决

- 什么时候产生冲突

用不同的选择器选中了同一些元素，并且为相同的属性设置不同的值

- 当发生冲突时，优先级高的选择器设置的样式被应用

选择器 简单权重 规范权重

!important 无限大 无限大 慎用！！！

行内样式style 1000 (1,0,0,0)

id选择器 100 (0,1,0,0)

类选择器 10 (0,0,1,0)

标签选择器 1 (0,0,0,1)

继承 0 (0,0,0,0)

比较优先级时，把所有的选择器权重相加，在同量级下，相加的和越大的，优先级越高

算法案例：

1.选择器权重相加，值越大的优先级越高

div p {} 1+1 =2

.three p {} 10+1 =11 被应用

2.权重相加的和，不会越级进位

11个div {} 1+1+1+..+1=11

.three {} 10 不能越级，所以仍然是类选择器被应用

3.规范权重的比较

(4,3,2,1) 从左往右分为4档

.three (0,1,0) 类选择器，在第2档加1

#three (1,0,0) id选择器，在第3档加1

.three #test (1,1,0)

从左往右，第4档有1的比没有1的优先级高

如果第4档相同，那么比较第3档，第三档有1的比没有1的优先级高

注意：不管祖先元素优先级多高，子代继承的样式的都没有优先级

3. 层叠

选择器优先级相同时，靠下面的选择器中设置的样式被优先应用

盒模型

- 元素都是一个个透明的盒子，可以用CSS来设置它的样式

组成部分

- 内容区域 元素的内容部分，包括设置的宽高

- padding 内边距 内容区域和边框之间的距离

- border 元素的外边框

- margin 元素与元素之间的距离

内容区域、padding、border共同组成元素的可见区域

margin是透明的不可见

浮动

float 浮动

- 作用：让元素在父元素中，向左或者向右移动

- 属性值

none 元素不浮动 (默认)

left 左浮动

right 右浮动

- 特点

1.设置了浮动的元素会脱离文档流，它后面没有设置浮动的元素会移上去占掉它的位置，表现为重叠

2.设置浮动的元素都在同一层级，仍然按HTML中的顺序排列，后面的不会超过前面的，现在水平排列

3.如果浮动的元素前面的元素，没有设置浮动，这个元素不会越过前面不浮动的元素，而是在原本位置左右移动

4.浮动元素不会盖住文字，文字会自动环绕浮动元素

脱离了文档流的元素的特点

1.默认的宽高是内容本身的宽高

2.元素会水平排列

3.设置width和height有效

总之，变成行内块元素了！！！

定位

定位 position

- 作用：设置当前元素在页面中的位置

- 属性值

absolute 绝对定位

relative 相对定位

fixed 固定定位

相对定位

- position 设置为relative 就开启相对定位

- 特点

1.设置相对定位的元素，会提升一个层级，可能覆盖其他的元素

2.设置相对定位的元素，并没有脱离文档流，它下边的元素不会移上去占它的位置

这个元素的显示模式没有发生变化，没有变成行内块

3.开启相对定位的元素是相对谁定位呢？

相对于当前元素原本在文档流中的位置来定位的

查看相对定位原点的方法：

position: relative;

top: 0;

left: 0;

- 通过设置偏移量来控制当前元素的位置

top 设置元素和定位位置上边的距离 设置正值，元素向下移动，负值，元素向上移动

left 左边的距离，正值，元素右移动，负值，元素左移

right 右边的距离，正值，元素左移动，负值，元素右移

bottom 下边的距离，正值，元素上移动，负值，元素下移

一般使用时，top和bottom只选其一

left和right只选其一

绝对定位

- 为元素设置position的值为absolute，就开启绝对定位

- 特点

1.设置了绝对定位的元素会脱离文档流，它的显示模式变成行内块元素

2.设置绝对定位会提升元素的层级，会覆盖文档流中的其他元素

3.绝对定位是参照什么定位呢？

相对于离它最近的开启了定位的祖先元素来定位

如果没有开启了定位的祖先元素，则相对于html定位

固定定位

- 它是特殊的绝对定位，区别在于：

1.固定定位是相对于浏览器视窗定位

2.设置了固定定位的元素会固定在设置的位置上，页面滚动时，它也不移动

层级

元素的层级 z-index

属性值是一个整数，值越大，层级越高，能够覆盖其他元素

注意：

1.设置了定位的元素层级比设置z-index最高级的还有高

2.无论父元素设置层级多高，都不会覆盖子元素