前端05 /js基础

前端05 /js基础

昨日内容回顾

• css选择器的优先级

行内(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:边框圆角

• display

不显示不占位 :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

• overflow

溢出部分如何处理?
visible 默认 溢出了也会显示
hidden 溢出部分隐藏
auto scroll 溢出之后显示滚动条

• 定位

position : relative absolute fixed
top:
left:
right:
bottom:
相对定位 : 相对自己原来的位置定位,还占据自己原来的位置
绝对定位 : 相对于有定位的父盒子/整个html界面的位置,不占据原来的位置
固定定位 : 相对浏览器窗口的(不独占一行，可以设置高和宽)

设置0的时候，不需要加px

• z-index

表示的在页面上标签显示的先后顺序
1.值越大的越在前面显示
2.设置的值没有单位没有范围
3.浮动的盒子不能设置index
4.从父现象:父级的优先级不高,儿子的优先级再高也没用（父级标签设置的index小，儿子设置的index再大也没用）

• 透明度opacity

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午夜),时间戳