Artikel ini meringkaskan beberapa temu bual hadapan berdasarkan jQuery untuk dikongsi dengan anda Ia mengandungi soalan temu bual biasa tentang jQuery dan soalan mudah alih yang biasa saya harapkan.
Cadangan berkaitan: Ringkasan Soalan Temuduga Hadapan Besar 2022 (Koleksi)
Temu bual bahagian hadapan jQuery - termasuk soalan lazim mudah alih
Kod sumber jquery dirangkumkan dalam persekitaran pelaksanaan sendiri bagi fungsi tanpa nama, yang membantu menghalang pencemaran global pembolehubah Kemudian dengan menghantar parameter objek tetingkap, objek tetingkap boleh digunakan sebagai pembolehubah tempatan , kelebihannya ialah apabila mengakses objek tetingkap dalam jquery, tidak perlu mengembalikan rantai skop ke skop peringkat atas, supaya objek tetingkap boleh diakses dengan lebih cepat. Begitu juga, menghantar parameter yang tidak ditentukan boleh memendekkan rantai skop apabila mencari yang tidak ditentukan. [Pembelajaran yang disyorkan: tutorial video jQuery]
(function( window, undefined ) {
//用一个函数域包起来，就是所谓的沙箱
//在这里边var定义的变量，属于这个函数域内的局部变量，避免污染全局
//把当前沙箱需要的外部变量通过函数参数引入进来
//只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数
window.jQuery = window.$ = jQuery;
})( window );Yang dikembalikan ini merujuk kepada objek jquery selepas operasi semasa Untuk merealisasikan operasi rantaian jquery
Gunakan kaedah global jquery $.parseJSON kaedah ini
$.panjangkan salinan cetek dalam jQuery, apabila menyalin objek A, objek B akan menyalin semua medan A , jika medan adalah alamat memori, B akan menyalin alamat, jika medan adalah jenis primitif, B akan menyalin nilainya. Kelemahannya ialah jika anda menukar alamat memori yang ditunjuk oleh objek B, anda juga menukar medan objek A yang menunjuk ke alamat ini.
$.extend(a,b)
$.lanjutkan salinan dalam dalam jQuery, kaedah ini akan menyalin sepenuhnya semua data, kelebihan B dan A tidak akan bergantung antara satu sama lain (A dan B terputus sepenuhnya).
$.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])Lanjutkan objek dengan satu atau lebih objek lain dan kembalikan objek lanjutan. 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.prototypeDalam teras jQuery, terdapat satu set kaedah kawalan baris gilir ini terdiri daripada tiga kaedah: queue()/dequeue()/clearQueue(). untuk dilaksanakan secara berterusan dan berurutan. Kawalan fungsi boleh dikatakan ringkas dan selesa. Ia digunakan terutamanya dalam kaedah animasi (), ajax dan acara lain yang perlu dilaksanakan dalam susunan kronologi >
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();| 方法 | 说明 |
|---|---|
on | 是封装了一个兼容的事件绑定方法，在选择元素上绑定一个或多个事件的事件处理函数 |
bind(type,[data],fn) | 为每个匹配元素的特定事件绑定事件处理函数 |
live(type,[data],fn) | 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的 |
delegate(selector,[type],[data],fn) | 指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数 |
Perbezaan:
.bind() terikat terus pada elemen
| 方法 | 说明 |
|---|---|
.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前端教程）
Atas ialah kandungan terperinci Ringkasan dan perkongsian beberapa wawancara front-end berasaskan jQuery (termasuk Soalan Lazim terminal mudah alih). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Apakah pemalam jquery?
Bagaimana untuk mengendalikan json dengan jquery
Bagaimana untuk memadam elemen dalam jquery
Penggunaan kaedah jQuery hover().
jquery melaksanakan kaedah paging
Apakah elemen tersembunyi dalam jquery
Apa yang ditonjolkan dalam jquery
Penyelesaian kepada port phpstudy3306 sedang diduduki
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
