JavaScript学习笔记（面向对象练习：tab栏切换案例） 2020/2/13

一、知识点

（1）querySelector()和querySelectorAll()

1. querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
2. 注意： querySelector()，方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用querySelectorAll() 方法替代。

（2）区分this的范围

看函数执行的时候,函数名之前是否有".",有的话"."前面是谁this就是谁,没有的话this就是window

参考博文：https://www.cnblogs.com/pssp/p/5216085.html#

（3）insertAdjacentHTML方法

相较于以前用的是innerHTML与innerText方法，这两个方法更灵活，可以在指定的地方插入html内容和文本内容。

语法：

insertAdajcentHTML(swhere,stext)

参数：

swhere: 指定插入html标签语句的地方，

stext:要插入的内容

插入值

1. beforeBegin: 插入到标签开始前
   

2. afterBegin:插入到标签开始标记之后
   

3. beforeEnd:插入到标签结束标记前
   

4. afterEnd:插入到标签结束标记后
   

（4）stopPropagation() 方法

语法：
event.stopPropagation()

定义和用法：

不再派发事件。
终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。

（5）ondblclick 属性在鼠标双击元素时触发。

二、tab栏切换案例

（1）展示图

（2）代码部分

html部分代码链接
JS部分代码链接