jquery 面试题
jQuery 面试题整理
基础概念
jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。核心特点包括链式调用、跨浏览器兼容性和插件扩展机制。
常用方法
- 选择器：
$("div")、$(".class")、$("#id") - DOM 操作：
html()、text()、val()、append()、remove() - 事件绑定：
on()、click()、hover() - Ajax：
$.ajax()、$.get()、$.post()
事件委托
通过 on() 实现事件委托，避免重复绑定：
$("#parent").on("click", ".child", function() {
console.log("Child element clicked");
});链式调用
jQuery 方法返回 jQuery 对象，支持链式操作：
$("div").addClass("active").css("color", "red").fadeOut();Ajax 示例
$.ajax({
url: "api/data",
method: "GET",
success: function(response) {
console.log(response);
},
error: function(xhr, status, error) {
console.error(error);
}
});动画效果
hide()/show()：隐藏/显示元素fadeIn()/fadeOut()：淡入淡出slideUp()/slideDown()：滑动效果
插件开发
通过扩展 $.fn 创建自定义插件：
$.fn.highlight = function(color) {
return this.css("background-color", color);
};
$("div").highlight("yellow");性能优化
- 缓存选择器结果：
var $div = $("div"); - 使用
find()替代多层选择器：$("#parent").find(".child") - 事件委托减少绑定数量
常见问题
-
$(document).ready()与window.onload区别ready()：DOM 加载完成后触发onload：页面所有资源（如图片）加载完成后触发
-
$冲突解决
通过jQuery.noConflict()释放$符号：var jq = jQuery.noConflict(); jq("div").hide(); -
prop()与attr()区别
prop()用于布尔属性（如checked）attr()用于 HTML 属性（如class）
-
遍历方法
each()：迭代 jQuery 对象map()：返回新数组
-
延迟对象
使用$.Deferred()管理异步操作：var deferred = $.Deferred(); deferred.resolve("Success"); deferred.promise().done(function(msg) { console.log(msg); });
综合示例
实现一个可排序的列表：
$("#sortable").sortable({
update: function(event, ui) {
console.log("New order:", $(this).sortable("toArray"));
}
});
