jquery面试题

jquery面试题集锦参考

https://blog.csdn.net/baisixue19870221/article/details/78319670

 https://www.cnblogs.com/chenhongcai/p/5796831.html

问题：你为什么要使用jquery？

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

问题：你使用jquery遇到过哪些问题，你是怎么解决的？

答：这个答案是开发的，看你是否有相关的项目经验。

例前台拿不到值，JSON 可是出现的错误(多了一个空格等)这编译是不会报错的 jquery库与其他库冲突：

1>如果其他库在jquery库之前导入的话

1.我们可以通过jquery.noconflict()将变量的$的控制权过度给其他库

2.自定义快捷键,用一个变量接住jquery.noconflict()

3.通过函数传参

2>如果jquery库在其他库之前导入就直接使用jquery

今天在处理一个数据问题时，发现jQuery.ajax()方法返回的值一直有问题，清除缓存后数据无误，多次测试后发现返回的值都是之前的值，并且一直未执行url(后台为JAVA，设置断点一直未进入)。在网上查找下,发现是未设置type的原因。 如果没设置jQuery.ajax的type="Post"，那么ajax就会默认type="Get"，这就会导致之前数据被缓存起来。加上type="Post"，问题解决！ 

问题：body中的onload()函数和jQuery中的document.ready()有什么区别？

回答：onload()和document.ready()的区别有以下两点：

1、我们可以在页面中使用多个document.ready()，但只能使用一次onload()。

2、document.ready()函数在页面DOM元素加载完以后就会被调用，而onload()函数则要在所有的关联资源（包括图像、音频）加载完毕后才会调用。

问题：jQuery中有哪几种类型的选择器？

回答：从我自己的角度来讲，可以有3种类型的选择器，如下：

1、基本选择器：直接根据id、css类名、元素名返回匹配的dom元素。

2、层次选择器：也叫做路径选择器，可以根据路径层次来选择相应的DOM元素。

3、过滤选择器：在前面的基础上过滤相关条件，得到匹配的dom元素。

问题：请使用jQuery将页面上的所有元素边框设置为2px宽的虚线？

回答：这正是jQuery选择器上场的时候了，代码如下：

<script language="javascript" type="text/javascript">

         $("*").css("border", "2px dotted red"); 

</script>

问题：jQuery中的Delegate()函数有什么作用？

回答：delegate()会在以下两个情况下使用到：

1、如果你有一个父元素，需要给其下的子元素添加事件，这时你可以使用delegate()了，代码如下：

$("ul").delegate("li", "click", function(){

$(this).hide();

});

2、当元素在当前页面中不可用时，可以使用delegate()

问题：怎样用jQuery编码和解码URL？

回答：在jQuery中，我们可以使用以下方法实现URL的编码和解码。

encodeURIComponent(url) and decodeURIComponent(url)

问题：如何用jQuery禁用浏览器的前进后退按钮？

回答：实现代码如下：

<script type="text/javascript" language="javascript">

$(document).ready(function() {

     window.history.forward(1);

     //OR

     window.history.forward(-1);

});

</script>

Jquery选择器： 大概归纳为9种。

(1)基本：

id

element
.class
*
(2)层次选择器：
ancestor descendant
parent > child
prev + next
prev ~ siblings()选取每个匹配元素的所有同辈元素(不包括自己) nextAll(): 选取每个匹配元素之后的所有同辈元素。
(3)基本过滤器选择器
:first
:last
:not
:even
:odd
:eq
:gt
:lt
:header
:animated
(4)内容过滤器选择器
:contains
:empty
:has
:parent
(5)可见性过滤器选择器
:hidden
:visible
(6)属性过滤器选择器
[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
[attrSel1][attrSel2][attrSelN]
(7)子元素过滤器选择器
:nth-child
:first-child
:last-child
:only-child
(8)表单选择器
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
(9)表单过滤器选择器
:enabled
:disabled
:checked
:selected

jQuery绑定事件的四种方式：

jQuery中提供了四种事件监听方式，分别是bind、live、delegate、on，对应的解除监听的函数分别是unbind、die、undelegate、off。

1、bind用法：

（”ul“）.bind('click','li',function(){
})

注意：bind的特点就是会把监听器绑定到目标元素上，有一个绑一个，在页面上的元素不会动态添加的时候使用它没什么问题。但如果列表中动态添加一个列表元素，点击它是没有反应的，必须要再bind一个才行

1、live用法：

(‘#myol li’).live(‘click’,getHtml);
live将监听器绑定到document上，事件的处理需要等待层层冒泡，一直到根节点，才开始执行。优于根节点的子节太多，易导致混乱。已弃用。

3、delegate()用法

$("ul").delegate("li", "click", function(){
　　$(this).hide();
});

3、on()用法:on与delegate差不多但还是有细微的差别，首先type与selector换位置了，其次selector变为了可选项。

$("ul").on("click", "li", function(){
　　$(this).hide();
});

注意：因为其他方法都是内部调用on来完成的，直接使用on可以提高效率，而且你完全可以用on来代替其他三种写法。

 jQuery 中如何将数组转化为 JSON 字符串，然后再转化回来？

/ 通过原生 JSON.stringify/JSON.parse 扩展 jQuery 实现
 $.array2json = function(array) {
    return JSON.stringify(array);
 }

 $.json2array = function(array) {
    // $.parseJSON(array); // 3.0 开始，已过时
    return JSON.parse(array);
 }

 // 调用
 var json = $.array2json(['a', 'b', 'c']);
 var array = $.json2array(json);

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

$('btn').on('mouseover,mouseout',function(){

})

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

针对 jQuery 的优化方法？

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

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

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

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

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

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

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

    答: 好用的。 因为jQuery提供了一些日常开发中夙瑶的快捷操作，例 load，ajax，get，post等等，所以使用jQuery开发ajax将变得极其简单，我们就可以集中精力在业务和用户的体验上，不需要去理会那些繁琐的XMLHttpRequest对象了

 jquery中$.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() 来删除样式，toggle() 来切换样式

简单的讲叙一下jquery是怎么处理事件的，你用过哪些事件？

答: 首先去装载文档，在页面家在完毕后，浏览器会通过javascript 为DOM元素添加事件。

你使用过jquery中的动画吗，是怎样用的？

答:使用过。

hide() 和 show() 同时修改多个样式属性。像高度，宽度，不透明度。 fadeIn() 和fadeOut() fadeTo() 只改变不透明度

slideUp() 和 slideDown() slideToggle() 只改变高度

animate() 属于自定义动画的方法.

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

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

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

答：html()方法 类似于innerHTML属性 可以用来读取或者设置某个元素中的HTML内容

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

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

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

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

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

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

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

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

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

 jQuery是如何处理缓存的？

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

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

2 通过$.get()方法 来获取数据，可以通过设置时间戳来避免缓存。可以在URL后面加上+(+new Date)例 $.get('ajax.xml?'+(+new Date),function () { //内容 }); 3 通过$.ajax 方法来获取数据，只要设置cache:false即可。

选择器中 id，class有什么区别？

答：在网页中 每个id名称只能用一次，class可以允许重复使用

jQuery 能做什么？

答：1 获取页面的元素 

2 修改页面的外观

3 改变页面大的内容

4 响应用户的页面操作

5 为页面添加动态效果

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

7 简化常见的javascript任务

在ajax中data主要有几种方式？

答 ： 三种，html拼接的，json数组，form表单经serialize()序列化的。

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

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

hover()方法用于模拟光标悬停事件。 toggle()方法是连续点击事件。

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

答 : 知道,事件冒泡是从里面的往外面开始触发。在jQuery中提供了stopPropagation()方法可以停止冒泡。

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

答: 可以用 event.preventDefault()或在事件处理函数中返回false，即 return false;

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

a) 答: 插件的好处：对已有的一系列方法或函数的封装，以便在其他地方重新利用，方便后期维护和提高开发效率插件的分类：封装对象方法插件 、封装全局函数插件、选择器插件

b) 注意的地方：

i. 1.插件的文件名推荐命名为jquery.[插件名].js，以免和其他的javaScript库插件混淆

ii. 2.所有的对象方法都应当附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身上

iii. 3.插件应该返回一个jQuery对象，以保证插件的可链式操作

iv. 4.避免在插件内部使用$作为jQuery对象的别名,而应使用完整的jQuery来表示，这样可以避免冲突或使用闭包来避免

v. 5.所有的方法或函数插件，都应当一分好结尾，否则压缩的时候可能出现问题。在插件头部加上分号，这样可以避免他人的不规范代码给插件带来影响

vi. 6.在插件中通过$.extent({})封装全局函数,选择器插件，扩展已有的object对象通过$.fn.extend({})封装对象方法插件