jquery 面试题

以下是一些常见的 jQuery 面试题及其解答，涵盖基础概念、核心方法和实际应用场景。

jQuery 基础概念

jQuery 是什么？
jQuery 是一个轻量级的 JavaScript 库，简化了 DOM 操作、事件处理、动画和 Ajax 交互。它的核心特点是“写得更少，做得更多”。

jQuery 选择器的作用是什么？
jQuery 选择器用于快速定位 DOM 元素，语法类似 CSS 选择器。例如：

$('#id') // ID 选择器
$('.class') // 类选择器
$('div') // 标签选择器

DOM 操作

如何隐藏一个元素？
使用 hide() 方法：

$('#element').hide();

如何动态添加 HTML 内容？
通过 append() 或 html() 方法：

$('#container').append('<p>New content</p>');
$('#container').html('<p>Replaced content</p>');

如何获取或设置元素属性？
使用 attr() 方法：

var src = $('#image').attr('src'); // 获取
$('#image').attr('src', 'new-image.jpg'); // 设置

事件处理

如何绑定点击事件？
使用 on() 或 click() 方法：

$('#button').on('click', function() {
  alert('Button clicked!');
});

事件委托如何实现？
通过 on() 方法将事件绑定到父元素：

$('#parent').on('click', '.child', function() {
  alert('Child element clicked');
});

Ajax 相关

如何发起 Ajax GET 请求？
使用 $.ajax() 或简写的 $.get()：

$.get('api/data', function(response) {
  console.log(response);
});

如何处理 Ajax 错误？
通过 error 回调或 fail() 方法：

$.ajax({
  url: 'api/data',
  method: 'GET',
  success: function(response) {},
  error: function(xhr, status, error) {}
});

动画效果

如何实现淡入淡出效果？
使用 fadeIn() 和 fadeOut()：

$('#element').fadeIn(1000); // 1秒淡入
$('#element').fadeOut(1000); // 1秒淡出

如何自定义动画？
通过 animate() 方法：

$('#box').animate({
  left: '+=50px',
  opacity: 0.5
}, 500);

实用方法

如何遍历元素？
使用 each() 方法：

$('li').each(function(index) {
  console.log(index + ': ' + $(this).text());
});

如何检查 jQuery 对象是否为空？
通过 length 属性：

if ($('#element').length) {
  // 元素存在
}

性能优化

为什么使用 $(document).ready()？
确保 DOM 完全加载后再执行脚本：

$(document).ready(function() {
  // 代码逻辑
});

如何优化选择器性能？
避免通用选择器，优先使用 ID 或类：

$('div.class') // 优于 $('.class')

这些问题覆盖了 jQuery 的核心功能，适合考察候选人对基础知识和实际应用的掌握程度。