目录
一.CSS
1.overflow溢出属性
2.定位
二.JavaScript基础
1.JavaScript引入方式
2.JavaScript数据类型
常用方法：
字符串常用方法：
在js里，什么是真，什么是假
数组的常用方法
运算符
（1）算数运算符：+
（2）比较运算符==与===
（3）逻辑运算符
3.流程控制
（1）if判断
（2）switch-case语法
（3）for循环
（4）while循环
（5）三元运算符
4.函数
（1）格式
（2）无参函数
（3）有参函数
（4）关键字arguments
（5）函数的返回值
（6）匿名函数
5.JSON对象
一.CSS
1.overflow溢出属性
| visible | 默认值，内容不会被修剪，会呈现在元素框之外 |
| hidden | 内容会被修剪，并且其余内容是不可见的 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余内容 |
- overflow（水平和垂直均设置）
- overflow-x（设置水平方向）
- overflow-y（设置垂直方向）
2.定位
静态定位：默认情况下，所有的标签都是静止的，不能够移动（static）
相对定位：相对于自己原来的位置进行移动（relative）
绝对定位：相对于父类标签移动，如果没有父元素，那就按照body移动（absolute）
固定定位：相对于浏览器窗口定位（fixed）
二.JavaScript基础
实际上，一个完整的JavaScript实现是由以下3个不同部分组成的：
- 核心（ECMAScript）
- 文档对象模型（DOM）Document object model （整合js、css、html）
- 浏览器对象模型（BOM）Broswer object model（整合js和浏览器）
1.JavaScript引入方式
- Script标签内写代码
- <script src="yscript.js"></script>
注释：
- // 这是单行注释
- /* */ 这是多行注释
变量：
- JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头
- 声明变量使用 “var 变量名；” 的格式来进行声明
常量：
- const PI = 3.14
2.JavaScript数据类型
JavaScript拥有动态类型
常用方法：
| parseInt("123") | 返回123 |
| parseInt("ABC") | 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字 |
| parseFloat("123.456") | 返回123.456 |
字符串常用方法：
| .length | 返回长度 |
| .trim() | 移除空白 |
| .trimLeft() | 移除左边的空白 |
| .trimRight() | 移除右边的空白 |
| .charAt(n) | 返回第n个字符 |
| .concat(value, ...) | 拼接 |
| .indexOf(substring, start) | 子序列位置 |
| .substring(from, to) | 根据索引获取子序列 |
| .slice(start, end) | 切片 |
| .toLowerCase() | 小写 |
| .toUpperCase() | 大写 |
| .split(delimiter, limit) | 分割 |
在js里，什么是真，什么是假
a=true
b=false
只需要记住什么是假，其余的都是真
""(空字符串)、0、null、undefined、NaN都是false
数组的常用方法
| .length | 数组的大小 |
| .push(ele) | 尾部追加元素 |
| .pop() | 获取尾部的元素 |
| .unshift(ele) | 头部插入元素 |
| .shift() | 头部移除元素 |
| .slice(start, end) | 切片 |
| .reverse() | 反转 |
| .join(seq) | 将数组元素连接成字符串 |
| .concat(val, ...) | 连接数组 |
| .sort() | 排序 |
| .forEach() | 将数组的每个元素传递给回调函数 |
| .splice() | 删除元素，并向数组添加新元素 |
| .map() | 返回一个数组元素调用函数处理后的值的新数组 |
运算符
（1）算数运算符：+
- +在前面
- 先增加后赋值
- +在后面
- 先赋值后增加
var a = 10;
// undefined
var res1 = a++;
// undefined
var res2 = ++a;
// undefined
res1
// 10
res2
// 12
（2）比较运算符==与===
- 当使用“==”比较运算符时，会进行类型转换然后再比较
- 如果操作数的类型不同，则会尝试将他们转换为相同的类型，然后再进行比较
- 而使用“===”严格相等运算符时，不会进行类型转换
- 它要求操作数的值和类型都相同才会返回true
==：弱等于
内部自动转换成相同的数据类型比较了
===：强等于
内部不做类型转换
1 == '1';
true
1 === '1';
false
（3）逻辑运算符
- Python中：and or not
- JavaScript中：&& || ！
5 && '5';
'5'
0 || 1;
1
!5 && '5';
'5'
3.流程控制
（1）if判断
// if - else
if (条件){条件成立执行的代码块}else{条件不成立时执行的代码块}
// if - else if - else
if (条件){条件成立执行的代码块}else if(条件){条件成立执行的代码块}else{条件不成立时执行的代码块}
// () 条件 {} 执行的代码块
var age = 10;
if (age>=18){console.log("你好")
}else{console.log("滚蛋")
};
// if - else
if (age >= 18 ){console.log("你好")
}else if(age<10){console.log("萝莉酱")
}else{console.log("滚蛋")
};
（2）switch-case语法
- 提前定义好可能出现的条件和解决方式
- break
- 如果不加break，匹配成功之后会依次执行
- default
- 所有条件都不成立时走的代码
- break
var num = 2;
switch (num) {case 0:console.log("喝酒");break;case 1:console.log("吃饭");break;case 2:console.log("打牌");break;default console.log("走人")
}
（3）for循环
for (起始条件，结束条件，循环条件){条件成立执行的代码}
// 打印 0-9 的数字
for (let i=0;i<10;i++){console.log(i)
}// 打印列表内的每一个值
var ll = [11,22,33,44,55,66,77];
for (let i = 0;i < ll.length; i++){console.log(ll[i])
};
（4）while循环
while (条件){条件成立执行的代码}
var i = 0;
while (i<100){console.log(i)i++;
};
（5）三元运算符
- 在python中
res = 4 if 1 > 2 else 6
- 在JavaScript中
var res = 1 > 2 ? 4 : 6;
// 6var res = 1 > 2 ? 4 : (8 > 5 ? 999 : 888);
// 999
4.函数
- 在Python中定义函数需要用 def
- 在JavaScript中定义函数需要用 function
（1）格式
// 格式
function 函数名(形参,形参,形参，形参...){函数体代码
}
（2）无参函数
// 无参函数
function func1(){console.log("我是无参函数")
}func1()
（3）有参函数
// 有参函数
function func2(a,b){console.log(a,b)
};func2(1,2)
function func2(a,b){console.log(a,b)
};func2(1,2)
// VM3577:2 1 2func2(1,2,3,4,5,6,7)
// VM3577:2 1 2func2(1)
//VM3577:2 1 undefined
- 在js中传多了只拿对应的数据
- 在js中传少了也不会报错
（4）关键字arguments
function func3(a,b,c){console.log(arguments)console.log(a,b,c)
};
function func3(a,b,c){console.log(arguments)console.log(a,b,c)
};func3(1,2,3,4,5,6,7)/*
VM3668:2 Arguments(7) [1, 2, 3, 4, 5, 6, 7, callee: ƒ, Symbol(Symbol.iterator): ƒ]
VM3668:3 1 2 3
*/
- 能够获取到函数接收到的所有参数
用途：
function func4(a,b,c){if (arguments.length > 3){console.log("传多了")}else if (arguments.length < 3){console.log("传少了")}else{console.log(a,b,c)}
};
（5）函数的返回值
使用关键字 return
返回单个值
function index(){return 666
};
- 返回多个值要用数组约束
function index(){return [777,88,99]
};
JavaScript不支持解压赋值
（6）匿名函数
function (){};// 自调用
function (){}();// 变量存储
var b = function (){}
5.JSON对象
json.dumps ------------------->JSON.stringify()
json.loads--------------------->JSON.parse()
var obj1 =1. 先序列化
var res=JSON.stringify(obj1) # '{"name": "Alex", "age": 18};'python:
json.loads(res) # {"name": "Alex", "age": 18};
2. 反序列化
var str1 = '{"name": "Alex", "age": 18}'; # json.dumps
js反序列化:
JSON.parse(str1) # {"name": "Alex", "age": 18}
