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

  • 相关阅读:
    poj 1080 dp
    Codeforces Round #280 (Div. 2)
    Codeforces Round #279 (Div. 2)f
    Codeforces Round #278 (Div. 1)
    Codeforces Round #276 (Div. 1)
    搜索
    debug 心得
    ZOJ 1633
    DRF 一对多序列化与反序列化
    HTTP协议
  • 原文地址:https://www.cnblogs.com/joesbell/p/6236998.html
Copyright © 2020-2023  润新知