一：事件基础
<!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) } } // i = 100; </script> <script> // 1.获取对象 var box = document.querySelector('.box'); // 2.绑定事件 => 3.完成具体操作 // box.onclick = function () { // alert(123) // } function aaa() { alert("aaa") } function btnClick() { alert(123); return aaa; } // 事件与已有的函数进行绑定 => 将函数地址给事件完成绑定 // box.onclick = btnClick; // 错误写法: 将btnClick函数执行结果返回给box.onclick // box.onclick = btnClick(); // console.log(box.onclick) // 完成事件的绑定后, 绑定的函数由系统来调用, 系统在用户触发事件时来调用 box.onclick = function () { alert(this.innerText) } </script> </html>
二：循环绑定==>变量污染
// 页面有一个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) } }
三：对象（字典）的增删改查
// 作为字典来使用 ***** 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); </script> </html>
四：随机数
// 得到区间[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>
五：字符串操作
// 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)
<!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>
六：数组操作
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, sourcerr // 偶数 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; } */
// 查 // arr[index] // 改 // arr[index] = newDate; // 增 // 从尾加: push() // 从头加: unshift() // 删 // pop()：从尾删 // shift()：从头删 // 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]
<!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, sourcerr // 偶数 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>