®
世界顶尖人才,点播™

Toptal, LLC版权所有

\n\n\n\n\n

或者,您也可以使用闭包来代替$.noConflict() method; e.g.:

\n\n
(function ($) {\n  //我们知道$的确切含义的代码\n} (jQuery)); \n
\n","identifier":3280068},{"questionBody":"

给定以下HTML:

\n\n
\n
\n\n

和以下CSS:

\n\n
div#expander{\n  width: 100px;\n  height: 100px;\n  背景颜色:蓝色;\n}\n
\n\n

编写代码在jQuery动画 #expander Div,在三秒钟内将其从100 x 100像素扩展到200 x 200像素.

\n","answerBody":"

这可以在jQuery中这样做:

\n\n
$( \"#expander\" ).animate(\n  {\n    width: \"200px\",\n    height: \"200px\",\n  },\n  3000 );\n
\n","identifier":3280069},{"questionBody":"

什么是jQuery中的方法链? Provide an example.

\n\n

它有什么优点?

\n","answerBody":"

方法链接是jQuery的一个特性,它允许在单个代码语句中按顺序对jQuery选择执行多个方法. 例如,以下代码片段是等效的:

\n\n

Without chaining:

\n\n
$( \"button#play-movie\" ).on( \"click\", playMovie );\n$( \"button#play-movie\" ).css( \"background-color\", \"orange\" );\n$( \"button#play-movie\" ).show();\n
\n\n

With chaining:

\n\n
$( \"button#play-movie\" ).on( \"click\", playMovie )\n                        .css( \"background-color\", \"orange\" )\n                        .show();\n
\n\n

注意到链接, 此按钮只需要选择一次, 如果没有链条, jQuery必须在应用每个方法之前搜索整个DOM并找到按钮. Thus, 除了产生更简洁的代码, jQuery中的方法链提供了潜在的强大性能优势.

\n\n

Note: 准确地说,应该注意的是,jQuery中的方法链接不是 only 避免重复搜索整个DOM的方法. 还可以将一个变量设置为初始DOM搜索结果(例如.e.,在上面的例子中,可以设置一个变量等于 $( \"button#play-movie\" and then call the on(), css(), and show() 该变量的方法). But that said, 链接仍然是更简洁和高效的选择,并且不需要将结果缓存到局部变量中.

\n","identifier":3280070},{"questionBody":"

解释一下下面代码的作用:

\n\n
$( \"div\" ).css( \"width\", \"300px\" ).add( \"p\" ).css( \"background-color\", \"blue\" );\n
\n","answerBody":"

这段代码使用方法链接来完成两件事. 首先,它选择所有的

元素,并将其CSS宽度更改为300px. 然后,它把所有的

元素的当前选择,所以它最终可以改变CSS背景颜色

and

elements to blue.

\n","identifier":3280071},{"questionBody":"

两者的区别是什么 jQuery.get() and jQuery.ajax()?

\n","answerBody":"

jQuery.ajax() 是jQuery提供的包罗万象的Ajax请求方法吗. 它允许创建高度定制的Ajax请求, 可以选择等待响应的时间, 如何处理失败, 请求是阻塞(同步)还是非阻塞(异步), 请求什么格式的响应, 还有更多的选择.

\n\n

jQuery.get() 是使用快捷方法吗 jQuery.ajax() 创建一个Ajax请求,该请求通常用于简单的信息检索. 其他预构建的Ajax请求由jQuery提供,例如 jQuery.post(), jQuery.getScript(), and jQuery.getJSON().

\n","identifier":3280072},{"questionBody":"

下面两行代码中哪一行效率更高? Explain your answer.

\n\n
document.getElementById( \"logo\" );\n
\n\n

or

\n\n
$( \"#logo\" );\n
\n","answerBody":"

第一行代码是没有jQuery的纯JavaScript,效率更高,速度更快. 执行第二行代码(即jQuery)将触发对JavaScript版本的调用.

\n\n

jQuery构建在JavaScript之上,并使用底层的方法使DOM操作更容易, 以一些性能开销为代价. 最好记住,jQuery并不总是比普通的JavaScript更好. 始终考虑使用jQuery是否真的为您的项目提供了有用的优势.

\n","identifier":3280073},{"questionBody":"

解释并对比……的用法 event.preventDefault() and event.stopPropagation(). Provide an example.

\n","answerBody":"

event.stopPropagation() 阻止事件在事件链中冒泡,而 event.preventDefault() 只阻止浏览器对该事件的默认操作发生, 但是该事件仍然沿事件链向上传播.

\n\n

例如,考虑下面的代码片段:

\n\n
//在本例中,'foo'是一个包含'bar'按钮的div\n\n$(\"#foo\").click(function() {\n   //鼠标点击div 'foo'\n});\n\n$(\"#bar\").click(function(e) {\n   //鼠标点击按钮'bar'\n   e.stopPropagation();\n});\n
\n\n

Due to the call to stopPropagation() 在按钮的click处理程序中, 事件永远不会向div发起,因此它的click处理程序永远不会触发. 它有效地阻止父元素了解其子元素上的事件.

\n\n

相反,如果将上面的调用替换为 stopPropagation() with a call to preventDefault(),只有浏览器的默认操作会被排除,但是div的click处理程序仍然会被触发.

\n\n

(Note: Although the stopPropagation() and preventDefault() 方法主要用于jQuery事件处理实现, 它们也适用于纯JavaScript.)

\n","identifier":3280074},{"questionBody":"

返回完成了什么 false 从(a) jQuery事件处理程序, (b)锚标记的常规JavaScript onclick事件处理程序, (c)非锚标记的常规JavaScript onclick事件处理程序.g., div,按钮等.)?

\n","answerBody":"

(a)从jQuery事件处理程序返回false实际上与调用相同 both preventDefault() and stopPropagation() 在传递的jQuery事件对象上.

\n\n

(b)从锚标记的常规JavaScript onclick事件处理程序返回false会阻止浏览器导航到链接地址 and 阻止事件通过DOM传播.

\n\n

(c)从非锚标记的常规JavaScript onclick事件处理程序返回false.g., div,按钮等.)完全没有效果.

\n","identifier":3280075},{"questionBody":"

jQuery提供了一个有用的 .clone() 方法创建匹配元素的深度副本.

\n\n

回答以下问题:

\n\n
    \n
  1. 什么是“深度复制”??
  2. \n
  3. What is normally not 包含在克隆副本中? 怎样才能控制这些行为呢?
  4. \n
  5. 在使用时,潜在的“陷阱”是什么 .clone() method? (提示:您通常会使用的元素属性是什么 not want to clone?)
  6. \n
\n","answerBody":"
\n

1. 什么是“深度复制”??

\n
\n\n

The .clone() 方法执行匹配元素集的深度复制, 这意味着它复制匹配的元素 以及它们的后代元素和文本节点.

\n\n
\n

2. What is normally not 包含在克隆副本中? 怎样才能控制这些行为呢?

\n
\n\n

Normally:

\n\n\n\n

Setting the optional withDataAndEvents parameter to true 生成所有事件处理程序的副本,并将其绑定到元素的新副本.

\n\n

As of jQuery 1.4、所有元素数据(附) .data() 方法)也被复制到新的副本.

\n\n

As of jQuery 1.5, withDataAndEvents 可以选择性地增强 deepWithDataAndEvents 复制克隆元素的所有子元素的事件和数据.

\n\n
\n

3. 在使用时,潜在的“陷阱”是什么 clone() method? (提示:您通常会使用的元素属性是什么 not want to clone?)

\n
\n\n

Using .clone() 产生重复元素是否有潜在的副作用 id 属性,它们应该是唯一的. 因此,克隆带有。的元素时 id 属性,重要的是要记住修改 id 在将克隆插入DOM之前.

\n","identifier":3280076},{"questionBody":"

Explain the .promise() 方法,包括如何以及为什么使用它.

\n\n

考虑下面的代码片段. If there are 5

元素,开始和结束时间之间的差异将显示在页面上?

\n\n
函数getMinsSecs() {\n  var dt = new Date();\n  return dt.getMinutes()+\":\"+dt.getSeconds();\n}\n\n$( \"input\" ).on( \"click\", function() {\n  $( \"p\" ).append( \"Start time: \" + getMinsSecs() + \"
\" );\n $( \"div\" ).each(function( i ) {\n $( this ).fdeout (1000 * (i * 2));\n });\n $( \"div\" ).promise().done(function() {\n $( \"p\" ).append( \"End time: \" + getMinsSecs() + \"
\" );\n });\n});\n
\n","answerBody":"

The .promise() 方法返回一个动态生成的Promise,一旦将特定类型的所有操作绑定到集合,该Promise就会被解析, queued or not, have ended.

\n\n

它接受两个可选参数:

\n\n
    \n
  • \ntype - By default, type is “fx”, 这意味着当所选元素的所有动画完成时,返回的Promise将被解析.
  • \n
  • \ntarget —如果指定了目标对象, .promise() 将附加到它,然后返回这个对象,而不是创建一个新的.
  • \n
\n\n

在提供的代码示例中, 显示的开始和结束时间之间的差异将为10秒. This is because .promise() will wait for all

动画(在这种情况下,所有 fadeOut() 调用)完成,最后一个调用将在10秒内完成.e.(5 * 2秒).

\n","identifier":3280077},{"questionBody":"

什么是正确的方式在jQuery中删除一个元素从DOM之前,它的承诺是解决?

\n","answerBody":"

jQuery中返回的Promise被链接到 Deferred object stored on the .data() for an element. Since the .remove() 方法将删除元素的数据以及元素本身, 它将阻止元素中任何未解决的promise解析.

\n\n

因此,如果需要在解析Promise之前从DOM中删除一个元素,使用 .detach() 取而代之的是 .removeData() after resolution.

\n","identifier":3280078},{"questionBody":"

解释两者之间的区别 .detach() and .remove() methods in jQuery.

\n","answerBody":"

The .detach() and .remove() 方法是一样的,除了 .detach() 保留与被删除元素和关联的所有jQuery数据 .remove() does not. .detach() 因此,当删除的元素可能需要在以后的时间重新插入到DOM中是有用的.

\n","identifier":3280079},{"questionBody":"

两者有什么区别 document.ready() and window.onload()?

\n","answerBody":"

The document.ready() 事件发生时,所有HTML文档都已加载,但是 window.onload() 当所有内容(包括图像)已加载时发生. So generally the document.ready() event fires first.

\n","identifier":3280080},{"questionBody":"

两者有什么区别 prop() and attr()?

\n","answerBody":"

Both prop() and attr() 用于获取或设置元素属性的指定属性的值,但是 attr() 返回属性的默认值,而 prop() 返回当前值。.

\n","identifier":3280081}],"publicUrl":"http://nmp.hidekoquanyin.net/jquery/interview-questions","tabsSection":{"selectedTab":"client","items":[{"type":"client","label":"I'm hiring","activeIconUrl":"http://bs-uploads.toptal.io/blackfish-uploads/components/interview_questions_page/tabs_section/item/4917097/active_icon/optimized/ICON_TALENT__ACTIVE__2x-64d6654dfad0c04528a0525c494b144f.png","inactiveIconUrl":"http://bs-uploads.toptal.io/blackfish-uploads/components/interview_questions_page/tabs_section/item/4917097/inactive_icon/optimized/ICON_TALENT__NON_ACTIVE__2x-8710ec2d9e5d5ba4f8f684771a271d5b.png"},{"type":"talent","label":"I’m looking for work","activeIconUrl":"http://bs-uploads.toptal.io/blackfish-uploads/components/interview_questions_page/tabs_section/item/4917098/active_icon/optimized/ICON_CLIENT__ACTIVE__2x-9b251ec42929b7b96f7e20473b501eae.png","inactiveIconUrl":"http://bs-uploads.toptal.io/blackfish-uploads/components/interview_questions_page/tabs_section/item/4917098/inactive_icon/optimized/ICON_CLIENT__NON_ACTIVE__2x-de363650453eabe3d2c4e70e75deaaad.png"}]},"heroSection":{"title":"17个基本的jQuery面试问题","subtitle":"最好的jQuery开发人员和工程师可以回答的全部基本问题. Driven from our community, we encourage experts to submit questions and offer feedback.","cta":{"label":"Submit an Interview Question","href":"#submit-question"},"ctas":{"client":{"label":"现在就聘请一名顶级jQuery开发人员","href":"http://nmp.hidekoquanyin.net/hire?interested_in=developers&skill=jquery&skill_job_title=jQuery+Developer"},"talent":{"label":"申请成为jQuery开发人员","href":"http://nmp.hidekoquanyin.net/talent/apply?as=developers"}},"eatBadgeSection":{"iconUrl":"http://bs-uploads.toptal.io/blackfish-uploads/components/eat_badge_section/5876824/icon/optimized/toptal_logo_white_mono-df3f70ab3f3d7bf2e75fbe7a95401562.svg","label":"是顶级自由软件开发人员的专属网络吗, designers, finance experts, product managers, 和世界上的项目经理. 顶级公司雇佣Toptal自由职业者来完成他们最重要的项目."}},"featuredContributors":null,"questionsSection":{"note":"面试不仅仅是棘手的技术问题, 所以这些只是作为一个指南. 并不是每一个值得雇佣的“A”候选人都能回答所有的问题, 回答所有问题也不能保证成为A级考生. 一天结束的时候, hiring remains an art, a science — and a lot of work.","banner":{"title":"申请加入Toptal的发展网络","subtitle":"并享受可靠、稳定、远程 自由jQuery开发人员 Jobs","cta":{"label":"申请成为自由职业者","href":"/talent/apply","gaCategory":"cta","gaEvent":"cta - interview_questions_block","gaLabel":"Apply to 自由jQuery开发人员 Jobs"}}},"successStorySection":null}