一. 写出下面程序的运行结果

for

结果：1秒后一下子打印出5个5。当循环完成时才会轮到setTimeout异步执行其回调函数function，此时i已经变成5，故5个console.log(i)里的i全使用的是5。

易错点：千万别写成“打印5个4”啊！暴风哭泣>_<

二. 请列举至少8种jQuery中的DOM节点操作，并说明用途。

1.查找节点
使用jQuery在文档树上查找节点非常容易。可以通过jQuery选择器(见第3题)来完成。
用jQuery选择器能够快捷而轻松地查找到文档中的某个特定的元素节点，然后可以用attr()方法来获取元素的各种属性的值。
1.1查找元素节点

var 

1.2查找属性节点

var 

2.创建节点
$(html)方法会根据传入的HTML标记字符串，创建一个 DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。要想将新创建的元素插入文档，可以使用jQuery中的append()等方法。
2.1创建元素节点

var 

2.2创建文本节点
创建文本节点就是在创建元素节点时直接把文本内容写出来，然后使用append()等方法将它们添加到文档中就可以了。

var 

2.3创建属性节点
创建属性节点与创建文本节点类似，也是直接在创建元素节点时一起创建。

var 

3.插入节点
动态创建HTML元素并没有实际用处，还需要将新创建的元素插入文档中。将新创建的节点插入文档最简单地办法是，让它成为这个文档的某个节点的子节点。
3.1 append() 向每个匹配的元素内部追加内容
$("p").append("<b>你好</b>") // 结果是<p>我说：<b>你好</b></p>
3.2 appendTo() 将所有匹配的元素追加到指定的元素中
$("<b>你好</b>").appendTo("p") // 结果是<p>我说：<b>你好</b></p>
3.3 prepend() 向每个匹配的元素内部前置内容
$("p").prepend("<b>你好</b>") // 结果是<p><b>你好</b>我说：</p>
3.4 prependTo() 将所有匹配的元素前置到指定的元素中
$("<b>你好</b>").prependTo("p") // 结果是<p><b>你好</b>我说：</p>
3.5 after() 在每个匹配的元素之后插入内容
$("p").after("<b>你好</b>") // 结果是<p>我说：</p><b>你好</b>
3.6 insertAfter() 将所有匹配的元素插入到指定元素的后面
$("<b>你好</b>").insertAfter("p") // 结果是<p>我说：</p><b>你好</b>
3.7 before() 在每个匹配的元素之前插入内容
$("p").before("<b>你好</b>") // 结果是<b>你好</b><p>我说：</p>
3.8 insertBefore() 将所有匹配的元素插入到指定的元素的前面
$("<b>你好</b>").insertBefore("p") // 结果是<b>你好</b><p>我说：</p>
4.删除节点
如果文档中某一个元素多余那么应将其删除。
4.1 remove()方法
作用是从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素
$("ul li:eq(1)").remove() // 获取<ul>节点中的第2个<li>元素节点后，将它从网页中删除
$("ul li").remove("li[title!=菠萝]")// 将<li>元素中属性title不等于“菠萝”的<li>元素删除
4.2 detach()方法
detach()和remove()一样，也是从DOM中去掉所有匹配的元素。但这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不用的是，所有绑定的事件、附加的数据等都会保留下来。

$

4.3 empty()方法
empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点。
$("ul li:eq(1)").empty() // 获取第2个<li>元素节点后，清空此元素里的内容，注意是元素里。当运行代码后，第2个<li>元素的内容被清空了，只剩下<li>标签默认的符号“.”
5.复制节点
clone()方法

$

复制节点后，被复制的新元素并不具有任何行为。若需要新元素也具有复制功能（上例是单击事件），可使用如下jQuery代码：

$

6.替换节点
6.1 replaceWith()
replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者 DOM元素
例如：要将网页中<p title="选择你喜欢">你喜欢的蔬果？</p>替换成<strong>你讨厌的蔬果？</strong>

$

6.2 replaceAll()
该方法与replaceWith()作用相同，只是颠倒了replaceWith()操作，可使用如下代码实现上例同样的功能：

$

注意：若在替换之前已经给元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件。

7.包裹节点
wrap()将某个节点用其他标记包裹起来，该方法对于需要在文档中插入额外的结构化标记非常有用，而且它不会破坏原始文档的语义。

$

得到的结果是：<b><strong title="选择你喜欢的">你最喜欢的水果？</strong></b>

wrapAll()方法会将所有匹配的元素用一个元素来包裹，它不同于wrap()方法，wrap()方法是将所有的元素进行单独的包裹。
wrapInner()方法将每一个匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹起来。例如可使用它来包裹<strong>标签的子内容，

$

8.属性操作
jQuery中用attr()方法来获取和设置元素属性，removeAttr()方法来删除元素属性。
9.样式操作
9.1 获取样式和设置样式
获取class和设置class都可以使用attr()方法来完成。

<

上面的代码中class也是<p>元素的属性，因此获取和设置class都可以使用attr()方法来完成：

var 

9.2 追加样式
addClass()方法专门用来追加样式。
9.3 移除样式
removeClass()方法用来删除class的某个值，作用是从匹配的元素中删除全部或者指定的class。
如：$("p").removeClass("high another") // 把<p>元素的两个class都删除
也可以写成：$("p").removeClass() // 移除<p>元素的所有class
9.4 切换样式
toggle()方法

$toggleBtn

toggle()方法此时主要是控制行为上的重复切换：交替执行代码3和代码4两个函数，如果元素原来是显示的，则隐藏它；如果元素原来是隐藏的，则显示它。

toggleClass()方法：控制样式上的重复切换。如果类名存在则删除它，如果类名不存在则添加它。

9.5 判断是否含有某个样式
hasClass()可以用来判断元素中是否含有某个class，如果有则返回true，否则返回false。
10.设置和获取HTML、文本和值
10.1 html()方法
此方法类似于JavaScript中的innerHTML属性，可用来读取或者设置某个元素中的HTML内容。
10.2 text()方法
此方法类似于JavaScript中的innerText属性，可用来读取或者设置某个元素中的文本内容。
10.3 val()方法
此方法类似于JavaScript中的value属性，可用来设置和获取元素的值。无论元素是文本框、下拉列表还是单选框，它都可以返回元素的值。如果元素为多选，则返回一个包含所有选择的值的数组。
11.遍历节点
11.1 children()方法
该方法用于取得匹配元素的子元素集合。
注意：children()方法只考虑子元素而不考虑其他后代元素。
11.2 next()方法
该方法用于取得匹配元素后面紧邻的同辈元素。
11.3 prev()方法
该方法用于取得匹配元素前面紧邻的同辈元素。
11.4 siblings()方法
该方法用于取得匹配元素前后所有的同辈元素。
11.5 closest()方法
该方法用于取得最近的匹配元素。
首先检查当前元素是否匹配，若匹配则直接返回元素本身，若不匹配则向上查找父元素，逐级向上直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。
11.6 parent()，parents()与closest()区别
parent() 获取集合中每个匹配元素的父级元素
parents() 获取集合中每个匹配元素的祖先元素
closest() 从元素本身开始逐级向上级元素匹配并返回最先匹配的祖先元素。（它只返回匹配的第一个元素节点）
11.7 find()，filter()，nextAll()和prevAll()等遍历节点的方法，都可以使用jQuery表达式来作为它们的参数来筛选元素。
12.CSS-DOM操作
CSS-DOM技术简单来说就是读取和设置style对象的各种属性。
12.1 jQuery可以直接利用css()方法获取元素的样式属性，也可以直接利用css()方法设置某个元素的单个样式。

$

height()获取匹配元素当前计算的高度值(px)：

$

width()可以取得匹配元素的宽度值(px)或者设置元素的宽度。
12.2 关于元素定位
12.2.1 offset()方法
作用是获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left，它只对可见元素有效。
12.2.2 position()方法
作用是获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，与offset()一样返回的对象也包括两个属性即top和left。
12.2.3 scrollTop()方法和scrollLeft()方法
这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离。还可以为这两个方法指定一个参数，控制元素的滚动条滚动到指定位置。

$("textarea").scrollTop(300)     // 元素的垂直滚动条滚动到指定的位置
$("textarea").scrollLeft(300)    // 元素的横向滚动条滚动到指定的位置var $p = $("p")
var scrollTop = $p.scrollTop     // 获取元素的滚动条距顶端的距离
var scrollLeft = $p.scrollLeft   // 获取元素的滚动条距左侧的距离var position = $("p").position()  // 获取<p>元素的position()
var left = position.left          // 获取左偏移
var top = position.top          // 获取上偏移var offset = $("p").offset()     // 获取<p>元素的offset()
var left = offset.left           // 获取左偏移
var top = offset.top          // 获取上偏移

三. 请列举jQuery中常用的选择器有哪几种（至少说明3种），并每种列举3个。

jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。

• 基本选择器

基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名等来查找DOM元素。

(1) #id 根据给定的id匹配一个元素

如：$("#test")选取id为test的元素

(2) .class 根据给定的类名匹配元素

如：$(".test")选取所有class为test的元素

(3) element 根据给定的元素名匹配元素

如：$("p")选取所有的<p>元素

(4) * 匹配所有元素

如：$("*")选取所有的元素

(5) selector1, selector2, ... , selectorN 将每一个选择器匹配到的元素合并后一起返回

如：$("div,span,p.myClass")选取所有<div>,<span>和拥有class为myClass的<p>标签的一组元素

• 层次选择器

通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和同辈元素等。

(1)$("ancestor descendant") 选取ancestor元素里所有的descendant即后代元素

如：$("div span")选取<div>里的所有的<span>元素

(2)$("parent > child") 选取parent元素下的child即子元素，与$("ancestor descendant")有区别，$("ancestor descendant")选择的是后代元素

如：$("div > span")选取<div>元素下的元素名是<span>的子元素

(3) $("prev + next") 选取紧接在prev元素后的next元素

如：$(".one + div")选取class为one的下一个<div>同辈元素

(4) $("prev ~ siblings") 选取prev元素之后的所有siblings元素

如：$("#two~div")选取id为two的元素后面的所有<div>同辈元素

(3)(4)有更简单的替代方案：

可以用next()方法来代替$("prev + next")选择器

如：$(".one").next("div")等价于$(".one + div")

可以使用nextAll()方法来代替$("prev~siblings")选择器

如：$("#prev").nextAll("div")等价于$("#prev~div")

$("#prev~div")选择器只能选择"prev"元素后面的<div>元素，而siblings()方法与前后位置无关，只要是同辈节点就都能匹配。

// 选取#prev之后的所有同辈div元素

• 过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号（：）开头。按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

1. 基本过滤选择器
   (1) :first 选取第1个元素
   如：$("div:first")选取所有<div>元素中第1个<div>元素
   (2) :last 选取最后1个元素
   如：$("div:last")选取所有<div>元素中的最后一个<div>元素
   (3) :not(selector) 去除所有与给定选择器匹配的元素
   如：$("input:not(.myClass)")选取class不是myClass的<input>元素
   (4) :even 选取索引是偶数的所有元素，索引从0开始
   如：$("input:even")选取索引是偶数的<input>元素
   (5) :odd 选取索引是奇数的所有元素，索引从0开始
   如：$("input:odd")选取索引是奇数的<input>元素
   (6) :eq(index) 选取索引等于index的元素(index从0开始)
   如：$("input:eq(1)")选取索引等于1的<input>元素
   (7) :gt(index) 选取索引大于index的元素(index从0开始)
   如：$("input:gt(1)")选取索引大于1的<input>元素（注：大于1而不包括1）
   (8) :lt(index) 选取索引小于index的元素(index从0开始)
   如：$("input:lt(1)")选取索引小于1的<input>元素（注：小于1而不包括1）
   (9) :header 选取所有的标题元素，例如h1,h2,h3等等
   如：$(":header")选取网页中的所有的<h1>,<h2>,<h3>...
   (10) :animated 选取当前正在执行动画的所有元素
   如：$("div:animated")选取正在执行动画的<div>元素
   (11) :focus 选取当前获取焦点的元素
   如：$(":focus")选取当前获取焦点的元素
2. 内容过滤选择器
   内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。
   (1) :contains(text) 选取含有文本内容为"text"的元素
   如：$("div:contains('我')")选取含有文本“我”的<div>元素
   (2) :empty 选取不包含子元素或者文本的空元素
   如：$("div:empty")选取不包含子元素(包括文本元素)的<div>空元素
   (3) :has(selector) 选取含有选择器所匹配的元素的元素
   如：$("div:has(p)")选取含有<p>元素的<div>元素
   (4) :parent 选取含有子元素或者文本元素的元素
   如：$("div:parent")选取拥有子元素（包括文本元素）的<div>元素
3. 可见性过滤选择器
   (1) :hidden 选取所有不可见的元素
   如：$(":hidden")选取所有不可见的元素。包括<input type="hidden"/>,<div style="display:none;">和<div style="visibility:hidden;">等元素。如果只想选取<input>元素，可以使用$("input:hidden")
   (2) :visible 选取所有可见的元素
   如：$("div:visible")选取所有可见的<div>元素
4. 属性过滤选择器
   属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。
   (1) [attribute] 选取拥有此属性的元素
   如：$("div[id]")选取拥有属性id的元素
   (2) [attribute=value] 选取属性的值为value的元素
   如：$("div[title=test]")选取属性title为"test"的<div>元素
   (3) [attribute!=value] 选取属性的值不等于value的元素
   如：$("div[title!=test]")选取属性title不为"test"的<div>元素（注意：没有属性title的<div>元素也会被选取）
   (4) [attribute^=value] 选取属性的值以value开始的元素
   如：$("div[title^=test]")选取属性title以"test"开始的<div>元素
   (5) [attribute$=value] 选取属性的值以value结束的元素
   如：$("div[title$=test]")选取属性title以"test"结束的<div>元素
   (6) [attribute*=value] 选取属性的值含有value的元素
   如：$("div[title*=test]")选取属性title含有"test"的<div>元素
   (7) [attribute|=value] 选取属性等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-”）的元素
   如：$('div[title|="en"]')选取属性title等于en或以en为前缀（该字符串后跟一个连字符'-'）的元素
   (8) [attribute~=value] 选取属性用空格分隔的值中包含一个给定值的元素
   如：$('div[title~="uk"]')选取属性title用空格分隔的值中包含字符uk的元素
   (9) [attribute1][attribute2][attributeN] 用属性选择器合并成一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围
   如：$("div[id][title$='test']")选取拥有属性id并且属性title以'test'结束的<div>元素
5. 子元素过滤选择器
   (1) :nth-child(index/even/odd/equation) 选取每个父元素下的第index个子元素或者奇偶元素。（index从1算起）
   如：注意:eq(index)只匹配一个元素，而:nth-child将为每一个父元素匹配子元素，并且:nth-child(index)是从1开始的，而:eq(index)是从0算起的。
   (2) :first-child 选取每个父元素的第1个子元素
   如：注意:first只返回单个元素，而:first-child选择符将为每个父元素匹配第1个子元素，例如$("ul li:first-child")选取每个<ul>中第1个<li>元素
   (3) :last-child 选取每个父元素的最后一个子元素
   同样，:last只返回单个元素，而:last-child选择符将为每个父元素匹配最后一个子元素
   (4) :only-child 如果某个元素是它父元素中惟一的子元素，那么将会被匹配。如果父元素中含有其他元素则不会被匹配
   如：$("ul li:only-child")在<ul>中选取是唯一子元素的<li>元素
6. 表单对象属性过滤选择器
   (1) :enabled 选取所有可用元素
   如：$("#form1 :enabled") 选取id为"form1"的表单内的所有可用元素
   (2) :disabled 选取所有不可用元素
   如：$("#form2 :disabled") 选取id为"form2"的表单内的所有不可用元素
   (3) :checked 选取所有被选中的元素（单选框，复选框）
   如：$("input:checked") 选取所有被选中的<input>元素
   (4) :selected 选取所有被选中的选项元素（下拉列表）
   如：$("select option:selected") 选取所有被选中的选项元素

• 表单选择器

表单选择器能极其方便地获取到表单的某个或某类型的元素。

(1) :input 选取所有的<input>、<textarea>、<select>和<button>元素
如：$(":input")获取所有的<input>、<textarea>、<select>和<button>元素
(2) :text 选取所有的单行文本框
如：$(":text")选取所有的单行文本框
(3) :password 选取所有的密码框
如：$(":password")选取所有的密码框
(4) :radio 选取所有的单选框
如：$(":radio")选取所有的单选框
(5) :checkbox 选取所有的多选框
如：$(":checkbox")选取所有的复选框
(6) :submit 选取所有的提交按钮
如：$(":submit")选取所有的提交按钮
(7) :image 选取所有的图像按钮
如：$(":image")选取所有的图像按钮
(8) :reset 选取所有的重置按钮
如：$(":reset")选取所有的重置按钮
(9) :button 选取所有的按钮
如：$(":button")选取所有的按钮
(10) :file 选取所有的上传域
如：$(":file")选取所有的上传域
(11) :hidden 选取所有不可见元素
如：$(":hidden")选取所有不可见元素（已经在不可见性过滤选择器中讲解过）

四. 请用jQuery手写一段代码，实现当按钮被点击时以卷帘效果消失。

jQuery slideUp() 方法用于向上滑动元素。

$

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideUp() 方法：

$

五. 请写出一个简单地$.ajax()的请求方式（至少5个参数）。

$

$

var 

六. 请写出至少4种vue中的指令和它的用法。

七. 路由之间跳转有哪些方式？

八. 请举例说明axios的四种常用方法（请求方式）？

九. 请详细说明对vue生命周期的理解？

十. 请简述封装vue组件的过程。

十一. window中的onload与jQuery中的ready有什么区别？
（1）执行时间不同
一般情况下window的load()都是用来设置body标签的onload事件.但onload事件是要在页面的元素全部加载完了才触发的,这也包括页面上的图片媒体内容，以及大的表格数据。如果页面上图片较多或图片太大,加载需要较多时间，就会导致页面无响应，或者用户做了其它操作了。缺点：如果加载图片和媒体内容花费了大量时间，用户就会感受到定义在window.onload事件上的代码在执行时，有明显的延迟，影响用户体验。故load()一般不建议使用；
jQuery中的ready函数只须等待DOM加载完毕，无须等待图像或外部资源的加载，执行起来更快。
（2）执行次数不同
window.onload()只能执行一次，如果第二次，那么第一次的执行会被覆盖;
$(document).ready()可以执行多次，第N次都不会被上一次覆盖。

window.onload = function()  { alert(“text1”) }window.onload = function()  { alert(“text2”) }    // 结果只输出text2$(document).ready(function(){alert(“Hello1”)})$(document).ready(function(){alert(“Hello2”)})    // 结果两个都会执行，输出Hello1和Hello2

（3）简化写法不同
window.onload()无简写；
$(document).ready(function(){})可简写为$(function(){})

十二. window.onload 和 document.onDOMContentLoaded区别？

触发的时机不同：
window.onload是在DOM树构建完成、外部的js、css 、图片、flash等资源都加载完成后再触发；
document.onDOMContentLoaded是在DOM树构建完成后触发。此机制更合理，因为我们可以容忍图片、flash等延迟加载，却不可以容忍看见内容后页面不可交互——影响用户体验。

附：关于js为什么放到</body>的最后部分？
因为浏览器的加载和渲染过程中，<script>放在前面而后续的DOM结构还没有渲染加载出来，所以获取不到，故最好放到</body>最后部分。
例如：https://jsbin.com/tacugeleva/edit?html,console,output

但如果非要放进<head>里的话，必须写成这样：

document

十三. JavaScript中的事件处理如何运行？
事件流就是描述了页面中接受事件的顺序，在浏览器发展的初期，两大浏览器厂商IE和Netscape互掐，他们对事件流的解释出现了两中截然相反的定义。也就是我们所熟悉的：IE的事件冒泡（向上传递），Netscape的事件捕获（向下传递）。事件冒泡即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的节点（文档）。事件捕获即事件最早由不太具体的节点接收，而最具体的节点最后接收到事件。
1.注册事件处理程序的方式有3种：
（1）设置HTML标签属性为事件处理程序
文档元素的事件处理程序属性，其名字由“on”后面跟着事件名组成，例如：onclick、onmouseover。当然了，这种形式只能为DOM元素注册事件处理程序。
例如：

<

①因为HTML里面不区分大小写，所以这里事件处理程序属性名大写、小写、大小混写均可，属性值就是相应事件处理程序的JavaScript代码；
②若给同一元素写多个onclick事件处理属性，浏览器只执行第一个onclick里面的代码，后面的会被忽略；
③这种形式是在事件冒泡过程中注册事件处理程序的；

（2）DOM0级事件处理程序：设置JavaScript对象属性为事件处理程序
可以通过设置某一事件目标的事件处理程序属性来为其注册相应的事件处理程序。事件处理程序属性名字由“on”后面跟着事件名组成，例如：onclick、onmouseover。
①因为JavaScript是严格区分大小写的，所以，这种形式下属性名只能按规定小写；
②若给同一元素对象写多个onclick事件处理属性，后面写的会覆盖前面的（ps：这就是在修改一个对象属性的值，属性的值是唯一确定的）；
③这种形式也是在事件冒泡过程中注册事件处理程序的；

<!DOCTYPE HTML>

（3）DOM2级事件处理程序：addEventListener()
前两种方式出现在Web初期，众多浏览器都有实现。而addEventListener()方法是标准事件模型中定义的。任何能成为事件目标的对象——这些对象包括Window对象、Document对象和所有文档元素等——都定义了一个名叫addEventListener()的方法，使用这个方法可以为事件目标注册事件处理程序。
addEventListener()接受三个参数：
第一个参数是要注册处理程序的事件类型，其值是字符串，但并不包括前缀“on”；第二个参数是指当指定类型的事件发生时应该调用的函数；第三个参数是布尔值，其可以忽略（某些旧的浏览器上不能忽略这个参数），默认值为false，这种情况是在事件冒泡过程中注册事件处理程序，当其为true时就是在事件捕获过程中注册事件处理程序。
①通过addEventListener()方法给同一对象注册多个同类型的事件，并不会发生忽略或覆盖，而是会按顺序依次执行；
②相对addEventListener()的是removeEventListener()方法，它表示从对象中删除某个事件处理函数。它同样有三个参数，前两个参数自然跟addEventListener()的意义一样，而第三个参数也只需跟相应的addEventListener()的第三个参数保持一致即可，同样可以省略，默认值为false。

DOM2级事件规定事件包括三个阶段：事件捕获阶段->处于目标阶段->事件冒泡阶段 。

<!DOCTYPE HTML>

（4）attachEvent()

但是，IE8以及其之前版本的浏览器并不支持addEventListener()和removeEventListener()。相应的，IE定义了类似的方法attachEvent()和detachEvent()。因为IE8以及其之前版本浏览器也不支持事件捕获只支持事件冒泡，所以attachEvent()并不能注册捕获过程中的事件处理函数。因此attachEvent()和detachEvent()要求只有两个参数：事件类型和事件处理函数。而且，它们的第一个参数使用了带“on”前缀的事件处理程序属性名。

var 

2. 事件处理程序调用时的一些问题
(1)事件处理程序的参数
通常事件对象作为参数传递给事件处理函数，但IE8以及其之前版本的浏览器中全局变量event才是事件对象。所以，我们在写相关代码时应该注意兼容性问题。

<!DOCTYPE HTML>

（2）事件处理程序的运行环境
事件处理程序的运行环境，也就是在事件处理程序中调用上下文（this值）的指向问题：

<

3.多个事件处理程序调用规则如下:
(1)通过HTML属性注册的处理程序和通过设置对象属性的处理程序一直优先调用;(即方法1和方法2)
(2)使用addEventListener()注册的处理程序按照它们的注册顺序依次调用;(即方法3)
(3)使用attachEvent()注册的处理程序可能按照任何顺序调用，所以代码不应该依赖于调用顺序;(即方法4)
十四. vue-webpack中并没有scss，我们要在vue中使用sass需要怎么配置？

1、安装sass的依赖包
cnpm install --save-dev sass-loader // sass-loader依赖于node-sass
cnpm install --save-dev node-sass
2、在build文件夹下的webpack.base.conf.js找到module.exports里的module，rules里面添加如下配置：

{ 

3、在APP.vue中修改style标签：<stylelang="scss">

<

十五. 请说出至少3种减少页面加载时间的方法

①减少HTTP请求（合并图片，合并文件）

②优化图片，减小其尺寸

③选择合适的图像格式（gif可用于颜色要求不高的地方）

④压缩JS，CSS代码，把CSS放在顶部，把JS放在底部，最好把CSS和JS放到外部文件

⑤服务器启用gzip功能
将要传输的文件压缩后传输到客户端再解压，在网络传输数据量会大幅减小。在服务器上的Apache、Nginx可直接启用，也可用代码直接设置传输文件头，增加gzip的设置，也可从负载均衡设备直接设置。不过需要留意的是，这个设置会略微增加服务器的负担。服务器性能不是很好的网站，要慎重考虑。

⑥标明宽度及高度
标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。

当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了）

⑦网址后面加斜杠“/”(加了斜杠会减少一次判断过程，直接返回网站设置的存放在网站根目录下的默认页面)
如http://www.campr.com/目录，会判断这个目录是什么文件类型，或者是目录。

⑧避免空的src和href

⑨避免跳转

⑩尽量采用GET方法调用
⑪使用CDN(Content Delivery Network)网络加速
简单讲，就是将你的图片、视频扩散到CDN网络所能到达之处，让用户访问时能就近下载到这些文件，从而达到网络提速的目的，这样做，同时能减轻你自己网站的负载。

本文引用参考：

webpack+vue 构建项目步骤并且使用sass 安装配置​blog.csdn.netwindow的onload事件与jQuery中的ready事件有什么不同？​blog.csdn.netjquery 的ready() 与window.onload()的区别​www.cnblogs.com请说明JavaScript中处理事件的步骤_百度知道​zhidao.baidu.com

JavaScript事件处理的方式(三种)​blog.csdn.net请说出三种减少页面加载时间的方法__牛客网​www.nowcoder.com

HTML：减少页面加载时间的方法 - CuriousZero - 博客园​www.cnblogs.com请说出三种减少页面加载时间的方法？​www.jianshu.com