jQuery面试题

一时失言乱红尘 2024-04-17 05:24 56阅读 0赞

## 前端面试题之–jQuery ##

在我面试的过程中，关于jQuery的技术问题涉及的比较少，所以我也是简单整理了一下，希望对大家有所帮助

Jquery是什么？

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。

**jQuery 能做什么？**

1 获取页面的元素

2 修改页面的外观

3 改变页面大的内容

4 响应用户的页面操作

5 为页面添加动态效果

6 无需刷新页面，即可以从服务器获取信息

7 简化常见的javascript任务

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

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

jQuery的核心特性可以总结为：  
①具有独特的链式语法和短小清晰的多功能接口；  
②具有高效灵活的css选择器，并且可对CSS选择器进行扩展；  
③拥有便捷的插件扩展机制和丰富的插件。

Javascript与jQuery有什么区别？

jquery 就对javascript的一个扩展，封装，就是让javascript更好用，更简单。

在jQuery中如何注册事件？

使用bind()方法注册事件，但通常我们使用与事件同名的方法注册更方便，如：click()、hover()等。

如何获取Html内容？如何获取文本内容？如何获取属性值？如何获取input值？如何创建新的节点？

可以使用html()获取html内容。  
使用text()获取文本内容。  
使用attr()可以获取属性值，使用css()可以获取样式属性值。  
通过val()便可以获取input的值  
把节点元素名加上<、>作为参数调用jQuery方法便可创建新节点,如：jQuery(“

”)。

如何向页面插入节点？

调用append方法，将新节点作为参数。

ajax、get、post、ajaxSetup、getJSON各有何用途？

①ajax：jQuery对ajax执行的核心方法。其它ajax方法都是使用该方法实现。  
②get：专门用于发送get请求的便捷方法。  
③post：专门用于发送post请求的便捷方法。  
④ajaxSetup：设置调用ajax方法时的默认值。  
⑤getJSON：专门用于向服务器请求json格式数据的便捷方法。

如何使用从服务器获取一个复杂数据（对象）？

①通常会把这个数据转换为通用的数据交换格式，如xml或json。由于xml解析比较麻烦，所以使用json比较多。  
②在jQuery中有专门的获取服务器json数据的方法，getJSON()，在回调中，jQuery会自动将json转换为javascript对象。

Jquery与jQuery UI 有啥区别？

jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。

jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。 提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等。

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

(1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。

(2)、$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数。

**jquery中的选择器**

(1)、基本选择器：\#id，class,element,\*;

(2)、层次选择器：parent > child，prev + next ，prev ~ siblings

(3)、基本过滤器选择器：:first，:last ，:not ，:even ，:odd ，:eq ，:gt ，:lt

(4)、内容过滤器选择器： :contains ，:empty ，:has ，:parent

(5)、可见性过滤器选择器：:hidden ，:visible

(6)、属性过滤器选择器：\[attribute\] ，\[attribute=value\] ，\[attribute!=value\] ，\[attribute^=value\] ，\[attribute$=value\] ，\[attribute\*=value\]

(7)、子元素过滤器选择器：:nth-child ，:first-child ，:last-child ，:only-child

(8)、表单选择器： :input ，:text ，:password ，:radio ，:checkbox ，:submit 等；

(9)、表单过滤器选择器：:enabled ，:disabled ，:checked ，:selected

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

jQuery选择器支持CSS里的选择器，

jQuery选择器可用来添加样式和添加相应的行为

CSS 中的选择器是只能添加相应的样式

**jquery中的选择器有什么优势？**

简单的写法 $(‘ID’) 来代替 document.getElementById()函数

支持CSS1 到CSS3 选择器

完善的处理机制(就算写错了id也不会报错)

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

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

还可以通过get\[index\]去得到相应的DOM对象。

DOM对象转jQuery对象:$(DOM对象)

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

如果是一些常规的ajax程序的话，使用load(), . g e t ( ) , .get(), .get(),.post(),就可以搞定了，一般我会使用的是 . 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 ( 请 求 完 成 后 处 理 ) 回 调 函 数 等 ， 这 个 时 候 我 会 使 用 .post() 方法。如果需要设定beforeSend(提交前回调函数),error(失败后处理),success(成功后处理)及complete(请求完成后处理)回调函数等，这个时候我会使用 .post()方法。如果需要设定beforeSend(提交前回调函数),error(失败后处理),success(成功后处理)及complete(请求完成后处理)回调函数等，这个时候我会使用.ajax()

###  ###

jquery中 . g e t ( ) 提 交 和 .get()提交和 .get()提交和.post()提交有区别吗？

1 $.get() 方法使用GET方法来进行异步请求的。

$.post() 方法使用POST方法来进行异步请求的。

2 get请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器的，这种传递是对用户不可见的。

3 get方式传输的数据大小不能超过2KB 而POST要大的多

4 GET 方式请求的数据会被浏览器缓存起来，因此有安全问题。

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

load方法一般在载入远程HTML代码并插入到DOM中的时候用

通常用来从Web服务器上获取静态的数据文件。

如果要传递参数的话，可以使用$.get() 或 $.post()

**在jquery中你是如何去操作样式的？**

addClass() 来追加样式

removeClass() 来删除样式

你在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()把匹配元素在对象前添加

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

1.wrap()把匹配的元素包裹起来

2.wrapAll()把所有匹配的对象用单个元素包裹

3.wrapInner()将每一个元素的子内容包裹

需要在文档中插入额外的结构化标记的时候可以使用这些包裹的方法，应为它不会帛画原始文档的语义

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

addClass() 方法，attr() 方法

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

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

removeAttr() 方法来删除元素属性

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

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

Text() 类似于innerText属性 可以用来读取或设置某个元素中文本内容。

val() 可以用来设置和获取元素的值

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

children() 取得匹配元素的子元素集合,只考虑子元素不考虑后代元素 next() 取得匹配元素后面紧邻的同辈元素

prev() 取得匹配元素前面紧邻的同辈元素

siblings() 取得匹配元素前后的所有同辈元素

closest() 取得最近的匹配元素

find() 取得匹配元素中的元素集合 包括子代和后代

25 子元素选择器和后代选择器元素有什么区别？

答:子代元素是找子节点下的所有元素,后代元素是找子节点或子节点的子节点的元素

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

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

jQuery是如何处理缓存的？

答 ：要处理缓存就是禁用缓存.

1 通过$.post() 方法来获取数据，那么默认就是禁用缓存的。

2 通过$.get()方法 来获取数据，可以通过设置时间戳来避免缓存。

可以在URL后面加上+(+new Date)

例 $.get(‘ajax.xml?’+(+new Date),function () \{ //内容 \});

3 通过$.ajax 方法来获取数据，只要设置cache:false即可。

$.getScript()方法 和 $.getJson() 方法有什么区别？

答: 1 $.getScript() 方法可以直接加载.js文件，并且不需要对javascript文件进行处理，javascript文件会自动执行。

2  . g e t J s o n ( ) 是 用 于 加 载 J S O N 文 件 的 ， 用 法 和 .getJson() 是用于加载JSON 文件的 ，用法和 .getJson()是用于加载JSON文件的，用法和.getScript()

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

HTML格式 ,JSON格式,javascript格式,XML格式

1 HTML片段提供外部数据一般来说是最简单的。

2 如果数据需要重用，而且其他应用程序也可能一次受到影响，那么在性能和文件大小方面具有优势的JSON通常是不错的选择。

3 而当远程应用程序未知时，XML则能够为良好的互操作性提供最可靠的保证。

**jQuery中的hover()和toggle()有什么区别？**

hover()和toggle()都是jQuery中两个合成事件。

hover()方法用于模拟光标悬停事件。

toggle()方法是连续点击事件。

**你知道jQuery中的事件冒泡吗，它是怎么执行的，何如来停止冒泡事件**？

知道, 事件冒泡是从里面的往外面开始触发。

在jQuery中提供了stopPropagation()方法可以停止冒泡。

例如 单击超链接后会自动跳转，单击"提交"按钮后表单会提交等，有时候我想阻止这些默认的行为，该怎么办？

可以用 event.preventDefault()

或 在事件处理函数中返回false，即 return false;

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

formData:返回一个数组，可以通过循环调用来校验

jaForm：返回一个jQuery对象，所有需要先转换成dom对象

fieldValue：返回一个数组 beforeSend()

$(this) 和 this 关键字在 jQuery 中有何不同？

$(this) 返回一个 jQuery 对象，你可以对它调用多个 jQuery 方法，比如用 text() 获取文本，用val() 获取值等等。

而 this 代表当前元素，它是 JavaScript 关键词中的一个，表示上下文中的当前 DOM 元素。你不能对它调用 jQuery 方法，直到它被 $() 函数包裹，例如 $(this)。

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

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

### 哪种方式更高效：document.getElementbyId(“myId”) 还是 $("\#myId")？ ###

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

### 如何找到所有 HTML select 标签的选中项？ ###

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

jQuery面试题

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 2021面试题——jQuery面试题总结

相关常见jquery面试题

相关 jQuery面试题总结(简版)

相关 java的jquery面试题_10个最常见的JQuery面试题

相关 jQuery面试题及答案

相关面试题之JavaScript+Jquery

相关 jQuery面试题整理

相关 jquery面试题

相关 jquery面试题

相关 jQuery-事件面试题