干货 | jQuery经典面试题及答案精选

面试题来啦!

毫无疑问,JavaScript是一门如此有用,但总是被低估的一门语言. 在 jQuery 粉墨登场之前,我们曾经会写出冗长的JavaScript代码,不仅仅为更大型的应用程序,有时即使是更小的应用程序也要如此. 那种代码常常是既难以阅读又难以维护的.

  在16、17年的时候,jQuery在很多公司,几乎是相当于js原生在用,它的优点是毋庸置疑的,使用简单、提高开发速度、而且体积小、而且拥有丰富的DOM选择器、链式表达式、跨浏览器兼容等等,但是jQuery也存在相当大的缺点,比如反复的获取DOM带来的内存消耗、比如插件兼容性差,再比如对于数据的处理性差,时至今日,市面上已经有了更多的框架,比如Angular、Vue、React等等,但是这并不代表jquery不重要,在相当多的公司中,jquery仍然是开发的主体,今天给大家带来一些jQuery面试题,供jQuery入门级同学参考。

       1. jQuery 库中的 $() 是什么?

$() 函数是 jQuery() 函数的别称,乍一看这很怪异,还使 jQuery 代码晦涩难懂。一旦你适应了,你会爱上它的简洁。$() 函数用于将任何对象包裹成 jQuery 对象,接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你甚至可以将一个选择器字符串传入 $() 函数,它会返回一个包含所有匹配的 DOM 元素数组的 jQuery 对象。这个问题我已经见过好几次被提及,尽管它非常基础,它经常被用来区分一个开发人员是否了解 jQuery。

2. 网页上有 5 个 <div> 元素,如何使用 jQuery来选择它们?

另 一个重要的 jQuery 问题是基于选择器的。jQuery 支持不同类型的选择器,例如 ID 选择器、class 选择器、标签选择器。鉴于这个问题没提到 ID 和 class,你可以用标签选择器来选择所有的 div 元素。jQuery 代码:$(“div”),这样会返回一个包含所有 5 个 div 标签的 jQuery 对象。更详细的解答参见上面链接的文章。

3. jQuery 里的 ID 选择器和 class 选择器有何不同?

如 果你用过 CSS,你也许就知道 ID 选择器和 class 选择器之间的差异,jQuery 也同样如此。ID 选择器使用 ID 来选择元素,比如 #element1,而 class 选择器使用 CSS class 来选择元素。当你只需要选择一个元素时,使用 ID 选择器,而如果你想要选择一组具有相同 CSS class 的元素,就要用 class 选择器。在面试过程中,你有很大几率会被要求使用 ID 选择器和 class 选择器来写代码。下面的 jQuery 代码使用了 ID 选择器和 class 选择器:

$('#LoginTextBox')  // Returns element wrapped as jQuery object with id='LoginTextBox'

$('.active') // Returns all elements with CSS class active.

正如你所见,从语法角度来说,ID 选择器和 class 选择器的另一个不同之处是,前者用字符”#”而后者用字符”.”。更详细的分析和讨论参见上面的答案链接。

4. 如何在点击一个按钮时使用 jQuery 隐藏一个图片?

这是一个事件处理问题。jQuery为按钮点击之类的事件提供了很好的支持。你可以通过以下代码去隐藏一个通过ID或class定位到的图片。你需要知道如何为按钮设置事件并执行hide() 方法,代码如下所示:

$('#ButtonToClick').click(function(){

$('#ImageToHide').hide();

});

我喜欢这个问题,因为很贴近实际使用,代码也不复杂。

5. $(document).ready() 是个什么函数?为什么要用它?

这 个问题很重要,并且常常被问到。 ready() 函数用于在文档进入ready状态时执行代码。当DOM 完全加载(例如HTML被完全解析DOM树构建完成时),jQuery允许你执行代码。使用$(document).ready()的最大好处在于它适用 于所有浏览器,jQuery帮你解决了跨浏览器的难题。需要进一步了解的用户可以点击 answer链接查看详细讨论。

6. JavaScript window.onload 事件和 jQuery ready 函数有何不同?

这 个问答是紧接着上一个的。JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是,前者除了要等待 DOM 被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。如果加载图片和媒体内容花费了大量时间,用户就会感受到定义在 window.onload 事件上的代码在执行时有明显的延迟。

另 一方面,jQuery ready() 函数只需对 DOM 树的等待,而无需对图像或外部资源加载的等待,从而执行起来更快。使用 jQuery $(document).ready() 的另一个优势是你可以在网页里多次使用它,浏览器会按它们在 HTML 页面里出现的顺序执行它们,相反对于 onload 技术而言,只能在单一函数里使用。鉴于这个好处,用 jQuery ready() 函数比用 JavaScript window.onload 事件要更好些。

7. 如何找到所有 HTML select 标签的选中项?

这是面试里比较棘手的 jQuery 问题之一。这是个基础的问题,但是别期望每个 jQuery 初学者都知道它。你能用下面的 jQuery 选择器获取所有具备 multiple=true 的 <select > 标签的选中项:

$('[name=NameOfSelectedTag] :selected')

这段代码结合使用了属性选择器和 :selected 选择器,结果只返回被选中的选项。你可按需修改它,比如用 id 属性而不是 name 属性来获取 <select> 标签。

8. jQuery 里的 each() 是什么函数?你是如何使用它的?

each() 函数就像是 Java 里的一个 Iterator,它允许你遍历一个元素集合。你可以传一个函数给 each() 方法,被调用的 jQuery 对象会在其每个元素上执行传入的函数。有时这个问题会紧接着上面一个问题,举个例子,如何在 alert 框里显示所有选中项。我们可以用上面的选择器代码找出所有选中项,然后我们在 alert 框中用 each() 方法来一个个打印它们,代码如下:

$('[name=NameOfSelectedTag] :selected').each(function(selected) {

alert($(selected).text());

});

其中 text() 方法返回选项的文本。

9. 你是如何将一个 HTML 元素添加到 DOM 树中的?

你 可以用 jQuery 方法 appendTo() 将一个 HTML 元素添加到 DOM 树中。这是 jQuery 提供的众多操控 DOM 的方法中的一个。你可以通过 appendTo() 方法在指定的 DOM 元素末尾添加一个现存的元素或者一个新的 HTML 元素。

10. 你能用 jQuery 代码选择所有在段落内部的超链接吗?

这是另一个关于选择器的 jQuery 面试题。就像其他问题那样,只需一行 jQuery 代码就能搞定。你可以使用下面这个 jQuery 代码片段来选择所有嵌套在段落(<p>标签)内部的超链接(<a>标签)……

11. $(this) 和 this 关键字在 jQuery 中有何不同?

这 对于很多 jQuery 初学者来说是一个棘手的问题,其实是个简单的问题。$(this) 返回一个 jQuery 对象,你可以对它调用多个 jQuery 方法,比如用 text() 获取文本,用val() 获取值等等。而 this 代表当前元素,它是 JavaScript 关键词中的一个,表示上下文中的当前 DOM 元素。你不能对它调用 jQuery 方法,直到它被 $() 函数包裹,例如 $(this)。

12.你如何使用jQuery来提取一个HTML 标记的属性 例如.链接的href?

attr() 方法被用来提取任意一个HTML元素的一个属性的值. 你首先需要利用jQuery选择及选取到所有的链接或者一个特定的链接,然后你可以应用attr()方法来获得他们的href属性的值。下面的代码会找到页面中所有的链接并返回href值:

$('a').each(function(){

alert($(this).attr('href'));

});

13. 你如何使用jQuery设置一个属性值?

前面这个问题之后额外的一个后续问题是,attr()方法和jQuery中的其它方法一样,能力不止一样. 如果你在调用attr()的同时带上一个值 例如. attr(name, value), 这里name是属性的名称,value是属性的新值。

14. jQuery中 detach() 和 remove() 方法的区别是什么?

尽 管 detach() 和 remove() 方法都被用来移除一个DOM元素, 两者之间的主要不同在于 detach() 会保持对过去被解除元素的跟踪, 因此它可以被取消解除, 而 remove() 方法则会保持过去被移除对象的引用. 你也还可以看看 用来向DOM中添加元素的 appendTo() 方法.

15. 你如何利用jQuery来向一个元素中添加和移除CSS类?

通过利用 addClass() 和 removeClass() 这两个 jQuery 方法。动态的改变元素的class属性可以很简单例如. 使用类“.active”来标记它们的未激活和激活状态,等等.

16. 使用 CDN 加载 jQuery 库的主要优势是什么 ?

这 是一个稍微高级点儿的jQuery问题。好吧,除了报错节省服务器带宽以及更快的下载速度这许多的好处之外, 最重要的是,如果浏览器已经从同一个CDN下载类相同的 jQuery 版本, 那么它就不会再去下载它一次. 因此今时今日,许多公共的网站都将jQuery用于用户交互和动画, 如果浏览器已经有了下载好的jQuery库,网站就能有非常好的展示机会。

17. jQuery.get() 和 jQuery.ajax() 方法之间的区别是什么?

ajax() 方法更强大,更具可配置性, 让你可以指定等待多久,以及如何处理错误。get() 方法是一个只获取一些数据的专门化方法。

18. jQuery 中的方法链是什么?使用方法链有什么好处?

方法链是对一个方法返回的结果调用另一个方法,这使得代码简洁明了,同时由于只对 DOM 进行了一轮查找,性能方面更加出色。

19. 你要是在一个 jQuery 事件处理程序里返回了 false 会怎样?

这通常用于阻止事件向上冒泡。

20. 哪种方式更高效:document.getElementbyId(“myId”) 还是 $(“#myId”)?

第一种,因为它直接调用了 JavaScript 引擎。

 

jQuery简单面试题的更多相关文章

  1. jQuery简单实现iframe的高度根据页面内容自适应的方法(转)

    本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $("#i ...

  2. jQuery简单的手风琴菜单

    查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC &q ...

  3. jquery 简单弹出层(转)

    预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* wid ...

  4. JQuery简单实现锚点链接的平滑滚动

    在平时的项目中,我们经常需要一些特效链接,如果使效果进一步加强,我们可以使点击锚点链接平滑滚动到锚点,下面就来给大家讲解下如何使用jQuery来实现.   一般使用锚点来跳转到页面指定位置的时候,会生 ...

  5. 基于Jquery 简单实用的弹出提示框

    基于Jquery 简单实用的弹出提示框 引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...

  6. jquery简单封装

    对Raphael画图标的一个jquery简单封装 公司要做一个项目的demo,要求地图上可以插红旗,所以就用到了Raphael. 因为是个demo,所以地图就用了一张图片,效果如下: 所以为了更好的封 ...

  7. Jquery简单的placeholder效果

    Jquery简单的placeholder效果 由于IE6-IE9不支持HTML5中的placeholder,所以自己依赖于Jquery简单的写了一个,供参考! 先看看效果吧!如下JSFiddle地址 ...

  8. 39条常见的Linux系统简单面试题

    39条常见的Linux系统简单面试题 本文主要分享39条常见的Linux系统简单面试题,其中包括如何看当前Linux系统有几颗物理CPU和每颗CPU的核数.如何实时查看网卡流量为多少等等,希望对你有所 ...

  9. jQuery 简单介绍

    jQuery  简单介绍 jQuery的定义 jQuery是一个快速,小巧,功能丰富的JavaScript库.它通过易于使用的API在大量浏览器中运行,使得   HTML文档遍历和操作,事件处理,动画 ...

随机推荐

  1. F#周报2019年第43期

    新闻 F# eXchange 2020--征文通知 FSSF在忙什么?2019年第三季度版本 Miguel强烈推荐使用TensorFlow.NET 运行在ASP.NET Core 3上的SAFE-Bo ...

  2. 实现Button的动态响应

    按下不同的Button实现不同的逻辑 但用同样的代码: using System.Reflection; namespace valuableBook { /// <summary> // ...

  3. Java并发编程之线程池的使用

    1. 为什么要使用多线程? 随着科技的进步,现在的电脑及服务器的处理器数量都比较多,以后可能会越来越多,比如我的工作电脑的处理器有8个,怎么查看呢? 计算机右键--属性--设备管理器,打开属性窗口,然 ...

  4. linux下shell脚本启动jar包

    本文采用的jar包是通过idea下maven打包的springboot项目. 写这个shell脚本是为了在linux下方便启动jar包时不用输入太多的shell命令,将启动脚本的一系列shell命令整 ...

  5. Jenkins流水线获取提交日志

    写在前 之前使用Jenkins pipeline的时候发现拿不到日志,使用multiple scms插件对应是日志变量获取日志的方式失效了, 但是查看流水线Pipeline Syntax发现check ...

  6. 以Mnist为例从头开始自己建立数据集,搭建resnet34,识别Mnist

    写在前面: 本人小白研一,刚开始学习深度学习,将自己的第一个实验过程总结下来,看了很多的大牛的博客,在下面的程序中也参考了很多大牛的博客.在刚开始入门的学习的时候,直接编写程序下载数据集,但是后来觉得 ...

  7. python基础-字符串(str)类型及内置方法

    字符串-str 用途:多用于记录描述性的内容 定义方法: # 可用'','''''',"","""""" 都可以用于定义 ...

  8. 前端技术之:如何在vuex状态管理action异步调用结束后执行UI中的方法

    一.问题的起源 最近在做vue.js项目时,遇到了vuex状态管理action与vue.js方法互相通信.互操作的问题.场景如下图所示: 二.第一种解决方法 例如,我们在页面初始化的时候,需要从服务端 ...

  9. 基于xposed Hook框架实现个人免签支付方案

    我的个人网站如何实现支付功能? 想必很多程序员都有过想开发一个自己的网站来获得一些额外的收入,但做这件事会遇到支付这个问题.目前个人网站是无法实现支付功能的. 今天我就给大家分享一下我的实现方案:&l ...

  10. JAVA程序打包方法-挺好

    https://blog.csdn.net/dj0721/article/details/72462688/