关于 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 的官方文档:

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

时间: 2024-11-04 21:03:59

关于 jquery 的常用面试题(转)的相关文章

jquery mobile常用的data-role类型介绍

转自原文 jquery mobile常用的data-role类型介绍 data-role参数表: page        页面容器,其内部的mobile元素将会继承这个容器上所设置的属性 header     页面标题容器,这个容器内部可以包含文字.返回按钮.功能按钮等元素 footer       页面页脚容器,这个容器内部也可以包含文字.返回按钮.功能按钮等元素 content     页面内容容器,这是一个很宽容的容器,内部可以包含标准的html元素和jQueryMobile元素 cont

jQuery的常用操作

梳理一下jQuery的常用操作 jQuery隐藏显示对象 id为test的元素的display修改成了"none",即隐藏了id为test的元素:$('#test').css('display','none') 或 $('#test').style.display="none" 我们经常用到的是切换一个元素的隐藏与现实,下面给出代码: var show = $('#test').css('display');//获取id为test的元素的display的值$('#t

jquery datatable 常用例子

在项目中经常用到DataTable,如果DataTable使用得当,不仅能使程序简洁实用,而且能够提高性能,达到事半功倍的效果,现对DataTable的使用技巧进行一下总结. 一.DataTable简介 (1)构造函数           DataTable()   不带参数初始化DataTable 类的新实例.           DataTable(string tableName)  用指定的表名初始化DataTable 类的新实例.           DataTable(string

jquery的常用操作(操作html页面的Dom对象的元素)

一:页面加载完成时,会执行jquery的方法(不需要等待图片加载完成,只要dom结构加载完成,就执行该方法) //第一种写法: $(document).ready(function() { // 执行体 }); //第二种写法 $(function() { //执行体 }); 二:用jquery获取dom对象,判断该对象是否有内容的两种方法(有返回true,没有返回false) jqObj.text().trim() var jqObj = $(this); if(jqObj.text().tr

!!! jquery mobile常用代码

Jquery MOBILE: <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jq

Jquery的常用使用方法

1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$("input:[type='checkbox']:checked").val();或者$("input:[name='ck']:checked").val(); 2. 获取多个checkbox选中项$('input:checkbox').each(function() {        if ($(this).attr('che

Ajax-04 jQuery Ajax 常用操作

jQuery jQuery 其实就是一个JavaScript的类库,其将复杂的功能做了上层封装,使得开发者可以在其基础上写更少的代码实现更多的功能. jQuery Ajax a.概述 jQuery 不是生产者,而是大自然的搬运工 jQuery Ajax 本质是 XMLHttpRequest 或 ActiveXObject b.使用 --- 下载导入jQuery(2.+ 版本不再支持IE9以下的浏览器) jQuery Ajax常用操作 jQuery.ajax( url [, settings ]

Jquery工作常用实例--ajaxStart与ajaxStop(ajaxComplete)

Jquery中当一个Ajax请求启动时,并且没有其他未完成的Ajax请求时,将调用ajaxStart()方法.同样,ajaxStop()方法则是在所有Ajax请求都完成时调用.这些方法的参数都是一个函数,这个函数将在事件发生时被调用. 使用这些方法的每一步是获取一个页面元素的引用.然后就可以在这个元素上调用ajaxStart()和ajaxStop()方法. 使用语法: ("#loading").ajaxStart(function(){  $(this).show(); //callb

jquery】常用的jquery获取表单对象的属性与值

1 [jquery]常用的jquery获取表单对象的属性与值 2 3 4 1.JQuery的概念 5 6 7 8 9 JQuery是一个JavaScript的类库,这个类库集合了很多功能方法,利用类库你可以用一些简单的代码实现一些复杂的JS效果. 10 11 12 2.JQuery实现了 代码的分离 13 14 不用再网页中加入如:onclick之类的事件来调用函数了,直接引入JQuery类库和自己编写的JQuery代码就可以了: 15 如: 16 $(function(){ 17 $("Ele