微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

15个基础的jQuery面试问题

2015-10-16 20:22 伯乐在线

(点击上方,可快速关注)


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




前端大全

微信号:FrontDev

打造东半球最好的 前端技术 微信号

--------------------------------------

商务合作QQ:2302462408

投稿网址:top.jobbole.com

 
前端大全 更多文章 5个典型的JavaScript面试题(上) Limu:JavaScript的那些书 Web开发:我希望得到的编程学习路线图 JavaScript基础工具清单 常用排序算法之JavaScript实现
猜您喜欢 .NET跨平台之旅:基于.NET Core改写EnyimMemcached,实现Linux上访问memcached缓存 第111讲 使用信号实现观察者模式 16年系列文章 Swift 中 curry 特性的高级应用 Jmeter 正则表达式提取器传参