当前位置：首页 > news >正文

jQuery面试题精选：从基础到高级

news 2025/10/17 7:07:36

低难度

如何在页面加载完成后执行一段代码？
- 核心方法：$(document).ready()
- 详细说明：该方法在DOM加载完成后立即执行，不需要等待图片等资源加载完成
- 代码示例：
```
// 标准写法
$(document).ready(function() {console.log("DOM加载完成，可以安全操作元素");// 初始化操作、事件绑定等
});// 简写形式
$(function() {console.log("简写形式的DOM就绪函数");
});
```
- 应用场景：页面初始化、事件绑定、元素操作等

如何选择所有的

元素？

选择器类型：元素选择器
性能考虑：直接元素选择器性能较好
代码示例：

// 选择所有p元素并设置样式
$("p").css({"color": "red","line-height": "1.5"
});// 链式操作
$("p").addClass("paragraph").fadeIn("slow");

如何隐藏一个元素？

方法对比：hide() vs css("display", "none")
代码示例：

// 立即隐藏
$("#myElement").hide();// 带动画效果隐藏
$("#myElement").hide(1000, function() {console.log("隐藏动画完成");
});// 使用CSS方法隐藏
$("#myElement").css("display", "none");

如何显示一个隐藏的元素？

显示方式：恢复元素的原始display值
代码示例：

// 立即显示
$("#myElement").show();// 带动画显示
$("#myElement").show("slow");// 淡入效果
$("#myElement").fadeIn(500);

如何在一个元素后面插入内容？

DOM操作：after() 在元素外部后面插入
相关方法：before(), insertAfter()
代码示例：

// 在元素后插入HTML字符串
$("#myElement").after("<div class='new-content'>新内容</div>");// 插入现有元素（移动元素）
$("#existingElement").after($("#movingElement"));// 使用insertAfter方法
$("<p>新段落</p>").insertAfter("#myElement");

中难度

如何为一个按钮添加点击事件？

事件绑定方法：click(), on()
最佳实践：推荐使用on()方法
代码示例：

// 传统click方法
$("#myButton").click(function(event) {event.preventDefault();console.log("按钮被点击");// 业务逻辑
});// 使用on方法（推荐）
$("#myButton").on("click", function() {alert("按钮点击事件触发");
});// 事件委托，处理动态添加的元素
$("#container").on("click", ".dynamic-button", function() {console.log("动态按钮被点击");
});

如何获取一个输入框的值？

表单操作：val()方法
注意事项：处理不同类型输入框
代码示例：

// 获取文本输入框值
var username = $("#username").val();// 获取单选按钮选中的值
var gender = $("input[name='gender']:checked").val();// 获取多选框选中的值（数组）
var hobbies = [];
$("input[name='hobby']:checked").each(function() {hobbies.push($(this).val());
});// 获取下拉框选中的值
var city = $("#city").val();

如何设置一个元素的CSS属性？

CSS操作：css()方法
多种用法：单属性、多属性、回调函数
代码示例：

// 设置单个属性
$("#myElement").css("color", "red");// 设置多个属性
$("#myElement").css({"background-color": "blue","font-size": "16px","padding": "10px"
});// 使用回调函数
$("#myElement").css("width", function(index, value) {return parseInt(value) + 50 + "px";
});

如何在一个元素内部的开头插入内容？

DOM插入：prepend() 在内部开头插入
相关方法：prependTo()
代码示例：

// 插入HTML字符串
$("#container").prepend("<div class='header'>头部内容</div>");// 插入现有元素
$("#container").prepend($("#existingElement"));// 使用prependTo
$("<span>新内容</span>").prependTo("#container");

如何在一个元素内部的结尾插入内容？

DOM插入：append() 在内部结尾插入
代码示例：

// 基本用法
$("#container").append("<div class='footer'>底部内容</div>");// 插入多个元素
$("#container").append("<div>内容1</div>","<div>内容2</div>"
);// 使用函数动态生成内容
$("#list").append(function(index) {return "<li>项目" + (index + 1) + "</li>";
});

高难度

如何使用jQuery进行AJAX请求？

AJAX方法：$.ajax(), $.get(), $.post()
完整配置：请求参数、回调处理、错误处理
代码示例：

// 完整的AJAX请求
$.ajax({url: "/api/users",method: "POST",data: {name: "张三",age: 25},dataType: "json",headers: {"X-Requested-With": "XMLHttpRequest"},beforeSend: function(xhr) {// 请求发送前的处理console.log("请求发送中...");},success: function(response) {console.log("请求成功:", response);// 更新UI$("#result").html(response.message);},error: function(xhr, status, error) {console.error("请求失败:", error);// 错误处理alert("请求失败，请重试");},complete: function(xhr, status) {console.log("请求完成");}
});// 简化的GET请求
$.get("/api/data", function(data) {console.log("GET请求成功:", data);
});

如何将一个元素从一个父元素移动到另一个父元素？

DOM移动：appendTo(), prependTo(), insertAfter(), insertBefore()
代码示例：

// 移动元素到新父元素
$("#movingElement").appendTo("#newParent");// 复杂的DOM重组
var $item = $("#itemToMove");
var $newContainer = $("#newContainer");// 保存事件和数据
$item.appendTo($newContainer);// 或者使用detach保持数据和事件
var $detached = $("#itemToMove").detach();
$newContainer.append($detached);

如何绑定多个事件处理程序到一个元素？

事件管理：on()方法的多事件绑定
命名空间：事件命名空间管理
代码示例：

// 绑定多个事件
$("#myElement").on({"click": function() {console.log("点击事件");},"mouseenter": function() {$(this).addClass("hover");},"mouseleave": function() {$(this).removeClass("hover");},"dblclick": function() {console.log("双击事件");}
});// 使用事件命名空间
$("#myElement").on("click.custom", function() {console.log("自定义点击事件");
});// 移除特定命名空间的事件
$("#myElement").off(".custom");

如何使用jQuery动画效果？

动画系统：animate(), 预定义动画
队列控制：动画队列管理
代码示例：

// 自定义动画
$("#myElement").animate({left: "+=200px",opacity: 0.5,height: "toggle"
}, {duration: 1000,easing: "swing",complete: function() {console.log("动画完成");},step: function(now, fx) {// 每一步的回调console.log("当前值:", now);}
});// 动画队列
$("#myElement").animate({left: "200px"}, 1000).delay(500).animate({top: "100px"}, 800).queue(function(next) {// 自定义队列函数$(this).css("background", "red");next();});

如何克隆一个元素及其事件处理程序？

深度克隆：clone()方法的参数控制
数据和事件：克隆时的事件和数据保持
代码示例：

// 克隆元素（不包含事件和数据）
var $clone1 = $("#original").clone();// 克隆元素（包含事件和数据）
var $clone2 = $("#original").clone(true);// 克隆元素（包含事件和数据，并深度克隆子元素）
var $clone3 = $("#original").clone(true, true);// 实际应用：复制表单行
$(".add-row").click(function() {var $row = $(".template-row").clone(true, true);$row.find("input").val(""); // 清空输入框$row.appendTo("#form-container");
});

高级技巧和最佳实践

性能优化策略

// 1. 缓存jQuery对象
var $container = $("#container");
$container.find(".item").addClass("active");
$container.css("border", "1px solid red");// 2. 使用ID选择器（最快）
$("#mainContent").show();// 3. 避免过度使用通用选择器
$("div.container") // 不好
$(".container")    // 更好// 4. 使用事件委托处理动态内容
$("#staticParent").on("click", ".dynamic-child", handler);// 5. 链式操作减少DOM查询
$("#myElement").addClass("active").css("color", "red").slideDown(300);

事件处理最佳实践

// 命名空间便于管理
$("#element").on("click.myPlugin", handler);
$("#element").off(".myPlugin");// 一次性事件
$("#element").one("click", function() {console.log("只会执行一次");
});// 自定义事件
$("#element").on("customEvent", function(event, param1, param2) {console.log("自定义事件:", param1, param2);
});// 触发自定义事件
$("#element").trigger("customEvent", ["参数1", "参数2"]);

AJAX高级应用

// AJAX全局事件
$(document).ajaxStart(function() {$("#loading").show();
});$(document).ajaxStop(function() {$("#loading").hide();
});// AJAX队列管理
var ajaxQueue = $({});
$.ajaxQueue = function(ajaxOpts) {var oldComplete = ajaxOpts.complete;ajaxQueue.queue(function(next) {ajaxOpts.complete = function() {if (oldComplete) oldComplete.apply(this, arguments);next();};$.ajax(ajaxOpts);});
};