一.变量一些知识
全局变量:函数外的声明变量
局部变量:函数内的局部变量
函数内部的变量提升
function(){
console.log(a);
var a = 1;
}
此时输出为undifined,因为会默认将函数内部代码变为:
function(){
var a;
console.log(a);
a = 1;
}
二.Math对象
用于执行数学任务
- 返回绝对值:
Math.abs(x) - 向上取整:
Math.ceil(x) - 向下取整:
Math.floor(x) - 返回最大值:
Math.max(x,y,z) - 返回最小值:
Math.min(x,y,z) - 返回x的y次幂:
Math.pow(x,y) - 返回0-1之间的随机数,取不到边界:
Math.random( ) - 四舍五入为整数:
Math.round(x)
parseInt():可将一个string类型转为number类型,截取字符串前面的数字,向下取整
parseFloat():保留小数点后的数字
toFixed():保留小数的位数
数据类型转换
String():输出为string类型,在Webstorm里为黑色
Number():输出为number类型,在Webstorm里为蓝色
Boolean():输出为bool类型,在Webstorm里为红色
三.DOM
dom是Document Object Model(文档对象模型)的简写
var 变量名 = document.getElementById();:通过dom获取到元素的id名复制给变量方便后面使用,如不声明会是全局变量id名.inneHTML=" ";:通过dom获取的id名改变页面的内容id名.style.属性=" ";:通过dom获取的id名改变页面的样式
注意:
改变样式和属性记得用等号
后面的值记得加双引号
四.JavaScript 事件
事件源:通过DOM获取的属性
事件属性:触发了什么
事件指令(一般用函数封装):结果,事件指令一定是函数名,不带括号,可以简写为下例
格式:
事件源 . 事件属性 = 事件指令
在事件源上触发事件属性执行事件指令
例: var pic = document.getElementById("pic");
pic.onmouseover = function () {
pic.src="img/NJ.jpg"
}
pic.onmouseout = function () {
pic.src="img/4.jpg"
}
事件源为通过DOM获取的ID名,事件属性为鼠标经过和离开,事件指令为改变图片
步骤:
- 首先要获取标签
- 添加事件,改变事件
事件:
onclick事件:鼠标点击事件
onmouseover事件:鼠标经过事件
onmouseout事件:鼠标离开事件
pormpt:提示用户输入信息,返回值为string类型
string类型转number类型: string*1
isNan:不是一个数字,但是number类型,返回值为bool类型,如果值为false说明是一个数字,NAN不等于NAN
onchange:发生改变
onfocus:获得焦点
onblur:失去焦点
placeholder：占位符
注意:重复代码用函数封装,变化的值当作参数,把参数声明一个变量,在添加事件,改变事件以减少冗余代码,如下:
var pic1 = document.getElementById("pic1");
var pic2 = document.getElementById("pic2");
var pic3 = document.getElementById("pic3");
var pic4 = document.getElementById("pic4");
var pic5 = document.getElementById("pic5");
var box = document.getElementById("box");
pic1.onmouseover = function () {
box.style.backgroundImage = "url(images/1big.jpg)";
}
pic2.onmouseover = function () {
box.style.backgroundImage = "url(images/2big.jpg)";
}
pic3.onmouseover = function () {
box.style.backgroundImage = "url(images/3big.jpg)";
}
pic4.onmouseover = function () {
box.style.backgroundImage = "url(images/4big.jpg)";
}
pic5.onmouseover = function () {
box.style.backgroundImage = "url(images/5big.jpg)";
}
上述代码冗余代码过多,简写为下:
var bg = document.getElementById("box");
function changebgImage(liId, bgiUrl) {
var dom = document.getElementById(liId);
dom.onmouseover = function () {
bg.style.backgroundImage = bgiUrl;
}
}
changebgImage("pic1", "url(images/1big.jpg)");
changebgImage("pic2", "url(images/2big.jpg)");
changebgImage("pic3", "url(images/3big.jpg)");
changebgImage("pic4", "url(images/4big.jpg)");
changebgImage("pic5", "url(images/5big.jpg)");
五.数组
定义数组:var arr = [x,y,z];
访问数组中的数据:arr[0];
其中[ ]代表数组,数组中可以存储不同类型的元素,通过下标的形式访问数组元素,下标从0开始,可以通过字符串下标的形式来访问数组元素
获取数组长度:arr.length
数组的遍历
for(var i =0; i<arr.length; i++){
arr[i];}
