前端学习笔记

css

1.背景图

1.1背景图缩放属性

background-size

取值：contain/cover

1.2设置背景颜色为透明

background-color:transparent;

2.文字

2.1两行文字溢出显示省略号

overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

或者直接在html文件标签里添加ellipsis-2

<div class="txt ellipsis-2">【瑞克与莫蒂】真相公布——和戴安姥姥最像的人，是桑美！（第七季第七集·剧情）#286</div>

3.flex布局

3.1一行排多个元素需强制换行，找到换行的父级元素添加以下代码

flex-wrap:wrap;

4.层级定位

4.1移动web头部区域需固定且呈现在所有页面最上面，需有以下代码

position: fixed;
left: 0;
top: 0;
z-index:1;

5.媒体查询

css具有层叠性，为了能够根据设备宽度变化，设置差异化样式

• min-width（从小到大写）
• max-width（从大到小写）

JavaScript

1.比较运算符

• = 单等是赋值

• ==双等是判断

• ===三等是全等

• 开发中判断是否相等，强烈推荐使用===

2.运算符优先级

逻辑运算符中！> && > ||

//例题
let a = false
let b = true
let c = false
let d = !c || b && a
console.log(d)

//d === true

3.循环语句

for循环和while循环的区别

• 当如果明确了循环的次数的时候推荐使用for循环
• 当不明确循环的的次数的时候推荐使用while循环

4.数组

数组操作——新增

数组.push()方法将一个或多个元素添加到数组的末位，并返回该数组的新长度

数组unshift()方法将制定元素添加到数组的开头，并返回数组新长度

5.函数

5.1return函数

return语句终止函数的执行，并返回一个指定的值给函数调用者

return语句后不再执行任何语句

函数细节

• 两个相同的函数后面的会覆盖前面的函数
• 在JavaScript中实参的个数和形参的个数可以不一致
  • 如果形参过多，会自动填上underfined
  • 如果实参过多，那么多余的实参会被忽略（函数内部有一个arguments，里面装着所有的实参）
• 函数一旦碰到return就不会再往下执行了，函数的结束用return

5.2变量

1. 如果函数内部，变量没有声明，直接复制，也当全局变量来看，但是强烈不推荐
2. 形参可以看成局部变量

5.3立即执行函数

//第一种写法
function(){}
();
funciton(){}
()
//第二种写法
(function(){}())

作用：防止变量污染

5.4转换时间案例

计算公式：计算时分秒

//小时
h = parseInt(总秒数 / 60 / 60 % 24)
//分钟
m = parseInt(总秒数 / 60 % 60)
//秒数
s = parseInt(总秒数 % 60)

6.逻辑运算符

1. 逻辑运算符里的短路

• 短路：只存在于&&和||中，当满足一定条件会让右边代码不执行

• 符号	短路条件
  &&	左边为false就短路
  ||	左边为true就短路

• 原因：通过左边能得到整个式子的结果，因此没必要再判断右边
• 运算结果：无论&&还是||，运算结果都是最后被执行的表达式值，一般用在变量赋值

7.变量

const声明的值不能更改，而且const声明变量的时候需要里面进行初始化

但是对于引用数据类型，const声明的变量，里面存的不是值，是地址

建议数组和对象使用const来声明

如果基本数据类型的值或者引用类型的地址发生变化的时候，需要用let

8.APIs

8.1DOM

8.1.1什么是DOM

是用来呈现以及与任意HTML或XML文档交互的API

作用：开发网页内容特效和实现用户交互

8.1.2DOM对象

浏览器根据html标签生成的JS对象

• 所有的标签属性都可以在这个对象上面找到
• 修改这个对象的属性会自动映射到标签身上

BootStrap框架

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

1.栅格系统

1.1row类的作用就是抵消container类的15px的内边距，row有-15px的外边距

2.插件使用步骤

2.1引入BootStrap样式

2.2引入js文件：jQuery.js + BootStrap.min.js

<script src="./js/jquery.js"></script>
<script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

2.3复制html结构，并适当调整结构或内容