最新jQuery常见的面试题和答案合集介绍

2021年11月28日23:35:32 发表评论 1,073 次浏览
最新jQuery常见的面试题和答案合集介绍

如果你收到了jQuery编码员角色的面试电话,我们有一些你在面试中可能会遇到的问题。顺便说一下,我假设你熟悉 JavaScript,因为这是一个重要的先决条件。如果没有,不用担心!你可以阅读我们最好的 JavaScript 教程,以帮助你顺利通过。

你还可以通过浏览我们的博客来增强你的知识,这些博客阐明了当今流行的技术。

jQuery面试题和答案合集

以下是一些关于 Javascript 的有用面试题:

基本的 JQuery 面试题

问题:什么是jQuery?

jQuery面试题解析:jQuery 是一个功能丰富的 JavaScript 库,它使 HTML 文档遍历和操作、事件处理、动画和 Ajax 变得更加简单和快速。jQuery 有一个易于使用的 API,可以在许多浏览器上工作。 可以使用 jQuery 以最少的代码行编写 UI 相关功能。

问题:JavaScript 和 jQuery 有什么区别?

:JavaScript 是一种解释型编程语言,而 jQuery 是一个为 JavaScript 构建 API 的库。jQuery 简化了 JavaScript 语言的使用。

常见的jQuery面试题有哪些:jQuery 中使用的效果方法有哪些?

:jQuery 使我们能够在网页上添加效果。jQuery 效果可以分为淡入淡出、滑动、隐藏/显示和动画效果。jQuery 提供了很多网页效果的方法

这些是jQuery 中使用的效果方法:

  • show() - 它显示或显示选定的元素。
  • hide() - 它隐藏匹配或选择的元素。
  • toggle() - 它显示或隐藏匹配的元素。换句话说,它在 hide() 和 shows() 方法之间切换。
  • fadeIn() - 它通过将其淡化为不透明来显示匹配的元素。换句话说,它会淡入所选元素中。
  • fadeOut() - 它通过将其淡化为透明来显示匹配的元素。换句话说,它淡出选定的元素。 

问题:jQuery 的特点是什么?

答: jQuery 的一些重要特性是:

  • 使用 Sizzle 引擎轻松操作 DOM。
  • 事件处理和 AJAX 支持。
  • 内置效果和动画。
  • 轻量级库。
  • 跨浏览器兼容性。
  • 支持 CSS3、基本 XPath、HTML5。

问题:解释jQuery的优点?

答: jQuery 的优点是:

  • 简单易用。
  • 以博客、代码片段、教程和其他资源的形式提供大量文档
  • 简单干净的语法。
  • 开放的编码标准,直观。
  • 处理跨浏览器问题,而无需开发人员担心。
  • 轻量级的核心库只有 24kb。
  • 开源库。
  • 一套详尽的动画和效果。
  • 可扩展且快速。
  • 它可以针对搜索引擎进行优化以获得更好的 SEO。

问题:什么是 jQuery Ajax?

:AJAX 是 Asynchronous JavaScript 和 XML 的首字母缩写,这项技术可以帮助我们加载数据并与服务器交换数据,而无需刷新浏览器页面。JQuery 是一个很棒的工具,它提供了一组丰富的 AJAX 方法来开发下一代 Web 应用程序。

问题:ajax() 方法有什么作用?

答:此方法向服务器发送异步 HTTP 请求。

问题:ajax 方法 load() 有什么作用?

答:load() 方法 发送 HTTP 请求以从服务器加载 HTML 或文本内容并将它们添加到 DOM 元素。

问题:什么是 jQuery Ajax 事件?

答:jQuery 库还包括将根据Ajax 请求状态触发的事件;这些被称为 Ajax 事件。

问题:jQuery Ajax 事件方法 ajaxComplete() 有什么作用?

jQuery面试题解析:每当 Ajax 请求完成时,jQuery 就会触发ajaxComplete事件。任何已注册到 . ajaxComplete () 方法在这个时候被执行。

问题:jQuery ajax 事件方法 ajaxStart() 有什么作用?

答:每当 Ajax 请求即将发送时,jQuery 会检查是否还有其他未完成的 Ajax 请求。如果没有正在进行,jQuery 将触发ajaxStart事件。已在 . ajaxStart ()方法在这个时候被执行。

问题:jQuery 中的事件是什么?

答:响应用户在网页上的操作称为事件。 jQuery 提供了将事件处理程序附加到选择的简单方法。当事件发生时,提供的函数被执行。

问题:jquery Events 中有哪些类别?

常见的DOM事件如下

  • 表单
  • 键盘
  • 鼠标
  • 浏览器
  • 文件加载

jQuery面试题和答案合集:jQuery 中 css() 方法有什么用?

答:jQuery CSS() 方法用于获取(返回)或设置所选元素的样式属性或值。它有助于你获得一个或多个样式属性。

问题:findchildren方法有什么区别?

答:这两种方法都用于过滤匹配元素的子元素。find 方法用于查找 DOM 树下的所有级别,但 children 方法仅搜索 DOM 树下的单个级别。

问题:jQuery 中的选择器有哪些,选择器的类型有哪些?

答:如果你想使用网页上的元素,首先你需要找到或选择它。选择器使用 jQuery 查找 HTML 元素。

jQuery 库中有多种类型的选择器。一些基本的选择器是:

  • Name :用于选择与给定元素名称匹配的所有元素。
  • #ID :用于选择与给定 ID 匹配的单个元素
  • Class :用于选择与给定 Class 匹配的所有元素。
  • 通用(*):用于选择 DOM 中可用的所有元素。
  • 多个元素 E、F、G :用于选择所有指定选择器 E、F 或 G 的组合结果。
  • 属性选择器:用于根据元素的属性值选择元素。

问题:jQuery 中的 ID 选择器和类选择器有什么区别?

:ID 选择器和类选择器与 CSS 中的相同。ID 选择器使用 ID,而类选择器使用类来选择元素。你可以使用 ID 选择器仅选择一个元素。如果要选择一组元素,可以使用同一个CSS类来使用类选择器。

问题:jQuery Ajax 方法的优点是什么?

答:使用 jQuery Ajax 方法的优点是

  • 跨浏览器支持
  • 简单的使用方法
  • 能够发送 GET 和 POST 请求
  • 能够加载 JSON、XML、HTML 或脚本

常见的jQuery面试题有哪些:onload() 和 document.ready() 方法有什么区别?

答:Body.Onload() 事件只有在 DOM 和图像等相关资源加载后才会被调用,但是 jQuery 的 document.the ready() 事件会在 DOM 加载后被调用,它不会等待资源如作为要加载的图像。

问题:什么是 jQuery 连接?

:'jQuery connect' 是一个插件,用于将一个函数与另一个函数连接或绑定。Connect 用于在执行来自另一个对象或插件的函数时执行函数。

问题:Bootstrap需要 jQuery 吗?

答:Bootstrap将 jQuery 用于 JavaScript 插件(如模型、工具提示等)。但是,如果你只使用 Bootstrap 的 CSS 部分,则不需要 jQuery 。

问题:什么是 jQuery Mobile?

答:jQuery Mobile 是一个基于 HTML5 的用户界面系统,旨在让所有智能手机、平板电脑和桌面设备都可以访问响应式网站和应用程序。

问题:jquery.min.js 和 jquery.js 有什么区别?

答:jquery.min.js 是 jquery.js 的压缩版本(删除空格和注释,使用较短的变量名等)以保留带宽。在功能方面,它们完全相同。建议在生产环境中使用这个压缩版本。当使用 jQuery 的最小化版本时,网页的效率会提高。

问题:jQuery HTML 是否可能同时适用于 HTML 和 XML 文档?

答:不可以,jQuery HTML 仅适用于 HTML 文档。它不适用于 XML 文档。

问题:什么是 jQuery UI?

答:jQuery UI是一组构建在 jQuery JavaScript 库之上的用户界面交互、效果、小部件和主题。jQuery UI 适用于具有许多控件的高度交互的 Web 应用程序或具有日期选择器控件的简单页面。

问题:jQuery 的数据表插件是什么?

:DataTables 是 jQuery Javascript 库的插件。它是一种高度灵活的工具,建立在渐进增强的基础上,可为任何 HTML 表格添加高级功能。

高级 JQuery 面试题

问题:什么是Qunit?

:QUnit 是一个功能强大、易于使用的 JavaScript 单元测试框架。它被 jQuery、jQuery UI 和 jQuery Mobile 项目使用,并且能够测试任何通用 JavaScript 代码。

问题:使用 CDN 托管 jQuery 的优势是什么?

:CDN 代表内容交付网络或内容分发网络。它是一个大型分布式服务器系统,部署在互联网上的多个数据中心。它以更高的带宽提供来自服务器的文件,从而加快加载时间。

使用 CDN 的优点是:

  • jQuery 库下载时间将减少。例如 - 欧洲的用户会点击欧洲的 CDN,美国的用户会点击美国的 CDN。因此,这将减少整体页面加载时间。
  • 如果用户访问了另一个引用相同 jQuery 库的网站,则 jQuery 库将已经缓存在用户的浏览器中。在这种情况下,用户不需要下载 jQuery 库。

问题:解释 jQuery 中 .detach() 和 remove() 方法之间的区别。

回答:该 detach() 和  remove() 方法是相同的,不同之处在于.detach()保留()执行与所移除的元件和卸下摆臂相关联的所有的jQuery数据未。因此,当删除的元素稍后可能需要重新插入到 DOM 中时, detach() 很有用。

问题:jQuery 库可以用于服务器脚本吗?

回答:jQuery 是为客户端脚本设计的。jQuery 与服务器端脚本不兼容。

问题:什么是 jQuery.noConflict?

答:通常,JS 函数和变量使用 $ 作为名称。在 jQuery 中,$ 只是 jQuery 的别名,所以我们不需要使用 $。如果我们必须使用 JS 库和 jQuery,$ 的控制权交给 JS 库。为了提供这种控制,我们使用 jQuery.noConflict()。它还用于为变量分配新名称。

var newname = jQuery.noConflict();

问题: jQuery 中 .empty() 与 .remove() 与 .detach() 的区别。

回答:

remove():删除元素及其子元素。可以恢复来自 DOM 的数据;但是,无法恢复事件处理程序。

empty():不删除元素;但是,删除其内容和关联的子元素

detach():移除元素和所有关联的子元素,但保留被移除元素的数据和事件处理程序以备后用。

用法示例:

$(“#div-element”).remove();
$(“#div-element”).empty();
$(“#div-element”).detach();

问题:解释 jQuery 中可用的各种 Ajax 函数?

jQuery面试题解析:有很多方法,例如:

  • .ajaxStart() - 注册第一个 Ajax 请求开始时要调用的处理程序。
  • .ajaxStop() - 注册所有请求完成后要调用的处理程序。
  • .ajaxSuccess() - 注册在 Ajax 请求成功完成时要调用的处理程序。

查看官方 jQuery 文档页面上的所有方法,其中通过示例解释了每个方法。

问题:jQuery 中的 width() 和 css('width') 有什么区别?

答案: CSS('width') 返回以像素为单位的宽度值,而 width() 返回整数(没有单位值)。例如:

div{
width: 20cm;
}

如果打印值:

$(this).width();
$(this).css(‘width’);

你将分别获得 756 和 756px 之类的值。请注意,虽然我们以厘米为单位指定宽度,但出于输出目的,它会转换为像素 (px)。

jQuery面试题和答案合集:jQuery 中的 bind() 与 live() 与 delegate() 方法有什么区别?

回答:

bind():此方法将事件处理程序直接注册到所需的 DOM 元素。例如:

$(“#members a”).bind(“click”, function(f){….});

这意味着任何匹配的锚点都将附加此事件处理程序!

live():此方法将事件处理程序附加到文档的根目录。这意味着一个处理程序可用于传播到根的所有事件。处理程序因此只附加一次。

delegate():在此方法中,你可以选择附加处理程序的位置。这是最有效和最稳健的委派方法。

例如:

$(“#members”).delegate(“ul li a”, “click”, function(f){….});

问题:描述一下jQuery中param()方法的使用?

答案: param() 方法输出对象或数组的序列化表示。

例如:

student = new Object();
student.name = “Mary”;
student.marks = 67;
$("div").text($.param(student);

当发生调用此代码的事件时,该方法将提供以下输出:

name=Mary&marks=67

问题:解释 jQuery 中 $(this) 和 this 的区别?

答案: $() 是 jQuery 构造函数,而 this 是对 DOM 元素的引用。要使用 jQuery 方法,我们使用 $(this)。

问题:解释 jquery.size() 和 jquery.length 的区别?

答案:两者都返回元素的数量。但长度更快。从 jQuery 1.8 开始, size() 已被弃用。

问题:jQuery Ajax 方法使用的四个参数是什么?

答:四个参数分别是:

  • URL:发送请求的 URL
  • Type GET/POST 请求
  • Success:请求成功时的回调函数
  • DataType:返回数据类型——HTML、XML、文本等。

问题:在页面上包含 jQuery 的所有方法是什么?

回答:

  1. 你可以使用 <script> 在 HTML <head> 或 <body> 标签中添加库:<script src='jquery-3.2.1.min.js'></script>
  2. 在 <script> 标签内的 HTML 文档中编写代码,这里我们使用了 cdn 链接。
<script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js'></script>
<script type = “text/javascript”>
$(document)……… <jQuery code>
</script>
  1. 将 .js 文件包含在 HTML 文档中,该文件具有 jQuery 代码。

<script src='script.js' type="text/javascript"></script>

问题:jQuery 中的 css() 方法有什么用?

答:css () 为所有选中的元素设置样式属性。它还返回指定 CSS 属性的第一个匹配元素。

<p>Welcome to styling</p>
<p>I will be styled just as the previous paragraph</p>
<button>click me to change the style</button>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css("color", "blue");
});
});
</script>

常见的jQuery面试题有哪些:jQuery 中的 jQuery Datepicker 是什么?

答:它是一个在 HTML 页面中添加日期选择器功能的插件/小部件。它是高度可配置的,可以针对日期格式、语言、限制日期选择等进行自定义。请参阅此jQuery 文档以了解日期选择器选项。

问题:定义slideToggle() 效果?

答:用于对选中的元素在向上滑动和向下滑动之间切换。

<h2>This is a paragraph.</h2>
<button>show me toggle</button>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h2").slideToggle();
});
});
</script>

问题:如何在 jQuery 中使用数组?

答案:要创建数组使用 $.makeArray(<object>)

var myObj = [“John”, “Jake”, “Jack”, “King”];
var myArr = $.makeArray(myobj);

你可以使用 $.inArray() 搜索数组中的特定元素

$.inArray(“Jack”, myArr);

要合并两个数组,请使用 $.merge() 方法

var arr1 = [“John”, “Jake”, “Jack”, “King”];
var arr2 = [“Mary”, “Katy”, “Jill”, “Queen”];
var mergeArr = $.merge(arr1, arr2);

问题:什么是 jQuery 插件?

答:插件只是使开发人员能够扩展 jQuery 原型对象的简单方法。插件是用标准的 javascript 文件编写的。jQuery 提供了很多插件,你可以从它们的存储库链接下载。你可以使用<script src = "jquery.plugin.js" type = "text/javascript"></script>在代码中包含插件

问题:jQuery 中 Map 和 Grep 函数的区别?

答案: Map 函数将一组元素转换为 jQuery 数组中的另一组值,该数组可能包含也可能不包含这些元素。该地图称为:

$(“<element>”).map(<function to execute for elements in the object>)

另一方面,Grep 在数组中查找元素。

jQuery.grep(myArr, function(){}

问题:jQuery中的方法链是什么,有什么优点?

答:通过链接,可以一次性执行特定元素上的多个 jQuery 命令。它有助于一次对一个元素执行各种操作,而不是一个接一个地执行它们。

$("#h2").css("color","blue").animate((left: '100px'}).slideDown(1000);

问题:jQuery.get() 和 jQuery.ajax() 的区别?

答:在 get() 方法中,我们必须传递单个参数,而 ajax() 方法将所有这些参数作为对象获取。

jQuery.ajax({
url: 'mydoc.txt',
dataType: 'text',
type: “GET”,
success: function(data) {
console.log(data);
}
});

get() 方法接受参数。传递的三个主要参数解释如下:

jQuery.get('mydoc.txt',function(data){
console.log(data)
},'text');

其中,第一个参数是 url,第二个是回调函数,第三个 ('text') 是返回类型。

问题:prop 和 attr 的区别?

答案: attr() 和 prop() 都可用于设置或获取元素的值,但是 attr() 返回原始(默认)值,而 prop() 返回最新(当前)值。例如,如果文本输入的初始值是“男”,然后用户将其更改为“女”,则 attr() 将返回值“男”,而 prop() 将返回值“女性。'

问题:JQuery 中的toggle() 方法有什么用?

jQuery面试题解析:如果有点击事件,toggle() 附加函数来切换。因此,在第一次单击时会发生第一个动作,在第二次单击时会发生第二个动作,依此类推。

<button>Change my color on each click</button>
<script>
$(document).ready(function(){
$("button").toggle(
function(){$("button").css({"color": "blue"});},
function(){$("button").css({"color": "yellow"});},
function(){$("button").css({"color": "red"});
});
});
</script>

常见的jQuery面试题有哪些:什么是CDN?

答: CDN 是 Cloud Delivery Network 的简称。它是网络(分布式)服务器系统,根据用户的地理位置、页面来源和内容交付服务器向用户提供特定的 Web 内容,如图形、图像、文本等。CDN 提供高可用性和性能。

问题:如何使用 jQuery 向元素添加和删除 CSS 类?

答:你可以使用 addClass() 和 removeClass() 方法来做同样的事情。

$("h1").addClass("myclass");
$("h1").removeClass("myclass");

回答:

$('a:visible').css('text-transform', 'uppercase');

问题:JQuery 中的fade toggle() 方法的目的是什么?

答:它用于在fadeIn() 和fadeOut() 函数之间切换。这是一个显示相同内容的示例:

<div id="div1" style="color:orange;”>My text</div>
<button>fade in/out</button><br><br>
<script>
$("button").click(function(){
$("#div1").fadeToggle();
}
</script>

结论

这是一个很好的面试问题列表,可以帮助你准备 Jquery 面试。

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: