前端05 /js基础
昨日内容回顾
行内(1000) > id(100) > 类(10) > 标签(1) > 继承(0)
rgb(255,255,255)
#000000-#FFFFFF
单词表示
rgba(255,255,255,0.5)（透明度）
font-family 设置"微软雅黑","宋体"
font-size 设置字体大小 默认的字体大小16px
font-weight bold粗体
text-align 对齐方式 left(默认) right center
text-decoration 字体的划线 none underline overline line-through
line-height 设置行高 字体会自动在行高内垂直居中
text-indent 缩进em或px单位
background-color :设置颜色
background-image :url('xxx.jpg')
background-repeat :no-repeat
background-position :水平位置 垂直位置 (left center right) (top center bottom)
background-attachment:fixed
background-size :调整背景图片的大小
background:颜色 背景图 是否重复 位置;
border-style:solid; 设置边框样式
border-color:颜色1 颜色2 颜色3 颜色4;
border-width:10px; 设置边框宽度
border: solid red 5px;
border-top-style:dotted;
border-top: solid red 5px;
border-radius:边框圆角
不显示不占位 :none
块级元素 : block
行内元素 : inline
行内块 : inline-block
content : width height 内容
padding : 5px 内边距
padding-top ...
border : 见上面
margin : 外边距
margin-left ...
上下的盒子会塌陷 : 取上下间距之间的最大值
不设置border的父子盒子也会塌陷
更多的描述兄弟之间的关系,如果是父子之间的关系用padding来描述
float:left right
浮动起来的盒子会脱离标准文档,且不在独占一行
父盒子不能被子盒子撑起来
清除浮动 : clear:both
伪元素清除法:
clearfix:after{
content:'';
display:block
clear:both;
}
overflow:hidden scroll auto
溢出部分如何处理?
visible 默认 溢出了也会显示
hidden 溢出部分隐藏
auto scroll 溢出之后显示滚动条
position : relative absolute fixed
top:
left:
right:
bottom:
相对定位 : 相对自己原来的位置定位,还占据自己原来的位置
绝对定位 : 相对于有定位的父盒子/整个html界面的位置,不占据原来的位置
固定定位 : 相对浏览器窗口的(不独占一行，可以设置高和宽)
设置0的时候，不需要加px
表示的在页面上标签显示的先后顺序
1.值越大的越在前面显示
2.设置的值没有单位没有范围
3.浮动的盒子不能设置index
4.从父现象:父级的优先级不高,儿子的优先级再高也没用（父级标签设置的index小，儿子设置的index再大也没用）
opacity:0.5
是整个标签的透明度
opacity和rgba的区别：
opactiy是整个标签的透明度，rgba是单独给某个属性设置透明度
今日内容
1 javascript介绍
能够处理逻辑
可以和浏览器交互
不够严谨
javascript包含:
ECMAscript js的一种标准化规范 标出了一些基础的js语法
DOM document object model 文本对象模型 主要操作文档中的标签
BOM browser object model 浏览器对象模型 主要用来操作浏览器
2 js引入和script标签
方式一:在html页写js代码
<script>
alert('hello,world')
</script>
方式二: 引入js文件
<script src="first.js"></script>
3 结束符和注释
结束符
; 是js代码中的结束符
单行注释
// alert('hello,world');
多行注释
/*多行注释*/
4 变量
变量名 : 数字\字母\下划线\$
创建变量的关键字var :var a = 1;
(a=1不会报错，但是设置的是全局变量)
创建变量的时候可以不指定数据类型
创建变量但不赋值 :var a; a创建出来就是一个undefined未定义
5 输入输出
弹出框alert
alert('hello') 弹出框中的内容是"hello"
弹出输入框
var inp = prompt('问句') 弹出输入框,输入的内容会被返回给inp
控制台输出
console.log(变量或值)
6 基础的数据类型
6.1 查看类型
typeof 变量;
typeof(变量);
6.2 数字number
整数 var a = 1
小数 var b = 1.237
保留小数 b.toFixed(2) //1.24
6.3 字符串String
var s1 = '单引号'
var s2 = '双引号都是字符串的表达方式'
6.4 string 类型的常用方法
属性 : length
方法:
.trim() 去空白
.trimLeft() 移除左边的空白
.trimRight() 移除右边的空白
a.concat('abc') a拼接'abc'串 ///字符串拼接：var c=a+b;
charAt(索引) 给索引求字符
indexOf(字符) 给字符求索引
indexOf(字符，n) 给字符求索引，从索引为n的数字开始往后找
slice(start,end) 顾头不顾尾,可以用负数,取子串
.toLowerCase() 全部变小写
.toUpperCase() 全部变大写
.split(',',2) 根据(第一个参数)分隔符切割,切前多少个结果（python中后面的数字是从第二个','进行分割）
6.5 boolean 布尔值
true : [] {}
false : undefined null NaN 0 ''
6.6 null 空和undefined未定义
null 表示空 boolean值为false
undefined 没有定义 创建变量但是不赋值 boolean值为false
null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;
undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。
var a; -- undefined
null表示变量的值是空，undefined则表示只声明了变量，但还没有赋值。
6.7 object类型
var a = 'xx';
var b = new String('oo');
7 内置对象类型
7.1 数组 Array
创建(object类型):
var arr = ['a','b','c'];
var arr2 = new Array();
typeof arr\arr2 -->object
索引操作:
arr[0] 查看
arr2[0] = 'alex' 赋值操作
Array常用的属性和方法
属性:length(数组长度)
方法:
.push(ele) 尾部追加元素
.pop() 删除尾部的元素
示例:
var a = [11, 22, 33, 44];
var b = a.pop();
结果:
a -- [11, 22, 33]
b -- 44
.unshift(ele) 头部插入元素
示例:
var a = [11, 22, 33];
a.unshift('aa')
a -- ["aa", 11, 22, 33]
.shift() 头部移除元素
示例:
var a = ["aa", 11, 22, 33];
a.shift() -- 'aa'
a -- [11, 22, 33];
.slice(start, end) 切片
示例：
var b = a.slice(0,3);
b -- [11, 22]
.reverse() //在原数组上改的 反转
示例：
var a = [11,22,33];
a.reverse()
a -- [33,22,11]
.join(seq) //a1.join('+')，seq是连接符 将数组元素连接成字符串
示例:
var a = ['aa','bb','cc'];
var b = a.join('_');
b -- "aa_bb_cc";
.concat(val, ...) //连个数组合并,得到一个新数组，原数组不变 连接数组
示例：
var a = ["aa", "bb", "cc"];
var b = [11,22];
var c = a.concat(b);
c -- ["aa", "bb", "cc", 11, 22];
.sort() //排序
示例:
var a = [12,3,25,43];
对a进行升序排列:
1 定义函数
function sortNumber(a,b){
return a - b
};
2 var b = a.sort(sortNumber)
b -- [3, 12, 25, 43]
sort 规则:
如果想按照其他标准进行排序，就需要提供比较函数，也就是自己提供一个函数提供排序规则，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。
.splice() //参数：1.从哪删(索引), 2.删几个 3.删除位置替换的新元素(可多个元素) 删除元素，并向数组添加新元素。
示例:
var a = ['aa','bb',33,44];
单纯删除:a.splice(1,1)
a -- ["aa", 33, 44]
删除在替换新元素:
var a = ["aa", 33, 44];
a.splice(0,2,'hello','world');
a -- ["hello", "world", 44];
7.2 自定义对象（相当于python字典）
索取值
var a = {'name': 'alex','age' :48};
a['age']; -- 48
a.age; -- 48
键可以不用加引号（会自动处理成字符串）
[]中括号取值必须加引号
8 类型查询
9 数据类型之间的转换
string --> int
parseInt('123') //123
parseInt('123abc') //123
parseInt('abc123') //NaN
parseInt('abc') //NaN not a number
string --> float
parseFloat('1.233')
float/int --> String
var num = 123
String(123)
var str = num.toString()
任意类型 --> Boolean
Boolean(数据)
字符串和数字相加 --> 字符串
字符串和数字相减 --> 数字
10 运算符
10.1 赋值运算符
= += -= *= /= %=
示例:
n += 1其实就是n = n + 1
10.2 比较运算符
> < >= <=
== != 不比较类型
=== !== 比较类型和值(常用)
==（弱等于）
===（强等于）
示例:
var a = 11;
var b = '11';
a == b -- true
a === b; -- false
10.3 算数运算符
+ - * / % **
++ --
var a = 1
undefined
var b = a++ // a=2 b=1（先进行逻辑，再进行自加1）
var c = ++a // a=3 c=3（先进行自加1，再进行逻辑）
i++,是i自加1，i--是i自减1 i++的这个加1操作优先级低，先执行逻辑，然后再自加1，而++i，这个加1操作优先级高，先自加1，然后再执行代码后面的逻辑
示例:
var a = 100;
a++;或者++a; -- 101 a自增1
a++和++a的区别,示例:
var a = 102;
a++ == 102; -- true
a -- 103;
++a == 103; -- false
a -- 104;
10.4 逻辑运算符
&& 逻辑与 ||逻辑或 !逻辑非
true && true //true
true || false //true
!true //false
11 流程控制
特点:
所有的代码块都是用{}标识的
所有的条件都是用()标识的
11.1 条件判断
11.1.1 if语句
if (true) {
//执行操作
}else if(true){
//满足条件执行
}else if(true){
//满足条件执行
}else{
//满足条件执行
}
11.1.2switch切换（case语句）
var err_type = 'info'
switch(err_type) {
case 'warining':
console.log('警告');
break;
case 'error':
console.log('错误');
break;
default:
console.log('没错')
}
示例:
var a = 1;
switch (a++){ //这里day这个参数必须是一个值或者是一个能够得到一个值的算式才行，这个值和后面写的case后面的值逐个比较，满足其中一个就执行case对应的下面的语句，然后break，如果没有加break，还会继续往下判断
case 1:
console.log('等于1');
break;
case 3:
console.log('等于3');
break;
default: case都不成立,执行default
console.log('啥也不是!')
}
11.2 循环语句
11.2.1 while
var i = 1; //初始化循环变量
while(i<=9){ //判断循环条件
console.log(i);
i = i+1; //更新循环条件
}
示例：
var i = 0;
var a = 10;
while (i < a){
console.log(i);
if (i>5){
continue;
break;
}
i++;
};
11.2.2 for
for (var i=0;i<10;i++) { //就这么个写法，声明一个变量，变量小于10，变量每次循环自增1，for(;;){console.log(i)}；这种写法就是个死循环，会一直循环，直到你的浏览器崩了，就不工作了
console.log(i);
}
循环数组：
var l2 = ['aa','bb','dd','cc']
方式1
for (var i in l2){
console.log(i,l2[i]);
}
方式2
for (var i=0;i<l2.length;i++){
console.log(i,l2[i])
}
循环自定义对象：
var d = {aa:'xxx',bb:'ss',name:'小明'};
for (var i in d){
console.log(i,d[i],d.i) //注意循环自定义对象的时候，打印键对应的值，只能是对象[键]来取值，不能使用对象.键来取值。
}
可以循环自定义对象（在for循环内点不可以取值）
11.2.3 三元运算符
var 结果 = boolean表达式 ? 为true返回的值:为false返回的值
var a=10;
var b=11;
var c=a>b ? a:b;
12 函数
function 函数名(参数){
函数体
return 返回值
}
函数名(参数)
//注意 : 传递的参数可以和定义的个数不一样,但是不要这么写
// 返回值只能有一个
一个函数体内的变量在另一个函数里边是不能使用的
//arguments伪数组
function add(){
console.log(arguments);
}
add(1,2,3,4)
function add(a,b){
console.log(arguments);
}
add(1,2,3,4)
12.1 匿名函数
var add = function(){
console.log('hello,world');
}
//add()调用
12.2 自调用函数(自执行函数)
(function(a,b){
console.log(a,b)
})(1,2)
13 函数的全局变量和局部变量
局部变量：
在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。
全局变量：
在函数外声明的变量是*全局*变量，网页上的所有脚本和函数都能访问它。
变量生存周期：
JavaScript变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
14 作用域
首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。
var city = "BeiJing";
function f() {
var city = "ShangHai";
function inner(){
var city = "ShenZhen";
console.log(city);
}
inner();
}
f();
var city = "BeiJing";
function Bar() {
console.log(city);
}
function f() {
var city = "ShangHai";
return Bar;
}
var ret = f();
ret();
闭包:
var city = "BeiJing";
function f(){
var city = "ShangHai";
function inner(){
console.log(city);
}
return inner;
}
var ret = f();
ret();
15 面向对象
function Person(name){
this.name = name;
};
var p = new Person('taibai');
console.log(p.name);
Person.prototype.sum = function(a,b){ //封装方法
return a+b;
};
p.sum(1,2);
3
16 date对象
//方法1：不指定参数
var d1 = new Date(); //获取当前时间
console.log(d1.toLocaleString()); //当前2时间日期的字符串表示
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString())
常用方法
var d = new Date();
使用 d.getDate()
//getDate() 获取日
//getDay () 获取星期 ，数字表示（0-6），周日数字是0
//getMonth () 获取月（0-11,0表示1月,依次类推）
//getFullYear () 获取完整年份
//getHours () 获取小时，从0开始
//getMinutes () 获取分钟，从0开始
//getSeconds () 获取秒，从0开始
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜),时间戳