所属分类：web前端开发
相关推荐：2022年大前端面试题汇总（收藏）
jQuery前端面试——含移动端常见问题
jquery源码封装在一个匿名函数的自执行环境中，有助于防止变量的全局污染，然后通过传入window对象参数，可以使window对象作为局部变量使用，好处是当jquery中访问window对象的时候，就不用将作用域链退回到顶层作用域了，从而可以更快的访问window对象。同样，传入undefined参数，可以缩短查找undefined时的作用域链。【推荐学习：jQuery视频教程】
微博登录
QQ登录 (function( window, undefined ) {
//用一个函数域包起来，就是所谓的沙箱
//在这里边var定义的变量，属于这个函数域内的局部变量，避免污染全局
//把当前沙箱需要的外部变量通过函数参数引入进来
//只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数
window.jQuery = window.$ = jQuery;
})( window );返回的this指的就是当前操作后的jquery对象，为了实现jquery的链式操作
使用jquery全局方法$.parseJSON这个方法
jQuery中的$.extend浅拷贝，拷贝对象A时，对象B将拷贝A的所有字段，如果字段是内存地址，B将拷贝地址，若果字段是基元类型，B将复制其值。它的缺点是如果你改变了对象B所指向的内存地址，你同时也改变了对象A指向这个地址的字段。
$.extend(a,b)
jQuery中的$.extend深拷贝，这种方式会完全拷贝所有数据，优点是B与A不会相互依赖（A,B完全脱离关联），缺点是拷贝的速度更慢，代价更大。
$.extend(true,a,b)
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); // 5jQuery.extend(target, object1, [objectN])用一个或多个其他对象来扩展一个对象，返回被扩展的对象。var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {//....
};jQuery.fn = jQuery.prototypejQuery核心中, 有一组队列控制方法, 这组方法由queue()/dequeue()/clearQueue()三个方法组成, 它对需要连续按序执行的函数的控制可以说是简明自如, 主要应用于animate ()方法, ajax以及其他要按时间顺序执行的事件中.
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();jquery中bind(),live(),delegate()都是基于on实现的
| 方法 | 说明 |
|---|---|
on | 是封装了一个兼容的事件绑定方法，在选择元素上绑定一个或多个事件的事件处理函数 |
bind(type,[data],fn) | 为每个匹配元素的特定事件绑定事件处理函数 |
live(type,[data],fn) | 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的 |
delegate(selector,[type],[data],fn) | 指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数 |
差别：
.bind()是直接绑定在元素上
| 方法 | 说明 |
|---|---|
.bind() | 是直接绑定在元素上 |
.live() | 则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。和.bind()的优势是支持动态数据 |
.delegate() | 则是更精确的小范围使用事件代理，性能优于.live() |
.on() | 则是最新的1.9版本整合了之前的三种方式的新事件绑定机制 |
jquery中事件绑定的函数中传递多个事件参数，执行事件的时候判断执行事件的类型
基于Class的选择性的性能相对于Id选择器开销很大，因为需遍历所有DOM元素。
频繁操作的DOM，先缓存起来再操作。用Jquery的链式调用更好。
比如：
var str=$("a").attr("href");
for (var i = size; i < arr.length; i++) {}for (var i = size, length = arr.length; i < length; i++) {}zepto主要用在移动设备上，只支持较新的浏览器，好处是代码量比较小，性能也较好。
jquery主要是兼容性好，可以跑在各种pc，移动上，好处是兼容各种浏览器，缺点是代码量大，同时考虑兼容，性能也不够好。
zepto和jQuery选择器实现方法不一样，jQuery使用正则，zepto是使用querySelectAll
zepto针对移动端程序，Zepto还有一些基本的触摸事件可以用来做触摸屏交互，如：
tap，singleTap，doubleTap，longTap
swipe，swipeLeft，swipeRight，swipeUp，swipeDown
你可能碰到过在列表页面上创建一个弹出层，弹出层有个关闭的按钮，你点了这个按钮关闭弹出层后后，这个按钮正下方的内容也会执行点击事件（或打开链接）。这个被定义为这是一个“点透”现象。
方案一：来得很直接github上有个fastclick可以完美解决
https://github.com/ftlabs/fastclick，引入fastclick.js，因为fastclick源码不依赖其他库所以你可以在原生的js前直接加上
window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );方案二：用touchend代替tap事件并阻止掉touchend的默认行为preventDefault()
方案三：延迟一定的时间(300ms+)来处理事件
移动端最小触控区域44*44px ，再小就容易点击不到或者误点
每次动画开始的时候先使用stop()函数停止当前未动完的动画
click 有300ms 延迟,为了实现safari的双击事件的设计，浏览器要知道你是不是要双击操作。
首先明白了封装的好处，
链式操作的原理
闭包的好处
| 方法 | 说明 |
|---|---|
.get | 是jquery中将jquery对象转换为原生对象的方法 |
[] | 是采用了获取数组值的方式将jquery对象转换为原生对象的方法 |
eq() | 是获取对象列表中的某一个jquery dom对象 |
$代表的是jquery对象
$.fn是代表的jQuery.prototype
$.fn是用来给jquery对象扩展方法的
jQuery取到的元素是包含原生dom对象，和jQuery扩展的方法
window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
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的前端面试（含移动端常见问题）的详细内容，更多请关注zzsucai.com其它相关文章！
