下半学期学了很多东西，包括es6新属性，layui，bootsrap，vue3等，所以仅根据老师发的期末复习提纲，大致总结一下
BOM
这里没有过于深入的讲，需要知道的是history，navigator,location三者是同级的
DOM
事件和事件流
事件
| onclick | 鼠标点击左键触发 |
|---|---|
| onblur | 失去鼠标焦点触发 |
| ------ | -------- |
事件流分为两种，一种是冒泡，一种是捕获
比如冒泡：
<body>
<div id="parent">parent
<button id="child" class="child">child</button>
</div >
</body>
<script>
document.getElementById("parent").addEventListener(
"click", function(e) {
alert("parent事件被触发，" + this.id);})
alert("child事件被触发，" + this.id)})
</script>
执行后会发现，只点击parent，弹出parent事件被触发，而当点击child时，不仅会弹出child，还会弹出parent，这就是冒泡
例子：鼠标放到li上对应的li背景变灰。
一般情况下，如果想要对应的li变灰，遍历，但是利用冒泡，直接通过父级元素然后取得被点击的子级元素渲染即可，性能更佳
$("ul").on("mouseover",function(e){
$(e.target).css("backgroundcolor","#ddd").siblings().
css("background-color","white");})
也可以通过事件委托来实现
事件委托：父节点接受委托给子节点分配点击事件
document.getElementById('list').addEventListener(
'click', function (e) {
$(e.target).css("backgroundcolor","#ddd").siblings().
css("background-color","white");}
)
如何取消冒泡事件
event.stopPropagation()
节点的获取和操作
获取节点
js
访问父节点：xxx.parentNode
访问子节点：
- childNodes 属性返回所有的节点，包括文本节点、注释节点；
- children 属性只返回元素节点；
一般使用children
jQuery
$("#test1").parent(); // 父节点
$("#test1").parents(); // 全部父节点
$("#test1").parents(".mui-content");
$("#test").children(); // 全部子节点
$("#test").children("#test1");
$("#test").contents(); // 返回#test里面的所有内容，包括节点和文本
$("#test").contents("#test1");
//兄弟节点
$("#test1").prev(); // 上一个兄弟节点
$("#test1").next(); // 下一个兄弟节点
$("#test1").siblings(); // 所有兄弟节点
$("#test1").siblings("#test2");
$("#test").find("#test1");
节点的增：
appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
节点的删
removeChild()
ES6
对象和面向对象
第一种方式：
var swk = {
name: '孙悟空',
age: 365,
gender: '男',
say: function() { console.log(this.name + "说话了");
}}
swk.say();
swk.weapon = '如意金箍棒';
第二种方式：批量创建对象
class Hero {
constructor(name, age, gender){
this.name = name;
this.age = age;
this.gender = gender;
this.say = function() {
console.log(this.name + "在说话");
}}
}
var bgj = new Hero('白骨精', 18, '女');
var zzj = new Hero("蜘蛛精", 16, '女');
Hero.prototype.weapon = '默认兵器'; Hero.prototype.fly = function() {
console.log(this.name + "飞起来了");
}
bgj.weapon = "白骨剑";
以函数方式创建
function Hero(name, age, gender, skill) {
this.name = name;
this.age = age;
this.gender = gender;
this.skill = skill;
this.say = function() {
console.log(this.name + '说话了');
}
}
var swk = new Hero('孙悟空', 20000, '男', '筋斗云');
var zbj = new Hero('猪八戒', 390, '男', '能吃')
swk.weapon = '如意金箍棒';
zbj.weapon = ' 九齿钉耙';
Hero.prototype.phone = '13600000';
函数
new Function()
var myFun = new Function('a', 'b', 'return a + b'); //构造函数
箭头函数
var mf2 = (a, b) => a * b;
箭头函数的缺点
let multiply = (a, b) => b === undefined ? b => a * b : a * b;
//三元表达式
let double = multiply(3);
alert(double(3)); //9
alert(multiply(2, 3)); //6
this指向（重要）
普通函数里，this指向访问当前方法的对象
let obj={
a:888,
b:function(){
console.log(this)
}
}
obj.b()
在这里，是一个普通函数，obj调用了b()，所以this指向的是obj这个对象
普通函数里的this是不受环境定义影响的，只受到调用者
function a(){
log(this)
}
a() //window
在这个里面，a()相当于window.a(),所以指向的是window
构造函数的this
但是构造函数又不一样了，构造函数一般调用时指向的是对象
function a(){
this //调用它的obj
}
let obj=new a()
特例：setTimeout
setTimeout(a,100)
在这里，a被setTimeout用，而setTimeout是window.setTimeout(),所以指向的是window
箭头函数，this取决于定义的环境
箭头函数其实没有this，所以要到外面去找this，然后把外层代码块的this给继承过来，比如：
let fn=()=>console.log(this)
fn()
let a=function(){
console.log(this);
}
a() //window
如果是普通函数，那么就是window（严格模式下是undefined，因为不知道是谁调用的），但是这里是箭头函数，就会出去找，最后也是window
还有一个例子：
let obj={
a:function(){
log(this)
},
t：this，
b:()=>log(this)
}
log(obj.a()) //obj
log(obj.b()) //这个this，相当于t，而t的this又obj所属于的对象，也就是window
在构造函数里，箭头函数的指向与在上面的不一样：
function A(){
this //下面调用它的obj
this.a=()=>this //是外层的this，而外层的this指向的是obj
this.b=function(){
return this //obj
}
}
let obj=new A()
log(obj.a()) //obj
log(obj.b()) //obj
老师给的例子：
var name="clever coder"
var person={
name:"fooler",
hello:function(){
var sayhello=function(){
console.log(this.name+"say hello");
}
sayhello()
}
}
console.log(person.hello());
在这个例子中，person.hello按理来说里面的this.name是person的name,但是在hello里还有一个函数，调用sayhello()是window.sayhello(),所以在sayhello里this.name是window里的name，也就是clever coder，所以最后结果是clever coder
ES6
let const
let 声明的变量只在 let 命令所在的代码块内有效。 let不存在变量提升
//let 是在代码块内有效，var 是在全局范围内有效:
{ let a = 0; var b = 1; }
a // ReferenceError: a is not defined
b // 1
//let 只能声明一次 var 可以声明多次:
let a = 1; let a = 2; var b = 3; var b = 4;
a // Identifier 'a' has already been declared
b // 4
const 声明一个只读的常量，一旦声明，常量的值就不能改变。
拓展运算符...
拓展运算符（...）用于取出参数对象所有可遍历属性然后拷贝到当前对象
let people={age:15,name:"ll}
let someone={...people}
//还可以用于合并两个对象
let age={age:14}
let name={name:"amy"}
let people={...age,...name}
//注意：相同类型的数据后者会覆盖前者
ES6模块
export和import export default不需要加{}，不需要相同名字 （这里没太懂）
jQuery
jQuery的入口函数$(function(){...})
$是jQuery的顶级对象，相当于JavaScript里的window
DOM对象转化为jQuery对象
对于一个DOM对象，只需要用$()把DOM对象给包装起来，就可以获得一个jQuery对象了，方式为$(DOM对象)。
var cr = document.getElementsByTagName("p"); //DOM对象
var $cr = $(cr); //转成jQuery对象
选择器（要加引号）
ID选择器 $("#id")
类选择器 $(".class")
标签选择器 $("p")
交集选择器 $("div.p")
全选选择器 $("*")
子代选择器（只获取最近的子代，不会涉及孙子）：$("ul>li")
后代选择器（后代所有的）:$("ul li")
筛选方法（同上文的节点获取）
重点关注：parent(),children(),eq(),siblings()
$("li").eq(2)相当于$("li:eq(2)")index从0开始
:even 匹配所有索引值为偶数的元素，从0 开始计数
:odd 匹配所有索引值为奇数的元素，从0 开始计数
:eq(index) 匹配一个给定索引值的元素*
表单过滤器：
:radio 匹配所有的单选框
:input 匹配所有input, textarea, select 和button 元素
$("input[name='items']:checked").val()获取表单radio选中的值
$("select[name='items'] :option[selected]").text();
jQuery设置样式
$("div").css("属性","值")
jQuery遍历元素
$.each(要遍历的对象，function(index索引,element内容){
xxx
})
jQuery事件
$("div").click(function(){
xxx
}) //注意没有on
方法处理之on()
$("div").on({
mouseover:function(){},
click:function(){}
})
Vue
组件写法：
<div id="app">
<lly></lly>
</div>
<script>
const app=Vue.createApp({}) //创建一个vue应用
//定义一个名字为lly的组件
app.component("lly",{
data(){
return {counter:0}
},
template:`
<button @click="counter++">lly{{counter}}</button>
`
})
app.mount("#app")
</script>
