昨日内容回顾
边框
1 border-style:solid;
2 border-width:1px;
3 border-color:red;
4 简写:
5 border:1px dotted red;
6
7 单独
8 border-top-style:solid;
9 简写
10 border-top:1px dotted red;
11
12 边框圆角
13 border-radius:50%
display
1 display的值:
2 none:隐藏标签,不占空间 --- visibility:hidden;隐藏标签,占用空间
3 inline:将标签做成内敛样式
4 block:将标签做成块级样式
5 inline-block:同时具备两种标签的一些特点,能够设置高度宽度,并且不独占一行
6
盒子模型
1 content 内容
2 padding 内边距 内容与边框之间的距离 padding:10px 20px;上下 左右 padding:1px 20px 30px 40px;上右下左
3 border 边框
4 margin 外边距 与其他标签之间的距离
float浮动
1 布局用的,设置了浮动的标签会脱离正常文档流,会造成父级标签塌陷的问题
2 float:left;
3 float:right;
4
5 解决塌陷:
6 1.父级标签设置行高
7 2.伪元素选择器清除浮动
8 .clearfix:after{
9 content:'';
10 display:block;
11 clear:both;
12 }
13 父级标签class='clearfix'
14
overflow溢出
1 overflow:auto; 出现滚动条
2 overflow:hidden; 隐藏内容
position定位
1 position:static. 默认就是它
2 position:relative;相对定位,保留原来位置的空间,相对自己原来的位置移动
3 position:absolute;绝对定位,不保留原来位置的空间,按照父级标签或者祖先标签中有设置了position为相对定位的标签,如果有,按照他的位置移动,如果没有按照body移动
4 position:fixed; 固定定位.根据浏览器窗口位置来定位
z-index控制层级
1 z-index的值谁大谁在上面
透明度opacity
1 opacity标签透明度
2 rgba(255,0,0,0.3) 单独设置的某个属性的透明度
锚点
1 设置
2 <a name='top'>顶部<a/>
3 <div id='top'>顶部</div>
4 触发点:
5 <a href='#top'></a>
今日内容
js引入
1 方式1:
2 <script>
3 // js代码
4 alert
5 </script>
6 方式2:外部文件引入 xx.js文件
7 <script src="js文件路径"></script>
8
注释
1 // 这是单行注释
2
3 /*
4 这是
5 多行注释
6 */
结束符
1 结束符 JavaScript中的语句要以分号(;)为结束符。也就是说和缩进没关系了
声明变量var
1 var a = 10;
2 声明变量时可以先不赋值
3 var a;此时a的值为undefined
js动态类型语言
基础数据类型
数值类型 Number
1 var a = 10;
2 undefined
3 typeof a;
4 "number"
5 var b = 1.11;
6 undefined
7 typeof b;
8 "number"
9 查看数据类型用 typeof a;
10
11 var c = 123e5; // 12300000
12 var d = 123e-5; // 0.00123
字符类型 String
1 var a = 'alexdsb'
2 a
3 "alexdsb"
4 typeof a;
5 "string"
6 var a = "Hello"
7 var b = "world;
8 var c = a + b; //字符串拼接
9 console.log(c); // 得到Helloworld
类型转换
1 parseInt("123") // 返回123
2 parseInt("ABC") // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
3 parseFloat("123.456") // 返回123.456
4
5 示例:
6 var a = 'a123';
7 var b = parseInt(a);
8
9 b
10 NaN
11 typeof b;
12 "number"
13
14 var b = '1.11';
15 parseFloat(b)
16 1.11
字符串常用方法
1 1 .length属性,查看字符串长度
2 示例
3 var a = 'hello';
4 a.length; // 5
5 2 .trim() 移除空白
6 示例
7 var a = ' hello ';
8 a.trim(); //"hello"
9 3 .trimLeft() .trimRight()
10 4 .charAt(n) 返回索引为n的那个字符
11 5 .concat() 字符串拼接
12 示例
13 var a = 'hello';
14 var b = 'world';
15 a.concat(b) //"helloworld"
16 6 .indexOf() 通过元素找索引
17 示例
18 a
19 "hello"
20 a.indexOf('e')
21
22 start参数,索引起始位置
23 a.indexOf('l',3)
24
25 找不到返回-1
26 a.indexOf('e',3) -1
27 7 .slice() 切片
28 var a = 'hello';
29 a.slice(2,4) 顾头不钴锭
30 8 .toLowerCase() #全部变小写
31 .toUpperCase() #全部变大写
32 示例:
33 var b = 'HH';
34 b.toLowerCase();
35
36 9 .split 字符串分隔,第二个参数是返回多少个数据
37 示例
38 var a = "hello"
39 a.split('e') //(2) ["h", "llo"]
40 a.split('e',1) //["h"]
41
布尔值
1 var a = true;
2 var b = false;
3
4 ""(空字符串)、0、null、undefined、NaN都是false。
null和undefined
1 null和undefined
2 null表示值是空,一般在需要指定或清空一个变量时才会使用,如 name=null;
3 undefined表示当声明一个变量但未初始化时,该变量的默认值是undefined。还有就是函数无明确的返回值时, 返回的也是undefined。
4 null表示变量的值是空,undefined则表示只声明了变量,但还没有赋值。
5
对象类型 object
1 JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...此外,JavaScript 允许自定义对象。
2 比如声明一个字符串对象
3 var a = new String('bb')
复杂数据类型或者引用数据类型
数组 Array
1 创建数组:
2 var a = [11,22,33];
3 var b = new Array([22,33])
4 typeof a; //object类型
数组常用方法和属性
1 1 索引取值
2 var a = [123, "ABC"];
3 console.log(a[1]); // 输出"ABC"
4
5 2 .length a.length //2
6
7 3. .push() 尾部追加 .pop()尾部删除
8 示例
9 var a = [11,22,33]
10 a.push('123'); //[11, 22, 33, "123"]
11 a.pop(); //"123"
12 a -- [11, 22, 33]
13 4 .unshift(ele)头部追加 .shift()头部删除
14 var a = [11,22,33]
15
16 a //(3) [11, 22, 33]
17 a.unshift('aa');
18 a
19 (4) ["aa", 11, 22, 33]
20 a.shift();
21 "aa"
22 a
23 (3) [11, 22, 33]
24
25 5 .sort排序
26 var a = [11,4,84,73];
27
28 a.sort()
29 (4) [11, 4, 73, 84]
30 function sortNumber(a,b){
31 return a - b;
32 }
33
34 a.sort(sortNumber)
35 (4) [4, 11, 73, 84]
36 function sortNumber(a,b){
37 return b - a
38 }
39 a.sort(sortNumber)
40 (4) [84, 73, 11, 4]
41
42 解释:
43 如果想按照其他标准进行排序,就需要提供比较函数,也就是自己提供一个函数提供排序规则,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:
44
45 若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
46 若 a 等于 b,则返回 0。
47 若 a 大于 b,则返回一个大于 0 的值。
48
49 6 .splice() 删除元素 var a = [84, 73, 11, 4]; a.splice(1,2,'aa','bb','cc');
自定义对象 {}
1 var a = {"name": "Alex", "age": 18};
2 var d = {'name':'chao',age:18}; 键可以不加引号
3 console.log(a.name);
4 console.log(a["age"]);
5 for循环遍历自定义对象
6 var a = {"name": "Alex", "age": 18};
7 for (var i in a){
8 console.log(i, a[i]);
9 }
运算符
算数运算符
1 + - * / % ++ -- i++,是i自加1,i--是i自减1 i++的这个加1操作优先级低,先执行逻辑,然后再自加1,而++i,这个加1操作优先级高,先自加1,然后再执行代码后面的逻辑
比较运算符
1 > >= < <= != == === !== ==是弱等于(不比较数据类型) ===强等于 强等于会比较数据类型
逻辑运算符
1 && || ! #and,or,非(取反)!null返回true
赋值运算符
1 = += -= *= /= #n += 1其实就是n = n + 1
流程控制
if -else if -else
1 var a = 10;
2 if (a > 5){
3 console.log("a > 5");
4 }else if (a < 5) {
5 console.log("a < 5");
6 }else {
7 console.log("a = 5");
8 }
switch 切换
1 var a = 10;
2 undefined
3 switch (a){ //switch (a++){}
4 case 9:
5 console.log('999');
6 break;
7 case 10:
8 console.log('101010');
9 break;
10 case 11:
11 console.log('111111');
12 break;
13 }
14
15 加上default示例:
16
17 var a = 20;
18
19 switch (a){
20 case 9:
21 console.log('999');
22 break;
23 case 10:
24 console.log('101010');
25 break;
26 case 11:
27 console.log('111111');
28 break;
29 default : //上面的条件都不成立的时候,走default
30 console.log('啥也不对!!')
31
32 }
问题
1 var a = 10;
2
3 switch (a){
4 case 9:
5 console.log('999');
6 break;
7 case 10:
8 console.log('101010');
9 // break;
10 case 11:
11 console.log('111111');
12 break;
13 default :
14 console.log('啥也不对!!')
15
16 }
for循环
1 for (var i=0;i<10;i++) {
2 console.log(i);
3 }
4
5 循环数组:
6 var l2 = ['aa','bb','dd','cc']
7 方式1
8 for (var i in l2){
9 console.log(i,l2[i]);
10 }
11 方式2
12 for (var i=0;i<l2.length;i++){
13 console.log(i,l2[i])
14 }
15
16 循环自定义对象:
17 var d = {aa:'xxx',bb:'ss',name:'小明'};
18 for (var i in d){
19 console.log(i,d[i],d.i) #注意循环自定义对象的时候,打印键对应的值,只能是对象[键]来取值,不能使用对象.键来取值。
20 }
while循环
1 var i = 0;
2 while (i < 10) {
3 console.log(i);
4 i++;
5 }
三元运算符
1 var a = 1;
2 var b = 2;
3 var c = a > b ? a : b //如果a>b这个条件成立,就把冒号前面的值给c,否则把冒号后面的值给c //python中的:a = x if x>y else y
4
函数
1 // 普通函数定义
2 function f1() {
3 console.log("Hello world!");
4 }
5
6 // 带参数的函数
7 function f2(a, b) {
8 console.log(arguments); // 内置的arguments对象
9 console.log(arguments.length);
10 console.log(a, b);
11 }
12
13 // 带返回值的函数
14 function sum(a, b){
15 return a + b; //在js中,如果你想返回多个值是不行的,比如return a ,b;只能给你返回最后一个值,如果就想返回多个值,你可以用数组包裹起来 return [a,b];
16 }
17 sum(1, 2); // 调用函数 sum(1,2,3,4,5)参数给多了,也不会报错,还是执行前两个参数的和,sum(1),少参数或者没参数也不报错,不过返回值就会是NAN
18
19 // 匿名函数方式,多和其他函数配合使用,后面我们就会用到了
20 var sum = function(a, b){ //在es6中,使用var,可能会飘黄,是因为在es6中,建议你使用let来定义变量,不过不影响你使用
21 return a + b;
22 }
23 sum(1, 2);
24
25 // 立即执行函数,页面加载到这里,这个函数就直接执行了,不需要被调用执行
26 (function(a, b){
27 return a + b;
28 })(1, 2); //python中写可以这么写:ret=(lambda x,y:x+y)(10,20) 然后print(ret)
29
函数的全局变量和局部变量
1 局部变量:
2
3 在JavaScript函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它(该变量的作用域是函数内部)。只要函数运行完毕,本地变量就会被删除。
4
5 全局变量:
6
7 在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
8
9 变量生存周期:
10
11 JavaScript变量的生命期从它们被声明的时间开始。
12
13 局部变量会在函数运行以后被删除。
14
15 全局变量会在页面关闭后被删除。
作用域
1 首先在函数内部查找变量,找不到则到外层函数查找,逐步找到最外层。
闭包
1 var city = "BeiJing";
2 function f(){
3 var city = "ShangHai";
4 function inner(){
5 console.log(city);
6 }
7 return inner;
8 }
9 var ret = f();
10
面向对象
es5封装方式
1 function Person(name){
2 this.name = name;
3 }
4 var p = new Person('taibai');
5 p.name
6
7 "taibai"
8 Person.prototype.sum = function(a,b){return a+b;}
9 ƒ (a,b){return a+b;}
10
11 p.sum(2,3);
Date对象
1 var d1 = new Date(); //获取当前时间
2 console.log(d1.toLocaleString()); //当前时间日期的字符串表示
3 //方法2:参数为日期字符串
4 var d2 = new Date("2004/3/20 11:12");
5 console.log(d2.toLocaleString());
6 var d3 = new Date("04/03/20 11:12"); #月/日/年(可以写成04/03/2020)
7 console.log(d3.toLocaleString());
8 //方法3:参数为毫秒数,了解一下就行
9 var d3 = new Date(5000);
10 console.log(d3.toLocaleString());
11 console.log(d3.toUTCString());
12
13 //方法4:参数为年月日小时分钟秒毫秒
14 var d4 = new Date(2004,2,20,11,12,0,300);
15 console.log(d4.toLocaleString()); //毫秒并不直接显示
date对象的其他方法
1 var d = new Date();
2 //getDate() 获取日
3 //getDay () 获取星期 ,数字表示(0-6),周日数字是0
4 //getMonth () 获取月(0-11,0表示1月,依次类推)
5 //getFullYear () 获取完整年份
6 //getHours () 获取小时
7 //getMinutes () 获取分钟
8 //getSeconds () 获取秒
9 //getMilliseconds () 获取毫秒
10 //getTime () 返回累计毫秒数(从1970/1/1午夜),时间戳
json
1 var str1 = '{"name": "chao", "age": 18}';
2 var obj1 = {"name": "chao", "age": 18};
3 // JSON字符串转换成对象 反序列化
4 var obj = JSON.parse(str1);
5 // 对象转换成JSON字符串 序列化
6 var str = JSON.stringify(obj1);
RegExp正则对象
1 创建正则对象的方法
2 var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");
3 简写方式:
4 var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;
5
6 test方法.测试某个字符串是否符合正则规则
7 var s = 'hello'
8 reg1.test(s) 符合返回True,不符合返回false
9
10 一个坑:
11 reg1.test() 里面什么也不写,会默认放一个"undefined"字符串
12 reg1.test("undefined")
其他正则方法
1 var s2 = "hello world";
2
3 s2.match(/o/g); // ["o", "o"] 查找字符串中 符合正则 的内容 ,/o/g后面这个g的意思是匹配所有的o,
4 s2.search(/h/g); // 0 查找字符串中符合正则表达式的内容位置,返回第一个配到的元素的索引位置,加不加g效果相同
5 s2.split(/o/g); // ["hell", " w", "rld"] 按照正则表达式对字符串进行切割,得到一个新值,原数据不变
6 s2.replace(/o/g, "s"); // "hells wsrld" 对字符串按照正则进行替换
7
8 var s1 = "name:Alex age:18";
9
10 s1.replace(/a/, "哈哈哈"); // "n哈哈哈me:Alex age:18"
11 s1.replace(/a/g, "哈哈哈"); // "n哈哈哈me:Alex 哈哈哈ge:18" 全局匹配
12 s1.replace(/a/gi, "哈哈哈"); // "n哈哈哈me:哈哈哈lex 哈哈哈ge:18" 不区分大小写
13
14 坑:
15 var reg = /a/g;
16 var s = 'alex a sb';
17 reg.test(s); //true
18 reg.lastIndex; // 1
19 reg.test(s); //true
20 reg.lastIndex; // 6
21 reg.test(s); //false
22
23 reg.lastIndex = 0;重新赋值,让其归零
Math计算模块
1 Math.abs(x) 返回数的绝对值。
2 exp(x) 返回 e 的指数。
3 floor(x) 小数部分进行直接舍去。
4 log(x) 返回数的自然对数(底为e)。
5 max(x,y) 返回 x 和 y 中的最高值。
6 min(x,y) 返回 x 和 y 中的最低值。
7 pow(x,y) 返回 x 的 y 次幂。
8 random() 返回 0 ~ 1 之间的随机数。
9 round(x) 把数四舍五入为最接近的整数。
10 sin(x) 返回数的正弦。
11 sqrt(x) 返回数的平方根。
12 tan(x) 返回角的正切。