jquery 面试题

jQuery 面试题常见考点

DOM 操作

• 选择器使用：$("#id"), $(".class"), $("tag")
• 元素增删改查：append(), remove(), html(), text()
• 属性操作：attr(), prop(), data()

事件处理

• 绑定与解绑：on(), off()
• 事件委托：$(parent).on("click", "child", callback)
• 常用事件：click(), hover(), submit()

AJAX 请求

• 基础方法：$.ajax(), $.get(), $.post()
• 参数配置：url, type, data, success, error
• 全局设置：$.ajaxSetup()

动画效果

• 显示隐藏：show(), hide(), toggle()
• 滑动效果：slideDown(), slideUp()
• 自定义动画：animate()

工具方法

• 数组操作：$.each(), $.map()
• 对象扩展：$.extend()
• 类型判断：$.isArray(), $.isFunction()

典型面试题示例

链式调用原理
jQuery 通过在每个方法中返回 this 实现链式调用。例如：

$("#demo").css("color", "red").addClass("active");

$(document).ready() 与 window.onload 区别

• ready() 在 DOM 加载完成后触发，不等待图片等资源
• onload 需等待所有资源加载完成

deferred 对象应用

var deferred = $.Deferred();
deferred.resolve("成功").done(function(msg){ console.log(msg); });

性能优化建议

• 缓存 jQuery 对象：var $elem = $("#elem");
• 使用 ID 选择器优先
• 避免频繁 DOM 操作

高级特性问题

插件开发模式
通过扩展 $.fn 实现：

$.fn.myPlugin = function(options) {
  // 插件逻辑
};

noConflict() 应用场景
解决全局命名冲突：

var jq = $.noConflict();
jq("#id").hide();

事件命名空间的作用
允许对事件分组管理：

$("#btn").on("click.namespace", handler);
$("#btn").off("click.namespace");