兴国资源网

常见前端面试题及答案
站长资源 2024/4/27 佚名
2 0
兴国资源网 Design By www.nnzcdc.com

前言

本文是在GitHub上看到一个大牛总结的前端常见面试题，很多问题问的都很好，很经典、很有代表性。上面没有答案，我就整理了一下，从网上找了一些相关问题的答案。里面有一部分问题的答案我也没有进行考证，不少答案都来源于网络，或许会有疏漏之处，仅供大家参考哦！(还有一部分问题答案还未整理，大家也可以自己搜索一下答案)

1.你能描述一下渐进增强和优雅降级之间的不同吗"http://www.campr.com/">www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。）
"http://editorconfig.org/">http://editorconfig.org/)之类的规范
"_blank" href="http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout">http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout）,Dromaeo。

10.如果今年你打算熟练掌握一项新技术，那会是什么？

nodejs，html5，css3，less等。

11.请谈一下你对网页标准和标准制定机构重要性的理解。

w3c存在的意义就是让浏览器兼容性问题尽量小，首先是他们对浏览器开发者的约束，然后是对开发者的约束。

12.什么是FOUC（无样式内容闪烁）？你如何来避免FOUC？

FOUC(Flash Of Unstyled Content)--文档样式闪烁

<style type="text/css"media="all">@import"../fouc.css";</style>而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。解决方法简单的出奇，只要在<head>之间加入一个<link>或者<script>元素就可以了。

13.doctype（文档类型）的作用是什么？你知道多少种文档类型？

此标签可告知浏览器文档使用哪种HTML或XHTML规范。该标签可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的HTML文档。

HTML 4.01规定了三种文档类型：Strict、Transitional以及Frameset。
XHTML 1.0规定了三种XML文档类型：Strict、Transitional以及Frameset。
Standards（标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

14.浏览器标准模式和怪异模式之间的区别是什么？

W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quircks mode和Standars mode，两种渲染方法共存在一个浏览器上。IE盒子模型和标准W3C盒子模型：ie的width包括：padding\border。标准的width不包括：padding\border
"data-" 之后必须有至少一个字符
"http://960.gs/">http://960.gs/，栅格系统延续美学。

29.你用过媒体查询，或针对移动端的布局/CSS吗？

媒体查询，就是响应式布局。通过不同的媒介类型和条件定义样式表规则。媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。
语法结构及用法：@media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules}。

示例如下：

/* 当浏览器的可视区域小于980px */
@media screen and （max-width： 980px） {
#wrap {width： 90%; margin:0 auto;}
#content {width： 60%;padding： 5%;}
#sidebar {width： 30%;}
#footer {padding： 8% 5%;margin-bottom： 10px;}
}
/* 当浏览器的可视区域小于650px */
@media screen and （max-width： 650px） {
#header {height： auto;}
#searchform {position： absolute;top： 5px;right： 0;}
#content {width： auto; float： none; margin： 20px 0;}
#sidebar {width： 100%; float： none; margin： 0;}
}

30.你熟悉SVG样式的书写吗？

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。

什么是SVG？
"htmlcode"> 

<"1.0" standalone="no""-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
   <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
   </svg>

31.如何优化网页的打印样式？

<link rel = "stylesheet" type = "text/css" media = "screen" href = "xxx.css"/>

其中media指定的属性就是设备，显示器上就是screen，打印机则是print，电视是tv，投影仪是projection。打印样式示例如下：

<link rel = "stylesheet" type = "text/css" media = "print" href = "yyy.css"/>

但打印样式表也应注意以下事项：
"http://learnboost.github.io/stylus/docs/js.html">http://learnboost.github.io/stylus/docs/js.html；
"color: rgb(0,0,255)">CSS之布局与定位。

"" src="/UploadFiles/2021-04-02/201608261930521.jpg">

38.请解释一下relative、fixed、absolute和static元素的区别？请解释一下inline和inline-block的区别？

关于第一个问题请看文章CSS之布局与定位 。

inline:此元素会被显示为内联元素，元素前后没有换行符。

inline-block:行内块元素。

39.你目前在使用哪一套CSS框架，或者在产品线上使用过哪一套？(Bootstrap,PureCSS,Foundation等等)
"htmlcode"> 

 function getEventTarget(e) {
   e=e||window.event;
   return e.target||e.srcElement;
 }

41.解释下JavaScript中this是如何工作的。

this永远指向函数运行时所在的对象，而不是函数被创建时所在的对象。匿名函数或不处于任何对象中的函数指向window 。

1.如果是call，apply,with，指定的this是谁，就是谁。

2.普通的函数调用，函数被谁调用，this就是谁。

42.解释下原型继承的原理。

以下代码展示了JS引擎如何查找属性：

function getProperty(obj,prop) {
  if (obj.hasOwnProperty(prop)) {
    return obj[prop];
  } else if (obj.__proto__!==null) {
    return getProperty(obj.__proto__,prop);
  } else {
    return undefined;
  }
}

下图展示的原（prototype）的关联：

常见前端面试题及答案

43.你是如何测试JavaScript代码的？

结合自己的项目经验进行讲述。（chrome使用技巧）

44.AMD vs.CommonJS？

请看文章JavaScript之模块化编程

45.什么是哈希表？

散列表（也叫哈希表），是根据关键码值直接进行访问的数据结构。也就是说，它通过把关键码值映射到表中一个位置来访问记录，以加快查找的速度。这个映射函数叫做散列函数，存放记录的数组叫做散列表。

46.解释下为什么接下来这段代码不是IIFE(立即调用的函数表达式)：function foo(){}();.
"htmlcode"> 

var foo = function() {
   // doSomeThing.
 }；

foo();

47.描述以下变量的区别：null，undefined或undeclared？

JavaScript的最初版本是这样区分的：null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

但是，上面这样的区分，在实践中很快就被证明不可行。目前，null和undefined基本是同义的，只有一些细微的差别。

null表示"没有对象"，即该处不应该有值。典型用法是：
"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：
"htmlcode"> 

var exp = undefined;
 
 if (exp == undefined) {
  alert("undefined");
 }

exp为null时，也会得到与undefined相同的结果，虽然null和undefined不一样。注意：要同时判断undefined和null时可使用本法。

typeof返回的是字符串，有六种可能："number"、"string"、"boolean"、"object"、"function"、"undefined"。

以下是正确的用法：

 var exp = undefined;
 
 if(typeof(exp) == undefined) {
   alert("undefined");
 }

JS中如何判断null？

以下是不正确的用法：

 var exp = null;
 
 if(exp == null) {
   alert("is null");
 }

exp为undefined时，也会得到与null相同的结果，虽然null和undefined不一样。注意：要同时判断null和undefined时可使用本法。

 var exp=null;
 
 if(!exp) {
   alert("is null");
 }

如果exp为undefined或者数字零，也会得到与null相同的结果，虽然null和二者不一样。注意：要同时判断null、undefined和数字零时可使用本法。

 var exp = null;
 
 if(typeof(exp) == "null") {
   alert("is null");
 }

为了向下兼容，exp为null时，typeof总返回object。这种方式也不太好。

以下是正确的用法：

 var exp = null;
 
 if(!exp&&typeof(exp) != "undefined" && exp != 0) {
   alert("is null");
 }

48.什么是闭包，如何使用它，为什么要使用它？

包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。

所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

使用闭包的注意点：
"_blank" href="http://www.cnblogs.com/syfwhu/p/4839562.html">JavaScript之作用域与闭包详解）


49.请举出一个匿名函数的典型用例？

自执行函数，用闭包模拟私有变量、特权函数等。

50.解释“JavaScript模块模式”以及你在何时使用它。

     如果有提到无污染的命名空间，可以考虑加分。
"cb_post_title_url" href="http://www.cnblogs.com/syfwhu/p/4883532.html" target="_blank">JavaScript之模块化编程 和JavaScript之命名空间模式 浅析

51.你是如何组织自己的代码？是使用模块模式，还是使用经典继承的方法？

请看文章-JavaScript之模块化编程和Javascript之对象的继承

52.请指出JavaScript宿主对象和原生对象的区别？

原生对象

ECMA-262 把本地对象（native object）定义为“独立于宿主环境的 ECMAScript 实现提供的对象”。

“本地对象”包含哪些内容：Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError。

由此可以看出，简单来说，本地对象就是 ECMA-262 定义的类（引用类型）。

内置对象

ECMA-262 把内置对象（built-in object）定义为“由 ECMAScript 实现提供的、独立于宿主环境的所有对象，在 ECMAScript 程序开始执行时出现”。这意味着开发者不必明确实例化内置对象，它已被实例化了。

同样是“独立于宿主环境”。根据定义我们似乎很难分清“内置对象”与“本地对象”的区别。而ECMA-262 只定义了两个内置对象，即 Global 和 Math （它们也是本地对象，根据定义，每个内置对象都是本地对象）。如此就可以理解了。内置对象是本地对象的一种。

宿主对象

何为“宿主对象”？主要在这个“宿主”的概念上，ECMAScript中的“宿主”当然就是我们网页的运行环境，即“操作系统”和“浏览器”。

所有非本地对象都是宿主对象（host object），即由 ECMAScript 实现的宿主环境提供的对象。所有的BOM和DOM都是宿主对象。因为其对于不同的“宿主”环境所展示的内容不同。其实说白了就是，ECMAScript官方未定义的对象都属于宿主对象，因为其未定义的对象大多数是自己通过ECMAScript程序创建的对象。

53.call和.apply的区别是什么？

call方法:
语法：call(thisObj，Object)
定义：调用一个对象的一个方法，以另一个对象替换当前对象。
说明：call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。
apply方法：
语法：apply(thisObj，[argArray])
定义：应用某一对象的一个方法，用另一个对象替换当前对象。
说明：如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。

对于apply和call两者在作用上是相同的，但两者在参数上有以下区别：
对于第一个参数意义都一样，但对第二个参数：apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。如 func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3])同时使用apply的好处是可以直接将当前函数的arguments对象作为apply的第二个参数传入。

54.请解释Function.prototype.bind的作用？

55.你何时优化自己的代码？

请看文章JavaScript之高效编程 及JavaScript编码风格指南。

56.你能解释一下JavaScript中的继承是如何工作的吗？

原型链等。

57.在什么时候你会使用document.write()？

大多数生成的广告代码依旧使用document.write()，虽然这种用法会让人很不爽。

58.请指出浏览器特性检测，特性推断和浏览器UA字符串嗅探的区别？

特性检测：为特定浏览器的特性进行测试，并仅当特性存在时即可应用特性。

User-Agent检测：最早的浏览器嗅探即用户代理检测，服务端（以及后来的客户端）根据UA字符串屏蔽某些特定的浏览器查看网站内容。

特性推断：尝试使用多个特性但仅验证了其中之一。根据一个特性的存在推断另一个特性是否存在。问题是，推断是假设并非事实，而且可能导致可维护性的问题。

59.请尽可能详尽的解释AJAX的工作原理。

请参考文章AJAX工作原理。

60.请解释JSONP的工作原理，以及它为什么不是真正的AJAX。

JSONP (JSON with Padding)是一个简单高效的跨域方式，HTML中的script标签可以加载并执行其他域的javascript，于是我们可以通过script标记来动态加载其他域的资源。例如我要从域A的页面pageA加载域B的数据，那么在域B的页面pageB中我以JavaScript的形式声明pageA需要的数据，然后在 pageA中用script标签把pageB加载进来，那么pageB中的脚本就会得以执行。JSONP在此基础上加入了回调函数，pageB加载完之后会执行pageA中定义的函数，所需要的数据会以参数的形式传递给该函数。JSONP易于实现，但是也会存在一些安全隐患，如果第三方的脚本随意地执行，那么它就可以篡改页面内容，截获敏感数据。但是在受信任的双方传递数据，JSONP是非常合适的选择。

AJAX是不跨域的，而JSONP是一个是跨域的，还有就是二者接收参数形式不一样！

61.你使用过JavaScript模板系统吗？

如有使用过，请谈谈你都使用过哪些库，比如Mustache.js，Handlebars等等。

62.请解释变量声明提升。

在JS里定义的变量，存在于作用域链里，而在函数执行时会先把变量的声明进行提升，仅仅是把声明进行了提升，而其值的定义还在原来位置。示例如下：

var test = function() {
  console.log(name); // 输出：undefined
  var name = "jeri";
  console.log(name); // 输出：jeri
}

test();

上述代码与下述代码等价。

var test = function() {
  var name;
  console.log(name); // 输出：undefined
  name = "jeri";
  console.log(name); // 输出：jeri
}

test();

由以上代码可知，在函数执行时，把变量的声明提升到了函数顶部，而其值定义依然在原来位置。

63.请描述下事件冒泡机制。

冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

捕获型事件：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。

支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，基中第3个参数useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用attachEvent()方法，此方法没有相关设置，不过IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于false的时候执行，所以把在处理事件时把useCapture设置为false是比较安全，也实现兼容浏览器的效果。

常见前端面试题及答案

64."attribute"和"property"的区别是什么？

1. 定义

Property：属性，所有的HTML元素都由HTMLElement类型表示，HTMLElement类型直接继承自Element并添加了一些属性，添加的这些属性分别对应于每个HTML元素都有下面的这5个标准特性: id,title,lang,dir,className。DOM节点是一个对象，因此，他可以和其他的JavaScript对象一样添加自定义的属性以及方法。property的值可以是任何的数据类型，对大小写敏感，自定义的property不会出现在html代码中，只存在js中。

Attribute：特性，区别于property，attribute只能是字符串，大小写不敏感，出现在innerHTML中，通过类数组attributes可以罗列所有的attribute。

2. 相同之处

标准的 DOM properties 与 attributes 是同步的。公认的（非自定义的）特性会被以属性的形式添加到DOM对象中。如，id，align，style等，这时候操作property或者使用操作特性的DOM方法如getAttribute()都可以操作属性。不过传递给getAttribute()的特性名与实际的特性名相同。因此对于class的特性值获取的时候要传入“class”。

3. 不同之处

1).对于有些标准的特性的操作，getAttribute与点号(.)获取的值存在差异性。如href，src，value，style，onclick等事件处理程序。
2).href：getAttribute获取的是href的实际值，而点号获取的是完整的url，存在浏览器差异。

65.为什么扩展JavaScript内置对象不是好的做法？

66.为什么扩展JavaScript内置对象是好的做法？

67.请指出document.onload和document.ready两个事件的区别。

页面加载完成有两种事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是onload，指示页面包含图片等文件在内的所有元素都加载完成。

68.==和===有什么不同？

首先，== equality 等同，=== identity 恒等。 ==， 两边值类型不同的时候，要先进行类型转换，再比较。 ===，不做类型转换，类型不同的一定不等。

先说 ===，这个比较简单。下面的规则用来判断两个值是否===相等：
"htmlcode"> 

function parseQueryString ( name ){
  name = name.replace(/[\[]/,"\\\[");
  var regexS = "[\\"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );

  if(results == null) {
    return "";
  } else {
  return results[1];
  }
}

70.请解释一下JavaScript的同源策略。

在客户端编程语言中，如javascript和 ActionScript，同源策略是一个很重要的安全理念，它在保证数据的安全性方面有着重要的意义。同源策略规定跨域之间的脚本是隔离的，一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。那么什么叫相同域，什么叫不同的域呢？当两个域具有相同的协议, 相同的端口，相同的host，那么我们就可以认为它们是相同的域。同源策略还应该对一些特殊情况做处理，比如限制file协议下脚本的访问权限。本地的HTML文件在浏览器中是通过file协议打开的，如果脚本能通过file协议访问到硬盘上其它任意文件，就会出现安全隐患，目前IE8还有这样的隐患。

71.请描述一下JavaScript的继承模式。

关于继承请看文章JavaScript之对象的继承。

72.如何实现下列代码：[1,2,3,4,5].duplicator();//[1,2,3,4,5,1,2,3,4,5]。

73.描述一种JavaScript中实现memoization(避免重复运算)的策略。

74.什么是三元表达式？“三元”表示什么意思？

三元表达式："use strict";"use strict"; 意味着代码按照严格模式解析，这种模式使得Javascript在更严格的条件下运行。

好处：
"严格模式"中，可能会有不一样的运行结果；一些在"正常模式"下可以运行的语句，在"严格模式"下将不能运行。

77.解释"chaining"。

jQuery方法链接。直到现在，我们都是一次写一条jQuery语句（一条接着另一条）。不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条jQuery命令，一条接着另一条。

提示：这样的话，浏览器就不必多次查找相同的元素。

如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

78.解释"deferreds"。

开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。其中，既有异步的操作（比如ajax读取服务器数据），也有同步的操作（比如遍历一个大型数组），它们都不是立即能得到结果的。

通常的做法是，为它们指定回调函数（callback）。即事先规定，一旦它们运行结束，应该调用哪些函数。

但是，在回调函数方面，jQuery的功能非常弱。为了改变这一点，jQuery开发团队就设计了deferred对象。

简单说，deferred对象就是jQuery的回调函数解决方案。在英语中，defer的意思是"延迟"，所以deferred对象的含义就是"延迟"到未来某个点再执行。

79.你知道哪些针对jQuery的优化方法？

"htmlcode"> 

<div id="content">
  <form method="post"action="#">
    <h2>交通信号灯</h2>
    <ul id="traffic_light">
      <li>
        <input type="radio"class="on"name="light"value="red"/>红色
      </li>
      <li>
        <input type="radio"class="off"name="light"value="yellow"/>黄色
      </li>
      <li>
        <input type="radio"class="off"name="light"value="green"/>绿色
      </li>
    </ul>
    <input class="button"id="traffic_button"type="submit"value="Go"/>
  </form>
</div>

比如需要选择红绿单选框，那么可以使用一个tag name来限制(修饰)class，如下所示：var active_light=$(“input.on”);当然也可以结合就近的ID，如下所示：var active_light=$(“#traffic_light input.on”);  如果采用下面的选择器，那么效率是低效的。var traffic_button=$(“#content.button”);因为button已经有ID了，我们可以直接使用ID选择器。如下所示：var traffic_button=$(“#traffic_button”);当然这只是对于单一的元素来讲。如果你需要选择多个元素，这必然会涉及到DOM遍历和循环，为了提高性能，建议从最近的ID开始继承。如下所示：var traffic_lights=$(“#traffic_light input”);

"codetitle">复制代码 代码如下:
 $("#traffic_light input.on").bind("click",function(){});
 $("#traffic_light input.on").css("border","1px dashed yellow");
 $("#traffic_light input.on").css("background-color","orange");
 $("#traffic_light input.on").fadeIn("slow");

但切记不要这么做。我们应该先将对象缓存进一个变量然后再操作，如下所示：

记住，永远不要让相同的选择器在你的代码里出现多次.注：（1）为了区分普通的JavaScript对象和jQuery对象，可以在变量首字母前加上$符号。（2）上面代码可以使用jQuery的链式操作加以改善。如下所示：

var $active_light = $("#traffic_light input.on");

$active_light.bind("click",function(){})
.css("border","1px dashed yellow")
.css("background-color","orange")
.fadeIn("slow");


"htmlcode"> 

// 在全局范围定义一个对象(例如:window对象)
window.$my = {
  head:$("head"),
  trafficLight:$("#trafficLight"),
  trafficButton:$("#trafficButton")
};

function doSomething(){
  // 现在你可以引用存储的结果并操作它们
  var script=document.createElement("script");
  $my.head.append(script);

  // 当你在函数内部操作是,可以继续将查询存入全局对象中去.
  $my.coolResults=$("#some_ul li");
  $my.otherResults=$("#some_table td");

  // 将全局函数作为一个普通的jquery对象去使用.
  $my.otherResults.css("border-color","red");
  $my.trafficLight.css("border-color","green");
}
// 你也可以在其他函数中使用它.

这里的基本思想是在内存中建立你确实想要的东西，然后更新DOM。这并不是一个jQuery最佳实践，但必须进行有效的JavaScript操作。直接的DOM操作速度很慢。例如，你想动态的创建一组列表元素，千万不要这样做,如下所示：对直接的DOM操作进行限制。

var top_100_list = [];// 假设这里是100个独一无二的字符串
var $mylist = $("#mylist");// jQuery选择到<ul>元素

for(var i = 0,l = top_100_list.length;i<l;i++) {
  $mylist.append("<li>" + top_100_list[i] + "</li>");
}

我们应该将整套元素字符串在插入进dom中之前先全部创建好，如下所示：

 $("#entryform input").bind("focus",function() {
   $(this).addClass("selected");
 }).bind("blur",function(){
   $(this).removeClass("selected");
 });


"htmlcode"> 

$("#entryform").bind("focus",function(e) {
  var $cell = $(e.target); // e.target捕捉到触发的目标元素
  $cell.addClass("selected");
}).bind("blur",function(e) {
  var $cell = $(e.target);
  $cell.removeClass("selected");
});

当然上面代码能帮我们完成相应的任务，但如果你要寻求更高效的方法，请使用如下代码：

通过在父级监听获取焦点和失去焦点的事件，对目标元素进行操作。在上面代码中，父级元素扮演了一个调度员的角色,它可以基于目标元素绑定事件。如果你发现你给很多元素绑定了同一个事件监听,那么现在的你肯定知道哪里做错了。

"htmlcode"> 

// 创建一个list
var $myList = $('#myList');
var myListItems = '<ul>';

for(var i = 0; i < 1000; i ++) {
  myListItems += '<li class = "listItem'+i+'">This is a list item</li>';
  // 这里使用的是class
}

myListItems += '</ul>';
$myList.html(myListItems);
// 选择每一个li

for(var i = 0; i<1000; i++) {
  var selectedItem = $('.listItem' + i);
}

在上段代码中，选择每个li总共只用了61毫秒，相比class的方式，将近快了100倍。 在代码最后，选择每个li的过程中，总共用了5066毫秒，超过5秒了。接着我们做一个对比，用ID代替class：

"htmlcode"> 

<script type="text/javascript">
  $(function(){

    $("p").click(function(){
      alert($(this).text());
    });

    $("button").click(function(){
      $("<p>this is second p</p>").appendTo("body");
    });
  })
</script>
<body>
  <p>this is first p</p>
  <button>add</button>
</body>

运行后，你会发现新增的p元素，并没用被绑定click事件。你可以改成.live(“click”)方式解决此问题，代码如下：

$(function() {
  $("p").live("click",function() {
    // 改成live方式
    alert($(this).text());
  });

  $("button").click(function() {
    $("<p>this is second p</p>").appendTo("body");
  });
})

但我并不建议大家这么做，我想用另一种方式去解决这个问题，代码如下：

$(function() {
  $("p").click(function() {
    alert($(this).text());
  });

  $("button").click(function() {
    $("<p>this is second p</p>").click(function() {
      // 为新增的元素重新绑定一次
      alert($(this).text());
    }).appendTo("body");
  });
})

虽然我把绑定事件重新写了一次，代码多了点，但这种方式的效率明显高于live()方式，特别是在频繁的DOM操作中，这点非常明显。

80.请解释.end()的用途。

在官方的API上是这样描述end()方法的：“回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。”；看样子好像是找到最后一次操作的元素的上一元素，在如下的例子中：html代码：

复制代码 代码如下:
 <div>测试内容1</div><div>测试内容2</div>

jQuery代码：

复制代码 代码如下:$('<p>新增内容</p>').appendTo('div').addClass('c1').end().addClass('c2');

复制代码代码如下:

<div>测试内容1
  <p class="c1 c2">新增内容</p>
</div>
<div>测试内容2
  <p class="c1">新增内容</p>
</div>

这里我就有一点不太明白了，怎么只有第一个<p>标签有两个样式，end()方法后返回的是什么,在火狐里添加了监控，得到如下结果：1.$('<p>新增内容</p>').appendTo('div')返回的是：[p,p]对象数组，即新增后的两个p标签；2.$('<p>新增内容</p>').appendTo('div').addClass('c1')返回的是：[p.c1,p.c1]对象数组，即添加了c1类样式后的p对象数组；3.$('<p>新增内容</p>').appendTo('div').addClass('c1').end()返回的是[p.c1],是第1个<div>中的<p>,在2操作中，最后“破坏”的是第2个<div>中的<p>,所以他的前一次操作的对象是第1个<div>中的<p>,返回的就是它;4.$('<p>新增内容</p>').appendTo('div').addClass('c1').end().addClass('c2')返回的仍然是第1个<div>中的<p>;现在算是有点明白了，关键是要搞清楚最后一次操作的元素的上一元素是什么。

81.你如何给一个事件处理函数命名空间，为什么要这样做？

任何作为type参数的字符串都是合法的；如果一个字符串不是原生的JavaScript事件名，那么这个事件处理函数会绑定到一个自定义事件上。这些自定义事件绝对不会由浏览器触发，但可以通过使用.trigger()或者.triggerHandler()在其他代码中手动触发。如果type参数的字符串中包含一个点(.)字符，那么这个事件就看做是有命名空间的了。这个点字符就用来分隔事件和他的命名空间。举例来说，如果执行.bind('click.name',handler)，那么字符串中的click是事件类型，而字符串name就是命名空间。命名空间允许我们取消绑定或者触发一些特定类型的事件，而不用触发别的事件。参考unbind()来获取更多信息。

jQuery的bind/unbind方法应该说使用很简单，而且大多数时候可能并不会用到，取而代之的是直接用click/keydown之类的事件名风格的方法来做事件绑定操作。

但假设如下情况：需要在运行时根据用户交互的结果进行不同click事件处理逻辑的绑定，因而理论上会无数次对某一个事件进行bind/unbind操作。但又希望unbind的时候只把自己绑上去的处理逻辑给释放掉而不是所有其他地方有可能的额外的同一事件绑定逻辑。这时候如果直接用.click()/.bind('click')加上.unbind('click')来进行重复绑定的话，被unbind掉的将是所有绑定在元素上的click处理逻辑，潜在会影响到该元素其他第三方的行为。

当然如果在bind的时候是显示定义了function变量的话，可以在unbind的时候提供function作为第二个参数来指定只unbind其中一个处理逻辑，但实际应用中很可能会碰到各种进行匿名函数绑定的情况。对于这种问题，jQuery的解决方案是使用事件绑定的命名空间。即在事件名称后添加.something来区分自己这部分行为逻辑范围。

比如用.bind('click.myCustomRoutine',function(){...});同样是把匿名函数绑定到click事件（你可以用自己的命名空间多次绑定不同的行为方法上去），当unbind的时候用.unbind('click.myCustomRoutine')即可释放所有绑定到.myCustomRoutine命名空间的click事件，而不会解除其他通过.bind('click')或另外的命名空间所绑定的事件行为。同时，使用命令空间还可以让你一次性unbind所有此命名空间下的自定义事件绑定，通过.unbind('.myCustomRoutine')即可。要注意的是，jQuery的命名空间并不支持多级空间。

因为在jQuery里面，如果用.unbind('click.myCustomRoutine.myCustomSubone')，解除的是命名空间分别为myCustomRoutine和myCustomSubone的两个并列命名空间下的所有click事件，而不是"myCustomRoutine下的myCustomSubone子空间"。

82.请说出你可以传递给jQuery方法的四种不同值。

选择器（字符串），HTML（字符串），回调函数，HTML元素，对象，数组，元素数组，jQuery对象等。

83.什么是效果队列？

jQuery中有个动画队列的机制。当我们对一个对象添加多次动画效果时后添加的动作就会被放入这个动画队列中，等前面的动画完成后再开始执行。可是用户的操作往往都比动画快，如果用户对一个对象频繁操作时不处理动画队列就会造成队列堆积，影响到效果。jQuery中有stop这个方法可以停止当前执行的动画，并且它有两个布尔参数，默认值都为false。第一个参数为true时会清空动画队列，第二个参数为true时会瞬间完成掉当前动画。所以，我们经常使用obj.stop(true,true)来停止动画。但是这还不够！正如jQuery文档中的说法，即使第二个参数为true，也仅仅是把当前在执行的动画跳转到完成状态。这时第一个参数如果也为true，后面的队列就会被清空。如果一个效果需要多个动画同时处理，我们仅完成其中的一个而把后面的队列丢弃了，这就会出现意料之外的结果。

84.请指出.get()，[]，eq()的区别。

eq:返回是一个jquery对象作用是将匹配的元素集合缩减为一个元素。这个元素在匹配元素集合中的位置变为0，而集合长度变成1。

get:是一个html对象数组作用是取得其中一个匹配的元素。num表示取得第几个匹配的元素。

85.请指出.bind()，.live()和.delegate()的区别。

在操纵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')，是这样吗"codetitle">复制代码 代码如下:
 $('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选择器做操作，这使得它变得非常的不灵活。
"codetitle">复制代码 代码如下:
 $('a').bind('click', function(e) {
     e.preventDefault();
     // 或者 e.stopPropagation();
 });

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

86.请指出$和$.fn的区别，或者说出$.fn的用途。

Jquery为开发插件提供了两个方法，分别是：

复制代码 代码如下:
 $.extend(obj);
 $.fn.extend(obj);
 

"htmlcode"> 

$.extend({

  add:function(a, b) {
    return a+b;
  }
})

$.add(5,8); // return 13

注意没有，这边的调用直接调用，前面不用任何对象。直接$.+方法名

$.fn.extend(obj)；对prototype进行扩展，为jquery类添加成员函数，jquery类的实例可以使用这个成员函数。

$.fn.extend({

  clickwhile:function(){

    $(this).click(function(){
      alert($(this).val())
    })
  }
})

$('input').clickwhile(); // 当点击输入框会弹出该对象的Value值


注意调用时候前面是有对象的。即$('input')这么个东西。

87.请写出一个函数实现N!的计算。N取很大的值时，该怎么办？

使用循环、递归都能写出函数。

当N取值很大时，应该考虑把数值转化为字符串再进行运算。大数乘法再转化为大数加法运算，其具体算法应该有不少C语言实现，可以参考一下。

88.modulo(12,5) //2 ；问题：实现满足上述结果的modulo函数。

89."i'm a lasagna hog".split("").reverse().join("");问题：上面的语句的返回值是什么？

答案："goh angasal a m'i";

90.(window.foo||(window.foo="bar"));问题：window.foo的值是什么？

答案："bar"只有window.foo为假时的才是上面答案，否则就是它本身的值。

var foo="Hello";(function(){var bar="World";alert(foo+bar);})();alert(foo+bar);

91.问题：上面两个alert的结果是什么？

答案:"Hello World"和ReferenceError:bar is not defined

92.var foo=[];foo.push(1);foo.push(2);问题：foo.length的值是什么？

答案：2

有趣的问题：

91.你编写过的最酷的代码是什么？其中你最自豪的是什么？

92.在你使用过的开发工具中，最喜欢哪个？

93.你有什么业余项目吗？是哪种类型的？

94.你最爱的IE特性是什么？

数据冰冷的，但我们要让数据温暖起来，改变我们的生活！

兴国资源网 Design By www.nnzcdc.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
兴国资源网 Design By www.nnzcdc.com
www.nnzcdc.com 兴国资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/4/27

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
兴国资源网 Design By www.nnzcdc.com