jQuery 高频面试题及实战答案.docxVIP

jQuery高频面试题及实战答案

一、基础用法类

题目：jQuery中$()函数的本质是什么？它能接收哪些类型的参数？举3个实际开发中的使用场景。

答案：$()是jQuery的核心函数（别名jQuery()），本质是创建jQuery包装集（类数组对象），让DOM元素拥有jQuery方法。

可接收参数：

选择器字符串（如$(.btn)）：匹配DOM元素

DOM元素（如$(document)）：将原生DOM转为jQuery对象

回调函数（如$(function(){...})）：DOM加载完成后执行

HTML字符串（如$(divclass=box/div)）：创建新元素

场景示例：

表单提交时获取输入值：$(#username).val()

页面加载后初始化组件：$(function(){initSwiper()})

动态创建列表项：$(li).text(新内容).appendTo(.list)

题目：jQuery对象和原生DOM对象的区别是什么？如何相互转换？

答案：区别核心在“方法集”和“操作方式”：

原生DOM对象：自带JS原生方法（如getElementById、addEventListener），不能直接用jQuery方法（如hide()）

jQuery对象：是原生DOM的包装集，有jQuery特有方法（如find()、animate()），不能直接用原生方法（如innerHTML）

转换方式：

原生DOM→jQuery对象：用$()包裹，如letdom=document.getElementById(box);let$dom=$(dom)

jQuery对象→原生DOM：取索引或用get(index)，如let$dom=$(.box);letdom=$dom[0]或$dom.get(0)

二、DOM操作类

题目：请写出3种获取ulclass=list下所有li元素的jQuery写法，并说明区别。

答案：

$(.listli)：后代选择器，匹配.list下所有层级的li（包括子级、孙级等）

$(.list).find(li)：功能和上面一致，但更适合动态添加的li（后续新增的li也能通过该方式匹配，逻辑更灵活）

$(.listli)：子选择器，仅匹配.list的直接子级li，不包含孙级及以下

实际开发：静态页面用1或3，动态渲染列表（如AJAX加载后新增li）用2，性能更优。

题目：如何实现“点击按钮后，给divclass=content追加一段文本，同时清空里面所有span元素”？写出完整代码。

答案：

//HTML结构示例：buttonclass=add-btn添加文本/buttondivclass=contentspan旧内容/span/div

$(.add-btn).on(click,function(){

const$content=$(.content);

$content.empty(span)//清空所有span（也可用$content.find(span).remove()）

.append(新追加的文本内容);//追加文本

});

补充：empty()会清空元素内所有子节点（包括文本和标签），若只想清空span保留其他内容，用$content.find(span).remove()更精准。

三、事件处理类

题目：jQuery中on()、bind()、live()、delegate()的区别是什么？现在推荐用哪个？

答案：核心区别在“事件委托机制”和“性能”：

bind()：直接绑定事件到匹配元素，不支持动态元素（后续新增的元素不会触发事件），性能一般

live()：事件委托到document，支持动态元素，但层级过深，事件冒泡效率低，jQuery1.9已废弃

delegate()：事件委托到指定父元素（如$(.list).delegate(li,click,...)），支持动态元素，性能比live()好

on()：jQuery1.7+统一替代以上方法，支持直接绑定和事件委托（语法：$(父元素).on(事件,子元素,回调)），灵活度最高、性能最优

现在推荐：优先用on()，动态元素用事件委托写法，静态元素可直接绑定（如$(.btn).on(click,...)）。

题目：如何阻止事件冒泡和默认行为？分别举一个实际场景。

答案：

阻止事件冒泡：用event.stopP