总结分享一些基于jQuery的前端面试（含移动端常见问题）

本篇文章整理总结了一些基于jQuery的前端面试来分享给大家，里面jQuery的常见面试问题，以及移动端常见问题，希望对大家有所帮助！

jQuery前端面试——含移动端常见问题

1、JQuery的源码看过吗？能不能简单概况一下它的实现原理？

    (function( window, undefined ) {
         //用一个函数域包起来，就是所谓的沙箱
         //在这里边var定义的变量，属于这个函数域内的局部变量，避免污染全局
         //把当前沙箱需要的外部变量通过函数参数引入进来
         //只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数
        window.jQuery = window.$ = jQuery;
    })( window );

• jquery将一些原型属性和方法封装在了jquery.prototype中，为了缩短名称，又赋值给了jquery.fn，这是很形象的写法。
• 有一些数组或对象的方法经常能使用到，jQuery将其保存为局部变量以提高访问速度。
• jquery实现的链式调用可以节约代码，所返回的都是同一个对象，可以提高代码效率。
• jquery的优势就是链式操作，隐式迭代

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

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

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

①、jQuery中的$.extend浅拷贝

$.extend(a,b)

②、jQuery中的$.extend深拷贝

$.extend(true,a,b)

5、jquery.extend 与jquery.fn.extend的区别？

①、jQuery.extend(object);

• 它是为jQuery类添加类方法，可以理解为添加静态方法。如：

jQuery.extend({
　　 min: function(a, b) { return a < b ? a : b; },
　　 max: function(a, b) { return a > b ? a : b;
});
jQuery.min(2,3); //  2
jQuery.max(4,5); //  5

• jQuery.extend(target, object1, [objectN])用一个或多个其他对象来扩展一个对象，返回被扩展的对象。

var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);

• 结果：settings == { validate: true, limit: 5, name: “bar” }

②、jQuery.fn.extend(object);

• $.fn是什么?
• $.fn是指jQuery的命名空间，fn上的成员(方法function及属性property)，会对jQuery实例每一个有效。
• 查看jQuery代码，就不难发现。

jQuery.fn = jQuery.prototype = {
　　　 init: function( selector, context ) {//....　
};

• 原来jQuery.fn = jQuery.prototype
• 所以，它是对jQuery.prototype进行扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

③、区别

• jQuery.fn.extend(object);扩展jQuery对象方法
• jQuery.extend扩展jQuery全局方法

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

var _slideFun = [
function() {
$('.one').delay(500).animate({
top: '+=270px'
},500, _takeOne);
},
function() {
$('.two').delay(300).animate({
top: '+=270px'
},500, _takeOne);
}
];
$('#demo').queue('slideList', _slideFun);
var _takeOne = function() {
$('#demo').dequeue('slideList');
};
_takeOne();

7、谈一下Jquery中的bind(),live(),delegate(),on()的区别？

差别：

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

9、针对jQuery性能的优化方法？

• 基于Class的选择性的性能相对于Id选择器开销很大，因为需遍历所有DOM元素。

• 频繁操作的DOM，先缓存起来再操作。用Jquery的链式调用更好。
  比如：

var str=$("a").attr("href");
for (var i = size; i < arr.length; i++) {}

• for 循环每一次循环都查找了数组(arr) 的.length 属性，在开始循环的时候设置一个变量来存储这个数字，可以让循环跑得更快：

for (var i = size, length = arr.length; i < length; i++) {}

10、Jquery与jQuery UI 有啥区别？

1. jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。
2. jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等。
3. jQuery本身注重于后台，没有漂亮的界面，而jQuery UI则补充了前者的不足，他提供了华丽的展示界面，使人更容易接受。既有强大的后台，又有华丽的前台。jQuery UI是jQuery插件，只不过专指由jQuery官方维护的UI方向的插件。

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

①、tap事件

tap，singleTap，doubleTap，longTap

②、Swipe事件

swipe，swipeLeft，swipeRight，swipeUp，swipeDown

12、Zepto的点透问题如何解决？

①、“点透”是什么

②、点透的解决方法：

• 方案一：来得很直接github上有个fastclick可以完美解决

   window.addEventListener( "load", function() {
        FastClick.attach( document.body );
    }, false );

• 方案二：用touchend代替tap事件并阻止掉touchend的默认行为preventDefault()

• 方案三：延迟一定的时间(300ms+)来处理事件

13、移动端最小触控区域是多大？

14、jQuery 的slideUp动画，如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行，该如何处理呢?

15、移动端的点击事件的有延迟，时间是多久，为什么会有？怎么解决这个延时？

16、你从jQuery学到了什么？

17、请指出.get()，[]，eq() 的区别。

18、请指出$ 和$.fn 的区别，或者说出$.fn 的用途。

19、jQuery取到的元素和原生Js取到的元素有什么区别

20、原生JS的window.onload与Jquery的$(document).ready(function(){})有什么不同？如何用原生JS实现Jq的ready方法？

①、window.onload()

②、$(document).ready()

function ready(fn){
if(document.addEventListener) {        //标准浏览器
document.addEventListener('DOMContentLoaded', function() {
//注销事件, 避免反复触发
document.removeEventListener('DOMContentLoaded',arguments.callee, false);
fn();            //执行函数
}, false);
}else if(document.attachEvent) {        //IE
document.attachEvent('onreadystatechange', function() {
if(document.readyState == 'complete') {
document.detachEvent('onreadystatechange', arguments.callee);
fn();        //函数执行
}
});
}
};

（学习视频分享：web前端教程）

以上就是总结分享一些基于jQuery的前端面试（含移动端常见问题）的详细内容，更多请关注靠谱客其它相关文章！

最后

以上就是伶俐鸡翅为你收集整理的总结分享一些基于jQuery的前端面试（含移动端常见问题）的全部内容，希望文章能够帮你解决总结分享一些基于jQuery的前端面试（含移动端常见问题）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。