js基础day03
一.综合练习
1.换肤效果封装
- 封装原则：相同代码不动，不同的当作参数传递进来
- 封装本质：将重复代码，写到一个函数中，方便重复调用
- 封装好处：简化代码，方便调用，代码扩展性提高了
2.图片切换
2.1 使用事件
- onmousemover 鼠标移动到元素上
- onmouseout 鼠标从元素上离开
pic.onmouseover = function () {
//注意:标签自己的属性可以使用点语法直接获取
pic.src = "images/22.jpg";
};
2.2 prompt() 显示可提示用户进行输入的对话框
- prompt(text,defaultText)
- text: 可选, 对话框提示的文字
- defaultText: 可选, 输入框默认文字
- 返回值: 返回输入内容, 字符串
- 如果用户单击提示框的取消按钮，则返回 null。如果用户单击确认按钮，则返回输入字段当前显示的文本。
- 在调用 prompt() 时，将暂停对 JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。
2.3 如何学习函数
- a.函数功能。怎么调用函数
- b.函数参数 。参数是可选的, 还是必需的, 可选可以省略, 必需 必需传参,参数的作用
- c.函数返回值。 返回的值什么类型的数据, 返回的是字符串类型
3.美女竞价
3.1 点击按钮逻辑判断
1.是否输入内容
2.转换为数字类型，判断输入的值是否是数值
3.判断输入的数值是不是小于1000， 小于1000弹窗提示
4.如果数值大于1000， 修改h2内容
5.第二次输入数值，判断当前输入的数值，是否比上次输入数值大，如果小于上次的数值弹窗提示
6.如果第二次输入数值比上次大，更新h2文本内容
3.2 isNaN(x) 用于检查其参数是否是非数字值
- x:必需。要检测的值。
- 如果 x 是特殊的非数字值 NaN，返回的值就是 true。如果 x 是其他值,则返回 false。
- isNaN() 函数可用于判断其参数是否是 NaN，该值表示一个非法的数字（比如被 0 除后得到的结果）
二.window.onload
2.1window :所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
-
甚至 HTML DOM 的 document 也是 window 对象的属性之一：
window.document.getElementById("header");与此相同：
document.getElementById("header");
2.2 onload 事件: 某个页面或图像被完成加载, 就会响应onload事件
三.变量提升
同一个作用域下，只要声明一个变量，变量的声明会被提升到该作用域最上边
<script>
//结论：同一个作用域下，只要声明一个变量，变量的声明会被提升到该作用域最上边
var a;
alert(a); //结果：undefined 变量只是声明， 没有赋值
a = 11; //全局变量
//变量提升:
//函数内声明一个变量，变量声明会被提升到函数最上边,但是变量赋值没有发生改变
function fn() {
var b;
alert(b); //undefined 变量只是声明， 没有赋值
b = 22; //局部变量
}
//函数调用
fn();
</script>
四.取整函数
4.1 parseInt()
1.数字取整
var a = 123.456789;
var b = parseInt(a);
console.log(b , typeof b);
2.字符串取整
- parseInt() 可以对数字字符串取整，获取小数点前边整数部分,并且转化为number类型
var c = '123.456789';
var d = parseInt(c);
console.log(d, typeof d);
- 注意：parseInt() 对数字字符串取整，先取字母前面数字，然后再取整数部分，字母后面数字获取不到
var e = '123.456789px222';
var f = parseInt(e);
console.log(f, typeof f); //123, number
- 注意：parseInt() 取整字符串一定是以数字开头,否则返回结果NaN
var e = 'px222';
var f = parseInt(e);
console.log(f ); //NaN
4.2 parseFloat()
parseFloat() 截取字符串中小数
- parseFloat() 原理: 先判断传入字符串是否是以数字开头, 如果以数字开头,就对字符串进行判断
var ee = '123.456789px222';
var ff = parseFloat(ee);
console.log(ff, typeof ff);//123.456789 , number
4.3 toFixed(x)
toFixed(x) 保留x位小数
var a = 123.456789;
var num = a.toFixed(2);
//注意：toFixed(x) 以字符串格式，返回保留的x位小数
console.log(num, typeof num); // 123.46 string
num = num * 1;
- 注意：toFixed() 不能处理字符串
var e = '123.456789px222';
var num2 = e.toFixed(2);
console.log(num2);
五.数据类型转换
1.数字转字符串
var a = 3.1415926;
//方法一：
var str = a + '';
console.log(str, typeof str);
//方法二：
var str2 = String(a);
console.log(str2, typeof str2);
2.字符串转数字
var b = '12345';
//方法一：
var num = b * 1;
console.log(num, typeof num);
//方法二：
var num2 = Number(b);
console.log(num2, typeof num2);
3.其他类型转换为布尔
var a = 3.1415926;
var b = '12345';
//验证非0即真
//数字转布尔
var c = Boolean(a);
console.log(c, typeof c); //true
//字符串
console.log(Boolean(b)); //true
//0是false
console.log(Boolean(0));//false
//undefined
console.log(Boolean(undefined)); //false
//空字符串
console.log(Boolean('')); //false
//null
console.log(Boolean(null)); //false
六.Math函数库
Math函数库，提供一些属性和函数，让我们进行数学运算
Math 对象属性
- 1.PI 获取圆周率
console.log(Math.PI);
- 2.获取2的平方根
console.log(Math.SQRT2);
Math 对象方法
- 1.abs() 绝对值
console.log(Math.abs(2)); //2
console.log(Math.abs(-11)); //11
- 2.sin() 正弦函数
- 参数是弧度
- 30度 是角度 -> 角度转弧度
- 角度转弧度公式 = 度数 * Math.PI / 180
- 数字精度丢失原因：javaScript 是一门弱类型的语言，从设计思想上就没有对浮点数有个严格的数据类型，所以精度误差的问题就显得格外突出
var a = Math.sin(30 * Math.PI/180);
console.log(a); //数字精度丢失
- cos() 余弦函数
var b = Math.cos(60 *Math.PI/180);
console.log(b);
- 3.ceil() 对数向上取整， 向上取最近的整数
var num = 3.1415;
console.log(Math.ceil(num)); //4
- 4.floor() 对数向下取整，向下取最近的整数
console.log(Math.floor(num)); //3
- 5.max(x, y) 返回x和y中的最大值
- min(x, y) 返回x和y中最小值
console.log(Math.max(2, 5)); //5
console.log(Math.min(2, 5)); //2
- 6.pow(x, y) 返回x的y次幂。 x底数， y指数
console.log(Math.pow(2, 3)); //2的3次方
- 7.random() 返回0~1 之间的随机数
- 注意：取不到边界值，即取不到0，取不到1
console.log(Math.random());
- 8.round(x) 把数四舍五入为最接近的整数
console.log(Math.round(3.14)); //3
console.log(Math.round(3.55)); //4
- 9.sqrt() 返回数的平方根
console.log(Math.sqrt(3)); //3的平方根
//Math.sqrt(3) * 0.5 -> cos(30度)
七.js引入方式
css 引入方式优先级 行内式 > 内嵌式 > 外链式
js引入方式有以下几种：
1.页内式导入js
<script>
//js页内式
//1.获取box
var box = document.getElementById('box');
//2.设置box
box.style.width = '200px';
box.style.height = '200px';
box.style.backgroundColor = 'blue';
</script>
2. window.onload导入js
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//js 页内式
window.onload = function () {
//1.获取box
var box = document.getElementById('box');
//2.设置box
box.style.width = '300px';
box.style.height = '300px';
box.style.backgroundColor = 'green';
}
</script>
</head>
3.外链式导入js
- js要想导入js文件， 使用标签script的属性src设置路径
- 属性src使用方式和img的src一样
- 注意：不能在外链式中，添加任何内容， 也不推荐这样写
- 注意：开发中，外链式要写在页内式上面
<script src="09-index.js"></script>
//09-index.js
//1.获取box
var box = document.getElementById('box');
//2.设置box
box.style.width = '400px';
box.style.height = '400px';
box.style.backgroundColor = 'yellow';
总结：js引入方式没有优先级，最后都是要转化为行内式对元素进行设置。
所以，只有最后一次设置才起作用，后面的设置会覆盖前边的属性设置
八.认识数组
数组：数组时用来保存大批量数据的容器，是数据的集合。
元素：数组中的每个数据叫一个元素。
索引：也叫角标。数组时有序的集合。数组默认就有索引，从左边开始。第一个元素索引为0，索引依次往后递增
1.创建数组
直接实例化
var arr = new Array(99, 88, 77, 66);
console.log(arr);
- 2.数组简写
- js中 [] 是数组标志
var arr2 = [99, 88, 77, 66];
- 3.数组取值
- 格式：数组名[索引]
var index1 = arr2[1];
console.log(index1);
- 4.数组存值
- 格式：数组名[索引] = 值
arr2[2] = 44;
console.log(arr2);
- 5.数组长度， length 获取数组元素个数
console.log(arr2.length);
- 6.数组越界问题：元素索引超出数组范围
- 开发中一定要避免数组越界，数组索引值不要超出 数组长度-1
console.log(arr2[9]);
- 7.数组遍历
for(var i = 0;i < arr2.length;i++){
console.log(i);
console.log(arr2[i]);
}
- 8.js数组可以保存多种数据类型，不建议这样用
var arr3 = [33, 'sk666', undefined, null, true];
console.log(arr3);
九.隔行变色
- getElementsByTagName()
- 参数：标签名， 字符串格式
- 返回值：伪数组， 数组中存储的是获得所有同类型标签
- 伪数组：该数组有些数组方法没有
- 注意：想要获取谁里面的子标签，就由谁来调用
9.png
十.全选反选不选
- js中input使用checked控制是否选中
- checked属性是布尔类型 ， true 选中，false 未选中
<div id="box">
<button>全选</button>
<button>不选</button>
<button>反选</button>
</div>
<div id="inputBox">
<input type="checkbox" >
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div>
10.png
十一.排他思想
11.png
注意：js中给元素设置class,使用属性className
排他思想：先清空所有的，再对当前相应元素单独设置
//第一个按钮
btnList[0].onclick = function () {
//btnList[0].className = 'current';
for(var i = 0; i<btnList.length; i++){
//先清空所有按钮className
btnList[i].className = '';
}
//再对当前响应事件按钮，单独设置
btnList[0].className = 'current';
}
- 封装：相同的代码不动，不同的当作参数传过来
//封装给按钮添加事件功能
function btnClick(obj) {
obj.onclick = function () {
//btnList[0].className = 'current';
for(var i = 0; i < btnList.length; i++){
//先清空所有按钮className
btnList[i].className = '';
}
//再对当前响应事件按钮，单独设置
obj.className = 'current';
}
}
//2.添加事件
btnClick(btnList[0]);
btnClick(btnList[1]);
btnClick(btnList[2]);
btnClick(btnList[3]);
btnClick(btnList[4]);
- 封装2
for(var i = 0; i<btnList.length; i++){
btnClick(btnList[i]);
}
/* btnClick(btnList[0]);
btnClick(btnList[1]);
btnClick(btnList[2]);
btnClick(btnList[3]);
btnClick(btnList[4]);*/
-
封装3
- 问题：每次点击任何按钮，只有最后一个按钮有背景色
- 原因：每次点击按钮 i = 5，当点击时for已经执行完了
- 解决：this 指向响应事件元素
for(var i = 0; i<btnList.length; i++){
//btnClick(btnList[i]);
//获取每一个button
var btn = btnList[i];
btn.onclick = function () {
for(var i = 0; i < btnList.length; i++){
//先清空所有按钮className
btnList[i].className = '';
}
//再对当前响应事件按钮，单独设置
//btn.className = 'current';
//console.log(btn);
//console.log(i);
//this 代表被点击按钮
console.log(this);
this.className = 'current';
}
}
十二.隔行变色-光标移动
<style>
ul{
list-style: none;
}
.current{
background-color: yellow!important;
}
</style>
//3.遍历数组， 给每个li设置背景色
for(var i = 0;i < list.length; i++ ){
//3.1 获取每个li
var oli = list[i];
//3.2设置背景色
oli.style.backgroundColor = (i % 2 == 0) ? 'red':'blue'
//3.3 给每个li添加事件
//排他思想：只显示响应事件的那个li为黄色
oli.onmouseover = function () {
//alert(111);
//只有最后一个li显示黄色
//oli.className = 'current';
//先清空所有li
for(var j = 0; j<list.length;j++){
list[j].className = '';
}
//再单独设置响应事件的li
//this 代指响应事件的li
//注意：className 设置背景， 需要使用 !important 提升页内式优先级
this.className = 'current'
}
}
