一. 写出下面程序的运行结果
for(var i=0; i < 5; i++){
setTimeout(function() {
console.log(i)
}, 1000)
}
结果：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 $li = $("ul li:eq(1)") // 获取
- 里第2个
- 节点var li_txt = $li.text() // 获取第2个
- 元素节点的文本内容alert(li_txt) // 打印文本内容
1.2查找属性节点
var $para = $("p") // 获取
节点var p_txt = $para.attr("title") // 获取
元素节点属性titlealert(p_txt) // 打印title属性值
2.创建节点
$(html)方法会根据传入的HTML标记字符串，创建一个 DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。要想将新创建的元素插入文档，可以使用jQuery中的append()等方法。
2.1创建元素节点
var $li_1 = $("
- ") // 创建第1个
- 元素var $li_2 = $("
- ") // 创建第2个
- 元素
$("ul").append($li_1) // 添加到
- 节点中，使之能在网页中显示$("ul").append($li_2) // 可以采取链式写法：$("ul").append($li_1).append($li_2)
2.2创建文本节点
创建文本节点就是在创建元素节点时直接把文本内容写出来，然后使用append()等方法将它们添加到文档中就可以了。
var $li_1 = $("
- 香蕉") // 创建一个
- 元素，包括元素节点和文本节点 // “香蕉”就是创建的文本节点var $li_2 = $("
- 雪梨") // 创建一个
- 元素，包括元素节点和文本节点 // "雪梨"就是创建的文本节点$("ul").append($li_1) // 添加到
- 节点中，使之能在网页中显示$("ul").append($li_2) // 添加到
- 节点中，使之能在网页中显示
2.3创建属性节点
创建属性节点与创建文本节点类似，也是直接在创建元素节点时一起创建。
var $li_1 = $("
- 节点中，使之能在网页中显示$("ul").append($li_2) // 添加到
- 香蕉") // 创建一个
- 元素 // 包括元素节点、文本节点和属性节点 // 其中title='香蕉'就是创建的属性节点var $li_2 = $("
- 雪梨") // 创建一个
- 元素 // 包括元素节点、文本节点和属性节点 // 其中title='雪梨'就是创建的属性节点$("ul").append($li_1)
$("ul").append($li_2) // 添加到
- 节点中，使之能在网页中显示
3.插入节点
动态创建HTML元素并没有实际用处，还需要将新创建的元素插入文档中。将新创建的节点插入文档最简单地办法是，让它成为这个文档的某个节点的子节点。
3.1 append() 向每个匹配的元素内部追加内容
$("p").append("你好") // 结果是
我说：你好
3.2 appendTo() 将所有匹配的元素追加到指定的元素中
$("你好").appendTo("p") // 结果是
我说：你好
3.3 prepend() 向每个匹配的元素内部前置内容
$("p").prepend("你好") // 结果是
你好我说：
3.4 prependTo() 将所有匹配的元素前置到指定的元素中
$("你好").prependTo("p") // 结果是
你好我说：
3.5 after() 在每个匹配的元素之后插入内容
$("p").after("你好") // 结果是
我说：
你好3.6 insertAfter() 将所有匹配的元素插入到指定元素的后面
$("你好").insertAfter("p") // 结果是
我说：
你好3.7 before() 在每个匹配的元素之前插入内容
$("p").before("你好") // 结果是你好
我说：
3.8 insertBefore() 将所有匹配的元素插入到指定的元素的前面
$("你好").insertBefore("p") // 结果是你好
我说：
4.删除节点
如果文档中某一个元素多余那么应将其删除。
4.1 remove()方法
作用是从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素
$("ul li:eq(1)").remove() // 获取
- 节点中的第2个
- 元素节点后，将它从网页中删除
$("ul li").remove("li[title!=菠萝]")// 将
- 元素中属性title不等于“菠萝”的
- 元素删除
4.2 detach()方法
detach()和remove()一样，也是从DOM中去掉所有匹配的元素。但这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不用的是，所有绑定的事件、附加的数据等都会保留下来。
$("ul li").click(function(){
alert($(this).html())
})
var $li = $("ul li:eq(1)").detach() // 删除元素$li.appendTo("ul") // 重新追加此元素，发现它之前绑定的事件还在，如果使用remove()方法删除元素的话则它之前绑定的事件将失效
4.3 empty()方法
empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点。
$("ul li:eq(1)").empty() // 获取第2个
- 元素节点后，清空此元素里的内容，注意是元素里。当运行代码后，第2个
- 元素的内容被清空了，只剩下
- 标签默认的符号“.”
5.复制节点
clone()方法
$("ul li").click(function(){
$(this).clone().appendTo("ul") // 复制当前单击的节点，并将它追加到
- 元素中})
复制节点后，被复制的新元素并不具有任何行为。若需要新元素也具有复制功能(上例是单击事件)，可使用如下jQuery代码：
$(this).clone(true).appendTo("body") // 注意参数true，它的含义是复制元素的同时复制元素中所绑定的事件
6.替换节点
6.1 replaceWith()
replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者 DOM元素
例如：要将网页中
你喜欢的蔬果？
替换成你讨厌的蔬果？$("p").replaceWith("你讨厌的蔬果？")
6.2 replaceAll()
该方法与replaceWith()作用相同，只是颠倒了replaceWith()操作，可使用如下代码实现上例同样的功能：
$("你讨厌的蔬果？").replaceAll("p")
注意：若在替换之前已经给元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件。
7.包裹节点
wrap()将某个节点用其他标记包裹起来，该方法对于需要在文档中插入额外的结构化标记非常有用，而且它不会破坏原始文档的语义。
$("strong").wrap("") // 用标签把元素包裹起来
得到的结果是：你最喜欢的水果？
wrapAll()方法会将所有匹配的元素用一个元素来包裹，它不同于wrap()方法，wrap()方法是将所有的元素进行单独的包裹。
wrapInner()方法将每一个匹配的元素的子内容(包括文本节点)用其他结构化的标记包裹起来。例如可使用它来包裹标签的子内容，
$("strong").wrapInner("") // 运行后结果变为：你最喜欢的水果？
8.属性操作
jQuery中用attr()方法来获取和设置元素属性，removeAttr()方法来删除元素属性。
9.样式操作
9.1 获取样式和设置样式
获取class和设置class都可以使用attr()方法来完成。
你最喜欢的水果是？
上面的代码中class也是
元素的属性，因此获取和设置class都可以使用attr()方法来完成：
var p_class = $("p").attr("class") // 获取
元素的class
// 也可以使用attr()方法来设置
元素的class$("p").attr("class", "high") // 设置
元素的class为high,// 代码运行后 HTML代码将变为
你最喜欢的水果是？
9.2 追加样式
addClass()方法专门用来追加样式。
9.3 移除样式
removeClass()方法用来删除class的某个值，作用是从匹配的元素中删除全部或者指定的class。
如：$("p").removeClass("high another") // 把
元素的两个class都删除
也可以写成：$("p").removeClass() // 移除
元素的所有class
9.4 切换样式
toggle()方法
$toggleBtn.toggle(function(){
// 显示元素 代码3 },function(){
// 隐藏元素 代码4})
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()方法设置某个元素的单个样式。
$("p").css("color") // 获取
元素的样式颜色
$("p").css("color", "red") // 设置
元素的样式颜色为红色
height()获取匹配元素当前计算的高度值(px)：
$("p").height() // 获取
元素的高度值// 等同于$("p").css("height")
$("p").height(100) // 设置
元素的高度值为100px$("p").height("10em") // 设置
元素的高度值为10em
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() // 获取
元素的position()
var left = position.left // 获取左偏移
var top = position.top // 获取上偏移
var offset = $("p").offset() // 获取
元素的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")选取所有的
元素
(4) * 匹配所有元素
如：$("*")选取所有的元素
(5) selector1, selector2, ... , selectorN 将每一个选择器匹配到的元素合并后一起返回
如：$("div,span,p.myClass")选取所有
, 和拥有class为myClass的标签的一组元素层次选择器
通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和同辈元素等。
(1)$("ancestor descendant") 选取ancestor元素里所有的descendant即后代元素
如：$("div span")选取
里的所有的 元素(2)$("parent > child") 选取parent元素下的child即子元素，与$("ancestor descendant")有区别，$("ancestor descendant")选择的是后代元素
如：$("div > span")选取
元素下的元素名是 的子元素(3) $("prev + next") 选取紧接在prev元素后的next元素
如：$(".one + div")选取class为one的下一个
同辈元素(4) $("prev ~ siblings") 选取prev元素之后的所有siblings元素
如：$("#two~div")选取id为two的元素后面的所有
同辈元素(3)(4)有更简单的替代方案：
可以用next()方法来代替$("prev + next")选择器
如：$(".one").next("div")等价于$(".one + div")
可以使用nextAll()方法来代替$("prev~siblings")选择器
如：$("#prev").nextAll("div")等价于$("#prev~div")
$("#prev~div")选择器只能选择"prev"元素后面的
元素，而siblings()方法与前后位置无关，只要是同辈节点就都能匹配。// 选取#prev之后的所有同辈div元素$("#prev ~ div").css("background", "#bbffaa")
// 同上$("#prev").nextAll("div").css("background", "#bbffaa")
// 选取#prev所有的同辈div元素,无论前后位置$("#prev").siblings("div").css("background", "#bbffaa")过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号(：)开头。按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。基本过滤选择器
(1) :first 选取第1个元素
如：$("div:first")选取所有
元素中第1个元素(2) :last 选取最后1个元素
如：$("div:last")选取所有
元素中的最后一个元素(3) :not(selector) 去除所有与给定选择器匹配的元素
如：$("input:not(.myClass)")选取class不是myClass的元素
(4) :even 选取索引是偶数的所有元素，索引从0开始
如：$("input:even")选取索引是偶数的元素
(5) :odd 选取索引是奇数的所有元素，索引从0开始
如：$("input:odd")选取索引是奇数的元素
(6) :eq(index) 选取索引等于index的元素(index从0开始)
如：$("input:eq(1)")选取索引等于1的元素
(7) :gt(index) 选取索引大于index的元素(index从0开始)
如：$("input:gt(1)")选取索引大于1的元素(注：大于1而不包括1)
(8) :lt(index) 选取索引小于index的元素(index从0开始)
如：$("input:lt(1)")选取索引小于1的元素(注：小于1而不包括1)
(9) :header 选取所有的标题元素，例如h1,h2,h3等等
如：$(":header")选取网页中的所有的
,
,
...
(10) :animated 选取当前正在执行动画的所有元素
如：$("div:animated")选取正在执行动画的
元素(11) :focus 选取当前获取焦点的元素
如：$(":focus")选取当前获取焦点的元素
内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。
(1) :contains(text) 选取含有文本内容为"text"的元素
如：$("div:contains('我')")选取含有文本“我”的
元素(2) :empty 选取不包含子元素或者文本的空元素
如：$("div:empty")选取不包含子元素(包括文本元素)的
空元素(3) :has(selector) 选取含有选择器所匹配的元素的元素
如：$("div:has(p)")选取含有
元素的
元素(4) :parent 选取含有子元素或者文本元素的元素
如：$("div:parent")选取拥有子元素(包括文本元素)的
元素可见性过滤选择器
(1) :hidden 选取所有不可见的元素
如：$(":hidden")选取所有不可见的元素。包括,
和等元素。如果只想选取元素，可以使用$("input:hidden")(2) :visible 选取所有可见的元素
如：$("div:visible")选取所有可见的
元素属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。
(1) [attribute] 选取拥有此属性的元素
如：$("div[id]")选取拥有属性id的元素
(2) [attribute=value] 选取属性的值为value的元素
如：$("div[title=test]")选取属性title为"test"的
元素(3) [attribute!=value] 选取属性的值不等于value的元素
如：$("div[title!=test]")选取属性title不为"test"的
元素(注意：没有属性title的元素也会被选取)(4) [attribute^=value] 选取属性的值以value开始的元素
如：$("div[title^=test]")选取属性title以"test"开始的
元素(5) [attribute$=value] 选取属性的值以value结束的元素
如：$("div[title$=test]")选取属性title以"test"结束的
元素(6) [attribute*=value] 选取属性的值含有value的元素
如：$("div[title*=test]")选取属性title含有"test"的
元素(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'结束的
元素子元素过滤选择器
(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")选取每个
- 中第1个
- 元素
(3) :last-child 选取每个父元素的最后一个子元素
同样，:last只返回单个元素，而:last-child选择符将为每个父元素匹配最后一个子元素
(4) :only-child 如果某个元素是它父元素中惟一的子元素，那么将会被匹配。如果父元素中含有其他元素则不会被匹配
如：$("ul li:only-child")在
- 中选取是唯一子元素的
- 元素
表单对象属性过滤选择器
(1) :enabled 选取所有可用元素
如：$("#form1 :enabled") 选取id为"form1"的表单内的所有可用元素
(2) :disabled 选取所有不可用元素
如：$("#form2 :disabled") 选取id为"form2"的表单内的所有不可用元素
(3) :checked 选取所有被选中的元素(单选框，复选框)
如：$("input:checked") 选取所有被选中的元素
(4) :selected 选取所有被选中的选项元素(下拉列表)
如：$("select option:selected") 选取所有被选中的选项元素表单选择器
表单选择器能极其方便地获取到表单的某个或某类型的元素。
(1) :input 选取所有的、、和元素
如：$(":input")获取所有的、、和元素
(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() 方法用于向上滑动元素。
$(selector).slideUp(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideUp() 方法：
$("#flip").click(function(){
$("#panel").slideUp()
})
五. 请写出一个简单地$.ajax()的请求方式(至少5个参数)。
$.ajax({
type: "GET", // HTTP请求方法 url: url, // 要获取数据的url data: null, // 不给url添加任何数据 dataType: "script", // 一旦获取到数据，立刻当做脚本执行 success: callback // 完成时调用该函数})
$.ajax({
method: "POST",
url: "some.php",
data: { name: "John", location: "Boston" }
})
.done(function( msg ) {
alert( "Data Saved: " + msg )
});
var menuId = $( "ul.nav" ).first().attr( "id" )
var request = $.ajax({
url: "script.php",
method: "POST",
data: { id : menuId },
dataType: "html"
})
request.done(function( msg ) {
$( "#log" ).html( msg )
})
request.fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus )
})
六. 请写出至少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为什么放到
扫一扫
3281
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
