0基础前端学习---第六天-CSDN博客

if（条件）{ 条件成立执行的代码 }
if（条件）{ 条件成立执行的代码 } else{ 条件成立执行的代码 }
if-else的嵌套：当假设的情况不止两个的时候，简单的if-else就没有办法满足条件，if-else可以无限嵌
if（条件1）{ 条件1成立执行的代码 }
else if（条件2）{ 条件2成立执行的代码 }
else{ 条件2不成立执行的代码 }

注意：if-else成对出现，有else绝对有一个与之匹配的if，else与它前面的最近的同级的if是一对
如果情况明确，并且是一些简单的数值和字符的选择可以使用switch

switch（要匹配的值）{
case 常量 : 匹配以后执行的代码；break；
case常量：匹配以后执行的代码；break；
default：上面都匹配不到执行的代码
}
数字的判断用switch比较好
break防止穿透，如果不加break，在匹配到以后，后面的选项就不会再进行匹配，直接执行。

3.获取元素的其他方法

通过id获取元素：

document.getElementById('id名');

通过标签名获取元素:

document.getElementsByTagName('标签名') 
父元素.getElementsByTagName('标签名')

通过class名获取元素:

document.getElementsByClassName('类名')
父元素.getElementsByClassName('类名')

通过tagName和ClassName获取的元素是元素集合，用法和数组一样，使用的时候必须通过[]获取出来具体的元素。
栗子：

var oLi = document.getElementsByTagName('li');
console.log(oLi.length); //获取元素集合的长度
oLi[1].onclick = function () { alert('点击了');}

js函数

1.函数声明及调用

普通函数声明及调用：
声明：function 函数名(){ 函数保存的代码块 }
调用：函数名();
表达式函数声明及调用
声明：var 变量名 = function (){ 函数保存的代码块 }
调用：变量名();
函数在没有调用之前是没有任何作用的，代码也不会执行

2.函数的使用范围

封装：声明一个函数，去实现某种功能
作为事件处理函数：元素.事件 = function(){}

3.函数中的参数

形参(形式参数)： function sum(a){} a --- 形参
实参(实际参数)：调用函数 sum（10） 10 ---- 实参
在函数调用的时候，将实参赋值给形参 a = 10;
多个参数用逗号隔开，形参默认值是undefined，多余的实参不参与计算
arguments :函数内置对象，表示实参集合
需求：声明一个函数，计算两个数的和
分析：计算两个数的和，并没有说这两个数具体是多少
结论：声明一个函数，计算任意两个数的和
如果函数中，有不能确定的值，使用函数参数表示

4.函数中的参数类型

函数的参数类型：js的所有数据类型都能作为函数参数
基本数据类型：number，string，boolean
null和undefined：这两个值一般不会完成参数，没有意义，运行还会报错。
复杂类型：Object，function， array

5.函数中的作用域及预解析

函数的作用域

作用域：它是指对某一变量和函数具有访问权限的代码空间
作用域链是JavaScript内部中一种变量、函数查找机制，它决定了变量和函数的作用范围，向上查找的方式。

预解析

解析js代码时，会有一个预解析的操作，会先找到var和function，然后逐行解析

6.函数返回值

函数执行完以后，一定有返回值。
函数通过 return 关键字返回函数内部的值
function sum(a,b){ return a+b }
如果没有指定返回值。函数的返回值默认为undefined
在函数中，只要遇到return，则函数后面的代码不再执行
函数的返回值类型：js中所有的数据类型都能作为函数的返回值。
基本数据类型：number，string，boolean，null，undefined
复杂类型：Object，array，function
注意：return只能返回一个值，如果要返回多个数值，可以通过数组，或者json形式返回。

7.函数封装

函数封装：将函数封装成独立的个体，不依赖任何外界的因素，在任何需要的时候调用。

函数封装步骤：
将主要代码放入函数中
找出函数中不能确定的值作为参数
将参数代入函数中
调用调试函数
获取行间元素样式：
语法：元素.style.属性名
获取非行间样式：
标准浏览器：getComputedStyle(标签).属性
ie浏览器：标签.currentStyle.属性

8.函数复用

复用代码：
尽量保证html代码结构一致，可以通过父元素获取子元素
把核心代码实现，用函数包起来
调用（找每组中不同的值，通过参数传入）
例：购物车的实现

JavaScript定时器

延迟定时器、间歇执行定时器

1.定时器分类

JavaScript提供了一些原生方法来实现延时去执行某一段代码---定时器。
JavaScript定时器分为两类：
setTimeout：延迟执行
setInterval：间歇执行
定时器-setTimeout
延迟执行：
语法：setTimeout(函数，延迟时间(单位ms))
栗子：延迟1000毫秒，执行一次函数

var n=0;
setTimeout(function(){
n++;
console.log(n);// 1
},1000)

2.定时器-setInterval

间歇执行：
语法：setInterval(函数，延迟时间(单位ms))
栗子：间歇1000毫秒执行一次函数

var n=0;
setInterval(function(){
n++;
console.log(n);
},1000)

3.清除定时器

当定时器不需要的时候就需要清除，例如倒计时。
清除定时器：
clearInterval（IntervalId）
clearTimeout（IntervalId）
IntervalId
开启定时器的时候，会返回一个唯一标志定时器的id
栗子：

var time = setInterval（function(){},1000）

4.运动函数封装

用到定时器去实现

div从左往右移动：开启定时器，在当前元素的基础上+10，到达500停止
div从右往左移动：开启定时器，在当前元素的基础上-10，到达0停止
封装：将来回的操作封装成在一个函数中
声明一个函数，将主要代码放入函数中
找到可变的量做为参数，代入函数中(运动元素，运动属性，步长, 目标值)
判断条件处理： if((speed >= target && step > 0 )|| (speed <= target && step < 0))
步长值正负： step = target > parseInt(getStyle(obj,attr)) ? step : -step