jQuery 高频面试题及详细答案（实战向）

jQuery高频面试题及详细答案（实战向）一、基础概念类1.什么是jQuery？它的核心优势是什么？jQuery是一款轻量级、开源的JavaScript函数库，核心是简化原生JS的DOM操作、事件处理、异步请求和动画开发，兼容主流浏览器。核心优势：写得少，做得多：大幅简化原生JS冗余代码，一行代码实现原生多行逻辑浏览器兼容性好：封装了各浏览器的兼容问题，无需手动处理IE、主流浏览器的差异链式调用：支持方法连写，代码简洁优雅丰富的插件生态：表单、轮播、弹窗、校验等插件齐全，快速落地业务内置封装常用功能：DOM操作、事件、Ajax、动画全部内置，无需重复封装2.说说$符号的作用，jQuery中$和jQuery的关系？$是jQuery的别名，二者完全等价。为了简化书写，框架默认将jQuery对象挂载到$变量上。如果页面引入多个JS库（如Prototype），会出现$变量冲突，此时可以用jQuery.noConflict()释放$控制权，后续只能使用jQuery关键字调用方法。示例：PlainText

jQuery.noConflict();

jQuery("div").hide();3.jQuery页面加载完成事件和window.onload的区别？jQuery页面加载事件：$(function(){})或$(document).ready(function(){})核心区别：执行时机不同：ready是DOM结构渲染完成就执行，无需等待图片、视频、样式文件等资源加载；window.onload是页面所有资源全部加载完毕才执行执行次数不同：ready可以多次书写，全部依次执行；window.onload多次赋值会覆盖，只执行最后一次执行速度不同：ready执行更早，页面交互体验更好二、选择器相关（高频）4.jQuery常用选择器有哪些？分别举例涵盖工作最常用的五类选择器：基础选择器：ID选择器$("#id")、类选择器$(".class")、标签选择器$("div")、通配符$("*")层级选择器：后代选择器$("divp")、子代选择器$("div>p")、相邻兄弟$("div+p")过滤选择器：第一个:first、最后一个:last、偶数行:even、奇数行:odd、非:not()属性选择器：$("input[name='username']")、$("input[value]")表单选择器：$(":input")、$(":checked")、$(":selected")5.find()和children()的区别？children()：只查找直接子元素，不递归查找后代，速度更快find()：递归查找所有后代元素（子、孙、曾孙等），查找范围更广示例：PlainText

//只找直接子级div

$("ul").children("div");

//找所有后代div

$("ul").find("div");6.next()、prev()、siblings()的作用？next()：获取当前元素的下一个相邻兄弟元素prev()：获取当前元素的上一个相邻兄弟元素siblings()：获取当前元素所有兄弟元素（不包含自身）三、DOM操作核心7.jQuery中html()、text()、val()的区别？html()：获取/设置元素的HTML内容，会解析标签，仅适用于普通标签元素text()：获取/设置元素的纯文本内容，自动过滤HTML标签，所有元素通用val()：专门用于表单元素（input、select、textarea），获取/设置value值8.新增、删除、替换、克隆DOM元素的方法？新增元素：append()：向元素内部末尾添加子元素prepend()：向元素内部开头添加子元素after()：在元素外部后面添加兄弟元素before()：在元素外部前面添加兄弟元素删除元素：remove()：删除元素，移除绑定的事件和数据empty()：清空元素内部内容，保留标签本身detach()：删除元素，保留事件和数据，可后续复用替换/克隆：replaceWith()：替换当前元素clone()：克隆元素，传参true可克隆绑定的事件9.attr()和prop()的核心区别？（必考）二者都是获取/设置属性，适用场景完全不同：attr()：操作HTML原生属性（写在标签上的属性，如class、src、title），返回字符串，适合自定义属性、静态属性prop()：操作DOM对象属性（元素的固有属性，如checked、selected、disabled），返回布尔值，适合表单状态属性重点：表单复选框、单选框选中状态，必须用prop()，attr()无法实时获取动态状态。正确示例：$("input").prop("checked")四、事件处理10.jQuery绑定事件的几种方式？直接事件绑定：click()、mouseover()、change()等，适合静态元素on()绑定：统一事件绑定方法，支持多个事件、委托事件，官方推荐bind()：早期绑定方法，仅支持静态元素，新版已不推荐delegate()：专门用于事件委托，适配动态生成元素11.什么是事件委托？on()实现事件委托的原理和优势？事件委托是利用事件冒泡，将子元素的事件绑定到父元素上，由父元素统一触发事件。适用场景：页面动态新增的元素，无法直接绑定事件。on委托语法：父元素.on(事件,子选择器,回调)优势：支持动态元素事件绑定减少事件绑定次数，节省内存，提升性能简化代码，无需每次新增元素重新绑定事件12.如何移除事件绑定？off()的作用？off()用于移除元素的事件绑定，是unbind()的新版替代方法。$("div").off()：移除元素所有事件$("div").off("click")：仅移除点击事件13.event.preventDefault()和event.stopPropagation()区别？event.preventDefault()：阻止默认行为，比如a标签跳转、表单提交、回车默认事件event.stopPropagation()：阻止事件冒泡，避免父元素触发同类事件returnfalse：jQuery中可同时阻止默认行为+阻止冒泡（原生JS仅阻止默认行为）五、Ajax异步请求14.jQueryAjax常用方法及区别？$.ajax()：底层通用方法，可配置所有参数（请求头、超时、同步异步、数据类型），灵活性最高$.get()：封装的GET请求，仅用于获取数据，参数简单，无法设置请求头$.post()：封装的POST请求，用于提交数据$.getJSON()：专门请求JSON格式数据，自动解析JSON15.手写一个标准的$.ajax请求（面试常用）PlainText

$.ajax({

url:"/api/test",//请求地址

type:"POST",//请求方式GET/POST

dataType:"json",//响应数据格式

data:{name:"test",age:20},//请求参数

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

timeout:3000,//超时时间

success:function(res){

//请求成功回调

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

},

error:function(err){

//请求失败回调

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

}

})16.如何解决Ajax跨域问题？jQueryAjax本身无法直接解决跨域，跨域是浏览器同源策略限制，常用解决方案：服务端设置CORS跨域允许头（主流方案）使用JSONP方式（仅支持GET请求，适配老项目）后端配置代理转发，前端请求本地代理地址17.JSONP的原理和优缺点？原理：利用script标签不受同源策略限制的特性，动态创建script标签请求接口，后端返回函数调用代码，前端提前定义对应函数接收数据。优点：解决老浏览器跨域问题，无需复杂配置缺点：仅支持GET请求，无法传递复杂参数，存在安全风险，新项目基本不用六、动画与样式操作18.jQuery常用动画方法？显示隐藏：show()、hide()、toggle()淡入淡出：fadeIn()、fadeOut()、fadeToggle()滑动动画：slideDown()、slideUp()、slideToggle()自定义动画：animate()，可自定义宽高、位置、透明度等样式19.stop()和finish()的区别？stop()：停止当前正在执行的动画，保留当前状态，后续动画可继续执行finish()：直接结束所有动画，瞬间到达动画最终状态业务场景：鼠标快速悬浮触发多次动画时，先用stop()终止上一次动画，防止动画叠加卡顿。20.css()和addClass()的区别？css()：直接修改元素行内样式，权重高，适合临时动态修改单个样式addClass()/removeClass()/toggleClass()：操作样式类名，统一管理样式，结构和样式分离，便于维护，推荐业务使用七、进阶与性能优化21.jQuery链式调用的原理？jQuery每个方法执行完成后，都会返回当前的jQuery对象，所以可以直接连续调用下一个方法，实现链式书写。例外：text()、html()、val()这类获取值的方法，返回的是具体数据，无法链式调用。22.jQuery性能优化的常用手段？缓存jQuery对象：重复使用的元素提前变量接收，避免多次DOM查询let$box=$("#box")优先使用ID选择器，ID查询速度最快，减少通配符、多层级模糊选择多用事件委托，减少全局事件绑定数量批量操作DOM：先拼接内容，最后一次性append，避免频繁重绘回流动画结束后及时停止，避免无效动画占用性能尽量使用最新版jQuery，修复旧版本性能bug23.jQuery对象和原生DOM对象的相互转换？原生DOM转jQuery对象：包裹$()$(dom)jQuery对象转原生DOM：两种方式PlainText

//方式1：下标获取

$("div")[0]

//方式2：get方法获取

$("div").get(0)注意：二者方法不通用，jQuery对象只