JQ常规面试题

1. 什么是 jQuery？它的主要优势是什么？

jQuery 是一个快速、轻量级的 JavaScript 库，设计目的是简化 HTML 文档遍历、事件处理、动画和 Ajax 交互。其主要优势包括：

• 跨浏览器兼容性：统一处理不同浏览器的 API 差异
• 简洁的语法 ：使用 $() 选择器和链式调用大幅减少代码量
• 丰富的插件生态：如 jQuery UI、Validation 等
• 完善的文档和社区支持
• 与其他框架兼容：可与 Angular、React 等框架共存

2. 如何选择 ID 为 myDiv 的元素？如何选择所有类名为 active 的元素？

• 选择 ID 元素：$('#myDiv')
• 选择类名元素：$('.active')

3. 简述 jQuery 的链式调用（Chaining）原理。

jQuery 方法通常返回 jQuery 对象本身，允许连续调用多个方法。例如：

javascript

$('#element')
  .addClass('active')
  .hide()
  .fadeIn(1000);

每个方法执行后返回的仍是 $('#element') 对象，从而实现链式操作，提高代码效率。

4. jQuery 事件委托（Event Delegation）是什么？有什么优势？

事件委托是指将事件处理程序绑定到父元素，利用事件冒泡原理，当子元素触发事件时，事件会冒泡到父元素执行处理程序。例如：

javascript

// 将点击事件委托给父元素 ul
$('ul').on('click', 'li', function() {
  $(this).toggleClass('selected');
});

优势：

• 减少内存占用（只需一个事件监听器）
• 动态添加的元素自动获得事件处理能力
• 简化事件管理

5. 如何在 jQuery 中实现 AJAX 请求？

jQuery 提供多种 AJAX 方法：

• 基础方法 ：$.ajax()

  javascript

  $.ajax({
    url: 'api/data',
    method: 'GET',
    dataType: 'json',
    success: function(data) { /* 处理响应 */ },
    error: function(error) { /* 处理错误 */ }
  });

• 快捷方法：

  javascript

  $.get('api/data', function(data) { /* 处理响应 */ });
  $.post('api/submit', { name: 'John' }, function() { /* 回调 */ });

6. jQuery 对象和 DOM 对象有什么区别？如何相互转换？

• DOM 对象 ：原生 JavaScript 对象，如 document.getElementById('div')

• jQuery 对象 ：jQuery 封装的对象集合，如 $('#div')

转换方法：

• DOM → jQuery：$(domElement)
• jQuery → DOM：$('selector')[0] 或 $('selector').get(0)

7. 如何在 jQuery 中实现动画效果？

jQuery 提供多种动画方法：

• 基础动画 ：show(), hide(), toggle(), fadeIn(), fadeOut(), slideUp(), slideDown()

• 自定义动画 ：animate()

  javascript

  $('#box').animate({
    width: '500px',
    opacity: 0.5,
    marginLeft: '100px'
  }, 1000);

• 停止动画 ：stop()

• 回调函数：在动画完成后执行

  javascript

  $('#btn').click(function() {
    $('#box').slideUp(500, function() {
      $(this).remove(); // 动画完成后移除元素
    });
  });

8. jQuery 中 on() 和 bind() 方法的区别是什么？

答案：

• bind() ：为当前选中的元素绑定事件处理程序（不支持动态添加的元素）。

  javascript

  $('button').bind('click', function() { /* 处理点击 */ });

• on() ：jQuery 1.7+ 推荐的事件绑定方法，支持事件委托（可处理动态元素）。

  javascript

  // 直接绑定（等价于 bind()）
  $('button').on('click', function() { /* 处理点击 */ });
  
  // 事件委托（推荐）
  $(document).on('click', 'button', function() { /* 处理点击 */ });

9. 如何在 jQuery 中获取或设置元素的属性值？

• 获取属性 ：attr('attributeName')

  javascript

  var src = $('img').attr('src');

• 设置属性 ：attr('attributeName', 'value') 或批量设置

  javascript

  $('img').attr({
    src: 'new-image.jpg',
    alt: 'New Image'
  });

• 移除属性 ：removeAttr('attributeName')

10. jQuery 中的 data() 方法有什么作用？

data() 方法用于在 DOM 元素上存储和读取数据，这些数据不会显示在 HTML 中，但会保留在内存中。例如：

javascript

// 存储数据
$('#element').data('name', 'John');
$('#element').data('info', { age: 30 });

// 读取数据
var name = $('#element').data('name'); // "John"
var info = $('#element').data('info'); // { age: 30 }

常用于存储复杂数据或避免直接操作 DOM 元素的自定义属性。

11. 如何在 jQuery 中处理表单提交事件？

javascript

$('form').on('submit', function(e) {
  e.preventDefault(); // 阻止默认提交行为
  var formData = $(this).serialize(); // 序列化表单数据
  
  // 发送 AJAX 请求
  $.post('submit.php', formData, function(response) {
    $('#result').html(response);
  });
});

12. jQuery 中 $(document).ready() 和 window.onload 的区别是什么？

• $(document).ready() ：DOM 结构加载完成后执行，不等待图片等资源加载。

  javascript

  $(document).ready(function() {
    // DOM 已加载，可操作元素
  });
  
  // 简写形式
  $(function() { /* 代码 */ });

• window.onload：页面所有资源（包括图片）加载完成后执行。

  javascript

  window.onload = function() {
    // 所有资源加载完成
  };

13. 如何在 jQuery 中处理跨域 AJAX 请求？

• JSONP （JSON with Padding）：利用 <script> 标签跨域特性。

  javascript

  $.ajax({
    url: 'https://api.example.com/data',
    dataType: 'jsonp', // 指定 JSONP 类型
    success: function(data) { /* 处理数据 */ }
  });

• CORS （跨域资源共享）：需服务器设置响应头 Access-Control-Allow-Origin。

  javascript

  $.ajax({
    url: 'https://api.example.com/data',
    method: 'GET',
    xhrFields: {
      withCredentials: true // 如需发送 Cookie
    }
  });

14. jQuery 中 $.extend() 方法的作用是什么？

$.extend() 用于合并对象，常用于配置项的默认值合并或深拷贝。例如：

javascript

// 浅拷贝（合并到 target）
var target = { a: 1 };
var source = { b: 2 };
$.extend(target, source); // target 变为 { a: 1, b: 2 }

// 深拷贝（第一个参数为 true）
var obj1 = { nested: { value: 1 } };
var obj2 = $.extend(true, {}, obj1); // 修改 obj2.nested 不影响 obj1

15. 如何在 jQuery 中实现插件开发？

jQuery 插件通常通过扩展 $.fn 对象实现。例如：

javascript

$.fn.highlight = function(options) {
  // 默认配置
  var settings = $.extend({
    color: 'yellow',
    duration: 1000
  }, options);
  
  // 对每个匹配元素执行操作
  return this.each(function() {
    $(this).css('background-color', settings.color)
           .animate({ backgroundColor: 'transparent' }, settings.duration);
  });
};

// 使用插件
$('p').highlight({ color: 'red', duration: 500 });

16. jQuery 与原生 JavaScript 相比，有哪些性能考虑因素？

• jQuery 优势：

  • 开发效率高，代码量少
  • 自动处理跨浏览器兼容性问题

• 原生 JS 优势：

  • 性能更好（尤其在现代浏览器中）

  • 无需引入额外库，减小项目体积

性能优化建议：

• 避免频繁 DOM 操作，批量处理
• 缓存 jQuery 对象（如 var $el = $('#element')）
• 优先使用原生方法（如 document.querySelector()）
• 对于简单操作，直接使用原生 JS

17. 如何在 jQuery 中实现懒加载（Lazy Loading）图片？

懒加载指图片滚动到可见区域时才加载。jQuery 实现思路：

javascript

$(document).ready(function() {
  // 初始隐藏所有图片，将真实 URL 存储在 data-src
  $('img.lazy').each(function() {
    $(this).attr('data-src', $(this).attr('src'))
           .attr('src', 'placeholder.png');
  });
  
  // 监听滚动事件
  $(window).scroll(function() {
    $('img.lazy').each(function() {
      // 检查图片是否在视口中
      if ($(this).offset().top < $(window).scrollTop() + $(window).height()) {
        $(this).attr('src', $(this).attr('data-src'))
               .removeClass('lazy');
      }
    });
  });
});

18. jQuery 中 deferred 对象的作用是什么？

deferred 对象用于处理异步操作，类似 ES6 的 Promise。例如：

javascript

function asyncOperation() {
  var deferred = $.Deferred();
  
  setTimeout(function() {
    if (Math.random() > 0.5) {
      deferred.resolve('操作成功'); // 成功回调
    } else {
      deferred.reject('操作失败'); // 失败回调
    }
  }, 1000);
  
  return deferred.promise(); // 返回 Promise 对象
}

// 使用
asyncOperation()
  .done(function(result) { console.log(result); })
  .fail(function(error) { console.error(error); })
  .always(function() { console.log('操作完成'); });

19. 如何在 jQuery 中实现元素拖拽功能？

jQuery UI 提供 draggable() 方法，或手动实现：

javascript

// 使用 jQuery UI
$('#draggable').draggable();

// 手动实现（基础版）
var $dragging = null;

$(document).on('mousedown', '.draggable', function(e) {
  $dragging = $(this);
  $dragging.data('offset', {
    x: e.pageX - $dragging.offset().left,
    y: e.pageY - $dragging.offset().top
  });
});

$(document).on('mousemove', function(e) {
  if ($dragging) {
    $dragging.offset({
      left: e.pageX - $dragging.data('offset').x,
      top: e.pageY - $dragging.data('offset').y
    });
  }
});

$(document).on('mouseup', function() {
  $dragging = null;
});