JavaScript学习笔记【DAY5(2020.8.21)周五】
事件:所谓的事件，是浏览器监听用户行为的一种机制。
比如，当用户使用鼠标 点击 一个按钮，会触发该按钮的 点击 事件 如果此时我们想要执行代码 就可以通过JS脚本设置 点击 事件的处理函数
同样的，如果用户鼠标双击一个按钮，会触发该按钮的双击事件 类似的事件还有很多
事件三要素
1、事件源（谁）： 触发事件的元素
2、事件类型（什么事件）： 例如 click 点击事件
3、事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数
事件的分类
鼠标事件
onclick 点击事件
ondblclick 双击事件
onmousedown 鼠标按下事件
onmouseup 鼠标抬起事件(一次click包含一次mousedown和 一次mouseup)
onmouseover 鼠标进入事件
onmouseenter 鼠标进入事件
onmouseout 鼠标离开事件
onmouseleave 鼠标离开事件
onmousemove 鼠标移动事件
键盘事件
keydown 键盘键被按下
keyup 键盘键被松开
keypress 输入
浏览器的事件
load 页面中所有资源都被加载完毕的时候
scroll 页面的卷动
scrollTop 获取页面的卷动值(滚动值)
document.
焦点事件
focus 当一个元素获取到焦点时
blur 当一个元素失去焦点时
移动端事件
touchstart 触摸开始事件 会在手指按下的时候触发
touchmove 触摸并移动 会在手指按下并移动的时候触发
touchend 触摸结束事件 会在手指离开的时候触发
其它事件
animationstart 动画开始时触发
animationend 动画结束时触发
transitionend 过渡结束时触发
执行事件的步骤
1.获取事件源
2.注册事件(绑定事件)
3.添加事件处理程序(采取函数赋值形式)
绑定事件
绑定事件的第一步 获取元素
// HTML代码
<button id="btn">点我试试看</button>
// JS代码
var btn = document.getElementById("btn");
function click() {
console.log("你好");
}
btn.onclick = click;
字符串
存储:计算机只能够存储二进制 、存储字符串转为二进制
需要有 对照表 方便将 字符 和 二进制 进行转换
这样的 对照表 叫做 编码方式 常见的有 ascii、unicode 等
定义字符串的新的方式
var str = new String("a");
console.log(typeof str); // object
// 转换为字符串的方式就是str.toString();
包装类型: 在面向对象的思想中，一切都得是对象。而JS中有一些基本类型，此时就需要 包装 一下，将这些基本类型 包装 成对象类型。
属性
length属性表示字符串的长度
// 字符串也可以通过下标获取对应的字符
var a = "abcdefg";
console.log(a[2]); // c
console.log(a.length); // 7
方法
charAt 参数是数字 返回值是该数字所指向的下标字符
var str = "abcdefg";
// 获取指定位置的字符
var code = str.charAt(5);
console.log(code); // f
charCodeAt 参数是数字 返回值是该数字所指向的下标字符的编码
var str = "abcdefg";
var code = str.charCodeAt(5);
console.log(code); // 102
split 参数是分隔符 返回值是以该参数作为切割之后的数组
var str = "a1b1c1d1e1f"; // 想要以1作为分隔符 将字符串切割成数组 => ["a", "b", "c", "d", "e", "f"];
var arr = str.split("1");
console.log(arr); // ["a", "b", "c", "d", "e", "f"];
// 数组转为字符串
// ["a", "b", "c", "d", "e", "f"].join("1"); => a1b1c1d1e1f
substring 该方法用于截取字符串中的一段
var str = "abcdefg";
var str1 = str.substring(1, 2);
var str2 = str.substring(1);
var str3 = str.substring();
var str4 = str.substring(-5, -2);
var str5 = str.substring(5, 1);
console.log(str1); // b
console.log(str2); // bcdefg
console.log(str3); // abcdefg
console.log(str4); // 空字符串 截取不到
console.log(str5); // bcde
// 特点: 两个参数时，总是从小的截取到大的
// 特点: 当数值为负数时 不会从后往前数
substr 该方法也用于截取字符串中的一段 第一个参数依旧表示截取的开始位置 第二个参数表示要截取的字符串的长度
var str = "abcdefghijkl";
var str1 = str.substr(3, 5);
console.log(str1);
slice 该方法用于截取字符串的一段 第一个参数表示截取的开始位置(包含) 第二个参数表示截取的结束位置(不包含)
var str = "abcdefghijkl";
var str1 = str.slice(1, 5);
var str2 = str.slice(5, 1);
var str3 = str.slice(-5);
console.log(str1); // bcde
console.log(str2); // 空字符串 因为截取不到
console.log(str3); // hijkl 从后往前截取
indexOf 该方法用于获取数组中第一个从某个位置开始出现的字符串的第一个字符的下标 如果找不到 就返回-1 第一个参数是被查询的字符串 第二个参数是查询的开始位置
var str = "abcdefgdfdfdf";
var index = str.indexOf("df");
console.log(index); //
toLowerCase 该方法用于将所有的字符串中的英文小写
var str = "ABCDEFG,你好,abcde";
var str1 = str.toLowerCase();
console.log(str1); // abcdefg,你好,abcde
字符串的比较 一位一位的比较 比较对应位数的字符的ascii码 如果相同 比较下一位 如果不同 出结果
var str = "aA"; // ascii A 65
var str1 = "aa"; // ascii a 97
console.log(str > str1); // false
toUpperCase 该方法用于将所有的字符串中的英文大写
var str = "abc";
var str1 = str.toUpperCase();
console.log(str1); // ABC
// replace 该方法用于将字符串中的指定字符(串)替换位指定字符(串)
// var str = "今天天气不错，没下雨";
// var str1 = str.replace("没", "");
// console.log(str1);
replace() 用于在字符串中用一些字符替换另一些字符
字符串.replace(被替换的字符串， 要替换为的字符串)；
split()用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。
字符串.split("分割字符")
郑重声明: 所有的字符串方法都不会改变原字符串
值类型就是值类型 不应该拥有任何方法的
其实...... 字符串这个数据类型，在JS中运行时 JS引擎中解析的时候会先把 a 这个"str"值替换为 var s = new String("str");
var a = "str";
var b = a.replace("s", "a");
// 当a.replace方法调用的时候 等价于
var s = new String("str");
var b = s.repalce("s", "a");
s = null;
因为真正操作的时候是新生成的对象内部在操作 a所保存的"str"只是作为参数传递了进去 在里面复制了一份 操作的是这个"副本" 最终会销毁这个生成的对象 原字符串并没有发生变化
简单数据类型和复杂数据类型
简单类型（基本数据类型、值类型）：在存储时变量中存储的是值本身，包括string ，number，boolean，undefined，null
复杂数据类型(引用类型)：在存储时变量中存储的仅仅是地址（引用），通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等；
堆栈空间分配区别：
1、栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；(简单数据类型存放到栈里面)
2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。
简单数据类型的存储方式：值类型变量的数据直接存放在变量（栈空间）中
复杂数据类型的存储方式：引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中
函数的传参规则
JS中的数据类型分两种: 基本数据类型，引用数据类型
基本数据类型的数据在传递时，复制传递 也就是复制了一份并传递进去 所以在函数内部，如何操作都只是在操作副本。与外部的数据无关。
引用数据类型的数据在传递时，传递引用 也就是把地址复制了一份并传递进去 所以函数内部是可以得到函数外部的数据保存的地址的，如果在函数内部打点或者方括号修改地址内容，则会影响到函数外部，如果在函数内部使用=修改变量保存的内容，则不会影响函数外部。
// 在函数内部修改值类型参数
var a = 123;
function demo(b) {
b = 12;
}
demo(a);
console.log(a); // 123
// 在函数内部使用等号修改引用类型参数
var obj = {};
function demo(b) {
b = 123;
}
demo(obj);
console.log(obj); // {}
// 在函数内部使用方括号或者点语法修改引用类型参数
var obj = {};
function demo(b) {
b.a = 10;
b["b"] = 11;
}
demo(obj);
console.log(obj); // {a: 10, b: 11}
// 在函数内部先使用方括号或者点语法修改 再使用等号
var obj = {};
function demo(b) {
b.a = 10;
b["b"] = 11;
b = {};
b.c = 12;
}
demo(obj);
console.log(obj); // {a: 10, b: 11}
排他思想
1. 所有元素全部清除样式（干掉其他人）
2. 给当前元素设置样式 （留下我自己）
3. 注意顺序不能颠倒，首先干掉其他人，再设置自己
mouseenter 和mouseover的区别
当鼠标移动到元素上时就会触发mouseenter 事件;
类似 mouseover，它们两者之间的差别是:
mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发；之所以这样，就是因为mouseenter不会冒泡；
跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡。
