前端面试题汇总（jQuery）

前端面试题汇总（jQuery）

1 你觉得jQuery或zepto源码有哪些写的好的地⽅ jquery源码封装在⼀个匿名函数的⾃执⾏环境中，有助于防⽌变量的全局污染，然后通过传⼊window对象参数，可以使window对象作为局部变量使⽤，好处是当jquery中访问window对象的时候，就不⽤将作⽤域链退回到顶层作⽤域了，从⽽可以更快的访问 window对象。同样，传⼊undefined参数，可以缩短查找undefined时的作⽤域链

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

jquery将⼀些原型属性和⽅法封装在了jquery.prototype中，为了缩短名称，⼜赋值给了jquery.fn，这是很形象的写法 有⼀些数组或对象的⽅法经常能使⽤到，jQuery将其保存为局部变量以提⾼访问速度jquery实现的链式调⽤可以节约代码，所返回的都是同⼀个对象，可以提⾼代码效率
2jQuery的实现原理
(function(window, undefined) {})(window);
jQuery利⽤JS 函数作⽤域的特性，采⽤⽴即调⽤表达式包裹了⾃身，解决命名空间
和变量污染问题
window.jQuery = window.$ = jQuery;
在闭包当中将jQuery和$绑定到 window上，从⽽将 jQuery和$暴露为全局变量
3 jQuery.fn的 init⽅法返回的 this 指的是什么对象jQuery.fn的 init⽅法返回的this 就是jQuery对象⽤户使⽤jQuery()或$()即可初始化jQuery对象，不需要动态的去调⽤init⽅法
4 jQuery.extend与jQuery.fn.extend 的区别
$.fn.extend()和$.extend() 是jQuery为扩展插件提拱了两个⽅法
$.extend(object) ; // 为jQuery添加“静态⽅法”（⼯具⽅法）

$.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; } }); $.min(2,3); // 2
$.max(4,5); // 5
$.extend([true,] targetObject, object1[, object2]); // 对targt对象进⾏扩展
var settings = {validate:false, limit:5};
var options = {validate:true, name:"bar"}; $.extend(settings, options); // 注意：不⽀持第⼀个参数传 false
// settings == {validate:true, limit:5, name:"bar"}
$.fn.extend(json) ; // 为jQuery添加“成员函数”（实例⽅法）
$.fn.extend({
 alertValue: function() {
 $(this).click(function(){
 alert($(this).val());
 });
  } }); $("#email").alertValue();

5 jQuery 的属性拷⻉(extend)的实现原理是什么，如何实现深拷⻉
浅拷⻉（只复制⼀份原始对象的引⽤）var newObject = $.extend({}, oldObject);
深拷⻉（对原始对象属性所引⽤的对象进⾏进⾏递归拷⻉） var newObject =$.extend(true, {}, oldObject);
6jQuery的队列是如何实现的
jQuery 核⼼中有⼀组队列控制⽅法，queue()/dequeue()/clearQueue()三个⽅法组 成。主要应⽤于animate() ， ajax ，其他要按时间顺序执⾏的事件中

var func1 = function(){alert('事件1');}
var func2 = function(){alert('事件2');}
var func3 = function(){alert('事件3');}
var func4 = function(){alert('事件4');}
// ⼊栈队列事件
$('#box').queue("queue1", func1);
 // push func1 to queue1
$('#box').queue("queue1", func2);
 // push func2 to queue1
// 替换队列事件
$('#box').queue("queue1", []);
 // delete queue1 with empty array
$('#box').queue("queue1", [func3, func4]);
 // replace queue1
// 获取队列事件（返回⼀个函数数组） $('#box').queue("queue1");
 // [func3(), func4()]
// 出栈队列事件并执⾏ $('#box').dequeue("queue1"); 
// return func3 and do func3
$('#box').dequeue("queue1"); 
// return func4 and do func4
// 清空整个队列 $('#box').clearQueue("queue1");
 // delete queue1 with clearQueue

7 jQuery中的bind(), live(), delegate(), on()的区别
bind()直接绑定在⽬标元素上
live()通过冒泡传播事件，默认document上，⽀持动态数据
delegate()更精确的⼩范围使⽤事件代理，性能优于 live
on()是最新的 1.9版本整合了之前的三种⽅式的新事件绑定机制 8 是否知道⾃定义事件
事件即“发布/订阅”模式，⾃定义事件即“消息发布”，事件的监听即“订阅订阅” JS 原⽣⽀持⾃定义事件，示例：

document.createEvent(type); // 创建事件
 event.initEvent(eventType, canBubble, prevent); // 初始化事件
 target.addEventListener('dataavailable', handler, false); // 监听事件
 target.dispatchEvent(e); // 触发事件

jQuery ⾥的 fire函数⽤于调⽤jQuery⾃定义事件列表中的事件
9jQuery 通过哪个⽅法和 Sizzle选择器结合的
Sizzle选择器采取Right To Left的匹配模式，先搜寻所有匹配标签，再判断它的⽗节点
jQuery通过$(selecter).find(selecter); 和 Sizzle 选择器结合
10 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);

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

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

12 针对jQuery 的优化⽅法
缓存频繁操作DOM对象
尽量使⽤id选择器代替class选择器
总是从#id选择器来继承
尽量使⽤链式操作
使⽤时间委托 on 绑定事件
采⽤ jQuery 的内部函数 data() 来存储数据
使⽤最新版本的jQuery
13 jQuery 的 slideUp动画，当⿏标快速连续触发, 动画会滞后反复执⾏，该如何处理呢？
在触发元素上的事件设置为延迟处理：使⽤JS原⽣setTimeout⽅法 在触发元素的事件时预先停⽌所有的动画，再执⾏相应的动画事件：
$('.tab').stop().slideUp();

14 jQuery UI如何⾃定义组件
通过向 $.widget()传递组件名称和⼀个原型对象来完成
$.widget("ns.widgetName", [baseWidget], widgetPrototype);
15 jQuery与jQuery UI、jQuery Mobile 区别
jQuery是 JS库，兼容各种PC浏览器，主要⽤作更⽅便地处理 DOM 、事件、动画、
AJAX
jQuery UI 是建⽴在jQuery库上的⼀组⽤户界⾯交互、特效、⼩部件及主题
jQuery Mobile以 jQuery为基础，⽤于创建“移动Web应⽤”的框架
16 jQuery 和 Zepto 的区别？ 各⾃的使⽤场景
jQuery主要⽬标是PC的⽹⻚中，兼容全部主流浏览器。在移动设备⽅⾯，单独推出 jQuery Mobile
Zepto从⼀开始就定 位移动设备，相对更轻量级。它的 API基本兼容 jQuery，但对PC浏 览器兼容不理想
17jQuery对象的特点
只有JQuery 对象才能使⽤ JQuery⽅法
JQuery 对象是⼀个数组对象

每天一句中文式外语

俄语

 1、Скажите，где гостиница？
 [斯嘎热 rei接，各界 嘎斯吉尼嚓]？
请问，哪里有旅馆？
 2、Как пройти (проехать) к гостинице？
  [嘎可 普拉一极[普拉也哈其]可 嘎斯吉尼才]？
到旅馆怎么走（乘车去）？
3、У вас есть свободные номера？
 [乌 瓦斯 也丝其 死瓦波特内也 拿灭辣]?
 你们这儿有空房吗?
 4、Скажите, пожалуйста, где здесь можно поесть (позавтракть，пообедать，поужинать)？
  [斯嘎热 rei接，各界 日接西 毛日那 拔 也丝其
  [把萨夫特拉嘎其，把啊别打气，把乌热那其]]？
请问，这里什么地方可以吃饭
（吃早饭,吃午饭,吃晚饭）？
5、Скажите，где ресторан (кофе、столовая)？
 [斯嘎热接，各界 列斯打拉[咖啡、斯打罗瓦呀]]？
请问，餐馆（咖啡厅、小食部）在哪里？
6、Девушка! (офциант!) 
[接乌什嘎,(阿非册阿特)]！
服务员！
7、Что вам нужно(надо)?( Что вы хотите?)
[师多 瓦母 怒日那[拿打][师多 瓦母 哈基结]？
你要什么？
8、Я возьму чай(кофе).
 [丫 瓦日木 恰一[果飞]]。
我要茶(咖啡)。 
9、Скольско с меня?
 [丝果里嘎 丝 灭尼阿]
付多少钱?