jQuery面试题整理

￡神魔★判官ぃ 2022-05-19 06:27 382阅读 0赞

### jQuery扩展方法 ###

1、类方法（$.extend()）

2、对象方法($.fn.extend())

<body>
        <input type="text">
        <script> $.fn.extend({ getMax:function(a,b){ var result=a>b?a:b; console.log(result); } }); $("input").getMax(1,2); //调用时要$(标签名).函数名(); </script>
    </body>

注意：一般情况下，jQuery的扩展方法写在自执行匿名函数中（原因：在js中是以函数为作用域的，在函数中写可以避免自己定义的函数或者变量与外部冲突）

--------------------

### 为什么使用jQuery ###

因为jQuery是轻量级的框架，它有强大的选择器，出色的DOM操作的封装，有可靠的事件处理机制，完善的ajax(它的ajax封装的非常的好，不需要考虑复杂浏览器的兼容性和XMLHttpRequest对象的创建和使用的问题) ,出色的浏览器的兼容性,而且支持链式操作，隐式迭代;行为层和结构层的分离，还支持丰富的插件，jquery的文档也非常的丰富。

--------------------

### 你知道jquery中的选择器吗，请讲一下有哪些选择器？ ###

选择器大致分为:基本选择器，层次选择器，过滤选择器，表单选择器

--------------------

### jquery中的选择器 和 css中的选择器有区别吗？ ###

jQuery选择器支持CSS里的选择器，jQuery选择器可用来添加样式和添加相应的行为，CSS 中的选择器是只能添加相应的样式。

--------------------

### jquery对象和dom对象是怎样转换的？ ###

jquery转DOM对象:jQuery 对象是一个数组对象，可以通过\[index\]的丰富得到相应的DOM对象，还可以通过get\[index\]去得到相应的DOM对象；DOM对象转jQuery对象:$(DOM对象)

--------------------

### 你是如何使用jquery中的ajax的？ ###

如果是一些常规的ajax程序的话，使用load(),.get(),  . g e t ( ) , .post(),就可以搞定了，一般我会使用的是.post()方法。如果需要设定beforeSend(提交前回调函数),error(失败后处理),success(成功后处理)及complete(请求完成后处理)回调函数等，这个时候我会使用  . p o s t ( ) 方 法 。 如 果 需 要 设 定 b e f o r e S e n d ( 提 交 前 回 调 函 数 ) , e r r o r ( 失 败 后 处 理 ) , s u c c e s s ( 成 功 后 处 理 ) 及 c o m p l e t e ( 请 求 完 成 后 处 理 ) 回 调 函 数 等 ， 这 个 时 候 我 会 使 用 .ajax()。

--------------------

### 你觉得beforeSend方法有什么用？ ###

发送请求前可以修改XMLHttpRequest对象的函数，在beforeSend中，如果返回false可以取消本次的Ajax请求。XMLHttpRequest对象是唯一的参数，所以在这个方法里可以做验证

--------------------

### 你觉得jquery中的ajax好用吗，为什么？ ###

好用的。因为jQuery提供了一些日常开发中夙瑶的快捷操作，例 load，ajax，get，post等等，所以使用jQuery开发ajax将变得极其简单，我们就可以集中精力在业务和用户的体验上，不需要去理会那些繁琐的XMLHttpRequest对象了。ajax() 方法更强大，更具可配置性, 让你可以指定等待多久，以及如何处理错误。

--------------------

### jquery中的load方法一般怎么用的？ ###

load方法一般在载入远程HTML代码并插入到DOM中的时候用，通常用来从Web服务器上获取静态的数据文件。如果要传递参数的话，可以使用.get()或  . g e t ( ) 或 .post()

--------------------

### 你在ajax中使用过JSON吗，你是如何用的？ ###

使用过，在.getJSON()方法的时候就是，因为  . g e t J S O N ( ) 方 法 的 时 候 就 是 ， 因 为 .getJSON() 就是用于加载JSON文件的

--------------------

### 你在jquery中使用过哪些插入节点的方法，它们的区别是什么？ ###

答:append(),appendTo(),prepend(),prependTo(),after(),insertAfter() before(),insertBefore()  
内添加  
1.append在文档内添加元素  
2.appendTo()把匹配的元素添加到对象里  
3.prepend()在元素前添加  
4.prependTo()把匹配的元素添加到对象前  
外添加  
1.after()在元素之后添加  
2.before()在元素之前添加  
3.insertAfter()把匹配元素在对象后添加  
4.insertBefore()把匹配元素在对象前添加

--------------------

### 你使用过包裹节点的方法吗，包裹节点有方法有什么好处？ ###

wrap()把匹配的元素包裹起来  
wrapAll()把所有匹配的对象用单个元素包裹  
wrapInner()将每一个元素的子内容包裹  
需要在文档中插入额外的结构化标记的时候可以使用这些包裹的方法，应为它不会帛画原始文档的语义

--------------------

### jquery中如何来获取或和设置属性？ ###

jQuery中可以用attr()方法来获取和设置元素属性  
removeAttr() 方法来删除元素属性

--------------------

### 如何来设置和获取HTML 和文本的值？ ###

html()方法 类似于innerHTML属性 可以用来读取或者设置某个元素中的HTML内容注意：html() 可以用于xhtml文档，不能用于xml文档  
text() 类似于innerText属性 可以用来读取或设置某个元素中文本内容。  
val() 可以用来设置和获取元素的值

--------------------

### 你jquery中有哪些方法可以遍历节点？ ###

children() 取得匹配元素的子元素集合,只考虑子元素不考虑后代元素  
next() 取得匹配元素后面紧邻的同辈元素  
prev() 取得匹配元素前面紧邻的同辈元素  
siblings() 取得匹配元素前后的所有同辈元素  
closest() 取得最近的匹配元素  
find() 取得匹配元素中的元素集合 包括子代和后代

--------------------

### 在jquery中可以替换节点吗？ ###

可以 在jQuery中有两者替换节点的方式replaceWith() 和 replaceAll() 例如：在

hao are you

替换成 **I am fine $(‘p’).replaceWith(‘I am fine‘);  
replaceAll 与replaceWith的用法前后调换一下即可。**

--------------------

### siblings() 方法 和 $(‘prev~div’)选择器是一样的嘛？ ###

$(‘prev~div’) 只能选择’\#prev’元素后面的同辈

元素，而siblings()方法与前后的文职无关，只要是同辈节点就都能匹配。

--------------------

### 有哪些查询节点的选择器？ ###

:first 查询第一个， :last 查询最后一个，  
:odd查询奇数但是索引从0开始 :even 查询偶数，  
:eq(index)查询相等的 , :gt(index)查询大于index的 ,  
:lt查询小于index :header 选取所有的标题等

--------------------

### nextAll()能替代$(‘prev~siblindgs’)选择器吗？ ###

能。使用nextAll() 和使用$(‘prev~siblindgs’) 是一样的

--------------------

### jQuery中有几种方法可以来设置和获取样式 ###

addClass() 方法，attr() 方法

--------------------

### $(document).ready()方法和window.onload有什么区别？ ###

答: 两个方法有相似的功能，但是在实行时机方面是有区别的。  
1 window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。  
2 $(document).ready() 方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数。

--------------------

### jQuery是如何处理缓存的？ ###

答 ：要处理缓存就是禁用缓存.  
1 通过.post()方法来获取数据，那么默认就是禁用缓存的。2通过  . p o s t ( ) 方 法 来 获 取 数 据 ， 那 么 默 认 就 是 禁 用 缓 存 的 。 2 通 过 .get()方法 来获取数据，可以通过设置时间戳来避免缓存。  
可以在URL后面加上+(+new Date)  
例 .get(‘ajax.xml?′\+(\+newDate),function()//内容);3通过  . g e t ( ‘ a j a x . x m l ? ′ + ( + n e w D a t e ) , f u n c t i o n ( ) / / 内 容 ) ; 3 通 过 .ajax 方法来获取数据，只要设置cache:false即可。

--------------------

.getScript()方法和  . g e t S c r i p t ( ) 方 法 和 .getJson() 方法有什么区别？  
1 .getScript()方法可以直接加载.js文件，并且不需要对javascript文件进行处理，javascript文件会自动执行。2  . g e t S c r i p t ( ) 方 法 可 以 直 接 加 载 . j s 文 件 ， 并 且 不 需 要 对 j a v a s c r i p t 文 件 进 行 处 理 ， j a v a s c r i p t 文 件 会 自 动 执 行 。 2 .getJson() 是用于加载JSON 文件的

--------------------

### 你使用过哪些数据格式，它们各有什么特点？ ###

1 HTML片段提供外部数据一般来说是最简单的。  
2 如果数据需要重用，而且其他应用程序也可能一次受到影响，那么在性能和文件大小方面具有优势的JSON通常是不错的选择。  
3 而当远程应用程序未知时，XML则能够为良好的互操作性提供最可靠的保证。

--------------------

### jQuery 能做什么？ ###

1 获取页面的元素  
2 修改页面的外观  
3 改变页面大的内容  
4 响应用户的页面操作  
5 为页面添加动态效果  
6 无需刷新页面，即可以从服务器获取信息  
7 简化常见的javascript任务

--------------------

### jquery表单提交前有几种校验方法？分别为？？ ###

formData:返回一个数组，可以通过循环调用来校验  
jaForm：返回一个jQuery对象，所有需要先转换成dom对象  
fieldValue：返回一个数组 beforeSend()

--------------------

### 在jquery中你有没有编写过插件，插件有什么好处？你编写过那些插件？它应该注意那些？ ###

插件的好处：对已有的一系列方法或函数的封装，以便在其他地方重新利用，方便后期维护和提高开发效率  
插件的分类：封装对象方法插件 、封装全局函数插件  
选择器插件注意的地方：  
1.插件的文件名推荐命名为jquery.\[插件名\].js，以免和其他的javaScript库插件混  
2.所有的对象方法都应当附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身上  
3.插件应该返回一个jQuery对象，以保证插件的可链式操作  
4.避免在插件内部使用作为jQuery对象的别名,而应使用完整的jQuery来表示，这样可以避免冲突或使用闭包来避免5.所有的方法或函数插件，都应当一分号结尾，否则压缩的时候可能出现问题。在插件头部加上分号，这样可以避免他人的不规范代码给插件带来影响6.在插件中通过  作 为 j Q u e r y 对 象 的 别 名 , 而 应 使 用 完 整 的 j Q u e r y 来 表 示 ， 这 样 可 以 避 免 冲 突 或 使 用 闭 包 来 避 免 5. 所 有 的 方 法 或 函 数 插 件 ， 都 应 当 一 分 号 结 尾 ， 否 则 压 缩 的 时 候 可 能 出 现 问 题 。 在 插 件 头 部 加 上 分 号 ， 这 样 可 以 避 免 他 人 的 不 规 范 代 码 给 插 件 带 来 影 响 6. 在 插 件 中 通 过 .extent(\{\})封装全局函数,选择器插件，扩展已有的object对象通过$.fn.extend(\{\})封装对象方法插件

--------------------

### Jquery与jQuery UI 有啥区别？ ###

*jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。
    *jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件，提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等

--------------------

### jquery 中如何将数组转化为json字符串，然后再转化回来？ ###

jQuery中没有提供这个功能，所以你需要先编写两个jQuery的扩展：  
.fn.stringifyArray=function(array)returnJSON.stringify(array)  . f n . s t r i n g i f y A r r a y = f u n c t i o n ( a r r a y ) r e t u r n J S O N . s t r i n g i f y ( a r r a y ) .fn.parseArray = function(array) \{  
return JSON.parse(array)  
\}  
然后调用：  
$(“”).stringifyArray(array)

--------------------

### jQuery 库中的 $() 是什么？ ###

()函数是jQuery()函数的别称。  ( ) 函 数 是 j Q u e r y ( ) 函 数 的 别 称 。 () 函数用于将任何对象包裹成 jQuery 对象，接着就允许调用定义在 jQuery 对象上的多个不同方法。你甚至可以将一个选择器字符串传入 $() 函数，它会返回一个包含所有匹配的 DOM 元素数组的 jQuery 对象。

--------------------

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

ready() 函数用于在文档进入ready状态时执行代码。当DOM 完全加载（例如HTML被完全解析DOM树构建完成时），jQuery允许你执行代码。使用$(document).ready()的最大好处在于它适用于所有浏览器，jQuery帮你解决了跨浏览器的难题。

--------------------

### 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 事件要更好些。

--------------------

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

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

--------------------

### 你觉得jQuery或zepto源码有哪些写的好的地方？ ###

jquery源码封装在一个匿名函数的自执行环境中，有助于防止变量的全局污染，然后通过传入window对象参数，可以使window对象作为局部变量使用，好处是当jquery中访问window对象的时候，就不用将作用域链退回到顶层作用域了，从而可以更快的访问window对象。同样，传入undefined参数，可以缩短查找undefined时的作用域链；jquery将一些原型属性和方法封装在了jquery.prototype中，为了缩短名称，又赋值给了jquery.fn，这是很形象的写法；有一些数组或对象的方法经常能使用到，jQuery将其保存为局部变量以提高访问速度；jquery实现的链式调用可以节约代码，所返回的都是同一个对象，可以提高代码效率。

--------------------

### jQuery 的实现原理？ ###

(function(window, undefined) {})(window);

jQuery 利用 JS 函数作用域的特性，采用立即调用表达式包裹了自身，解决命名空间和变量污染问题。

window.jQuery = window.$ = jQuery;

在闭包当中将 jQuery 和 绑定到window上，从而将jQuery和  绑 定 到 w i n d o w 上 ， 从 而 将 j Q u e r y 和  暴露为全局变量。

--------------------

### jQuery.fn 的 init 方法返回的 this 指的是什么对象？ 为什么要返回 this？ ###

jQuery.fn 的 init 方法 返回的 this 就是 jQuery 对象  
用户使用 jQuery() 或 $() 即可初始化 jQuery 对象，不需要动态的去调用 init 方法

--------------------

### jQuery.extend 与 jQuery.fn.extend 的区别？ ###

`$.fn.extend()` 和 `$.extend()` 是 jQuery 为扩展插件提拱的两个方法：

$.extend(object); // 为jQuery添加“静态方法”（工具方法）；
    $.fn.extend(json); // 为jQuery添加“成员函数”（实例方法）。
    $.extend(object); // 为jQuery添加“静态方法”（工具方法）；
    $.fn.extend(json); // 为jQuery添加“成员函数”（实例方法）。
    $.extend([true,] targetObject, object1[, object2]); // 对target对象进行扩展
    
    var settings = {validate:false, limit:5};
    var options = {validate:true, name:"bar"};
    $.extend(settings, options);  // 注意：不支持第一个参数传 false
    // settings == {validate:true, limit:5, name:"bar"}

--------------------

### jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？ ###

浅拷贝（只复制一份原始对象的引用） `var newObject = $.extend({}, oldObject);`  
深拷贝（对原始对象属性所引用的对象进行进行递归拷贝） `var newObject = $.extend(true, {}, oldObject);`

--------------------

### jQuery 的队列是如何实现的？队列可以用在哪些地方？ ###

jQuery 核心中有一组队列控制方法，由 queue()/dequeue()/clearQueue() 三个方法组成。主要应用于 animate()，ajax，其他要按时间顺序执行的事件中。

--------------------

### jQuery 中的 bind(), live(), delegate(), on()的区别？ ###

bind 直接绑定在目标元素上  
live 通过冒泡传播事件，默认document上，支持动态数据  
delegate 更精确的小范围使用事件代理，性能优于 live  
on 是最新的1.9版本整合了之前的三种方式的新事件绑定机制

--------------------

### jQuery 一个对象可以同时绑定多个事件，这是如何实现的？ ###

$("#btn").on("mouseover mouseout", func);
      $("#btn").on({
          mouseover: func1,
          mouseout: func2,
          click: func3
      });

--------------------

### 针对 jQuery 的优化方法？ ###

缓存频繁操作DOM对象  
尽量使用id选择器代替class选择器  
总是从\#id选择器来继承  
尽量使用链式操作  
使用时间委托 on 绑定事件  
采用jQuery的内部函数data()来存储数据  
使用最新版本的 jQuery

--------------------

### jQuery 的 slideUp 动画，当鼠标快速连续触发, 动画会滞后反复执行，该如何处理呢? ###

在触发元素上的事件设置为延迟处理：使用 JS 原生 setTimeout 方法  
在触发元素的事件时预先停止所有的动画，再执行相应的动画事件：$(‘.tab’).stop().slideUp();

--------------------

### jQuery 与 jQuery UI、jQuery Mobile 区别？ ###

jQuery 是 JS 库，兼容各种PC浏览器，主要用作更方便地处理 DOM、事件、动画、AJAX  
jQuery UI 是建立在 jQuery 库上的一组用户界面交互、特效、小部件及主题  
jQuery Mobile 以 jQuery 为基础，用于创建“移动Web应用”的框架

--------------------

### jQuery 和 Zepto 的区别？ 各自的使用场景？ ###

jQuery 主要目标是PC的网页中，兼容全部主流浏览器。在移动设备方面，单独推出 jQuery Mobile  
Zepto 从一开始就定位移动设备，相对更轻量级。它的 API 基本兼容 jQuery，但对PC浏览器兼容不理想