jquery面试题
jQuery 面试题整理
基础概念
jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。核心特点包括链式调用、跨浏览器兼容性和插件扩展机制。
常用方法
$(selector).click(function)：绑定点击事件。$(selector).hide()/$(selector).show()：隐藏或显示元素。$(selector).addClass(className)：添加 CSS 类。$(selector).html()/$(selector).text()：获取或设置 HTML/文本内容。
选择器
$("#id")：通过 ID 选择元素。$(".class")：通过类名选择元素。$("div")：通过标签名选择元素。$("div.class")：组合选择器。
事件处理
$(document).ready(function)：DOM 加载完成后执行。$(selector).on("event", function)：动态绑定事件（支持委托）。$(selector).trigger("event")：手动触发事件。
Ajax 相关
$.ajax({url, type, data, success})：通用 Ajax 请求。$.get(url, data, success)：GET 请求简写。$.post(url, data, success)：POST 请求简写。
链式调用示例
$("#btn").click(function() {
$(this).addClass("active").next().hide().fadeIn(1000);
});插件开发
通过扩展 $.fn 实现自定义插件：
$.fn.myPlugin = function(options) {
// 插件逻辑
return this.each(function() {
// 操作每个匹配元素
});
};性能优化
- 缓存选择器结果：
var $el = $("#element")。 - 使用事件委托减少绑定：
$(parent).on("click", "child", handler)。 - 合并 DOM 操作，避免频繁重绘。
常见问题
-
jQuery 与 JavaScript 原生方法对比
jQuery 封装了原生 API，简化代码但可能牺牲部分性能。 -
$(document).ready与window.onload区别ready在 DOM 树加载完成后触发，onload需等待所有资源（如图片）加载完成。 -
如何解绑事件
使用off()方法：$(selector).off("click")。 -
链式调用原理
每个方法返回 jQuery 对象本身（return this）。 -
$.each与$(selector).each区别$.each用于遍历数组或对象，$(selector).each专用于 jQuery 对象集合。
