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");
