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 的官方文档:
或者你也不用 $.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() 方法会更有用。