事件属性
在js中修改元素自带的属性可以直接使用点语法, 而不用加style
如 : img.src
widow.onload
- js 是一门解释性语言, 执行代码是从上往下执行
- window.onload 当前文档加载完后, 就会响应onload事件
- Window 对象表示浏览器中打开的窗口(顶级对象)
变量的提升
在同一个作用域(或函数)中, 只要声明一个变量, 变量的声明就会提升到作用域最上面.
结果:
function fn() {
alert(b); // 结果: undefined 变量只是声明,没有赋值
var b = 22; //局部变量
}
//函数调用
fn();
取整函数
parseInt();
截取数字类型的整数部分
截取字符串中字母前面的数字中, 整数部分
若字母前木有数字,返回NaN
parseFloat();
截取字符串中字母前的,浮点数字符串
无则返回NaN
截取数字类型, 并保持两位小数
//4.获取小数后2位
var d = 233.444;
// var h = parseInt(a * 100) /100;
// console.log(h);
//toFixed(x) 获取小数点后x位, x获取的位数
//注意:toFixed(x) 保留小数后, 会以字符串格式返回, 使用时候注意再转换为数字
var i = a.toFixed(2);
console.log(i, typeof i);
i = i * 1;
console.log(i, typeof i); //
- 注意: 会四舍五入
数据类型转换
- 数字, 字符串, 布尔, undefined, null互相转换
- 数字转字符串
a += ' ';
var str = String a;
- 字符串转数字
a *= 1
var num = Number a;
- 其他类型转换为布尔类型
- 验证: 非0即真
// var f = Boolean(c);
// console.log(f, typeof f); //true
//字符串
// var h = Boolean(a);
// console.log(h, typeof h); //true
//0
// var i = Boolean(0);
// console.log(i, typeof i); //false
//空字符串
// var j = Boolean('');
// console.log(j, typeof j); //false
//null
// var x = Boolean(null);
// console.log(x, typeof x); //false
//undefined
var y = Boolean(undefined);
console.log(y, typeof y); //false
Math函数库
//1.圆周率
console.log(Math.PI);
//平方根
console.log(Math.SQRT2);
//2.abs(x) 返回数的绝对值。
console.log(Math.abs(2));
console.log(Math.abs(-2));
//3.ceil(x) 对数向上取整
console.log(Math.ceil(3.14)); //4
//4.floor(x) 对数向下取整
console.log(Math.floor(3.14)); //3
//5.sin(x) 返回数的正弦
//参数: 弧度
//需要角度转弧度, 公式 = 度数 * Math.PI /180
//注意:精度丢失问题,
var angle = Math.sin(30 * Math.PI / 180);
console.log(angle); // 0.5
//6.cos(x) 返回数的余弦
var angle2 = Math.cos(60 * Math.PI / 180);
console.log(angle2);
//7.max(x, y) 返回x 和y中间最大的值
console.log(Math.max(3, 7));
//8.min(x, y) 返回x 和y中间最小的值
console.log(Math.min(3, 7));
//9.pow(x,y) 返回 x 的 y 次幂
console.log(Math.pow(3, 2));*/
//10.random() 返回 0 ~ 1 之间的随机数。
//注意: 取不到 0 和 1 这两个端点值 (0, 1)
console.log(Math.random());
//随机0 到11 的 整数值
console.log(parseInt(Math.random() * 12));
//11.round(x) 把数四舍五入为最接近的整数
// console.log(Math.round(3.14));
// console.log(Math.round(3.54));
//12.数的平方根
console.log(Math.sqrt(9));
js外部文件导入
导入文件没有优先级 reason: 最终都会转换为行内
触发的事件先后顺序, 决定了同一个属性最后的属性值
注意点: js外链式, script标签内部不要写内容, 写了也并不会被执行.
js的引入方式没有优先级, 只有最后一次设置起作用, 后面的会覆盖前面的设置
数组
索引/ 角标
数组的遍历!!!
数组越界问题
索引 > length - 1;
一定要避免, 因为js不会报错
js可以保存多种数据: Number String Boolean Undefined Null
排他思想
点击按钮出现背景色
/*
问题: 每次点击任何按钮, 只有最后一个按钮有背景颜色
原因: 每次点击按钮 i = 5, 当你点击的时候 , for已经执行完了
解决: this 指向响应事件的元素
*/
var list = document.getElementById('box').getElementsByTagName('button');
//封装
for(var i = 0; i < list.length;i++){
//btnClick(list[i]);
//获取每一个button
var obj = list[i];
obj.onclick = function () {
//清空所有按钮的class
for(var i = 0; i < list.length; i++){
list[i].className = '';
}
// console.log(obj);
//console.log(i);
//将响应事件的按钮,单独设置
//obj.className = 'current';
//this 指向被点击的按钮
console.log(this);
this.className = 'current';
}
}
