一、 jQuery 基础核心考点

面试官通常从最基础的语法入手，考察候选人对 jQuery 选择器 的熟悉程度以及对文档对象模型（DOM）的理解。以下是必须掌握的核心概念。

① $(document).ready() vs window.onload

区别解析： window.onload 必须等待页面中所有资源（包括图片、样式表）加载完毕后才执行，可能导致用户体验延迟。而 $(document).ready() 仅在DOM树构建完成后执行，无需等待图片加载，执行效率更高，是jQuery开发的首选入口。

② jQuery 对象与 DOM 对象的区别

核心差异： DOM 对象是原生JavaScript对象，拥有DOM方法；jQuery 对象是jQuery包装集，拥有jQuery方法。转换方法： DOM转jQuery: (selector)[index] 或 $(selector).get(index)。

③ 选择器的优先级与性能

性能排序： ID选择器 #id > 标签选择器 div > 类选择器 .class > 属性选择器 > 伪类选择器。在大型项目中，避免使用通配符 和层级过深的选择器，以提升查询速度。

常见面试题：如何获取选中元素？

// 获取ID为myDiv的元素
var domObj = document.getElementById('myDiv');
var ('#myDiv');
// 获取所有class为item的元素
var ('.item');
// 获取第一个p标签
var ('p').first();

二、 DOM 操作与事件处理进阶

事件处理和DOM操作是jQuery最强大的功能之一。面试官常通过实际场景考察候选人对事件委托和动态元素处理的理解。

1. 事件委托（Event Delegation）

事件委托利用事件冒泡原理，将子元素的事件监听器绑定在父元素上。这对于动态生成的DOM元素特别有效，能显著减少内存消耗。

传统绑定方式

为每个子元素单独绑定事件，如果子元素很多，性能较差。且动态添加的子元素无法自动绑定事件。

$('li').click(function(){
    console.log('Clicked');
});
// 问题：新增的li点击无效

事件委托方式

使用 .on() 方法将事件绑定在父容器上，通过 event.target 判断触发源。

$('#parent-list').on('click', 'li', function(e){
    console.log('Clicked:', e.target);
});
// 优势：动态添加的li也能触发事件，且只需一个监听器

方法对比总结

特性 直接绑定 (.click) 事件委托 (.on)
内存占用 高（每个元素一个监听器） 低（父元素一个监听器）
动态元素支持 不支持 支持
适用场景 静态少量元素 动态大量列表/表格

2. 常用DOM操作方法

  • ◆ 增： $(html).appendTo(parent)
  • ◆ 删： $(selector).remove() 或 .detach()（保留绑定的数据）
  • ◆ 改： .html(), .text(), .attr(), .val()
  • ◆ 查： .find(), .parent(), .siblings(), .next()

三、 AJAX 与数据交互

尽管Vue/React等框架普及，但jQuery的 $.ajax 仍是许多老项目维护及小型交互的首选。理解其回调机制和Promise化是面试重点。

1. $.ajax 核心参数

参数：url

请求地址，默认为当前页。

参数：type / method

请求方式，GET 或 POST。GET常用于获取数据，POST常用于提交数据。

参数：data

发送到服务器的数据，可以是对象或字符串。

回调：success / error / complete

请求成功、失败及完成时触发的函数。现代开发中推荐使用链式调用 .done(), .fail(), .always()。

2. JSONP 跨域解决方案

由于同源策略限制，jQuery提供了 $.ajax 的 jsonp 类型来解决跨域问题。其原理是利用 <script> 标签不受同源策略限制的特性。

$.ajax({
    url: 'http://other-server.com/api',
    type: 'GET',
    dataType: 'jsonp', // 指定为jsonp
    jsonp: 'callback', // 回调函数参数名
    success: function(data) {
        console.log(data);
    }
});

四、 jQuery 插件开发与扩展

如何扩展jQuery原型方法，实现链式调用，是区分初级与中级开发者的关键。

1. 两种扩展方式

  • ① 扩展全局方法： 使用 .ajax 这种工具方法。
  • ② 扩展jQuery原型： 使用 ('.div').myPlugin() 这种实例方法。

2. 插件编写规范示例

(function($) {
    $.fn.myPlugin = function(options) {
        // 默认设置
        var settings = $.extend({
            color: 'red',
            fontSize: '12px'
        }, options );
        // 链式调用：返回jQuery对象
        return this.each(function() {
            var (this);
            $this.css({
                'color': settings.color,
                'font-size': settings.fontSize
            });
        });
    };
})(jQuery);

五、 jQuery 性能优化策略

面试官常问：“你的项目中如何优化jQuery代码？” 以下是五个黄金法则。

1. 使用最新版本的jQuery

新版本通常包含性能提升和Bug修复。建议使用CDN引入，利用浏览器缓存。

2. 缓存jQuery对象

避免重复查询DOM。例如： var ('#myDiv'); 而不是每次都用 $('#myDiv')。

3. 事件委托

如前所述，使用 .on() 进行事件委托，减少监听器数量，提升事件处理效率。

4. 限定选择器范围

避免全局搜索。例如： ('.child') 更快，因为jQuery可以先定位到父节点再查找。

5. 批量DOM操作

在循环中不要直接操作DOM。先构建HTML字符串或Fragment，最后一次性插入页面，减少重排（Reflow）。

6. 避免隐式全局变量

在插件或复杂函数中，使用 var 声明变量，防止污染全局作用域。