jQuery 经典面试题及实战答案.docxVIP

jQuery经典面试题及实战答案

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

问题：jQuery的核心思想是什么？它和原生JS的本质区别是什么？

答案：核心思想是“写得少，做得多”（WriteLess,DoMore），本质是对原生JS的DOM操作、事件处理、AJAX等API进行封装，解决了原生JS跨浏览器兼容、代码繁琐的问题。区别在于：jQuery提供了链式调用、隐式迭代等特性，不用手动遍历DOM集合，也不用处理不同浏览器的API差异（比如getElementsByClassName在旧IE的兼容）。

问题：请说出3种jQuery中获取DOM元素的选择器，并说明适用场景？

答案：

ID选择器$(#id)：适用于获取单个唯一元素（如页面头部、登录按钮），性能最优（底层映射原生getElementById）；

类选择器$(.class)：适用于批量获取同样式/同功能元素（如列表项、商品卡片），支持隐式迭代；

属性选择器$(input[type=text])：适用于按属性筛选元素（如表单输入框、带自定义属性的标签），比纯类选择器更灵活。

问题：$(div)和$(div:first)返回的结果有什么区别？如何判断返回的jQuery对象是否为空？

答案：$(div)返回包含所有div元素的jQuery集合（类数组对象），哪怕没有匹配元素，也不会返回null；$(div:first)只返回第一个匹配的div元素。判断是否为空不能用if($(div)==null)，正确写法是if($(div).length===0)或if(!$(div).size())（size()是length的别名）。

二、DOM操作与链式调用（实战核心）

问题：如何用jQuery实现“给id为box的元素添加active类，同时移除inactive类”？还有更简洁的写法吗？

答案：基础写法：$(#box).addClass(active).removeClass(inactive);更简洁的写法用toggleClass扩展，但精准需求用removeClass+addClass，或直接$(#box).attr(class,active)（但会清空原有其他类，谨慎使用）；若需切换类，用$(#box).toggleClass(activeinactive)（添加前者，移除后者）。

问题：jQuery中text()、html()、val()分别用于什么场景？它们的区别是什么？

答案：

text()：操作元素的文本内容，不解析HTML标签，适用于纯文本读取/设置（如p标签内容）；

html()：操作元素的HTML内容，会解析标签，适用于设置包含标签的内容（如给div插入span内容/span）；

val()：专门操作表单元素的值，如input、select、textarea，比如$(input).val()获取输入值，$(select).val(1)设置选中项。

问题：什么是jQuery的链式调用？它的原理是什么？为什么有时候链式调用会失效？

答案：链式调用是指连续调用jQuery方法，如$(#box).addClass(red).css(font-size,16px)。原理是每个jQuery方法执行后，都会返回当前的jQuery对象（this），所以能继续调用其他方法。失效场景：当调用的方法返回非jQuery对象时（如text()、val()、length），比如$(#box).text().addClass(red)会报错，因为text()返回的是字符串，不是jQuery对象。

三、事件处理（面试重点）

问题：jQuery中绑定事件的方式有哪些？on()、bind()、live()的区别是什么？

答案：常用绑定方式：on()、bind()、click()（简写方式）。区别：

bind()：只能给当前已存在的元素绑定事件，不支持动态生成的元素，jQuery1.7后被on()替代；

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

on()：是目前推荐的统一绑定方式，支持事件委托（如$(document).on(click,.dynamic,function(){})），既支持静态元素，也支持动态生成的元素，性能优于live()。

问题：如何阻止事件冒泡和默认行为？请写出代码示例。

答案：

$(a).click(function(ev