CSS以及JavaScript

目录

一.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引入方式

1. Script标签内写代码

注释：

1. //            这是单行注释
2. /*   */      这是多行注释

变量：

1. JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头
2. 声明变量使用     “var  变量名；”   的格式来进行声明

常量：

1. 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
    • 所有条件都不成立时走的代码

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;
// 6

var 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 2

func2(1,2,3,4,5,6,7)
// VM3577:2 1 2

func2(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}