HTML-JavaScript

严格区分大小写，每行内容后面要加分号（;）

1.引入外部js文件

<script src = "index.js"></script>

2.弹窗和打印

alert() 弹窗
console.log() 打印

3.载入页面后执行

<script>
	window.onload = function(){
	
	}
</script>

一个页面只能出现一次

4.获取标签

4.1独有标签

document.title = “标题”

document.body.innerHTML = “内容”
会解析标签

document.body.innerText= “内容”
不会解析标签，作为文本显示

4.2 其他标签

4.2.1定义变量

var和let

4.2.2获取标签

getElementById
getElementsByClassName
getElementsByTagName
querySelectorAll() 获取所有
querySelector() 获取第一个

let oBox = document.getElementById("box");
oBox.innerHTML = "888" ;

let aBox = document.getElementsByClassName("box");
aBox[0].innerHTML = "888" ;

let oI = document.querySelectorAll("#wrap i")

document是从整个页面获取，也可以换成其他变量

5.事件

5.1 事件

onclick
ondblclick
onmouseenter
onmouseleave
onresize

5.2 事件函数

oBox.onclick = funtion(){
oBox.innerHTML=“我被点击了”；
}

oBox.onclick = funtion(){
this.innerHTML=“我被点击了”；
}
对象相同时，可以用this代替

5.3 js操作标签属性

oA.target = “_self”;

5.4自定义标签属性

<a tz="lalala"> 自定义tz属性，属性值为lalala
获取oA.getAttribute(“tz”)
设置oA.setAttribute(“tz”,“hahaha”)
移除oA.removeAttribute(“tz”)

5.5 js操作样式

操作单条属性

oBox.style.width="300px"

操作多条属性，会把style覆盖

oBox.style.cssText= "width:300px;height:300px;"

操作复合属性时，横杆会被识别为减号，通过使用驼峰写法解决
或者通过中括号
oBox.style[“margin-left”]=“500px”;
中括号内可以传变量

6.数据类型

string  字符串
number  数字
boolean  布尔  true / false
undefined  未定义
null  空
object  对象
Symbol  字符

查看数据类型  typeof

7.定义变量

var   可以重复定义（将一个变量重复赋值）

let   不可以重复定义,
块级作用域，定义在{}内时，不能作用于全局

const 定义常量，不能改

可以先定义再赋值

var =a,b,c,d,e,f

8.操作符

8.1 算术运算符

+   加号两边有字符串时，代表拼接
-   尽量将字符串转为数字，转不了的转为NaN，NaN不是数字，属于数字类型

*

/

%

8.2 赋值运算符

var c,d

=
+=
-=
*=
/=
%=
++  c = 6,d=c++    c是7，d是6   先赋值；；c = 6,d=++c    c是7，d是7 先运算
--

8.3 比较运算符

>     大于
<     小于
>=    大于等于
<=    小于等于
==    等于
!=    不等于
!==   不全等
===   全等

8.4 逻辑运算符

&&  并

||  或

！  非

0是假，其他数字都为真
当逻辑运算符两边不一定是布尔值时，&&遇到假停止，||遇到真停止，！先转为布尔值再取反

9.流程控制

for(var i = 1 ; i<9 ; i++){
	console.log(i);
}

for (let i = 0; i < len; i++){
	ali[i].onclick = function(){
		alert(i);
	}
}


var i = 1;
while( i<9 ){
	console.log(i);
	i++;
}



 var i = 1;
 do{
   	console.log(i);
   	i++;
 }while( i<9);

break 中断循环
continue 跳出本次循环

10.if判断

强制转换为false的：0，false，""，null，undefined，NaN

if(true){
	alert("真");
}else{
	alert("假");
}

三目运算
“”？alert(“真”)；alert(“假”)；
a = 8>6?8:6

if—else if—else

11.switch判断

全等判断

var name = “hh”
switch(name){
case “lh”:
alert(name+“你好”);
break;
case “hh”:
alert(name+“haha”)；
break;
default:
alert(name+“你是谁”)；
break；
}

break阻止向下一个case运行

12.字符串

可读，不可写

length       长度

[]         下标

charCodeAt()    unicode码

Replace()      替换

split()       分割
var a=“aaaibbiccc”
a.split(“i”)

toUpperCase()    大写

toLowerCase()   小写

indexOf()      索引
a.indexOf(“i”)返回第一个i的位置，没有返回-1
a.indexOf(“i”，4) 从第3位往后开始找，返回找到第一个i的位置

substring()     截取
截取字符串，会比较参数值大小，小的在前，负数变为0

slice()       切割
不会交换位置，负数从右往左

toString()      转为字符串

13.数组

可读，可写

length       长度

[]         下标

push()       追加
a.push(“aaa”，“bbb”);

unshift()      前面加
a.unshift(“aaa”，“bbb”);

pop()        从后面删
shift()       从前面删

splice()

传一个参数a.splice(4)，截取数组中前4个元素组成数组
传二个参数a.splice(1，2)，删除2个，从第1位开始删
传三个参数a.splice(1,0,“aaa”) ，从第1位开始删，删0个，并插入“aaa”

sort()        从下到大排序，
当有负数是会发生错误所以用

a.sort(funtion(a,b){
	return b-a;
});

从小到大排序
reverse() 倒序

join()          拼接
a.join(" ")

14.数学方法

Number(a)     转为数字类型
parseInt(a)    转为数字，整数部分遇到不是数字就停
parseFloat()    转为数字，小数部分遇到不是数字就停
a.toFixed(2)    四舍五入保留2位小数

15.Math数学函数

Math.pow(16,2)     16的2次方
Math.round（5.5）     四舍五入取整
Math.ceil(0.2)      向上取整
Math.floor(0.9)      向下取整
Math.max(2,1,5,6,8)     取最大值
Math.min(1,2,3,4)      取最小值
Math.random()        [0,1)随机数
Math.random()*10+10     [10,20)的随机数
Math.PI            圆周率
Math.abs()          绝对值

16.Date方法

定义时间对象
var data = new Date();

16.1时间戳

var strap = data.getTime();
var strap = Date.now

16.2时间方法

data.getFullYear()
data.getMonth()+1

月份从0开始，需要加1

data.getDate()
data.getHours()
data.getMinutes()
data.getSeconds()
data.getDay()

17.定时器

setTimeout(function(){
	console.log(1);
},1000);

只执行1次

setInterval(function(){
    console.log(1);
},1000);

一直不停执行

定时器清除

var num = 5
timer =   setInterval(function(){
	num--;
    console.log(1);
    if(num === 0){
		clearInterval(timer);
		window.location.href="http://www.baidu.com";
	}
},1000);

18.函数

18.1定义函数

function funname(){}

直接定义函数，可以在定义前执行
通过var 的函数，只能在定义后执行

有名函数，函数名加括号立即执行函数

18.2事件调用

aDiv[0].onclick=fn;

有名函数做事件时，不能加括号

18.3函数表达式

+，-，~，!,() 可以将匿名函数变为函数表达式立即执行

18.4 参数

不定参arguments
sum(1,2,3,4,5,6,7,8,9,10);
function sum(){
console.log(arguments.length);
};
定义函数时，不设置形参，传入多个实参会存在arguments中，通过arguments[i]取得传入的参数

18.5函数返回值

函数默认返回undifined
return a； 返回a

18.6 函数作用域

js解析顺序
第一步：先解析var，function和参数，只进行定义，不解析赋值，所有定义的对象值都为undifined
第二步：从上到下执行