Home > Article > Web Front-end > Summarize and share some jQuery-based front-end interviews (including mobile terminal FAQs)
This article summarizes some front-end interviews based on jQuery to share with you. It contains common interview questions about jQuery and common mobile questions. I hope it will be helpful to everyone!
Related recommendations: 2022 Big Front-End Interview Questions Summary (Collection)
jQuery front-end interview - including mobile terminal FAQ
jquery source code is encapsulated in a self-execution environment of an anonymous function, which helps to prevent global pollution of variables. Then by passing in the window object parameters, the window object can be used as a local variable. , the advantage is that when accessing the window object in jquery, there is no need to return the scope chain to the top-level scope, so that the window object can be accessed faster. Similarly, passing in the undefined parameter can shorten the scope chain when looking for undefined. [Recommended learning: jQuery video tutorial]
(function( window, undefined ) {
//用一个函数域包起来，就是所谓的沙箱
//在这里边var定义的变量，属于这个函数域内的局部变量，避免污染全局
//把当前沙箱需要的外部变量通过函数参数引入进来
//只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数
window.jQuery = window.$ = jQuery;
})( window );The returned this refers to the jquery object after the current operation. In order to realize the chain operation of jquery
Use jquery global method $.parseJSON this method
$.extend shallow copy in jQuery, when copying object A, object B will copy all fields of A , if the field is a memory address, B will copy the address, if the field is a primitive type, B will copy its value. Its disadvantage is that if you change the memory address pointed by object B, you also change the field of object A pointing to this address.
$.extend(a,b)
$.extend deep copy in jQuery. This method will completely copy all the data. The advantage is B There is no mutual dependence on A (A and B are completely disconnected). The disadvantage is that the copy speed is slower and the cost is higher.
$.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])Extend an object with one or more other objects and return the extended object . 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.prototype
In the core of jQuery, there is a set of queue control methods. This set of methods consists of three methods: queue()/dequeue()/clearQueue(). It needs to be executed continuously and sequentially. The control of the function can be said to be concise and comfortable. It is mainly used in the animate () method, ajax and other events that need to be executed in chronological order.
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();bind(), live(), and delegate() in jquery are all implemented based on on
| Method | Description |
|---|---|
##on | encapsulates a compatible event binding method that binds one or more events to the event processing function on the selected element |
bind(type,[ data],fn) | Bind event handlers for specific events of each matching element|
live(type,[data], fn) | Append an event handler to all matching elements, even if the element is added later|
delegate(selector, [type],[data],fn) | Add one or more event handlers to the specified element (a child element of the selected element) and specify the function to run when these events occur
.bind() is directly bound to the element
| Description | |
|---|---|
.bind() | is directly bound Set on the element |
.live() | is bound to the element through bubbling. More suitable for list types, bound to document DOM nodes. The advantage of .bind() is that it supports dynamic data|
.delegate() | is a more accurate small-scale use of event agents. The performance is better than .live()|
.on() | is the latest version 1.9 that integrates the previous three methods. Event binding mechanism
| 方法 | 说明 |
|---|---|
.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前端教程）
The above is the detailed content of Summarize and share some jQuery-based front-end interviews (including mobile terminal FAQs). For more information, please follow other related articles on the PHP Chinese website!