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 的核心功能，适合考察候选人对基础知识和实际应用的掌握程度。
