jQuery 面试题及参考答案.docxVIP

jQuery面试题及参考答案

一、基础概念与选择器（面试高频开场题）

请说说jQuery的核心优势是什么？实际项目中为什么选择用jQuery而不是原生JS？

参考答案：jQuery核心优势是简洁的语法、跨浏览器兼容性、强大的DOM操作/事件处理/AJAX封装。实际项目中选它，一是原生JS处理兼容（比如IE低版本的事件绑定、DOM遍历）要写大量冗余代码，jQuery已内置兼容方案；二是开发效率高，比如$(.box)比document.querySelectorAll(.box)简洁，且自带迭代，不用手动写循环；三是生态成熟，有大量插件（如表单验证、轮播图）可直接复用，减少重复开发。

jQuery中$()函数的本质是什么？它能接收哪些类型的参数？举3个常用场景例子。

参考答案：$()是jQuery的核心函数（别名jQuery()），本质是创建/获取jQuery对象，将原生DOM元素包装成带jQuery方法的对象。

可接收参数类型：

选择器字符串（如$(.navli)）；

DOM元素（如$(document)、$(this)）；

回调函数（如$(function(){...})，等价于$(document).ready()）；

HTML字符串（如$(divclass=box/div)）；

数组/类数组对象（如$([a,b])）。

常用场景：

获取DOM元素：$(#username)；

页面加载完成执行代码：$(function(){/*初始化逻辑*/})；

创建新元素：$(button提交/button).appendTo(body)。

请区分jQuery选择器中的$(#box.item)和$(#box).find(.item)的区别，哪个性能更好？

参考答案：两者功能一致（查找#box下的.item元素），但底层实现不同：

$(#box.item)：jQuery会直接将选择器字符串传给原生querySelectorAll（若浏览器支持），一次性匹配；

$(#box).find(.item)：先匹配#box（ID选择器性能极高），再在其后代中匹配.item，属于“分步匹配”。

性能：$(#box).find(.item)更好。因为ID选择器是最快的选择器，先定位到#box后，后续查找范围缩小，尤其在DOM结构复杂时，优势更明显。

二、DOM操作与事件处理（核心业务考点）

请写出jQuery中“添加元素到页面”的3种常用方法，并说明区别（比如append()、prepend()、after()、before()等）。

参考答案：

parent.append(child)：将child添加到parent的内部末尾（child成为parent的子元素）；

示例：$(ul).append(li新列表项/li)（新li加到ul最后）；

parent.prepend(child)：将child添加到parent的内部开头（child成为parent的子元素）；

示例：$(ul).prepend(li第一个列表项/li)（新li加到ul最前）；

element.after(sibling)：将sibling添加到element的外部后面（sibling与element是同级元素）；

示例：$(#box).after(divclass=sibling/div)（新div在#box后面，同级）。

核心区别：append/prepend是“子元素级添加”，after/before是“同级元素级添加”。

jQuery事件绑定有哪些方法？on()、bind()、live()、delegate()的区别是什么？现在推荐用哪个？

参考答案：

常用事件绑定方法：on()、bind()、live()、delegate()、直接事件方法（如click()）；

区别：

bind()：直接绑定事件到匹配的元素上，只对当前已存在的元素有效，动态添加的元素不会继承事件；

live()：事件委托到document上，通过事件冒泡触发，能支持动态元素，但性能差（事件冒泡层级深），且jQuery1.9已废弃；

delegate()：事件委托到指定的父元素上，比live()性能好（冒泡层级浅），支持动态元素；

on()：jQuery1.7后统一的事件绑定方法，可替代bind()、delegate()，语法灵活（$(parent).on(click,child,function(){})