15个基础的jQuery面试问题

1) 代码解释

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

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

2)这段代码有什么问题?

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

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

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

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

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

3) $ 符号

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

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

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

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

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

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

4) 编写代码

下面有一段 HTML:

和一段CSS:

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

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

5) 方法的链式调用

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

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

无链式调用:

链式调用:

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

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

6)解释这段代码

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

答案:这段代码通过链式调用完成了很多工作。首先,选择所有 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) 下面两行代码哪个更高效? 回答并解释。

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

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

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

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

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

举个例子,观察下面的代码片段:

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

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

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

10) 你了解选择器吗?

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

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

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

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 元素,显示的开始和结束时间相差多少?

答案:.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() 方法会更有用。

1 22 收藏 2 评论

关于作者:段昕理

因为iPod而喜欢上苹果的一系列产品,非常认同他们追求极致的精神。工作之余,喜欢前端的开源项目,Github(https://github.com/sandywalker) 个人主页 · 我的文章 · 15 ·    

相关文章

可能感兴趣的话题



直接登录
最新评论
跳到底部
返回顶部