总结常见jQuery面试题和答案推荐合集

文章图片
下面列出了最常见的jQuery面试问题和答案。
1)什么是jQuery？
jQuery是一个快速, 轻量级, 功能丰富的客户端JavaScript库。它是跨平台的, 并且支持不同类型的浏览器。它为JavaScript提供了急需的增强。在jQuery之前, 即使对于较小的函数, JavaScript代码又长又长。它使网站更具交互性和吸引力。
2)jQuery是一种编程语言吗？
jQuery不是一种编程语言, 而是一种编写良好的JavaScript代码。它用于遍历文档, 事件处理, Ajax交互和动画。
3)JavaScript和jQuery有什么区别？
简单的区别是JavaScript是一种语言, 而jQuery是为JavaScript构建的内置库。 jQuery简化了JavaScript语言的使用。
4)jQuery是否可以代替JavaScript？
不, jQuery不能替代JavaScript。 jQuery是在JavaScript之上编写的, 它是一个不同的库。 jQuery是一个轻量级的JavaScript库, 用于与JavaScript和HTML进行交互。
5)为什么要使用jQuery？

这是非常容易学习和使用的。
它用于开发与浏览器兼容的Web应用程序。
它提高了应用程序的性能。
它非常快速且可扩展。
它有助于你为与UI相关的功能编写最少的代码行。
它提供跨浏览器支持。

6)jQuery库中的$()是什么？
$()函数是jQuery()函数的别名。它用于将任何对象包装到jQuery对象中, 这以后可以方便你调用各种方法定义的jQuery对象。你可以将选择器字符串传递给$()函数, 它返回一个jQuery对象, 其中包含所有匹配的DOM元素的数组。
语法

$(document).ready(function() { $("p").css("background-color", "pink"); });

7)jQuery中使用了哪些效果方法？
这些是jQuery中使用的一些效果方法：

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

文章图片
8)JQuery中toggle()方法的用途是什么？
jQuery toggle()是一种特殊类型的方法, 用于在hide()和show()方法之间进行切换。它显示隐藏的元素并隐藏显示的元素。
语法

$(selector).toggle(); $(selector).toggle(speed, callback); $(selector).toggle(speed, easing, callback); $(selector).toggle(display);

速度：这是一个可选参数。它指定延迟的速度。它的可能值是慢, 快和毫秒。
缓动：指定用于过渡的缓动功能。
callback：这也是一个可选参数。它指定在toggle()效果完成后要调用的函数。
display：如果为true, 则显示一个元素。如果为false, 则隐藏该元素。
有关更多：单击此处
9)JQuery中的fadeToggle()方法的目的是什么？
jQuery fadeToggle()方法用于在fadeIn()和fadeOut()方法之间切换。如果元素淡入, 则使其淡出；如果元素淡出, 则使其淡入。
语法

$(selector).fadeToggle(); $(selector).fadeToggle(speed, callback); $(selector).fadeToggle(speed, easing, callback);

速度：这是一个可选参数。它指定延迟的速度。它的可能值是慢, 快和毫秒。
缓动：指定用于过渡的缓动功能。
callback：这也是一个可选参数。它指定在fadeToggle()效果完成后要调用的函数。
有关更多：单击此处
10)JQuery中的delay()方法有什么用？
jQuery delay()方法用于延迟队列中函数的执行。这是在排队的jQuery效果之间进行延迟的最佳方法。 jQUery delay()方法设置一个计时器来延迟队列中下一项的执行。
语法

$(selector).delay (speed, queueName)

速度：这是一个可选参数。它指定延迟的速度。它的可能值是慢, 快和毫秒。
queueName：这也是一个可选参数。它指定队列的名称。其默认值为标准队列效果” fx” 。
有关更多：单击此处
11)jQuery HTML是否可以同时用于HTML和XML文档？
不, jQuery HTML仅适用于HTML文档。它不适用于XML文档。
12)JQuery中html()方法的用途是什么？
jQuery html()方法用于更改所选元素的全部内容。它将选定的元素内容替换为新的内容。
语法

$(document).ready(function(){ $("button").click(function(){ $("p").html("Hello < b> srcmini.com< /b> "); }); });

有关完整的示例：单击此处
13)JQuery中css()方法的用途是什么？
jQuery CSS()方法用于获取(返回)或设置所选元素的样式属性或值。它有助于你获得一个或多个样式属性。 jQuery CSS()提供了两种方法：
返回一个CSS属性它用于获取指定CSS属性的值。

$(document).ready(function(){ $("button").click(function(){ alert("Background color = " + $("p").css("background-color")); }); });

设置CSS属性此属性用于为所有匹配的元素设置特定值。

$(document).ready(function(){ $("button").click(function(){ $("p").css("background-color", "violet"); }); });

有关更多：单击此处
14)jQuery库是用于服务器脚本还是客户端脚本？
它是用于客户端脚本的库。
15)jQuery是W3C标准吗？
不, jQuery不是W3C标准。
16)jQuery中代码执行的起点是什么？
$(document).ready()函数是jQuery代码的起点。在加载DOM时执行。
17)从jQuery开始的基本要求是什么？
你需要参考其库以jQuery开头。你可以从jQuery.com下载最新版本的jQuery。
18)可以在jQuery中使用其他任何名称代替$(美元符号)吗？
是的, 我们可以使用jQuery作为函数名来代替$(美元符号)。例如：

jQuery(document).ready(function() { jQuery("p").css("background-color", "pink"); });

19)你可以在同一页面上使用多个document.ready()函数吗？
是。你可以在同一页面上使用任意数量的document.ready()函数。例如：

$(document).ready(function() { $("h1").css("background-color", "red"); }); $(document).ready(function() { $("p").css("background-color", "pink"); });

20)find和child方法有什么区别？
Find方法用于在DOM树下查找所有级别, 而子级方法用于在DOM树下查找单个级别。
21)什么是CDN？
CDN代表内容交付网络或内容分发网络。它是一个大型的分布式服务器系统, 部署在整个Internet的多个数据中心中。它以更高的带宽提供来自服务器的文件, 从而缩短了加载时间。这些公司提供免费的公共CDN：

谷歌
微软
雅虎

22)CDN的目标是什么, 使用CDN有什么优势？
CDN的主要目标是向最终用户提供具有高可用性和高性能的内容。
使用CDN的优点：

它减少了服务器的负载。
节省带宽。从这些CDN可以更快地加载jQuery框架。
如果用户定期从这些CDN中的任何一个访问使用jQuery框架的网站, 则该网站将被缓存。

23)如何在项目中使用jQuery库？
你可以通过从jQuery.com下载最新的jQuery库, 在ASP.Net项目中使用jQuery库, 并在HTML / PHP / JSP / Aspx页面中包含对jQuery库文件的引用。

< script src="http://www.srcmini.com/_scripts/jQuery-1.2.6.js" type="text/javascript"> < /script> < script language="javascript"> $(document).ready(function() { alert('test'); }); < /script>

24)jQuery中的选择器是什么？ jQuery中有多少种选择器？
如果要使用网页上的元素, 则首先需要找到它。选择器在jQuery中找到HTML元素。选择器有很多类型。一些基本的选择器是：

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

25)jQuery过滤器有什么用？
：jQuery过滤器用于过滤对象中的特定值。它将原始查询的结果过滤为特定元素。
26)jQuery中的选择器有哪些不同类型？
jQuery中有三种选择器：

CSS选择器
自定义选择器
XPath选择器

27)jQuery中的ID选择器和类选择器有什么区别？
ID选择器和类选择器与CSS中的相同。 ID选择器使用ID, 而类选择器使用类选择元素。
你使用ID选择器仅选择一个元素。如果要选择一组具有相同CSS类的元素, 请使用类选择器。
28)JQuery中的serialize()方法有什么用？
jQuery serialize()方法用于以标准的URL编码表示法创建文本字符串。它序列化表单值, 以便在发出AJAX请求时可以在URL查询字符串中使用其序列化值。
语法

$(document).ready(function(){ $("button").click(function(){ $("div").text($("form").serialize()); }); });

有关完整的示例：单击此处
29)jQuery中val()方法的用途是什么？
使用jQuery val()方法：

获取匹配元素集中第一个元素的当前值。
设置每个匹配元素的值。

语法

$(document).ready(function(){ $("button").click(function(){ $("div").text($("form").serialize()); }); });

有关完整的示例：单击此处
30)如何使用jQuery向元素添加和删除CSS类？
你可以使用addclass()jQuery方法将CSS类添加到元素中, 并使用removeclass()jQuery方法从元素中删除CSS类。
CSS addClass()示例

< !DOCTYPE html> < html> < head> < title> jQuery Example< /title> < script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> < /script> < script type="text/javascript" language="javascript"> $(document).ready(function() { $("#btn").click(function() { $("#para").addClass("change"); }); }); < /script> < style> .change { color:blue; } < /style> < /head> < body> < p id="para"> This method adds CSS class from an element< /p> < input type="button" id="btn" value="http://www.srcmini.com/Click me"> < /body> < /html>

CSS removeClass()示例

< !DOCTYPE html> < html> < head> < title> jQuery Example< /title> < script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> < /script> < script type="text/javascript" language="javascript"> $(document).ready(function() { $("#btn").click(function() { $("p").removeClass("change"); }); }); < /script> < style> .change { color:blue; } < /style> < /head> < body> < p class="change"> This method removes CSS class to an element< /p> < input type="button" id="btn" value="http://www.srcmini.com/Click me"> < /body> < /html>

31)你可以编写jQuery代码以选择段落中的所有链接吗？
是。你可以使用嵌套在< p> 标记内的< a> 标记来选择所有链接。例如：

< !DOCTYPE html> < html> < head> < title> jQuery Example< /title> < script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> < /script> < script type="text/javascript" language="javascript"> $(document).ready(function() { $("p a").attr("href", "https://www.srcmini.com"); }); < /script> < /head> < body> < p> < a> Learn JavaScript< /a> < /p> < p> < a> Learn jQuery< /a> < /p> < /body> < /html>

32)prop和attr有什么区别？
attr()：获取匹配元素集中第一个元素的属性值。
prop()：获取匹配元素集中第一个元素的属性值。它在jQuery 1.6中引入。
33)CDN的两种类型是什么？
CDN有两种类型：