复习
// 语法: ECMAScript 操作: DOM BOM
// 1.类型转化
// 转数字: +"3.14" | parseInt("123abc") | parseFloat("3.14.15") | Number() // 转字符串: "" + 3.14 | 3.14.toString() | 3..toString() | String() // 转布尔: Boolean() // 2.运算符 // ++ --: 在前 a = ++num => num先自增1,再赋值给a | 在后 a = num++ => 先将num值赋值给a, 再自增1 // / 结果就是正常运算的数字结果 // * % n 取值范围 [0, n-1] // == 只做值匹配 === 值与类型都需要匹配 // 三目运算符: var maxNum = a > b ? a : b; // 逻辑运算符: && || ! // 3.基础语法 // 流程控制: if分支 | for循环 | while循环 | do...while循环 // if (条件1) {代码块1} else if (条件2) {代码块2} ... else if(条件n) {代码n} else {代码块} // for(var i = 0; i < 10; i++){ 代码块 } // while(条件判断) { 代码块 } // do { 代码块 } while(条件判断) // 4.函数 // 定义: function 函数名(形参列表) { 代码块 } // 调用: var res = 函数名(实参列表); // 参数: 实参与形参只需要位置匹配,不需要个数匹配, 参数可以拥有默认值 // (形参有2个,实参有1个=>第二个形参没有被传值,值就是undefined) // (形参有2个,实参有3个=>第三个实参没有对应的形参接收,实参值被丢弃) // 返回值: 一个函数只能有一个返回值(多个返回值用数组与字典(对象)来处理), 可以空return来结束函数,也可以省略return循环绑定 => 变量污染
// 页面有一个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对象, 就可以随意添加属性随机数
// 得到区间[min, max]之间的正整数
function randomNum(min, max) { return parseInt(Math.random() * (max - min + 1)) + min; }字符串操作
// 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)数组操作
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; } */ ``` ```js // 查 // 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]鼠标事件
var box = document.querySelector('.box');
// 悬浮
box.onmouseenter = function () { box.style.cursor = "pointer"; console.log("鼠标悬浮了") } // 移动 box.onmousemove = function () { console.log("鼠标在移动") } // 按下 box.onmousedown = function () { console.log("鼠标按下") } // 抬起 box.onmouseup = function () { console.log("鼠标抬起") } // 移开 box.onmouseleave = function () { console.log("鼠标移开") } // 右键: 右键按下抬起为一次右键 box.oncontextmenu = function (ev) { console.log("鼠标右键") } // 点击点的x坐标: ev.clientX | 点击点的y坐标: ev.clientY键盘事件
// 具体按下的是那个按键
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("键盘抬起了") }定时器
// 一次性定时器:
// 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) }jq导入
// 什么是jQuery
// jQuery是一个简洁高效的且功能丰富的JavaScript工具库，是对原生JavaScript二次封装的工具函数集合
// 优点
// 开源 | 简洁的选择器 | 简化的Ajax操作 | 良好的浏览器兼容 | 强大的链式操作