前端面试题汇总(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、Скольско с меня?[丝果里嘎 丝 灭尼阿]
付多少钱?
前端面试题汇总(jQuery)相关推荐
- 前端面试题汇总(JS 基础篇)
前端面试题汇总(JS 基础篇)** 1.javascript 的 typeof 返回哪些数据类型** object number function boolean underfind stringty ...
- 前端面试题汇总(JavaScript面试纯干货)
前端面试题汇总(JavaScript面试纯干货) 1 闭包 闭包就是能够读取其他函数内部变量的函数 闭包是指有权访问另⼀个函数作⽤域中变量的函数,创建闭包的最常⻅的⽅式就是在⼀个函数内创建另⼀个函数, ...
- 2019前端面试题汇总
面试题 js + 框架 闭包的作用 函数内部变量外用 || 在一个函数内部嵌套一层或多层函数 可以将内部变量外用 副作用: 违背垃圾回收机制 ie下回造成内存泄漏 解决副作用方案: 变量使用结束后删除 ...
- 前端面试题汇总(css基础篇)
前端面试题汇总(css基础篇) 1 css sprite是什么,有什么优缺点 概念:将多个⼩图⽚拼接到⼀个图⽚中. 通过 background-position 和元素尺⼨调节需 要显示的背景图案. ...
- JavaScript中的load事件的作用_史上最全的web前端面试题汇总及答案JavaScript之二(二)...
作者:樱桃小丸子儿 链接:https://www.jianshu.com/p/abadcc84e2a4 JavaScript JS的基本数据类型 number,string,boolean,objec ...
- javascript array添加图片_史上最全的web前端面试题汇总及答案JavaScript之二(二)...
作者:樱桃小丸子儿 链接:https://www.jianshu.com/p/abadcc84e2a4 JavaScript JS的基本数据类型 number,string,boolean,objec ...
- 2018 大厂高级前端面试题汇总
(给前端大全加星标,提升前端技能) 作者:木易杨 本人于7-8月开始准备面试,过五关斩六将,最终抱得网易归,深深感受到高级前端面试的套路.以下是自己整理的面试题汇总,不敢藏私,统统贡献出来. 面试的公 ...
- 2022 最新前端面试题汇总
VUE面试题 1.v-show 和 v-if的区别,v-show 和 keep-alive 的区别 答案: v-show是 CSS display 控制显示和隐藏 v-if 是组件真正的渲染和销毁,而 ...
- h52206前端面试题汇总(134题)
前端面试题(2022最新) 1.什么是防抖和节流 有什么区别 答: 函数节流是:在固定的时间内触发事件,每隔n秒触发一次. 函数防抖是:当你频繁触发后,n秒内只执行一次. 区别: 防抖和节流本质是不一 ...
最新文章
- AI从业者需要应用的10种深度学习方法
- TCP/IP总结(4)TCP 之数据包格式
- 腾讯微博发表带图片的微博
- Hills And Valleys CodeForces - 1467B
- crawler4j_迷你搜索引擎–使用Neo4j,Crawler4j,Graphstream和Encog的基础知识
- java 无法找到ant_Java-Ant需要tools.jar并且无法找到我
- pdfjs viewer 开发小结
- MongoDB学习之简介、下载、安装
- html5杂音,HTML5柏林噪音算法实现的墨汁浸染背景图片过渡动画特效
- 计算机设备灯光有哪些,多媒体教室主要有哪些设备?
- 高等数学-学习笔记-闻彬
- Unity3D学习之旅7-RPG游戏-更新与踩坑实录
- java field 赋值_Java Field.set()向对象的这个Field属性设置新值value
- vue3和vue2不同点总结
- 树莓派控制3631AS数码管 驱动 python程序 共阴数码管|徐奥雯编写|XUAOWEN
- nodejs+vue+elementui摄影作品图片展示交流网站express
- LeetCode琅琊榜第九层-加油站问题(图表法)
- 系统业务逻辑书籍_企业应该如何建立自己的分销系统和分销团队
- VBS 常用总汇 (http://blog.csdn.net/sgear/article/details/1380223)
- XDP技术——linux网络处理的高速公路