web前端面试题--自己在网上扒的答案

最新推荐文章于 2022-09-01 12:04:34 发布

「已注销」

最新推荐文章于 2022-09-01 12:04:34 发布

阅读量2.3k

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/Jim_Carrey/article/details/50868464

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一CSS

1 doctype？严格模式和混杂模式，如何触发这两种模式，区分它们有何意义？行内元素有那些？块级元素有那些？CSS的盒模型？

1 <！DOCTYPE>声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器的解析器，用什么文档类型规范来解析这个文档

2 如果HTML文档包含形式完整的doctype，那么它一般以标准模式呈现。对于HTML4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现

3 在严格模式中，浏览器根据规范呈现页面；

在混杂模式中，页面以向后兼容的方式显示，以防止老站点无法工作。

4 行内元素：a span img input textrea em

5 块级元素：div table ul ol dl h1~h6 header footer seccion

6 box-sizing:

content-box标准模式总宽度/高度=content + padding*2 + border*2 +margin*2；

border-box 怪异模式总宽度/高度=width/height+margin；

加入xml头部声明可以触发IE浏览器的Quirks mode，触发之后，浏览器解析方式就和IE5.5一样，拥有IE5.5一样的bug和其他问题，行为（Javascript）也是如此。

      IE6的触发
      在XHTML的DOCTYPE前加入XML声明
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

      IE7的触发
      在XML声明和XHTML的DOCTYPE之间加入HTML注释
<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

      IE6和IE7都可以触发的
      在HTML4.01的DOCTYPE文档头部加入HTML注释


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

其次是这样的意义
各个浏览器的混杂模式，基本就是各个浏览器的私有模式，不相互兼容。所以，除非是为了兼容的问题，比如你不想修改很久很久以前做的IE ONLY的网页，否则刻意触发混杂模式没有任何意义。

2 CSS的引入方式有哪些？Link和@import的区别？

差别1：老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。

link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。

差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。

差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

差别4：使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
差别5：@import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，

3 CSS选择符有那些？哪些属性可以继承？优先级？内联和importent那个优先级高？

CSS 元素选择器
CSS 类选择器

CSS ID 选择器
CSS 属性选择器
CSS 后代选择器
CSS 子元素选择器
CSS 相邻兄弟选择器
CSS 伪类
CSS 伪元素等等等

CSS3里的选择器得到了极大的丰富：
一、第一大类--基本选择器
1、通配符选择器：*0
2、标签选择器：就是HTML里的标签啦，如p、body、div……
3、ID选择器
4、类选择器
二、第二大类--复合选择器
1、交集选择器（后代选择器）：比如段落（p）里边的文本（a）,CSS里就可以如下写
p a {
……
}
注意：有空格，不要连起来写。
2、并集选择器（组选择器）：比如你要对页面中的所有段落（p）和文本（a）使用同样的样式，CSS如下
p,a {
……
}
注意：并列的元素之间用逗号分隔
3、子对象选择器：E>F（所有作为E的子元素的F元素）
相邻选择符E+F（紧贴在E元素之后的F元素）
三、第三大类--属性选择器
1、E[attr] 这里attr就是attribute（属性）的缩写。比如你要选择具有readonly属性的<input>元素，CSS里就如下写
input[readonly]
2、E[attr="value"] 选择具有attr属性，且该属性值为value的E元素
……
四、第四大类--伪类选择器。又分结构伪类选择器和状态伪类选择器
五、第五大类--伪元素选择器。如E:first-line表示对象内的第一行

4 经常遇到的浏览器兼容性有哪些？怎么会出现？解决方法是什么？

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

在学习浏览器兼容性之前，我想把前端开发人员划分为两类：

第一类是精确按照设计图开发的前端开发人员，可以说是精确到1px的，他们很容易就会发现设计图的不足，并且在很少的情况下会碰到浏览器的兼容性问题，而这些问题往往都死浏览器的bug，并且他们制作的页面后期易维护，代码重用问题少，可以说是比较牢固放心的代码。

第二类是基本按照设计图来开发的前端开发人员，很多细枝末节差距很大，不如间距，行高，图片位置等等经常会差几px。某种效果的实现也是反复调试得到，具体为什么出现这种效果还模模糊糊，整体布局十分脆弱。稍有改动就乱七八糟。代码为什么这么写还不知所以然。这类开发人员往往经常为兼容性问题所困。修改好了这个浏览器又乱了另一个浏览器。改来改去也毫无头绪。其实他们碰到的兼容性问题大部分不应该归咎于浏览器，而是他们的技术本身了。

文章主要针对的是第一类，严谨型的开发人员，因此这里主要从浏览器解析差异的角度来分析兼容性问题。（相关文章推荐：主流浏览器CSS 3和HTML 5兼容清单）

浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同

问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

碰到频率:100%

解决方案：CSS里 *{margin:0;padding:0;}

备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

问题症状:常见症状是IE6中后面的一块被顶到下一行

碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）

解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性

备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。

浏览器兼容问题三：设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度

碰到频率：60%

解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。

浏览器兼容问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug

问题症状：IE6里的间距比超过设置的间距

碰到几率：20%

解决方案：在display:block;后面加入display:inline;display:table;

备注：行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。

浏览器兼容问题五：图片默认有间距

问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。

碰到几率：20%

解决方案：使用float属性为img布局

备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（我的一个学生使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以我禁止他们使用）

浏览器兼容问题六：标签最低高度设置min-height不兼容

问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容

碰到几率：5%

解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：

{min-height:200px; height:auto !important; height:200px; overflow:visible;}

备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。

浏览器兼容问题七：透明度的兼容CSS设置

做兼容页面的方法是：每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。

1. /* CSS hack*/

我很少使用hacker的，可能是个人习惯吧，我不喜欢写的代码IE不兼容，然后用hack来解决。不过hacker还是非常好用的。使用hacker我可以把浏览器分为3类：IE6 ；IE7和遨游；其他（IE8 chrome ff safari opera等）

◆IE6认识的hacker 是下划线_ 和星号 *

◆IE7 遨游认识的hacker是星号 *

比如这样一个CSS设置：

1. height:300px;*height:200px;_height:100px;

IE6浏览器在读到height:300px的时候会认为高时300px；继续往下读，他也认识*heihgt，所以当IE6读到*height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。继续往下读，IE6还认识_height,所以他又会覆盖掉200px高的设置，把高度设置为100px；

IE7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了，因为它们不认识_height。所以它们会把高度解析为200px，剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。

5 如何居中一个浮动元素？

二种方法

1、父级div设置固定宽度后

加margin:0 auto; 然后子级div加浮动，

即可实现；不过次方法不能无限伸展；

2、在table的td内插入div，div设置浮动，

在table上设置margin:0 auto; 而table不

要设置宽度，因为table默认是宽度最小化的，实现居中的

5-1 如何居中垂直居中一个浮动的元素?

给父元素添加 display : table-cell;

vertical-align : middle; 属性

6 HTML5和CSS3的了解情况？

HTML5增加了许多语义化的标签,新增了一些新元素如表单验证的 Canvas 支持音视频处理

新的文档类型doctype html

1. 新的Doctype
尽管使用<!DOCTYPE html>，即使浏览器不懂这句话也会按照标准模式去渲染
2. Figure元素
用<figure>和<figcaption>来语义化地表示带标题的图片
<figure>
<img src=”path/to/image” alt=”About image” />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>
3. 重新定义的<small>
<small>已经被重新定义了，现在被用来表示小的排版，如网站底部的版权声明
4. 去掉link和script标签里面的type属性
5. 加/不加括号
HTML5没有严格的要求属性必须加引号，闭合不闭合，但是建议加上引号和闭合标签
6. 让你的内容可编辑，只需要加一个contenteditable属性
7. Email Inputs
如果我们给Input的type设置为email，浏览器就会验证这个输入是否是email类型，当然不能只依赖前端的校验，后端也得有相应的校验
8. Placeholders
这个input属性的意义就是不必通过javascript来做placeholder的效果了
9. Local Storage
使用Local Storage可以永久存储大的数据片段在客户端（除非主动删除），目前大部分浏览器已经支持，在使用之前可以检测一下window.localStorage是否存在
10. 语义化的header和footer
11. 更多的HTML5表单特性
12. IE和HTML5
默认的，HTML5新元素被以inline的方式渲染，不过可以通过下面这种方式让
其以block方式渲染
header, footer, article, section, nav, menu, hgroup {
display: block;
}
不幸的是IE会忽略这些样式，可以像下面这样fix:
document.createElement(”article”);
document.createElement(”footer”);
document.createElement(”header”);
document.createElement(”hgroup”);
document.createElement(”nav”);
document.createElement(”menu”);
13. hgroup
一般在header里面用来将一组标题组合在一起，如
<header>
<hgroup>
<h1> Recall Fan Page </h1>
<h2> Only for people who want the memory of a lifetime. </h2>
</hgroup>
</header>
14. Required属性
required属性定义了一个input是否是必须的，你可以像下面这样声明
<input type=”text” name=”someInput” required>
或者
<input type=”text” name=”someInput” required=”required”>
15. Autofocus属性
正如它的词义，就是聚焦到输入框里面
<input type=”text” name=”someInput” placeholder=”Douglas Quaid” required autofocus>
16. Audio支持
HTML5提供了<audio>标签，你不需要再按照第三方插件来渲染音频，大多数现代浏览器提供了对于HTML5 Audio的支持，不过目前仍旧需要提供一些兼容处理，如
<audio autoplay=”autoplay” controls=”controls”>
<source src=”file.ogg” /><!–FF–>
<source src=”file.mp3″ /><!–Webkit–>
<a href=”file.mp3″>Download this file.</a>
</audio>
17. Video支持
和Audio很像，<video>标签提供了对于video的支持，由于HTML5文档并没有给video指定一个特定的编码，所以浏览器去决定要支持哪些编码，导致了很多不一致。Safari和IE支持H.264编码的格式，Firefox和Opera支持Theora和Vorbis 编码的格式，当使用HTML5 video的时候，你必须都提供：
<video controls preload>
<source src=”cohagenPhoneCall.ogv” type=”video/ogg; codecs=’vorbis, theora’” />
<source src=”cohagenPhoneCall.mp4″ type=”video/mp4; ’codecs=’avc1.42E01E, mp4a.40.2′” />
<p> Your browser is old. <a href=”cohagenPhoneCall.mp4″>Download this video instead.</a> </p>
</video>
18. 预加载视频
preload属性就像它的字面意思那么简单，你需要决定是否需要在页面加载的时候去预加载视频
<video preload>
19. 显示视频控制
<video preload controls>
20. 正则表达式
由于pattern属性，我们可以在你的markup里面直接使用正则表达式了
<form action=”" method=”post”>
<label for=”username”>Create a Username: </label>
<input type=”text” name=”username” id=”username” placeholder=”4 <> 10″ pattern=”[A-Za-z]{4,10}” autofocus required>
<button type=”submit”>Go </button>
</form>
21. 检测属性支持
除了Modernizr之外我们还可以通过javascript简单地检测一些属性是否支持，如：
<script>
if (!’pattern’ in document.createElement(’input’) ) {
// do client/server side validation
}
</script>
22. Mark元素
把<mark>元素看做是高亮的作用，当我选择一段文字的时候，javascript对于HTML的markup效果应该是这样的：
<h3> Search Results </h3>
<p> They were interrupted, just after Quato said, <mark>”Open your Mind”</mark>. </p>
23. 什么时候用<div>
HTML5已经引入了这么多元素，那么div我们还要用吗？div你可以在没有更好的元素的时候去用。
24. 想立即使用HTML5?
不要等2022了，现在就可以使用了，just do it.
25. 哪些不是HTML5
1)SVG
2)CSS3
3)Geolocation
4)Client Storage
5)Web Sockets
26. Data属性
<div id=”myDiv” data-custom-attr=”My Value”> Bla Bla </div>
CSS中使用：
<style>
h1:hover:after {
content: attr(data-hover-response);
color: black;
position: absolute;
left: 0;
}
</style>
<h1 data-hover-response=”I Said Don’t Touch Me!”> Don’t Touch Me </h1>
27. Output元素
<output>元素用来显示计算结果，也有一个和label一样的for属性
28. 用Range Input来创建滑块
HTML5引用的range类型可以创建滑块，它接受min, max, step和value属性
可以使用css的:before和:after来显示min和max的值
<input type=”range” name=”range” min=”0″ max=”10″ step=”1″ value=”">
input[type=range]:before { content: attr(min); padding-right: 5px;
}
input[type=range]:after { content: attr(max); padding-left: 5px;}

CSS3

第 1 选择器
第 2 RGBA和透明度
第 3 多栏布局
第 4 多背景图
第 5 Word Wrap
第 6 文字阴影
第 7 @font-face属性
第 8 圆角(边框半径)
第 9 边框图片
第 10 盒阴影
第 11 盒子大小
第 12 媒体查询
第 13 语音

二JavaScript

1 怎样增加移除移动复制创建和查找节点？

（1）创建新节点
      createDocumentFragment()    //创建一个DOM片段
      createElement(“标签名”)   //创建一个具体的元素
      createTextNode()   //创建一个文本节点
（2）添加、移除、替换、插入
      parent.appendChild(newEle)
      parent.removeChild(子节点)
      parent.replaceChild(newEle,被替换的Ele)
      parent.insertBefore(newEle,已有Ele)
（3）查找
      getElementsByTagName()    //通过标签名称
      getElementsByName()    //通过元素的Name属性的值
      getElementById()    //通过元素Id，唯一性

2 怎样使用事件以及IE和DOM事件模型之间存在那些主要差别？

在浏览器解析事件的时候，有两种触发方式，一种叫做Bubbling(冒泡)，另外一种叫做Capturing(捕获)。由上图可以看出来，冒泡的方式效果就是当一个DOM元素的某事件例如click事件被fire时，依次它的父元素的click事件也被fire(触发)，一直传递到最顶层的body元素为止。而捕获的触发方式正好相反，当某个元素的click事件被触发时，先从最顶层的body元素click事件被触发开始，一直传递到真正被触发的元素为止。****************************************************************************

这次我将讨论W3C的标准DOM事件模型和IE独立门户的DOM事件模型到底有多少区别，首先我们可以回想一下目前大多数Js程序员习惯如何绑定事件到DOM元素上，最常见的就是obj.οnclick=handler这种方式(更恶劣的是在Html代码的元素标签中直接加上onclick属性，完全没达到视图和动作分开的原则)。我们暂时称这种方式的事件添加为Traditional(传统方式)吧，IE有自己的IE Event Module，而火狐等浏览器则遵循的W3C方式的Event Module，下面看看这三者各自的优缺点在哪里——

1、Traditional Module

传统方式的事件模型即直接在DOM元素上绑定事件处理器，例如—

window.οnlοad=function(){…}

obj.οnmοuseοver=function(e){…}

obj.οnclick=function(){…}

首先这种方式是无论在IE还是Firefox等其他浏览器上都可以成功运行的通用方式。这便是它最大的优势了，而且在Event处理函数内部的this变量无一例外的都只想被绑定的DOM元素，这使得Js程序员可以大大利用this关键字做很多事情。

至于它的缺点也很明显，就是传统方式只支持Bubbling，而不支持Capturing，并且一次只能绑定一个事件处理器在DOM元素上，无法实现多Handler绑定。最后就是function参数中的event参数只对非IE浏览器有效果(因为IE浏览器有特制的window.event)。

2、W3C (Firefox.e.g) EventModule

Firefox等浏览器很坚决的遵循W3C标准来制定浏览器事件模型，使用addEventListener和removeEventListener两个函数，看几个例子—

window.addEventListener(‘load’,function(){…},false);

document.body.addEventListener(‘keypress’,function{…},false);

obj.addEventListener(‘mouseover’,MV,true);

function MV(){…}

addEventListener带有三个参数，第一个参数是事件类型，就是我们熟知的那些事件名字去掉前面的’on’，第二个参数是处理函数，可以直接给函数字面量或者函数名，第三个参数是boolean值，表示事件是否支持Capturing。

W3C的事件模型优点是Bubbling和Capturing都支持，并且可以在一个DOM元素上绑定多个事件处理器，各自并不会冲突。并且在处理函数内部，this关键字仍然可以使用只想被绑定的DOM元素。另外function参数列表的第一个位置(不管是否显示调用)，都永远是event对象的引用。

至于它的缺点，很不幸的就只有在市场份额最大的IE浏览器下不可使用这一点。

3、IE Event Module

IE自己的事件模型跟W3C的类似，但主要是通过attachEvent和detachEvent两个函数来实现的。依旧看几个例子吧—

window.attachEvent(‘onload’,function(){…});

document.body.attachEvent(‘onkeypress’,myKeyHandler);

可以发现它跟W3C的区别是没有第三个参数，而且第一个表示事件类型的参数也必须把’on’给加上。这种方式的优点就是能绑定多个事件处理函数在同一个DOM元素上。

至于它的缺点，为什么如今在实际开发中很少见呢？首先IE浏览器本身只支持Bubbling不支持Capturing；而且在事件处理的function内部this关键字也无法使用，因为this永远都只想window object这个全局对象。要想得到event对象必须通过window.event方式，最后一点，在别的浏览器中，它显然是无法工作的。

最后我在推荐两个必须知道的IE和W3C标准的区别用法吧—

1、当我们需要阻止浏览器某DOM元素的默认行为的时候在W3C下调用e.preventDefault()，而在IE下则通过window.event.returnValue＝false来实现。

2、当我们要阻止事件冒泡的时候，在W3C标准里调用e.stopPropagation()，而在IE下通过设置window.event.cancelBubble=true来实现。

3 面向对象编程： b怎么继承 a？

b.prototype=new a;

4 ajax是什么？Ajax的交互模型？同步和异步的区别？如何解决跨域问题？

ajax是异步的 JavaScript 和 XML。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

交互流程：

     1--启动  获取XMlHttpRequest对象
             2--open 打开url通道，并设置异步传输
             3--send 发送数据到服务器
             4--服务器接受数据并处理，处理完成后返回结果
             5--客户端接收服务器端返回

同步和异步

同步：脚本会停留并等待服务器发送回复然后再继续

异步：脚本允许页面继续其进程并处理可能的回复

Ajax跨域问题：

如果在A网站中，我们希望使用Ajax来获得B网站中的特定内容，如果A网站与B网站不在同一个域中，那么就出现了跨域访问问题。

IE对于跨域访问的处理是，弹出警告框，提醒用户。如果用户将该网站纳入可信任网站，或者调低安全级别，那么这个问题IE就不会在提醒你。

FireFox等其它非微软的浏览器遇到跨域访问，则解决方案统一是拒绝访问。

几个可行的方案：

1、Web代理的方式。即用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面，由该页面代替用户页面完成交互，从而返回合适的结果。此方案可以解决现阶段所能够想到的多数跨域访问问题，但要求A网站提供Web代理的支持，因此A网站与B网站之间必须是紧密协作的，且每次交互过程，A网站的服务器负担增加，且无法代用户保存session状态。

2、on-Demand方式。MYMSN的门户就用的这种方式，不过MYMSN中不涉及跨域访问问题。动态控制script标记的生成，通过修改script标记的src属性完成对跨域页面的调用。此方案存在的缺陷是，script的src属性完成该调用时采取的方式时get方式，如果请求时传递的字符串过大时，可能会无法正常运行。不过此方案非常适合聚合类门户使用。

3、iframe方式。查看过醒来在javaeye上的一篇关于跨域访问的帖子，他提到自己已经用iframe的方式解决了跨域访问问题。数据提交跟获取，采用iframe这种方式的确可以了，但由于父窗口与子窗口之间不能交互（跨域访问的情况下，这种交互被拒绝），因此无法完成对父窗口效果的影响。

4、用户本地转储方式：IE本身依附于windows平台的特性为我们提供了一种基于iframe，利用内存来“绕行”的方案，即两个window之间可以在客户端通过windows剪贴板的方式进行数据传输，只需要在接受数据的一方设置Interval进行轮询，获得结果后清除Interval即可。FF的平台独立性决定了它不支持剪贴板这种方式，而以往版本的FF中存在的插件漏洞又被fixed了，所以FF无法通过内存来完成暗渡陈仓。而由于文件操作FF也没有提供支持（无法通过Cookie跨域完成数据传递），致使这种技巧性的方式只能在IE中使用。

5、结合了前面几种方式，在访问A网站时，先请求B网站完成数据处理，再根据返回的标识来获得所需的结果。这种方法的缺点也很明显，B网站的负载增大了。优点，对session也实现了保持，同时A网站与B网站页面间的交互能力增强了。最重要的一点，这种方案满足了我的全部需要。

总结一下，以上方案中可选择的情况下，我最推荐on-Demand方式，在不需要提交大量数据的情况下，这种方式能够解决您的大部分问题。

5 什么是闭包？下面这个ul，如何点击每一列的时候alert其index？

<li>这是第一条</li><li>这是第二条</li><li>这是第三条</li>

</ul>

闭包:里层函数调用了外层函数的局部变量

所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。

闭包有以下特征:

1 局部变量在函数中定义有共享意义的局部变量

2 内嵌函数在函数中声明有内嵌函数,内嵌函数对函数中的局部变量进行访问

3 外部使用函数向外返回次内嵌函数,外部可以通过此内嵌函数持有并访问声明在函数的局部变量,而此变量在外部是通过其他途径无法访问

6 你如何去实现这个Tabview

10 常使用的库有那些？常用的前端开发工具？开发过什么应用或组件？

jQuery bootstrap

webStrom

飞机大战网页版 2048网页版京东首页

三 jQuery

1 body中的onload（）函数和jQuery中的document.Ready（）有什么区别？

$(document).ready(function(){})) 简写$(function(){})可以写多个

window.onload 只能写一个写多个只能最后一个生效

Document.ready()函数在页面DOM元素加载完成以后就会被调用,

而window.onload()函数则要在所有的关联资源(包括图像,音频)加载完毕才会调用

2 jQuery中有哪几种类型的选择器？

$("#myELement") 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素
$("div") 选择所有的div标签元素，返回div元素数组
$(".myClass") 选择使用myClass类的css的所有元素
$("*") 选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$("#myELement,div,.myclass")

层叠选择器：
$("form input") 选择所有的form元素中的input元素
$("#main > *") 选择id值为main的所有的子元素
$("label + input") 选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
$("#prev ~ div") 同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

基本过滤选择器：
$("tr:first") 选择所有tr元素的第一个
$("tr:last") 选择所有tr元素的最后一个
$("input:not(:checked) + span")

过滤掉：checked的选择器的所有的input元素

$("tr:even") 选择所有的tr元素的第0，2，4... ...个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始）

$("tr:odd") 选择所有的tr元素的第1，3，5... ...个元素
$("td:eq(2)") 选择所有的td元素中序号为2的那个td元素
$("td:gt(4)") 选择td元素中序号大于4的所有td元素
$("td:ll(4)") 选择td元素中序号小于4的所有的td元素
$(":header")
$("div:animated")
内容过滤选择器：

$("div:contains('John')") 选择所有div中含有John文本的元素
$("td:empty") 选择所有的为空（也不包括文本节点）的td元素的数组
$("div:has(p)") 选择所有含有p标签的div元素
$("td:parent") 选择所有的以td为父节点的元素数组
可视化过滤选择器：

$("div:hidden") 选择所有的被hidden的div元素
$("div:visible") 选择所有的可视化的div元素
属性过滤选择器：

$("div[id]") 选择所有含有id属性的div元素
$("input[name='newsletter']") 选择所有的name属性等于'newsletter'的input元素

$("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素

$("input[name^='news']") 选择所有的name属性以'news'开头的input元素
$("input[name$='news']") 选择所有的name属性以'news'结尾的input元素
$("input[name*='man']") 选择所有的name属性包含'news'的input元素

$("input[id][name$='man']") 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素

子元素过滤选择器：

$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")

$("div span:first-child") 返回所有的div元素的第一个子节点的数组
$("div span:last-child") 返回所有的div元素的最后一个节点的数组
$("div button:only-child") 返回所有的div中只有唯一一个子节点的所有子节点的数组

表单元素选择器：

$(":input") 选择所有的表单输入元素，包括input, textarea, select 和 button

$(":text") 选择所有的text input元素
$(":password") 选择所有的password input元素
$(":radio") 选择所有的radio input元素
$(":checkbox") 选择所有的checkbox input元素
$(":submit") 选择所有的submit input元素
$(":image") 选择所有的image input元素
$(":reset") 选择所有的reset input元素
$(":button") 选择所有的button input元素
$(":file") 选择所有的file input元素
$(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域

表单元素过滤选择器：

$(":enabled") 选择所有的可操作的表单元素
$(":disabled") 选择所有的不可操作的表单元素
$(":checked") 选择所有的被checked的表单元素
$("select option:selected") 选择所有的select 的子元素中被selected的元素

选取一个 name 为”S_03_22″的input text框的上一个td的text值
$(”input[@ name =S_03_22]“).parent().prev().text()

名字以”S_”开始，并且不是以”_R”结尾的
$(”input[@ name ^='S_']“).not(”[@ name $='_R']“)

一个名为 radio_01的radio所选的值
$(”input[@ name =radio_01][@checked]“).val();

$("A B") 查找A元素下面的所有子节点，包括非直接子节点
$("A>B") 查找A元素下面的直接子节点
$("A+B") 查找A元素后面的兄弟节点，包括非直接子节点
$("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点

3 请使用jQuery将页面上的所有元素边框设置为2px款的虚线？

4 jQuery中的Delegate（）函数有什么作用？

事件代理

回答：delegate()会在以下两个情况下使用到：

1、如果你有一个父元素，需要给其下的子元素添加事件，这时你可以使用delegate()了，代码如下：

$("ul").delegate("li", "click", function(){

$(this).hide();

});

2、当元素在当前页面中不可用时，可以使用delegate()

5 怎样用jQuery编码和解码URL？

encodeURIComponent(url) and decodeURIComponent(url)

编码/解码

escape / unescape,

encodeURI / decodeURI，

encodeURIComponent / decodeURIComponent。

6 attr和prop的区别？

相比attr，prop是1.6.1才新出来的，两者从中文意思理解，都是获取/设置属性的方法（attributes和properties）。只是，window或document中使用.attr()方法在jQuery1.6之前不能正常运行，因为window和document中不能有attributes。prop应运而生了。

.prop()

1、.prop( propertyName )

获取匹配集合中第一个元素的Property的值

2、

.prop( propertyName, value )

.prop( map )

.prop( propertyName, function(index, oldPropertyValue) )

给匹配元素集合设定一个或多个属性

.prop()和 .attr()区别

下面是关于jQuery1.6和1.6.1中Attributes模块变化的描述，以及.attr()方法和.prop()方法的首选使用

Attributes模块的变化是移除了attributes和properties之间模棱两可的东西，但是在jQuery社区中引起了一些混乱，因为在1.6之前的所有版本中都使用一个方法(.attr())来处理attributes和properties。但是老的.attr()方法有一些bug，很难维护。jQuery1.6.1对Attributes模块进行了更新，并且修复了几个bug。

elem.checked true (Boolean) Will change with checkbox state

$(elem).prop("checked") true (Boolean) Will change with checkbox state

elem.getAttribute("checked") "checked" (String) Initial state of the checkbox; does not change

$(elem).attr("checked")(1.6) "checked" (String) Initial state of the checkbox; does not change

$(elem).attr("checked")(1.6.1+) "checked" (String) Will change with checkbox state

$(elem).attr("checked")(pre-1.6) true (Boolean) Changed with checkbox state

if ( elem.checked )

if ( $(elem).prop("checked") )

if ( $(elem).is(":checked") )

这三个都是返回Boolean值。

为了让jQuery1.6中的.attr()方法的变化被理解的清楚些，下面是一些使用.attr()的例子，虽然在jQuery之前的版本中能正常工作，但是现在必须使用.prop（）方法代替：

首先，window或document中使用.attr()方法在jQuery1.6中不能正常运行，因为window和document中不能有attributes。它们包含properties(比如：location或readyState)，必须使用.prop()方法操作或简单地使用javascript原生的方法。在jQuery1.6.1中，window和document中使用.attr()将被自动转成使用.prop，而不是抛出一个错误。

其次，checked,selected和前面提到的其它boolean attributes，因为这些attributes和其相应的properties之间的特殊关系而被特殊对待。基本上，一个attribute就是以下html中你看到的：

boolean attributes，比如：checked，仅被设置成默认值或初始值。在一个checkbox的元素中，checked attributes在页面加载的时候就被设置，而不管checkbox元素是否被选中。

properties就是浏览器用来记录当前值的东西。正常情况下，properties反映它们相应的attributes(如果存在的话)。但这并不是boolean attriubutes的情况。当用户点击一个checkbox元素或选中一个select元素的一个option时，boolean properties保持最新。但相应的boolean attributes是不一样的，正如上面所述，它们仅被浏览器用来保存初始值。

$(“:checkbox”).get(0).checked = true;

// Is the same as $(":checkbox:first").prop(“checked”, true);

在jQuery1.6中，如果使用下面的方法设置checked：

$(“:checkbox”).attr(“checked”, true);

将不会检查checkbox元素，因为它是需要被设置的property，但是你所有的设置都是初始值。

然而，曾经jQuery1.6被释放出来的时候，jQuery团队明白当浏览器仅关心页面加载时，设置一些值不是特别的有用。所以，为了保持向后兼容性和.attr()方法的有用性，我们可以继续在jQuery1.6.1中使用.attr()方法取得和设置这些boolean attributes。

最普通的attributes是checked,selected,disabled和readOnly，但下面是jQuery1.6.1支持的使用.attr()动态地取得和设置boolean attributes/properties的完整列表：

autofocus, autoplay, async, checked, controls, defer, disabled,

hidden, loop, multiple, open, readonly, required, scoped, selected

还是建议使用.prop()方法来设置这些boolean attributes/properties，即使这些用例没有转换成使用.prop()方法，但是你的代码仍然可以在jQuery1.6.1中正常运行。

下面是一些attributes和properties的列表，正常情况下，应该使用其对应的方法(见下面的列表)来取得和设置它们。下面的是首用法，但是.attr()方法可以运行在所有的attributes情况下。

注意：一些DOM元素的properties也被列在下面，但是仅运行在新的.prop()方法中

*例如: window.location

**如果需要在(if needed over) .width()

.attr()和.prop()都不应该被用来取值/设值。使用.val()方法代替(即使使用.attr("value","somevalue") 可以继续运行，就像1.6之前做的那样)

3、首选用法的概述

.prop()方法应该被用来处理boolean attributes/properties以及在html(比如：window.location)中不存在的properties。其他所有的attributes(在html中你看到的那些)可以而且应该继续使用.attr()方法来进行操作。

上面的概述已经描述的够清楚了，我也没有必要再总结了。

7 请指出 .bing() .live() 和 .delegate() 的区别？

Bind()方法：

给元素绑定事件

形式：

.bind(eventType[,eventData],handler(eventObject))

eventType,string类型，一个或多个DOM事件的名称，比如：click、submit

eventData，Object，将会传递给handler函数的数据，也就是eventObject的data属性中，如果要调用那么使用eventObject.data

Handler，function，当事件被触发时执行的函数

.bind(eventType[,eventData][,preventBubble])

eventType,string,一个或多个DOM事件的名称，比如：click、submit

eventData，Object，将会传递给handler函数的数据，也就是eventObject的data属性中，如果要调用那么使用eventObject.data

preventBubble,boolean,默认为true，当设置为false的时候将阻止浏览器默认事件发生，并且阻止事件冒泡。.

.bind(events)

Events,object,使用json的形式，为当前元素定义多个事件，例如：

{

click: function() {

$( this ).addClass( "active" );

mouseenter: function() {

$( this ).addClass( "inside" );

mouseleave: function() {

$( this ).removeClass( "inside" );

}

说明：

bind可以给当前存在的节点添加事件，即便使用标签选择器选择一类标签，但是也不能给新加的标签绑定目标时间。当只是简单的给固定的元素绑定事件时，可以使用该方法。但是如果是较为复杂的会动态添加执行事件元素的情况下，bind方法不适用。

bind中定义的evnetType，可以是任意的字符串，各个字符串用空格隔开，当该字符串是默认是DOM事件时，调用DOM事件，如果是不默认的DOM事件，那么就调用自定义事件，这些自定义事件不会被浏览器触发。但是可以通过trigger()方法手动触发。

当evnetType中包含"."的时候，.后边的字符串表示命名空间，也就是当前事件绑定在某命名空间中，那么命名空间中的事件不会影响其他事件，对于命名了解不深所以对于这块有更深的了解后再说明。

对于一个元素可以bind多个同一事件，事件触发按照绑定的顺序触发。

在handler事件中可以使用this关键词来表示触发当前事件的当前DOM对象，注意是DOM对象不是JQuery对象，要转化为JQuery对象使用$(this)。

Live()方法：

该方法已经在Jquery 1.7不推荐使用，1.9中删除。可以使用on()、delegate()方法替代。

不使用live()方法的原因：

1，live方法执行需要先通过选择器选择元素，而在大文档中，会耗费大量时间在选择特定元素的操作上。

2，live()方法不支持链接使用,例如 $( "a" ).find( ".offsite, .external" ).live(... );不能很好的工作。

3，由于所有的live()事件都附着到document对象上，事件会在执行前通过最远、最慢的传播路径。

4，移动设备上click时间不会产生冒泡，所以live()方法不会起作用。

还有其他原因。所以live事件已经被删除了。

Delegate()方法：

该方法可以基于某些特定元素(通过选择器得到)，附加一个或多个事件到特定元素内部选择器指定的元素上，无论选择出的目标元素是当前存在还是将来创建。

形式：

.deletgate(selector,evnetType,handler(evnetObject))

selector，string，用来过滤触发事件的元素，即目标元素。

eventType，string，与bind中介绍的eventType一样，多个事件只用空格隔开。

Handler(eventObject)，被触发的事件。

.delegate(selector,eventType,eventData,handler(eventObject))

selector，string，用来过滤触发事件的元素，即目标元素。

eventType，string，与bind中介绍的eventType一样，多个事件只用空格隔开。

eventData，Object，将会传递给handler函数的数据，也就是eventObject的data属性中，如果要调用那么使用eventObject.data

Handler(eventObject)，被触发的事件。

.delegate(selector,events):

selector，string，用来过滤触发事件的元素，即目标元素。

Events,object,

使用json的形式，为当前元素定义多个事件，例如：

{

click: function() {

$( this ).addClass( "active" );

mouseenter: function() {

$( this ).addClass( "inside" );

mouseleave: function() {

$( this ).removeClass( "inside" );

}

说明：

在JQuery1.7之后delegate已经被on取代，在1.4-1.7之间，delegate任然是最有效的给元素绑定事件的方式。

on方法(JQuery推荐使用)：

附加一个事件处理函数的一个或多个事件到选定的元素，无论选择出的目标元素是当前存在还是将来创建。

形式：

.on(events[,selector][,data],handler(evnetObject))

Events,string,事件名，可以是空格隔开的多个事件也可是带有命名空间的事件。Click submit 或 click.myPlugin

Selector,string,用来指明调用on方法的JQuery对象的特殊子元素，如果没有指定那么就是绑定到调用on方法的JQuery对象。

data，object，通过eventObject.data传递到触发事件中的数据

Handler(eventObject),被触发的函数，这里也可以使用false，false==returnfalse。

.on(events[,selector][,data])

Events,object,

使用json的形式，为当前元素定义多个事件，例如：

{

click: function() {

$( this ).addClass( "active" );

mouseenter: function() {

$( this ).addClass( "inside" );

mouseleave: function() {

$( this ).removeClass( "inside" );

}

Selector,string,用来指明调用on方法的JQuery对象的特殊子元素，如果没有指定那么就是绑定到调用on方法的JQuery对象

Data,object,通过eventObject.data传递到触发事件中的数据

说明：

on方法是当前JQuery推荐使用的事件绑定方法，相反方法是off()，附加只运行一次就删除函数的方法是one()。

摘要：jQuery的.bind()、.live()和.delegate()之间的区别并非总是那么明显的，然而，如果我们对所有的不同之处都有清晰的理解的话，那么这将会有助于我们编写出更加简洁的代码，以及防止在交互应用中弹出错误。

　　基本要素

　　DOM树

　　首先，可视化一个HMTL文档的DOM树是很有帮助的。一个简单的HTML页面看起来就像是这个样子：

　　事件冒泡(又称事件传播)

　　当我们点击一个链接时，其触发了链接元素的单击事件，该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行。

$('a').bind('click', function() { alert("That tickles!") });

　　因此一个单击操作会触发alert函数的执行。

　　click事件接着会向树的根方向传播，广播到父元素，然后接着是每个祖先元素，只要是它的某个后代元素上的单击事件被触发，事件就会传给它。

　　在操纵DOM的语境中，document是根节点。

　　现在我们可以较容易地说明.bind()、.live()和.delegate()的不同之处了。

　　.bind()

$('a').bind('click', function() { alert("That tickles!") });

　　这是最简单的绑定方法了。JQuery扫描文档找出所有的$(‘a’)元素，并把alert函数绑定到每个元素的click事件上。

　　.live()

$('a').live('click', function() { alert("That tickles!") });

　　JQuery把alert函数绑定到$(document)元素上，并使用’click’和’a’作为参数。任何时候只要有事件冒泡到document节点上，它就查看该事件是否是一个click事件，以及该事件的目标元素与’a’这一CSS选择器是否匹配，如果都是的话，则执行函数。

　　live方法还可以被绑定到具体的元素(或context)而不是document上，像这样：

$('a', $('#container')[0]).live(...);

　　.delegate()

$('#container').delegate('a', 'click', function() { alert("That tickles!") });

　　JQuery扫描文档查找$(‘#container’)，并使用click事件和’a’这一CSS选择器作为参数把alert函数绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上，它就查看该事件是否是click事件，以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话，它就执行函数。

　　可以注意到，这一过程与.live()类似，但是其把处理程序绑定到具体的元素而非document这一根上。精明的JS’er们可能会做出这样的结论，即$('a').live() == $(document).delegate('a')，是这样吗?嗯，不，不完全是。

　　为什么.delegate()要比.live()好用

　　基于几个原因，人们通常更愿意选用jQuery的delegate方法而不是live方法。考虑下面的例子：

$('a').live('click', function() { blah() });
// 或者
$(document).delegate('a', 'click', function() { blah() });

　　速度

　　后者实际上要快过前者，因为前者首先要扫描整个的文档查找所有的$(‘a’)元素，把它们存成jQuery对象。尽管live函数仅需要把’a’作为串参数传递以用做之后的判断，但是$()函数并未知道被链接的方法将会是.live()。

　　而另一方面，delegate方法仅需要查找并存储$(document)元素。

　　一种寻求避开这一问题的方法是调用在$(document).ready()之外绑定的live，这样它就会立即执行。在这种方式下，其会在DOM获得填充之前运行，因此就不会查找元素或是创建jQuery对象了。

　　灵活性和链能力

　　live函数也挺令人费解的。想想看，它被链到$(‘a’)对象集上，但其实际上是在$(document)对象上发生作用。由于这个原因，它能够试图以一种吓死人的方式来把方法链到自身上。实际上，我想说的是，以$.live(‘a’,…)这一形式作为一种全局性的jQuery方法，live方法会更具意义一些。

　　仅支持CSS选择器

　　最后一点，live方法有一个非常大的缺点，那就是它仅能针对直接的CSS选择器做操作，这使得它变得非常的不灵活。

　　欲了解更多关于CSS选择器的缺点，请参阅Exploring jQuery .live() and .die()一文。

　　更新：感谢Hacker News上的pedalpete和后面评论中的Ellsass提醒我加入接下来的这一节内容。

　　为什么选择.live()或.delegate()而不是.bind()

　　毕竟，bind看起来似乎更加的明确和直接，难道不是吗?嗯，有两个原因让我们更愿意选择delegate或live而不是bind：

　　为了把处理程序附加到可能还未存在于DOM中的DOM元素之上。因为bind是直接把处理程序绑定到各个元素上，它不能把处理程序绑定到还未存在于页面中的元素之上。

　　如果你运行了$(‘a’).bind(…)，而后新的链接经由AJAX加入到了页面中，则你的bind处理程序对于这些新加入的链接来说是无效的。而另一方面live和delegate则是被绑定到另一个祖先节点上，因此其对于任何目前或是将来存在于该祖先元素之内的元素都是有效的。

　　或者为了把处理程序附加到单个元素上或是一小组元素之上，监听后代元素上的事件而不是循环遍历并把同一个函数逐个附加到DOM中的100个元素上。把处理程序附加到一个(或是一小组)祖先元素上而不是直接把处理程序附加到页面中的所有元素上，这种做法带来了性能上的好处。

　　停止传播

　　最后一个我想做的提醒与事件传播有关。通常情况下，我们可以通过使用这样的事件方法来终止处理函数的执行：

$('a').bind('click', function(e) {
e.preventDefault();
// 或者
e.stopPropagation();
});

　　不过，当我们使用live或是delegate方法的时候，处理函数实际上并没有在运行，需要等到事件冒泡到处理程序实际绑定的元素上时函数才会运行。而到此时为止，我们的其他的来自.bind()的处理函数早已运行了。

8请指出 .get() 和 .eq() 的区别

eq返回的是jquery对象
get返回的dom元素

eq返回的是一个jquery对象 get返回的是一个html 对象数组
返回的是jQuery对象，就可以继续调用其他方法，返回的是html数组就不能调用jQuery的其他方法
例如：
$("ul li").get(1).css("color", "red"); //这个是错误的
$("ul li").eq(1).css("color", "red"); //这个是正确的

9 什么是效果队列？

jQuery核心中, 有一组队列控制方法, 这组方法由queue()/dequeue()/clearQueue()三个方法组成, 它对需要连续按序执行的函数的控制可以说是简明自如, 主要应用于animate ()方法, ajax以及其他要按时间顺序执行的事件中.

先解释一下这组方法各自的含义.

queue(name,[callback]): 当只传入一个参数时, 它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx); 当有两个参数传入时, 第一个参数还是默认为fx的的队列名, 第二个参数又分两种情况, 当第二个参数是一个函数时, 它将在匹配的元素的队列最后添加一个函数. 当第二个参数是一个函数数组时,它将匹配元素的队列用新的一个队列来代替(函数数组).可能, 这个理解起来有点晕.

dequeue(name): 这个好理解, 就是从队列最前端移除一个队列函数, 并执行它.

clearQueue([queueName]):这是1.4新增的方法. 清空对象上尚未执行的所有队列. 参数可选,默认为fx. 但个人觉得这个方法没多大用, 用queue()方法传入两个参数的第二种参数即可实现clearQueue方法.

现在, 我们要实现这样一个效果, 有标有1至7的数字方块, 要求这七个方块自左到右依次下落. 查看DEMO
css与html部分我就不贴出来了, DEMO中有. 若按常规做法, 可能需要用如下jQ代码来实现:

复制代码代码如下:

$('.one').delay(500).animate({
    top: '+=270px'
},
500,
function() {
    $('.two').delay(500).animate({
        top: '+=270px'
    },
    500,
    function() {
        $('.three').delay(500).animate({
            top: '+=270px'
        },
        500,
        function() {
            $('.four').delay(500).animate({
                top: '+=270px'
            },
            500,
            function() {
                $('.five').delay(500).animate({
                    top: '+=270px'
                },
                500,
                function() {
                    $('.six').delay(500).animate({
                        top: '+=270px'
                    },
                    500,
                    function() {
                        $('.seven').animate({
                            top: '+=270px'
                        },
                        500,
                        function() {
                            alert('按序落体运动结束! Yeah!')
                        });
                    });
                });
            });
        });
    });
});

嗯, 没错, 效果很完美的呈现给出来了, 但这种晕眩的代码, 你能忍受吗? 即便可以忍受, 如果此时, 你想调换一个某个的执行顺序, 比如, 你想让5落下后再开始下落3, 或者新加8至15八个方块, 怎么办? 重写吗? 在里面小心冀冀的改吗? 显然, 我们需要另外一种列简明便捷的方法来实现这个效果, 那就是jQuery队列控制方法.请看如下代码:

复制代码代码如下:

这样一来, 看起来是不是简明多了. 如何实现?
1. 新建一个数组,把动画函数依次放进去(这样更改顺序,新加动画是不是方便多了?);
2. 用queue将这组动画函数数组加入到slideList队列中;
3. 用dequeue取出slideList队列中第一个函数, 并执行它;
4. 初始执行第一个函数.

至于clearQueue()方法,就不多说了, 演示中停止按钮调用的就是clearQueue()方法,当然你还可以用queue()方法直接将现在的函数列队替换成[]空数组实现(个人比较推荐空数组替换.,更直观).