JS事件
一.循环绑定问题
1.1事件的触发
// 页面有一个ul下4个li // lis.length = 4 for (var i = 0; i < lis.length; i++) { // 给页面元素对象添加一个任意属性(保留索引的属性index) lis[i].index = i // 循环绑定时. i分别是0,1,2,3, 也就给每一个li进行了点击事件的绑定 lis[i].onclick = function () { // 在事件绑定时,没有执行事件内部的逻辑体, 在绑定结束后, 激活事件时, 才会执行 // 循环结束后, i值定格在4, 索引在激活事件执行功能时,拿到的i的值全部是4 // 需求1: 打印li的索引 // console.log(i) // 解决:每一个li都有index属性,取出自己(this)的索引 console.log(this.index) // 需求2: 打印自身内容 // console.log(lis[i].innerText) // 解决: this就能唯一指向当前激活事件的那个li对象 console.log(this.innerText) } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件基础一</title> </head> <body> <!--为该盒子添加一个点击事件--> <div class="box">12345</div> </body> <script> // 1.获取对象 var box = document.querySelector('.box'); // 2.绑定事件 => 3.完成具体操作 box.onclick = function () { alert(123) } </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件基础二</title> </head> <body> <div class="box">12345</div> </body> <script> // 1.获取对象 var box = document.querySelector('.box'); function btnClick() { alert(123) } // 事件与已有的函数进行绑定=>将函数地址给事件完成绑定 box.onclick=btnClick; </script> </html>
错误写法
// 错误写法: 将btnClick函数执行结果返回给box.onclick // box.onclick = btnClick(); // console.log(box.onclick)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件基础二</title> </head> <body> <div class="box">12345</div> </body> <script> // 1.获取对象 var box = document.querySelector('.box'); function aaa() { alert("aaa") } function btnClick() { alert(123); return aaa; } //错误写法:将btnClick函数执行结果返回给box.onclick // box.onclick = btnClick(); // console.log(box.onclick) // 完成事件的绑定后，绑定的函数由系统来调用，系统在用户出发事件时来调用 box.onclick=function () { alert(this.innerText) } </script> </html>
需求1:每一个li都具有点击事件,事件的目的是打印自己的文本内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件基础二</title> </head> <body> <div class="box">12345</div> <ul class="ul"> <li>001</li> <li>002</li> <li>003</li> <li>004</li> </ul> </body> <script> var lis=document.querySelectorAll('.ul li'); // 循环绑定事件 for(var i =0;i < lis.length;i++) { lis[i].onclick=function () { alert(this.innerText) } } </script> </html>
需求2:点击时,不是打印内容,而是打印li自己的索引
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件基础</title>
<style>
.box:hover {
cursor: pointer;
}
</style>
</head>
<body>
<!--为该盒子添加一个点击事件-->
<div class="box">12345</div>
<!--需求1:每一个li都具有点击事件,事件的目的是打印自己的文本内容-->
<!--需求2:点击时,不是打印内容,而是打印li自己的索引-->
<ul class="ul">
<li>001</li><!-- index: 0 -->
<li>002</li><!-- index: 1 -->
<li>003</li><!-- index: 2 -->
<li>004</li><!-- index: 3 -->
</ul>
</body>
<script>
var lis = document.querySelectorAll('.ul li');
// lis[0].onclick = function () {
// alert(this.innerText)
// }
// lis[1].onclick = function () {
// alert(this.innerText)
// }
// 循环绑定事件 => 变量污染
for (var i = 0; i < lis.length; i++) {
// 给页面元素对象添加一个任意属性(保留索引的属性index)
lis[i].index = i;
lis[i].onclick = function () {
// alert(this.innerText)
// console.log(i);
// console.log(lis[i].innerText)
// 每一个li都有index属性,取出自己(this)的索引
console.log(this.index)
}
}
</script>
</html>
二.对象的使用
2.1对象字典的增删改查
// 作为字典来使用 ***** var dict = { a: "AAA", b: "BBB" } // 查 console.log(dict.a); // 改 dict.a = "AAAAA"; console.log(dict); // 增 dict.c = "CCC"; console.log(dict); // 删 delete dict.b; console.log(dict); // 总结: 只要是js对象, 就可以随意添加属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对象的使用</title>
</head>
<body>
对象的使用
</body>
<script>
// 创建一个对象
// 了解: 面向对象js编程
function Person(name, age) {
this.name = name;
this.age = age;
this.work = function () {
console.log(this.name + "在工作");
}
}
var p1 = new Person("egon", 79);
var p2 = new Person("kevin", 78);
var p3 = new Person("jerry", 3);
console.log(p1.name);
console.log(p2["age"]);
p3.work();
var obj = {
name1: "egon",
name2: "tank",
age: 79
}
for (var i = 1; i <=2; i++) {
console.log(obj["na" + "me" + i])
}
// 对象的key(属性名)就是字符串类型 可以做字符串拼接本质就是字符串类型
// 作为字典来使用 *****
var dict = {
a: "AAA",
b: "BBB"
}
// 查
console.log(dict.a);
// 改
dict.a = "AAAAA";
console.log(dict);
// 增
dict.c = "CCC";
console.log(dict);
// 删
delete dict.b;
console.log(dict);
// 总结: 只要是js对象, 就可以随意添加属性
</script>
</html>
三.Math类的使用
随机数
// 得到区间[min, max]之间的正整数 function randomNum(min, max) { return parseInt(Math.random() * (max - min + 1)) + min; }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Math</title>
</head>
<body>
Math
</body>
<script>
// 绝对值
// console.log(Math.abs(-10));
// 最大值
// console.log(Math.max(10, -10, 24, 35, 12));
// 随机数 [0, 1)
// for (var i = 0; i < 20; i++) {
// var rNum = Math.random();
// console.log(rNum);
// }
// [0, 10]之间的正整数
// [0, 1) * 11 => [0, 11) 取整 => [0, 10]
// for (var i = 0; i < 20; i++) {
// var rNum = Math.floor(Math.random() * 11);
// console.log(rNum);
// }
// [5, 15]之间的正整数
// [0, 10] + 5 => [5, 15]
// for (var i = 0; i < 20; i++) {
// var rNum = parseInt(Math.random() * 11) + 5;
// console.log(rNum);
// }
// [min, max]
// 公式: parseInt(Math.random() * (max - min + 1)) + min //取整数
// [37, 38]
// for (var i = 0; i < 20; i++) {
// var rNum = parseInt(Math.random() * (38 - 37 + 1)) + 37;
// console.log(rNum);
// }
// 这个仅仅作为了解
// * / n => [0, n-1]
// [min, max]
// 公式: parseInt(Math.random() * 100000000000) % (max - min + 1) + min
for (var i = 0; i < 20; i++) {
var rNum = parseInt(Math.random() * 100000000000) % 11 + 5;
console.log(rNum);
}
var ele = document.querySelector("h1:nth-child(1)")
ele.setAttribute("src", "ssdsdsa");
ele = document.querySelector("h1:nth-child(2)")
ele.setAttribute("src", "ssdsdsa");
</script>
</html>
四.字符串操作
字符串操作
chartAt(n)：指定索引字符，同[n] concat(str)：将目标字符串拼接到指定字符串之后 indexOf(str)：指定字符串第一次出现的位置 一个从前找 lastIndexOf(str)：指定字符串最一次出现的位置 一个从后找 match(re)：匹配指定正则，结果为数组(可全文匹配) replace(re, str)：将正则匹配到的字符串替换为指定字符串 search(re)：匹配指定正则，结果为匹配的索引，反之-1 substr(n, m)：从索引n开始，截取m个字符长度(m省略代表截取到最后) substring(n, m)：从索引n开始，截取到索引m(m省略代表截取到最后) slice(n, m)：同substring(n, m) split(re)：以指定正则将字符串拆分为数组 toUpperCase()：转换为大写 toLowerCase()：转换为小写 trim()：去除首尾空白字符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字符串操作</title>
</head>
<body>
字符串操作
</body>
<script>
// 1.指定索引下的字符
var s = "abcdef123456呵呵哈哈";
console.log(s.charAt(3));
// 2.判断是否存在: 呵呵是否在字符串中
// -1代表不存在, 反正就是存在(的索引)
console.log(s.indexOf("呵")); // 12
console.log(s.lastIndexOf("呵")); // 13
// 3.替换
var newS = s.replace("abc", "ABC");
console.log(s);
console.log(newS);
// 总结: 字符串为不可变类型, 如果某操作要改变字符串, 该操作一定拥有返回值
// 4.裁剪 slice(n, m) 从索引n开始截取到索引m之前
newS = s.slice(0, 3);
console.log(newS);
// 5.拆分数组
var ss = "123 456 abc def";
var arr = ss.split(" ");
console.log(arr)
</script>
</html>
五.数组操作
indexOf(ele)：指定元素第一次出现的位置 lastIndexOf(ele)：指定元素最一次出现的位置 reverse()：反转数组 join(str)：以指定字符串连接成字符串 sort(): 排序 filter(function(value, index){ return true | false})：过滤器 增删改查 push(ele)：从尾加 unshift(ele)：从头加 pop()：从尾删 shift()：从头删 splice(begin, length, ...eles)：完成增删改 // begin开始索引 // length长度 // 新元素们(可以省略)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数组操作</title>
</head>
<body>
数组操作
</body>
<script>
var arr = [3, 5, 1, 2, 4];
console.log(arr); // [3, 5, 1, 2, 4]
// 1.反转
arr.reverse();
console.log(arr); // [4, 2, 1, 5, 3]
// 2.排序
arr.sort();
console.log(arr); // [1, 2, 3, 4, 5]
console.log(arr.reverse()); // [5, 4, 3, 2, 1]
// 3.判断元素是否存在 (不等于-1就是存在)
console.log(arr.indexOf(5));
// 4.拼接成字符串
var ss = arr.join("@");
console.log(ss); // 5@4@3@2@1
// 5.过滤器 (保留符合条件的结果,结果一定是小于原数组的大小)
var newArr = arr.filter(function (ele) { // 回调函数的回调次数有数组的个数决定
// filter回调了三个参数: ele, index, sourcArr 元素，索引，列表
// 偶数
if (ele % 2 == 0) {
// 满足过滤条件
return true; //代表满足条件的
}
// 不满足过滤条件
return false;
});
// 满足过滤条件的就会添加到新数组中保留
console.log(newArr) // [4, 2]
/*原理
arr.filter(fn) {
var newArr = [];
for (var i = 0; i < this.length; i++) {
var res = fn(this[i], i, this);
if (res == true) {
newArr.push(res)
}
}
return newArr;
}
*/
</script>
<script>
console.log("-----------------------");
var a = [4, 3, 5, 1, 2];
a.push(6);
console.log(a);
a.unshift(0);
console.log(a);
var res = a.pop();
console.log(a, res);
res = a.shift();
console.log(a, res);
// 万能方法
// splice(begin, length, ...eles);
// begin开始的索引
// length操作的长度
// 替换为的新元素们(可以省略)
// 增
// 从索引3之前操作0位,替换为10 => 在索引3插入10
a.splice(3, 0, 10); // [4, 3, 5, 10, 1, 2]
console.log(a);
// 在索引0之前操作0位,替换为1,2 => 在首位添加1和2
a.splice(0, 0, 1, 2);
console.log(a); // [1, 2, 4, 3, 5, 10, 1, 2]
// 改
// 在索引末尾之前操作1位,替换为20 => 在末位修改为20
a.splice(a.length - 1, 1, 20); // [1, 2, 4, 3, 5, 10, 1, 20]
console.log(a); // [1, 2, 4, 3, 5, 10, 1, 20]
// 删
a.splice(2, 3);
console.log(a); // [1, 2, 10, 1, 20]
</script>
</html>
六.事件
1.鼠标事件: onclick：鼠标点击 ondblclick：鼠标双击 onmousedown：鼠标按下 onmousemove：鼠标移动 onmouseup：鼠标抬起 onmouseenter：鼠标悬浮 onmouseleave：鼠标移开 oncontextmenu：鼠标右键 事件参数ev: ev.clientX：点击点X坐标 ev.clientY：点击点Y坐标 2.键盘事件: onkeydown：键盘按下 onkeyup：键盘抬起 事件参数ev: ev.keyCode：按键编号 ev.altKey：alt特殊按键 ev.ctrlKey：ctrl特殊按键 ev.shiftKey：shift特殊按键 3.其他事件： onload：页面加载成功 onscroll：页面滚动 onresize：页面尺寸调整 window.scrollY：页面下滚距离
6.1鼠标事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标事件</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script>
var box = document.querySelector('.box');
// 悬浮
box.onmouseenter = function () {
box.style.cursor = "pointer";
console.log("鼠标悬浮了")
}
// 移动
box.onmousemove = function () {
console.log("鼠标在移动")
}
// 按下
box.onmousedown = function (ev) {
console.log(ev);
// 鼠标的点击点
// ev.clientX | ev.clientY
console.log(ev.clientX, ev.clientY);
console.log("鼠标按下")
}
// 抬起
box.onmouseup = function () {
console.log("鼠标抬起")
}
// 移开
box.onmouseleave = function () {
console.log("鼠标移开")
}
// 右键: 右键按下抬起为一次右键
box.oncontextmenu = function () {
console.log("鼠标右键")
}
</script>
</html>
6.2键盘事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>键盘事件</title>
</head>
<body>
</body>
<script>
// 具体按下的是那个按键
document.onkeydown = function () {
// console.log("键盘按下了")
}
// ev: 系统回调事件函数,传递的事件对象
// 键盘事件中,ev中有keyCode来唯一标识具体的按键
// 通过ctrlKey | shiftKey | altKey 来标签特殊按键是否为按下状态
document.onkeyup = function (ev) {
console.log(ev);
console.log(ev.keyCode, ev.altKey);
console.log("键盘抬起了")
}
</script>
</html>
七.定时器
持续型定时器：setInterval(函数, 时间, 参数们)
一次性定时器：setTimeout(函数, 时间, 参数们)
清楚定时器：
clearInterval(定时器编号)
clearTimeout(定时器编号)
// 一次性定时器: // 1.r1是定时器返回值, 就是定时器创建先后的数字编号 // 2.只在创建定时器1s后执行1次 var r1 = setTimeout(function () { console.log("一次性定时器响了!1111"); }, 1000); // 持续性定时器: // 1.r2是定时器返回值, 就是定时器创建先后的数字编号 // 2.第一次触发在1s后,然后每1s触发一次 var num = 0; var r2 = setInterval(function () { console.log("持续性性定时器响了%d次!", ++num); }, 1000); // 清除一个定时器 // 1.通过定时器数字编号来清除 // 2.清除定时器不分种类可以混用 clearTimeout(r1) == clearInterval(1) // 清除页面所有定时器 var n = setTimeout(function () {}, 1); // n一定大于之前所有的定时器编号 for (var i = 0; i < n; i++) { // 将1~n之间所有定时器再清一遍 clearTimeout(i) }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定时器</title>
</head>
<body>
</body>
<script>
// 一次性定时器
var r1 = setTimeout(function () {
console.log("一次性定时器响了!1111");
}, 1000);
var r2 = setTimeout(function () {
console.log("一次性定时器响了!2222");
}, 1000);
var num = 0;
var r3 = setInterval(function () {
console.log("持续性性定时器响了%d次!", ++num);
}, 1000);
console.log("代码向下执行了!");
console.log(r1, r2, r3);
// 如何取消定时器 => 通过定时器数字编号(该定时器是第几个创建的)
clearInterval(2);
var r4 = setTimeout(function () {
console.log("一次性定时器响了!4444");
}, 1000);
console.log(r4);
// 将页面中所有定时器清除
// 注: 清除定时器不分种类可以混用
var n = setTimeout(function () {}, 1); // n一定大于之前所有的定时器编号
for (var i = 0; i < n; i++) { // 将1~n之间所有定时器再清一遍
clearTimeout(i)
}
</script>
</html>
浙公网安备 33010602011771号