15个基础的jQuery面试问题

1) 代码解释

解释下面这行代码会做什么：

$( "div#first, div.first, ol#items > [name$='first']" )

答案：该代码执行了一个查询，查询出任何 id 为 first 的 div 元素，加上所有 class 为 first 的 div 元素，再加上所有 id 为 items 的 ol 元素的子元素，这些子元素的 name 属性值必须以 first 结尾。这是同时使用多个选择器的例子。函数会返回一个包含查询结果的 jQuery 对象。

2）这段代码有什么问题？

下面的代码是为某个应用页面处理所有按钮点击事件，包括那些之后动态加载的按钮。

这段代码的问题出在哪，如何修复使其对之后动态加载的按钮也同样起作用？

// 所有按钮的点击事件处理

$( "button" ).bind( "click", function() {

    alert( "Button Clicked!" )

});

/* ... 一段时间后... */

// 动态将别的按钮添加到页面

$( "html" ).append( "<button>Click Alert!</button>" );

答案：在 bind() 方法之后动态添加的按钮关联不了点击事件。这是因为 bind() 绑定元素的事件处理时，必须保证该元素当时就已经存在。

解决此问题的办法是，利用 “事件冒泡” 的方式来绑定现存及将要添加的元素。以前可以用 live() 方法替换 bind() 方法。但 jQuery 1.7 版后 live() 方法被废弃了。delegate() 方法和 live() 方法的工作方式类似，而且可以控制DOM事件的冒泡层级。

不过，最推荐的方式是使用 on()方法，该方法可利用语法变换，实现所有 bind()、live()、delegate()的功能。下面的代码可以绑定所有按钮（包括已存在和将要添加的）的事件处理。

// 所有按钮的点击事件处理

$( document ).on( "click", "button", function() {

    alert( "Button Clicked!" )

});

/* ... 一段时间后... */

// 动态将别的按钮添加到页面

$( "html" ).append( "<button>Click Alert!</button>" );

3) $ 符号

jQuery 中的 $ 符号是怎么回事？ 它是什么，有什么作用？

还有，如何让 jQuery 与其它也用 $ 命名的 Javascript 框架联合使用？如果这两个问题都回答会有奖励。

答案： 在 Javascript 中 $ 符号并没有什么特殊意义，可以随意用于变量命名。在 jQuery中，$ 仅仅是用来简写 jQuery 对象以及 jQuery() 函数。

但是，jQuery 并没有将 $ 符号独占，所以当你想将 jQuery 与其它使用 $ 的 JS 库联合使用时，会遭遇命名冲突的问题。jQuery 提供了 jQuery.noConflict() 方法解决这个问题。调用完这个方法后，必须使用更底层的变量名 “jQuery” 来引用 jQuery对象及函数。

下面的例子来自 jQuery 的官方文档：

<script src="other_lib.js"></script>

<script src="jquery.js"></script>

<script>

$.noConflict();

// 其它使用 $ 符号的库代码可以直接写到这

</script>

或者你也不用 $.noConflict() 方法，改用闭包来来实现。比如：

(function ($) {

  // 在闭包的代码中，我们明确的知道 $ 代表什么

} (jQuery));

4） 编写代码

下面有一段 HTML:

XHTML

<div id="expander"></div>

和一段CSS:

div#expander{

  width: 100px;

  height: 100px;

  background-color: blue;

}

编写jQuery代码，让 id 为 expander 的 div 元素动起来，用三秒的时间将其从 100 x 100 像素扩展到 200 x 200 像素。

答案：用 jQuery 可以写成下面这样。

$( "#expander" ).animate(

  {

    width: "200px",

    height: "200px",

  },

3000 );

5) 方法的链式调用

什么事 jQuery 的方法链式调用？写一个例子。说说这么写有什么好处？

答案：方法的链式调用是 jQuery 的一个功能，允许在 jQuery 选择器后面以单个代码句的方式顺序执行多个方法。

无链式调用：

$( "button#play-movie" ).on( "click", playMovie );

$( "button#play-movie" ).css( "background-color", "orange" );

$( "button#play-movie" ).show();

链式调用：

$( "button#play-movie" ).on( "click", playMovie )

            .css( "background-color", "orange" )

            .show();

我们发现用了链式调用后，仅需要选择一次按钮，如果没有链式调用，每次 jQuery 都要重新查找整个DOM，找到按钮后执行相应方法。所以，除了能够精简代码，jQuery 的链式调用还潜在地提高了程序执行的性能。

注意：准确地说，链式调用并不是避免重复查询 DOM 的唯一方式。也可以把 DOM 查询后的结果赋值给一个变量（例如：上面的例子中，可以把 $(“button#play-movie”) 赋值给变量，然后用变量调用 on()、css() 和 show() 方法）。但话说回来，链式操作仍然是更简洁高效的的选择，并且不需要把结果缓存到局部变量中。

6）解释这段代码

解释下面的代码在做什么事：

$( "div" ).css( "width", "300px" ).add( "p" ).css( "background-color", "blue" );

答案：这段代码通过链式调用完成了很多工作。首先，选择所有 div 元素并且将它们的 CSS 宽度设置为 300像素。然后，在元素内部添加了 p 元素，最后将 div 元素和 p元素的 CSS 背景颜色设置为蓝色。

7）对比 jQuery.get() 和 jQuery.ajax() 方法

jQuery.get() 方法和 jQuery.ajax() 方法有什么不同？

回答：jQuery.ajax() 是 jQuery提供的最全面的 Ajax 请求方法。它允许创建高度定制的Ajax请求，通过选项可以设置响应时长，处理错误，决定阻塞（同步）请求还是非阻塞（异步）请求，服务端响应数据格式，还有更多其它选项。

jQuery.get() 是在内部封装了 jQuery.ajax() 方法的快捷版本，用于获取简单信息的 Ajax 请求。jQuery 还提供了其它常用 Ajax 请求的预设方法，比如 jQuery.post()、jQuery.getScript() 和 jQuery.getJSON()。

8) 下面两行代码哪个更高效？ 回答并解释。

document.getElementById( "logo" );

或

$( "#logo" );

答案：第一行纯 Javascript 代码更高效并且速度更快，执行第二行的jQuery 代码时，最终会触发调用 Javascript 的版本。

jQuery 是基于 Javascript 构建的，把众多方法封装隐藏后使得 DOM 操作更简单，代价就是部分性能的损失。 记住这点很重要，jQuery 并不总是比原生的 Javascript 好。 每次决定是否使用 jQuery 的时候一定要想清楚它能否真正为你的项目带来便利。

9) 对比 event.preventDefault() 和 event.stopPropagation()

解释并对比 event.preventDefault() 和 event.stopPropagation() 的用法。举个例子。

回答：event.stopPropagation() 方法在事件传播链中阻止事件冒泡，而 event.preventDefault() 只是在事件发生时阻断浏览器的默认响应，但事件仍然会向上传递。

举个例子，观察下面的代码片段：

// 这个例子中, 一个 id 是 'foo' 的 div 包含了一个 id 是 'bar' 的 button

$("#foo").click(function() {

   //  div 'foo' 上的鼠标点击

});

$("#bar").click(function(e) {

   //  button 'bar' 上的鼠标点击

   e.stopPropagation();

});

由于按钮的点击处理内部调用了 stopPropagation() 方法，这个事件永远不会传递到 div ，所以 div 的点击事件处理不会被触发。它能够有效阻止父元素捕获子元素的事件。

相反，如果你把刚才调用的 stopPropagation() 替换成 preventDefault()，只有浏览器的默认响应会被阻止，但是 div 的点击事件处里仍然会被触发。

（注意：尽管 stopPropagation() 和 preventDefault() 方法常应用于 jQuery 的事件处理，它们同样适用于原生的 Javascript）。

10) 你了解选择器吗？

用什么选择器能够得到 ID 符合某个特殊后缀的所有元素？还有，如何通过修改选择器得到 ID 仅包含这个后缀的所有 div 元素？ 举一个例子。

答案：假设你想得到元素的 ID 以“textTitle”结尾。通过下面的选择器可以实现。

$("[id$='txtTitle']")

如果需要的元素必须是div，并且 ID 以“textTitle”结尾，选择器应该是这样的：

$("div[id$='txtTitle']")

11) 返回 false

在下面三种情况下返回 false 会出现什么样的结果？（a）jQuery 事件处理， （b） 超链接标签的原生 Javascript onclick 事件处理，（c）非超链接标签（例如： div，button等）的原生 Javascript onclick 事件处理。

答案：（a）在 jQuery 事件处理中返回 false 相当于 jQuery 的 event 对象连续调用了 preventDefault() 和 stopPropagation() 方法。

（b） 在超链接标签的原生 Javascript onclick 事件处理中返回 false 会阻止浏览器默认的地址导航，并且阻止了DOM事件的冒泡传递。

（c） 在非超链接标签（例如： div，button等）的原生 Javascript onclick 事件处理中返回 false 不会起任何作用。

12) .clone() 方法

jQuery 提供了一个非常有用的 .clone() 方法用于对指定元素进行深拷贝。

回答下面的问题

1. 这里的“深拷贝”是什么意思?

答案： .clone() 方法为一组元素执行深拷贝，意味着拷贝这些元素的同时，对其所有子元素和 text 节点也进行拷贝。

2. 深拷贝有哪些例外情况？如何去控制这些情况？

答案： 一般来说：

对象和数组中的元素数据不会被拷贝，克隆元素和原始元素共享同一份数据。要深拷贝所有数据，你需要“手动”操作每一个元素。任何绑定原始元素的事件处理也不会被拷贝到克隆元素上。可以将 withDataAndEvents 参数设置为 true 来强制所有的事件处理都会被拷贝到新元素上。

在 jQuery 1.4 中，所有元素所包含的数据（通过.data()方法绑定）同样会拷贝到新元素上。

到了 jQuery 1.5， withDataAndEvents 连同增强的 deepWithDataAndEvents 参数可以为所有子元素拷贝事件及数据。

3. 使用 clone()方法有什么潜在的陷阱？（提示：元素有什么属性，是你不愿克隆的？）

答案：使用 .clone() 方法会有一个潜在的问题，就是产生了一堆 id 重复的元素，但 id 应该是唯一的。所以，如果克隆的元素含有 id 属性，务必要记住在 DOM插入这个克隆元素前修改其 id 。

13) 构造 .promise()

解释 jQuery 中的 .promise() 方法，包括如何使用及为何要使用它。

请注意下面这段代码。如果页面中有 5 个 div 元素，显示的开始和结束时间相差多少？

function getMinsSecs() {

  var dt = new Date();

  return dt.getMinutes()+":"+dt.getSeconds();

}

$( "input" ).on( "click", function() {

  $( "p" ).append( "Start time: " + getMinsSecs() + "<br />" );

  $( "div" ).each(function( i ) {

    $( this ).fadeOut( 1000 * ( i * 2 ) );

  });

  $( "div" ).promise().done(function() {

    $( "p" ).append( "End time: " + getMinsSecs() + "<br />" );

  });

});

答案：.promise() 方法返回一个动态生成的 Promise 对象，用来受理所有特定类型的操作的集合绑定、排队与否、是否已完成。

这个方法有两个可选的参数：

type – 默认值是 “fx”, 这意味着返回被受理 Promise 对象的时机，是在所有被选中元素的动画都完成时发生的。

target – 如果提供target参数，.promise()在该参数上添加方法，然后返回这个对象，而不是创建一个新的。

根据上面的示例代码，开始和结束时间间隔将会显示为 10 秒。 这是由于 .promise() 会等待所有 div 动画（在这个例子，是所有的 faseOut() 调用）完成，最后一个将会在动画开始后的 10 秒完成 （ 5*2 秒）

14) 中断 promise

在 jQuery 中如何正确地在元素的 Promise 对象受理之前将其从 DOM 移除？

答案：jQuery返回的 Promise 关联着 Deferred 对象，通过 .data() 存储在该元素上。一旦 .remove() 方法移除了元素，也就移除了该元素的所有数据，这会使元素中任何未受理的 Promise 处理中断。

所以，如果要在一个元素的 Promise 对象受理之前将其从 DOM 移除， 改用 .detach() 方法，随后在 Promise 受理完成时调用 .removeData()。

15) .detach() 和 .remove() 方法

解释 jQuery 中的 .detach() 和 .remove() 方法有何不同？

答案：.detach() 和 .remove() 方法基本相同，唯一不同是 .detach() 会保持移除元素关联的所有 jQuery 数据，而 .remove() 方法则不会。如果移除的元素在将来可能重新插入 DOM ，.detach() 方法会更有用。