17个基本的jQuery面试问题 *
最好的jQuery开发人员和工程师可以回答的全部基本问题. 在我们社区的推动下，我们鼓励专家提交问题并提供反馈.
现在就聘请一名顶级jQuery开发人员
是顶级自由软件开发人员的专属网络吗, 设计师, 金融专家, 产品经理, 和世界上的项目经理. 顶级公司雇佣Toptal自由职业者来完成他们最重要的项目.面试问题
这段代码执行一个查询来检索任何 第一个, + 所有 第一个, + 元素的子元素 名字 属性以字符串结束 “第一”. 这是一次使用多个选择器的例子. 该函数将返回一个包含查询结果的jQuery对象.
下面的代码适用于需要为页面上的所有按钮定义单击处理程序的应用程序, 包括以后可能会动态添加的那些按钮.
这段代码有什么问题, 以及如何将其固定为正常工作，即使是稍后动态添加的按钮?
//为所有按钮定义click处理程序
$("button").Bind ("click"， 函数() {
按钮被点击!" )
});
/* ... 一段时间后 ... */
//动态添加另一个按钮到页面
$("html").append( "" );
调用后动态添加的按钮 bind () 将 不 有点击处理程序附加吗. 这是因为 bind () 方法只将处理程序附加到调用时存在的元素 bind () 是由.
这个问题通过使用“事件冒泡”来匹配当前和未来元素上的事件的函数来解决. 在过去，这是通过替换来完成的 bind () 与 生活(). 生活() 在jQuery 1.7虽然. 委托() 类似于 生活() 还提供了对事件必须在DOM中冒泡多远的控制.
但是，推荐的方法是使用 on()，它可以表现为 bind (), 生活(), or 委托() 取决于语法. 下面的代码将处理程序附加到所有当前和未来的按钮:
//为所有按钮定义click处理程序
$(文件).On ("click"， "button"， 函数() {
按钮被点击!" )
});
/* ... 一段时间后 ... */
//动态添加另一个按钮到页面
$("html").append( "" );
假设要检索id以" txtTitle "结尾的所有元素. 这可以使用以下选择器来完成:
$(“[id = ' txtTitle ']美元”)
只能取回 $ (" div [id = ' txtTitle ']美元”)
申请加入Toptal的发展网络
并享受可靠、稳定、远程 自由职业者jQuery开发人员职位
自 $ 在JavaScript中没有特殊的含义，它可以自由地用于对象命名. 的别名 jQuery 对象和 jQuery () 函数.
然而，jQuery并没有垄断 $, 所以你可能会遇到这样的情况，你想使用它与另一个JS库也使用 $，因此会导致命名冲突. jQuery提供了 jQuery.noConflict () 方法正是出于这个原因. 调用此方法需要使用基础名称 jQuery 而是在后续对jQuery及其函数的引用中.
下面是jQuery文档中的一个例子:
或者，您也可以使用闭包来代替$.noConflict () 方法; e.g.:
(函数 ($) {
//我们知道$的确切含义的代码
} (jQuery));
给定以下HTML:
和以下CSS:
div#扩张器{
宽度:100 px;
身高:100 px;
背景颜色:蓝色;
}
编写代码在jQuery动画 #扩张器 Div，在三秒钟内将其从100 x 100像素扩展到200 x 200像素.
这可以在jQuery中这样做:
$("#扩张器").动画(
{
宽度:“200 px”,
高度:“200 px”,
},
3000 );
方法链接是jQuery的一个特性，它允许在单个代码语句中按顺序对jQuery选择执行多个方法. 例如，以下代码片段是等效的:
没有链接:
$("button#play-movie").on(“点击”，播放电影);
$("button#play-movie").Css ("background-color"， "orange");
$("button#play-movie").显示();
链接:
$("button#play-movie").开启(“点击”，播放影片)
.Css ("background-color"， "orange")
.显示();
注意到链接, 此按钮只需要选择一次, 如果没有链条, jQuery必须在应用每个方法之前搜索整个DOM并找到按钮. 因此, 除了产生更简洁的代码, jQuery中的方法链提供了潜在的强大性能优势.
注意: 准确地说，应该注意的是，jQuery中的方法链接不是 只有 避免重复搜索整个DOM的方法. 还可以将一个变量设置为初始DOM搜索结果(例如.e.，在上面的例子中，可以设置一个变量等于 $("按钮#演电影” 然后调用 on(), css (), 显示() 该变量的方法). 但也就是说, 链接仍然是更简洁和高效的选择，并且不需要将结果缓存到局部变量中.
这段代码使用方法链接来完成两件事. 首先，它选择所有的 元素的当前选择，所以它最终可以改变CSS背景颜色 元素变为蓝色.
jQuery.ajax () 是jQuery提供的包罗万象的Ajax请求方法吗. 它允许创建高度定制的Ajax请求, 可以选择等待响应的时间, 如何处理失败, 请求是阻塞(同步)还是非阻塞(异步), 请求什么格式的响应, 还有更多的选择.
jQuery.get () 是使用快捷方法吗 jQuery.ajax () 创建一个Ajax请求，该请求通常用于简单的信息检索. 其他预构建的Ajax请求由jQuery提供，例如 jQuery.post (), jQuery.getScript (), jQuery.getJSON ().
第一行代码是没有jQuery的纯JavaScript，效率更高，速度更快. 执行第二行代码(即jQuery)将触发对JavaScript版本的调用.
jQuery构建在JavaScript之上，并使用底层的方法使DOM操作更容易, 以一些性能开销为代价. 最好记住，jQuery并不总是比普通的JavaScript更好. 始终考虑使用jQuery是否真的为您的项目提供了有用的优势.
事件.stopPropagation () 阻止事件在事件链中冒泡，而 事件.pr事件Default () 只阻止浏览器对该事件的默认操作发生, 但是该事件仍然沿事件链向上传播.
例如，考虑下面的代码片段:
//在本例中，'foo'是一个包含'bar'按钮的div
$ (" # foo ").点击(函数(){
//鼠标点击div 'foo'
});
$ (" # ").点击(函数(e) {
//鼠标点击按钮'bar'
e.stopPropagation ();
});
由于c所有 to stopPropagation () 在按钮的click处理程序中, 事件永远不会向div发起，因此它的click处理程序永远不会触发. 它有效地阻止父元素了解其子元素上的事件.
相反，如果将上面的调用替换为 stopPropagation () 呼唤着 pr事件Default ()，只有浏览器的默认操作会被排除，但是div的click处理程序仍然会被触发.
(注:虽然 stopPropagation () 和 pr事件Default () 方法主要用于jQuery事件处理实现, 它们也适用于纯JavaScript.)
返回完成了什么 假 从(a) jQuery事件处理程序, (b)锚标记的常规JavaScript onclick事件处理程序, (c)非锚标记的常规JavaScript onclick事件处理程序.g.， div，按钮等.)?
(a)从jQuery事件处理程序返回假实际上与调用相同 这两个 pr事件Default () 和 stopPropagation () 在传递的jQuery事件对象上.
(b)从锚标记的常规JavaScript onclick事件处理程序返回假会阻止浏览器导航到链接地址 和 阻止事件通过DOM传播.
(c)从非锚标记的常规JavaScript onclick事件处理程序返回假.g.， div，按钮等.)完全没有效果.
jQuery提供了一个有用的 .克隆() 方法创建匹配元素的深度副本.
回答以下问题:
- 什么是“深度复制”??
- 正常情况下是什么 不 包含在克隆副本中? 怎样才能控制这些行为呢?
- 在使用时，潜在的“陷阱”是什么
.克隆()方法? (提示:您通常会使用的元素属性是什么 不 想要克隆吗?)
1. 什么是“深度复制”??
的 .克隆() 方法执行匹配元素集的深度复制, 这意味着它复制匹配的元素 以及它们的后代元素和文本节点.
2. 正常情况下是什么 不 包含在克隆副本中? 怎样才能控制这些行为呢?
正常情况下:
- 元素数据中的对象和数组不会被复制，并将继续在克隆元素和原始元素之间共享. 要深度复制所有数据，必须“手动”复制每一个数据。.
- 绑定到原始元素的任何事件处理程序都不会复制到克隆元素.
设置可选的 与DataAndEvents 参数 真正的 生成所有事件处理程序的副本，并将其绑定到元素的新副本.
从jQuery 1开始.4、所有元素数据(附) .数据() 方法)也被复制到新的副本.
从jQuery 1开始.5, 与DataAndEvents 可以选择性地增强 deepWithDataAndEvents 复制克隆元素的所有子元素的事件和数据.
3. 在使用时，潜在的“陷阱”是什么
克隆()方法? (提示:您通常会使用的元素属性是什么 不 想要克隆吗?)
使用 .克隆() 产生重复元素是否有潜在的副作用 id 属性，它们应该是唯一的. 因此，克隆带有。的元素时 id 属性，重要的是要记住修改 id 在将克隆插入DOM之前.
解释 .承诺() 方法，包括如何以及为什么使用它.
考虑下面的代码片段. 如果有5个 函数getMinsSecs() {
var dt = new Date();
返回dt.getMinutes() +“:”+ dt.getSeconds ();
}
$("input").On ("click")， 函数() {
$( "p" ).append( "Start time: " + getMinsSecs() + "
" );
$("div").函数(I) {
$(this).fdeout (1000 * (i * 2));
});
$("div").承诺().完成(函数(){
$( "p" ).append( "End time: " + getMinsSecs() + "
" );
});
});
的 .承诺() 方法返回一个动态生成的Promise，一旦将特定类型的所有操作绑定到集合，该Promise就会被解析, 是否排队, 已经结束.
它接受两个可选参数:
-
类型-默认, 类型为“fx”, 这意味着当所选元素的所有动画完成时，返回的Promise将被解析. -
目标—如果指定了目标对象，.承诺()将附加到它，然后返回这个对象，而不是创建一个新的.
在提供的代码示例中, 显示的开始和结束时间之间的差异将为10秒. 这是因为 .承诺() 我会等待一切 渐隐() 调用)完成，最后一个调用将在10秒内完成.e.(5 * 2秒).
jQuery中返回的Promise被链接到 延迟的对象 存储在 .数据() 对于一个元素. 自 .remove () 方法将删除元素的数据以及元素本身, 它将阻止元素中任何未解决的promise解析.
因此，如果需要在解析Promise之前从DOM中删除一个元素，使用 .分离() 取而代之的是 .removeData () 决议后.
的 .分离() 和 .remove () 方法是一样的，除了 .分离() 保留与被删除元素和关联的所有jQuery数据 .remove () 不. .分离() 因此，当删除的元素可能需要在以后的时间重新插入到DOM中是有用的.
的 文档.准备好() 事件发生时，所有HTML文档都已加载，但是 窗口.onload () 当所有内容(包括图像)已加载时发生. 所以一般来说 文档.准备好() 事件首先触发.
这两个 支持() 和 attr () 用于获取或设置元素属性的指定属性的值，但是 attr () 返回属性的默认值，而 支持() 返回当前值。.
面试不仅仅是棘手的技术问题, 所以这些只是作为一个指南. 并不是每一个值得雇佣的“A”候选人都能回答所有的问题, 回答所有问题也不能保证成为A级考生. 一天结束的时候， 招聘仍然是一门艺术，一门科学，需要大量的工作.
为什么Toptal
提出面试问题
提交的问题和答案将被审查和编辑, 并可能会或可能不会选择张贴, 由Toptal全权决定, 有限责任公司.
寻找jQuery开发人员?
寻找 jQuery开发人员? 查看Toptal的jQuery开发人员.
Toptal连接 排名前3% 世界各地的自由职业人才.
加入Toptal社区.
或者，您也可以使用闭包来代替$.noConflict () 方法; e.g.:
\n\n(函数 ($) {\n //我们知道$的确切含义的代码\n} (jQuery)); \n给定以下HTML:
\n\n\n和以下CSS:
\n\ndiv#扩张器{\n 宽度:100 px;\n 身高:100 px;\n 背景颜色:蓝色;\n}\n编写代码在jQuery动画 #扩张器 Div，在三秒钟内将其从100 x 100像素扩展到200 x 200像素.
这可以在jQuery中这样做:
\n\n$( \"#扩张器\" ).动画(\n {\n width: \"200px\",\n height: \"200px\",\n },\n 3000 );\n什么是jQuery中的方法链? 提供一个示例.
\n\n它有什么优点?
\n","answerBody":"方法链接是jQuery的一个特性，它允许在单个代码语句中按顺序对jQuery选择执行多个方法. 例如，以下代码片段是等效的:
\n\n没有链接:
\n\n$( \"button#play-movie\" ).on( \"click\", playMovie );\n$( \"button#play-movie\" ).css( \"background-color\", \"orange\" );\n$( \"button#play-movie\" ).显示();\n链接:
\n\n$( \"button#play-movie\" ).on( \"click\", playMovie )\n .css( \"background-color\", \"orange\" )\n .显示();\n注意到链接, 此按钮只需要选择一次, 如果没有链条, jQuery必须在应用每个方法之前搜索整个DOM并找到按钮. 因此, 除了产生更简洁的代码, jQuery中的方法链提供了潜在的强大性能优势.
\n\n注意: 准确地说，应该注意的是，jQuery中的方法链接不是 只有 避免重复搜索整个DOM的方法. 还可以将一个变量设置为初始DOM搜索结果(例如.e.，在上面的例子中，可以设置一个变量等于 $( \"button#play-movie\" 然后调用 on(), css (), 显示() 该变量的方法). 但也就是说, 链接仍然是更简洁和高效的选择，并且不需要将结果缓存到局部变量中.
解释一下下面代码的作用:
\n\n$( \"div\" ).css( \"width\", \"300px\" ).add( \"p\" ).css( \"background-color\", \"blue\" );\n这段代码使用方法链接来完成两件事. 首先，它选择所有的 两者的区别是什么 下面两行代码中哪一行效率更高? 解释你的答案. or 第一行代码是没有jQuery的纯JavaScript，效率更高，速度更快. 执行第二行代码(即jQuery)将触发对JavaScript版本的调用. jQuery构建在JavaScript之上，并使用底层的方法使DOM操作更容易, 以一些性能开销为代价. 最好记住，jQuery并不总是比普通的JavaScript更好. 始终考虑使用jQuery是否真的为您的项目提供了有用的优势. 解释并对比……的用法 例如，考虑下面的代码片段: 由于c所有 to 相反，如果将上面的调用替换为 (注:虽然 返回完成了什么 (a)从jQuery事件处理程序返回假实际上与调用相同 这两个 (b)从锚标记的常规JavaScript onclick事件处理程序返回假会阻止浏览器导航到链接地址 和 阻止事件通过DOM传播. (c)从非锚标记的常规JavaScript onclick事件处理程序返回假.g.， div，按钮等.)完全没有效果. jQuery提供了一个有用的 回答以下问题: 1. 什么是“深度复制”?? 的 2. 正常情况下是什么 不 包含在克隆副本中? 怎样才能控制这些行为呢? 正常情况下: 设置可选的 从jQuery 1开始.4、所有元素数据(附) 从jQuery 1开始.5, 3. 在使用时，潜在的“陷阱”是什么 使用 解释 考虑下面的代码片段. 如果有5个 的 它接受两个可选参数: 在提供的代码示例中, 显示的开始和结束时间之间的差异将为10秒. 这是因为 什么是正确的方式在jQuery中删除一个元素从DOM之前，它的承诺是解决? jQuery中返回的Promise被链接到 延迟的对象 存储在 因此，如果需要在解析Promise之前从DOM中删除一个元素，使用 解释两者之间的区别 的 两者有什么区别 的 两者有什么区别 这两个 元素的当前选择，所以它最终可以改变CSS背景颜色 元素变为蓝色.\n","identifier":3280071},{"questionBody":"jQuery.get () 和 jQuery.ajax ()?jQuery.ajax () 是jQuery提供的包罗万象的Ajax请求方法吗. 它允许创建高度定制的Ajax请求, 可以选择等待响应的时间, 如何处理失败, 请求是阻塞(同步)还是非阻塞(异步), 请求什么格式的响应, 还有更多的选择.jQuery.get () 是使用快捷方法吗 jQuery.ajax () 创建一个Ajax请求，该请求通常用于简单的信息检索. 其他预构建的Ajax请求由jQuery提供，例如 jQuery.post (), jQuery.getScript (), jQuery.getJSON ().
\n\n文档.getElementById( \"logo\" );\n
\n","answerBody":"$( \"#logo\" );\n事件.pr事件Default () 和 事件.stopPropagation (). 提供一个示例.事件.stopPropagation () 阻止事件在事件链中冒泡，而 事件.pr事件Default () 只阻止浏览器对该事件的默认操作发生, 但是该事件仍然沿事件链向上传播.
\n\n//在本例中，'foo'是一个包含'bar'按钮的div\n\n$(\"#foo\").点击(函数(){\n //鼠标点击div 'foo'\n});\n\n$(\"#bar\").点击(函数(e) {\n //鼠标点击按钮'bar'\n e.stopPropagation ();\n});\nstopPropagation () 在按钮的click处理程序中, 事件永远不会向div发起，因此它的click处理程序永远不会触发. 它有效地阻止父元素了解其子元素上的事件.stopPropagation () 呼唤着 pr事件Default ()，只有浏览器的默认操作会被排除，但是div的click处理程序仍然会被触发.stopPropagation () 和 pr事件Default () 方法主要用于jQuery事件处理实现, 它们也适用于纯JavaScript.)假 从(a) jQuery事件处理程序, (b)锚标记的常规JavaScript onclick事件处理程序, (c)非锚标记的常规JavaScript onclick事件处理程序.g.， div，按钮等.)?pr事件Default () 和 stopPropagation () 在传递的jQuery事件对象上..克隆() 方法创建匹配元素的深度副本.\n
\n","answerBody":".克隆() 方法? (提示:您通常会使用的元素属性是什么 不 想要克隆吗?)\n
\n\n.克隆() 方法执行匹配元素集的深度复制, 这意味着它复制匹配的元素 以及它们的后代元素和文本节点.\n
\n\n\n
\n\n与DataAndEvents 参数 真正的 生成所有事件处理程序的副本，并将其绑定到元素的新副本..数据() 方法)也被复制到新的副本.与DataAndEvents 可以选择性地增强 deepWithDataAndEvents 复制克隆元素的所有子元素的事件和数据.\n
\n\n克隆() 方法? (提示:您通常会使用的元素属性是什么 不 想要克隆吗?).克隆() 产生重复元素是否有潜在的副作用 id 属性，它们应该是唯一的. 因此，克隆带有。的元素时 id 属性，重要的是要记住修改 id 在将克隆插入DOM之前..承诺() 方法，包括如何以及为什么使用它.
\n","answerBody":"函数getMinsSecs() {\n var dt = new Date();\n 返回dt.getMinutes()+\":\"+dt.getSeconds ();\n}\n\n$( \"input\" ).on( \"click\", 函数() {\n $( \"p\" ).append( \"Start time: \" + getMinsSecs() + \"
\" );\n $( \"div\" ).函数(I) {\n $(this).fdeout (1000 * (i * 2));\n });\n $( \"div\" ).承诺().完成(函数(){\n $( \"p\" ).append( \"End time: \" + getMinsSecs() + \"
\" );\n });\n});\n.承诺() 方法返回一个动态生成的Promise，一旦将特定类型的所有操作绑定到集合，该Promise就会被解析, 是否排队, 已经结束.\n
\n\n类型 -默认, 类型为“fx”, 这意味着当所选元素的所有动画完成时，返回的Promise将被解析.目标 —如果指定了目标对象， .承诺() 将附加到它，然后返回这个对象，而不是创建一个新的..承诺() 我会等待一切 渐隐() 调用)完成，最后一个调用将在10秒内完成.e.(5 * 2秒).\n","identifier":3280077},{"questionBody":".数据() 对于一个元素. 自 .remove () 方法将删除元素的数据以及元素本身, 它将阻止元素中任何未解决的promise解析..分离() 取而代之的是 .removeData () 决议后..分离() 和 .remove () jQuery中的方法..分离() 和 .remove () 方法是一样的，除了 .分离() 保留与被删除元素和关联的所有jQuery数据 .remove () 不. .分离() 因此，当删除的元素可能需要在以后的时间重新插入到DOM中是有用的.文档.准备好() 和 窗口.onload ()?文档.准备好() 事件发生时，所有HTML文档都已加载，但是 窗口.onload () 当所有内容(包括图像)已加载时发生. 所以一般来说 文档.准备好() 事件首先触发.支持() 和 attr ()?支持() 和 attr () 用于获取或设置元素属性的指定属性的值，但是 attr () 返回属性的默认值，而 支持() 返回当前值。.