jquery面试

jQuery 面试常见问题

基础概念 jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。面试中常涉及以下核心概念：

• DOM 操作：$() 选择器、html()、text()、val() 等方法。
• 事件处理：on()、click()、hover() 等事件绑定方式。
• 链式调用：jQuery 方法返回 jQuery 对象，支持链式调用。

选择器与 DOM 操作

• 基本选择器：$("#id")、$(".class")、$("tag")。
• 层级选择器：$("parent > child")、$("ancestor descendant")。
• 属性选择器：$("[attr='value']")。
• DOM 操作示例：

  // 修改内容
  $("#element").html("<p>New content</p>");
  // 添加类
  $(".item").addClass("active");

事件处理

• 事件委托：使用 on() 实现动态元素事件绑定。

  $(document).on("click", ".dynamic-element", function() {
    alert("Clicked!");
  });

• 阻止默认行为：event.preventDefault()。

Ajax 请求

• $.ajax() 是核心方法，支持 GET/POST 请求。

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

• 简写方法：$.get()、$.post()。

动画效果

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

  $("#box").animate({ 
    opacity: 0.5,
    left: "+=50"
  }, 1000);

性能优化

• 缓存选择器：避免重复查询 DOM。

  var $element = $("#element");
  $element.hide();

• 使用 find() 替代多层选择器：$("#parent").find(".child") 比 $("#parent .child") 高效。

插件开发

• 扩展 jQuery 方法：

  $.fn.myPlugin = function(options) {
    // 插件逻辑
    return this.each(function() {
      $(this).css("color", "red");
    });
  };

• 调用方式：$("#element").myPlugin()。

常见陷阱

• $(document).ready() 与 window.onload 的区别：前者在 DOM 加载完成后执行，后者需等待所有资源加载完毕。
• this 在事件处理函数中的指向：通常指向 DOM 元素，需用 $(this) 转换为 jQuery 对象。

现代替代方案

• 随着现代框架（React、Vue）的兴起，jQuery 使用减少，但遗留项目仍需维护。熟悉原生 JavaScript（如 querySelector、fetch）是加分项。

示例代码：实现一个 Tab 切换

$(".tab-button").on("click", function() {
  var tabId = $(this).data("tab");
  $(".tab-content").hide();
  $("#" + tabId).show();
});