5.15
昨日回顾
-
清除浮动带来的影响
浮动的元素会造成父标签塌陷,写一个div,盒子带有clear属性,提前写好这个class,只要有塌陷就使用
.clearfix:after { content:''; display: block; clear: both; }
-
溢出属性
overflow:hidden; overflow:scroll;
案例:圆形头像
-
定位
静态,相对定位,绝对定位,固定位置
static,relative,absolute,fixed
如果将标签的position由static改为relative,那么标签就会由没有定位过的标签变成定位过的标签
绝对定位:相对已经定位过的父标签,如果没有则以body作为参照
固定:相对于浏览器窗口
-
验证是否脱离文档流
脱离:浮动,固定,绝对
不脱离:相对
-
z-index,越大,离人的距离越近
案例:百度登陆页面,三层结构
-
模态框
-
透明度:opacity,可以改变颜色和字体
-
动手写简易博客
1. div划定区域 2. html占位 3. 最后调节样式 再给标签起id或class属性的时候,应该做到见名知意 4. 写CSS 5. 先用注释表明用途,以及作用区域 6. 通用样式 body,html {margin:0;} a {text-decoration: none;} ul {list-style-type: none; padding-left: 0;}
-
js简介
一门编程语言,但是内部逻辑有bug,不严谨
-
JavaScript
//注释 /*注释*/ /*书写方式:script标签引入js外部文件*/ /*js用分号作为语句的结束,但是不写也问题不大*/
-
js变量
声明变量必须用关键字
var全局,let局部
实际上不用这个关键字也能用
-
常量
const pi = 3.14 /*不能修改*/
今日内容
- 数值类型
- 字符类型
- 布尔值
- null,undefined
- 对象:数组,自定义对象,内置对象
- 流程控制:if,while
- 函数
- 内置对象:时间对象,正则对象
- json对象
- bom操作,操作浏览器实现动态效果等
变量
-
js变量的命名规范
1. 变量名只能是数字,字母,下划线,$ 2. 推荐使用驼峰体 3. 不能使用关键字
数据类型
js/python是一门动态类型语言
name = 'deimos'
name = 123
name = [1,2,3]
/*name可以指定任何的数据类型*/
数字类型
查看当前数据类型
typeof a;
var a = 11;
//"number"
NaN,表示不是一个数字(Not a Number)。
字符类型 string
可与用单引号,双引号定义字符串,不支持三引号
var a = 'aaa';
typeof a //"string"
//横板字符串
var b = `
aaa
bbb
ccc
`
//可以定义多行字符串,除此之外,还可以实现字符串的格式化
var name = 'deimos'
var age = 21
var sss = `
my name is ${name} my age is ${age}
`
//有$ 自动往前面找这个变量名,有就会把这个变量名塞进去,如果没有这个变量名就会报错
字符串的拼接
python中不推荐使用+ 加号拼接,js里推荐直接使用加号拼接字符串
字符串方法
切片,使用slice,不用substring
布尔值
python中布尔值是首字母大写的,True,False,js中布尔值是全小写的:true,false
js中的布尔值:0,null,undefined,NaN,空字符串
null:空
undefined:声明一个变量,但是没有做初始化操作,函数没有返回值的时候
对象
JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...此外,JavaScript 允许自定义对象。
JavaScript 提供多个内建对象,比如 String、Date、Array 等等。
对象只是带有属性和方法的特殊数据类型。
数组
类似列表 [],可以存多个数据,不同的数据类型,但是不支持负数
var a = [123, "ABC"];
console.log(a[1]); // 输出"ABC"
三个比较重要的方法
foreach,slice,map
//forEach
var l1 = [111,22,33,444]
l1.forEach(function(value,index){console.log(value,index)},l1)
111 1
22 2
33 3
...
//相当于for循环后面的对象,依次交给前面的函数处理
//function中参数的用途是forEach固定的
//元素,索引,数据来源
//最多三个参数,如果l1里的是数组,会显示成Array
//slice
//map
var l1 = [11,22,33,44,55]
l1.map(function(value,index){return index*value},l1)
运算符
//算术运算符
var x = 10;
var res = x++; //加号在后面,先做赋值,后自增
var res2 = ++x; //加号写在后面,先自增后赋值
res1 10 //x自增1
res2 12
//比较运算符
1 == '1' true
//js中,两个等号会自动转换成相同的类型比较,若等于
1 === '1' false
//连同类型一起比较,不做转换,强等于
//逻辑运算符
&& || ! //and or not
5 && '5' //'5'
0 || 1 // 1
!5 && '5' //false
//比较的时候返回布尔值,;逻辑运算的时候返回两边的元素
流程控制
if switch for while
//if判断
var age = 20;
if (age<18){
console.log('come')
}else if(age<16){
console.log('no')
}else{
console.log('go')
}
//js中是没有缩进的,完全可以写在一行
//(条件){代码块}
//switch语法
switch(num){
case 0:
console.log('吃饭');
break;
case 1:
console.log('睡觉');
break;
case 2:
console.log('按摩');
break;
default:
console.log('匹配不上默认走的');
break;
}
//case里要加break,如果不加,匹配到一个之后就会一直往下执行,下面的代码没有触发也会执行
//for循环
for(let i=0;i<10;i++){
console.log(i)
}
//for(起始条件,循环条件,每次循环后的操作){循环体}
//例1:循环打印数组的每一个元素
var l1 = [11,22,33,44,55,66];
for(let i=0;i<l1.length;i++){
console.log(l1[i])
}
//while循环
var i = 0
while(i<100){
console.log(i)
i++;
}
//三元运算符
var res = x>y ? x : y
/*条件成立,取冒号前面的值,不成立,取冒号后面的值;可以嵌套*/
//嵌套的时候从最里面一层开始算
函数
python中定义函数用def,js中定义函数要用 function
function 函数名(形参1,形参2){
函数体代码;
}
//无参函数
function func1(){
console.log('hello')
}
//有参函数
function func2(a,b){
console.log(a,b)
console.log(arguments)
}
func2(11,22);
//在调用的时候,多传,少传都不会报错,少的会用undefined顶着
//arguments可以拿到函数拿到的所有参数
函数的返回值
//返回值使用的关键字也是return
function index(){
return 666
}
//只能返回一个,如果要返回多个,可以返回一个数组
//js里面没有解压赋值
//匿名函数,不用写函数名,一次性使用
function(){
return 666
}
箭头函数
类似于python中的匿名函数,处理简单的业务逻辑
var func1 = v =>v;
//等价于
var func1 = function(v){
return v
}
var func2 = (arg1,arg2) => arg1+arg2
//等价于
var func2 = function(arg1,arg2){
return arg1+arg2
}
函数的全局变量与局部变量
跟python查找的顺序一致
JavaScript也有闭包函数
自定义对象
可以看成python中的字典,但是js中的自定义对象比python中的字典操作更加方便
创建自定义对象,两种
//第一种,直接写一个字典
var d = {'name':'aaa','age':21}
//取值
d['name']
d.name
//for循环取值,拿到的是字典的键
//第二种,使用关键字new
var d2 = new Object()
d2.name = 'aaa';
d2.age = 21;
date对象
let d3 = new Date()
//得到当前的时间,也支持自己写一个时间进去
//let d3 = new Date(1111,11,11,11,11,11),不过月份是从0开始的
d3.toLocaleString()
//获得一个更好看的日期格式
//时间对象具体方法
let d4 = new Date()
d4.getDate()
d4.getDay()
d4.getMonth()
...
JSON对象
在python中,序列化与反序列化用的是dumps和loads
js中也有序列化和反序列化
json1 = JSON.stringify(d) // dumps:编码
let res1 = JSON.parse(json1) //loads:解码
正则对象
RegExp对象,两种方式可以创建正则对象
//第一种
let reg1 = new RegExp('^[a-zA-Z][a-zA-Z0-9]{5,11}')
//必须是字母开头,中间是5-11位的字母或数字
//第二种
let reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/
//匹配内容
reg1.test('aaaaaqqqqq') //看是否符合,执行的结果是true/false
reg1.match('aaaaaqqqqq') //拿到匹配的结果
js的正则有很多bug,有些时候会获取不到我们想不到的结果
如果什么都不传,默认传过去的是undefined
Math对象
总结
- js数据类型:自己敲一遍
- JSON对象
- js如何操作页面,给页面有动态效果