jquery 面试题

jQuery 面试题常见考点

基础概念与选择器

• jQuery 是一个快速、简洁的 JavaScript 库，简化了 DOM 操作、事件处理、动画等任务。
• 常用选择器：$("#id")、$(".class")、$("element")，支持 CSS 语法及扩展选择器如 :first、:last。

DOM 操作

• 元素增删改查：append()、remove()、html()、text()。
• 属性操作：attr()、prop()（针对布尔属性如 checked）。

事件处理

• 事件绑定：on()、click()，事件委托通过 on() 的第二个参数实现。
• 阻止默认行为：preventDefault()，阻止冒泡：stopPropagation()。

Ajax 请求

• $.ajax() 是核心方法，简写形式如 $.get()、$.post()。
• 示例：

  $.ajax({
    url: "api/data",
    method: "GET",
    success: function(data) { console.log(data); },
    error: function(err) { console.error(err); }
  });

动画效果

• 内置方法：show()、hide()、toggle()、fadeIn()、slideUp()。
• 自定义动画：animate()，支持 CSS 属性渐变。

链式调用

• jQuery 方法通常返回 jQuery 对象，支持链式调用如：

  $("div").addClass("active").css("color", "red").fadeOut();

性能优化

• 缓存选择器结果：var $el = $("#element");。
• 事件委托减少绑定数量：$(parent).on("click", "child", handler)。

与其他库冲突

• 使用 jQuery.noConflict() 解决 $ 符号冲突问题。

常见陷阱

• $(document).ready() 与 window.onload 的区别（前者 DOM 加载完毕即触发，后者需等待资源加载）。
• this 在事件处理函数中的指向问题（通常需用 $(this) 转换为 jQuery 对象）。

进阶问题

• 插件开发：通过 $.fn.extend() 扩展自定义方法。
• Deferred 对象：处理异步任务链，如 $.when().then()。

示例代码：事件委托

$("#list").on("click", "li", function() {
  alert($(this).text());
});

注意事项

• jQuery 3.x 移除旧版 API（如 load() 方法），需熟悉版本差异。
• 现代开发中，jQuery 逐渐被原生 JavaScript 或框架（如 React/Vue）替代，但遗留项目仍广泛使用。