jQuery 面试题及详细答案（实战版）

jQuery面试题及详细答案（实战版）一、基础概念类1.简单说说你对jQuery的理解，它的核心作用是什么？答案：jQuery是一款轻量级、开源的JavaScript工具库，核心宗旨是“写更少的代码，做更多的事情”。它封装了原生JS复杂的底层操作，抹平了不同浏览器的兼容差异，让开发者可以用更简洁的语法完成页面开发。核心作用主要有四点：简化DOM节点获取、修改、删除、新增操作；统一浏览器事件兼容，简化事件绑定、委托、解绑逻辑；封装简洁的AJAX请求，快速实现前后端数据交互；内置动画、样式操作、数组遍历等工具方法，提升开发效率。2.jQuery的$符号是什么？可以替换吗？答案：$是jQuery的别名，本质是一个函数，$()就是调用jQuery核心方法，用来获取元素、执行初始化操作。可以替换。项目中如果$符号和其他库（比如Zepto、Prototype）冲突，可以使用jQuery.noConflict()释放$控制权，自定义别名。示例：PlainText

//释放$，后续只能用jQuery

jQuery.noConflict();

//自定义别名

varjq=jQuery.noConflict();

jq('div').hide();3.什么是jQuery就绪事件？和window.onload有什么区别？答案：jQuery就绪事件$(function(){})是等待DOM结构加载完成后就执行代码，无需等待图片、视频、样式文件等资源加载完毕。和window.onload的核心区别：执行时机：jQuery就绪事件DOM加载完成即执行；window.onload需等待页面所有资源（图片、脚本、样式）全部加载完成才执行；执行次数：jQuery就绪事件可多次书写，依次执行；window.onload多次赋值会覆盖，只执行最后一次；执行速度：jQuery就绪事件执行更早，页面体验更好。二、选择器与DOM操作类4.jQuery常用的选择器有哪些？优先级如何？答案：常用选择器分为五类：基础选择器：ID选择器(#id)、类选择器(.class)、标签选择器(div)、通配符(*)；层级选择器：后代选择器、子代选择器、相邻兄弟选择器；过滤选择器：:first、:last、:eq()、:odd、:even、:not()；属性选择器：[name]、[type='text']；表单选择器：:input、:checked、:disabled、:hidden。选择器优先级（从高到低）：ID选择器>类/属性选择器>标签选择器>通配符选择器。5.jQuery获取的DOM对象和原生JSDOM对象有什么区别？如何相互转换？答案：两者本质不是同一个对象，方法不能混用：原生DOM对象：是浏览器原生节点，只能调用原生方法（innerHTML、style等）；jQuery对象：是原生DOM对象的数组包装集，自带jQuery封装的方法，无法直接调用原生方法。相互转换方式：PlainText

//1.jQuery对象转原生DOM对象

var$div=$('div');

vardomDiv=$div[0];//方式1

vardomDiv2=$div.get(0);//方式2

//2.原生DOM对象转jQuery对象

vardomDiv=document.querySelector('div');

var$div=$(domDiv);6.jQuery中attr()和prop()方法的区别？答案：两个方法都是获取/设置属性，核心区别针对固有属性和自定义属性：attr()：操作HTML标签上的自定义属性和静态属性，读取的是标签原始属性值。适合操作class、src、title、自定义data-xxx属性。对于复选框checked、下拉框selected，attr()只会返回初始定义的属性值，不会随状态改变。prop()：操作DOM元素的固有属性（布尔属性为主），读取的是元素实时状态。专门用于checked、selected、disabled、readonly这类动态布尔属性，能实时获取用户操作后的状态。总结：自定义属性用attr，布尔状态属性用prop。7.jQuery如何实现元素的增、删、改、查？答案：查：各类选择器获取元素，find()查找后代，children()查找子代，siblings()查找兄弟元素；增：append()、prepend()（内部添加子元素），after()、before()（外部添加兄弟元素）；改：html()修改内容（可解析标签）、text()修改纯文本、val()修改表单值、css()修改样式、addClass()/removeClass()修改类名；删：remove()删除元素（移除所有绑定事件），empty()清空元素内容（保留标签和事件），detach()移除元素（保留绑定事件，可复用）。三、事件机制类8.jQuery事件绑定有哪些方式？区别是什么？答案：常用四种绑定方式，适配不同场景：直接绑定：click()、mouseover()等：只能绑定页面初始存在的元素，动态新增的元素无法触发；bind()：批量绑定事件，同样不支持动态元素，新版本jQuery已逐渐淘汰；live()：支持动态元素，基于事件冒泡，性能差，高版本jQuery已移除；on()：官方推荐的统一事件绑定方法，兼容静态和动态元素，支持事件委托，性能最优。9.什么是事件委托？jQuery中如何实现？优势是什么？答案：事件委托利用事件冒泡机制，不给子元素单独绑定事件，而是将事件绑定在父元素上，通过事件源判断触发的子元素，执行对应逻辑。jQuery实现方式（on方法）：PlainText

//父元素.on('事件名','子元素选择器',回调)

$('ul').on('click','li',function(){

$(this).css('color','red');

});核心优势：支持动态新增的元素触发事件；减少事件绑定次数，节省内存，提升页面性能；简化代码，无需每次新增元素都重新绑定事件。10.jQuery中如何阻止事件冒泡和默认行为？答案：阻止事件冒泡：event.stopPropagation()，阻止事件向上冒泡到父元素，避免父元素同名事件触发；阻止默认行为：event.preventDefault()，阻止标签默认行为，比如a标签跳转、表单提交、右键菜单等；一次性阻止冒泡+默认行为：回调函数最后returnfalse;（仅jQuery支持，原生JS不适用）。四、Ajax与异步类11.jQuery中AJAX常用方法有哪些？区别是什么？答案：常用三个封装方法，底层均基于$.ajax()：$.get()：发送GET请求，参数拼接在地址栏，无请求体，适合获取数据，不安全、传输数据量小；$.post()：发送POST请求，参数在请求体中，适合提交数据，相对安全，支持大数据传输；$.ajax()：底层核心方法，配置灵活，支持GET/POST、同步/异步、文件上传、请求头设置等所有场景。12.手写一个完整的jQueryAJAX请求（带参数、成功、失败、请求头）答案：实战常用标准写法：PlainText

$.ajax({

url:'/api/user/list',//请求地址

type:'POST',//请求方式

dataType:'json',//预期返回数据格式

async:true,//是否异步，默认true

headers:{

token:'xxxxxx'//自定义请求头

},

data:{

page:1,

size:10

},

success:function(res){

//请求成功回调

console.log('请求成功',res);

},

error:function(err){

//请求失败回调

console.log('请求失败',err);

}

});13.jQuery中AJAX同步和异步的区别？项目中如何选择？答案：由async参数控制，默认true（异步）：异步（async:true）：发送AJAX请求后，代码不会阻塞，继续执行后续逻辑，请求结果回来后触发success回调。页面不会卡顿，用户体验好，项目99%场景使用异步；同步（async:false）：发送请求后，阻塞所有后续代码，等待请求完全结束、拿到结果后，才继续执行后面代码。容易造成页面卡死，仅用于极少数需要依赖接口结果才能执行后续逻辑的场景。五、核心原理与实战易错点14.什么是jQuery隐式迭代？答案：隐式迭代是jQuery的核心特性之一：当选择器获取到多个元素时，调用jQuery方法不需要手动循环，框架会自动遍历所有匹配元素，统一执行对应操作。示例：$('li').css('color','red')，页面所有li标签会自动全部变色，无需for循环遍历，极大简化代码。注意：隐式迭代是批量统一操作，如果需要给每个元素设置不同值，仍需要手动each遍历。15.jQuery中each()和原生for循环的区别？答案：each()：jQuery专属遍历方法，专门遍历jQuery对象，回调函数中this指向当前原生DOM元素，支持链式调用，语法简洁，但遍历性能略低于原生循环；for循环：原生遍历方式，通用性强，遍历速度最快、性能最优，适合大量数据遍历场景，代码相对繁琐。日常DOM操作优先用each，高性能数据遍历优先用原生for循环。16.jQuery链式调用的原理是什么？答案：链式调用就是一行代码连续调用多个方法，核心原理是：jQuery所有DOM操作方法，执行完毕后都会返回当前的jQuery对象本身。因为每次方法执行后依然是jQuery对象，所以可以继续调用下一个方法，实现链式调用。示例：$('div').show().css('color','red').siblings().hide();注意：部分获取类方法（text()、html()、val()）会返回具体值，无法链式调用。17.如何解决jQuery内存泄漏问题？答案：项目长期运行、页面频繁切换容易出现内存泄漏，常见解决方式：页面销毁、弹窗关闭时，用off()解绑所有绑定的事件，避免事件堆积；移除DOM元素时使用remove()，彻底清除元素和事件，不残留内存；全局变量、定时器、AJAX请求手动销毁/取消，避免冗余占用内存；避免频繁创建jQuery对象，可缓存重复使用的DOM对象。六、综合面试真题18.页面有多个相同class的按钮，如何实现点击当前按钮变色，其他按钮恢复默认样式？答案：利用隐式迭代和兄弟元素选择器实现，实战常用逻辑：PlainText

$('.btn').click(function(){

//当前按钮加样式，兄弟按钮移除样式

$(this).addClass('active').siblings().removeClass('active');

});19.说说jQuery的优缺点？答案：优点：语法简洁，代码量少，开发效率高；完美兼容低版本浏览器，无需手动处理兼容问题；API丰富，DOM、事件、AJAX、动画一站式解决；插件生态成熟，轮播、弹窗、