這篇文章整理總結了一些基於jQuery的前端面試來分享給大家，裡面jQuery的常見面試問題，以及行動端常見問題，希望對大家有所幫助！
相關推薦：2022年大前端面試題總結（收藏）
jQuery前端面試－含行動端常見問題
jquery原始碼封裝在匿名函數的自執行環境中，有助於防止變數的全域污染，然後透過傳入window物件參數，可以使window物件作為局部變數使用，好處是當jquery中存取window物件的時候，就不用將作用域鏈退回到頂層作用域了，從而可以更快的存取window物件。同樣，傳入undefined參數，可以縮短查找undefined時的作用域鏈。 【推薦學習：jQuery影片教學】
(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() |
| .live() |
| .delegate() |
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的前端面試（含行動端常見問題）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
