jQuery面试题精选：从基础到高级
低难度
-
如何在页面加载完成后执行一段代码？
-
核心方法：
$(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()vscss("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);
});
};
.NET全栈经典面试题库
内容涵盖以下内容
-
ASP.NET MVC应用场景面试题
-
WinForm应用场景面试题
-
jQuery应用场景面试题
-
3、SQLServer面试题
-
ASP.NET应用场景面试题
-
C#基础面试题及其答案
-
ASP.NET WebAPI应用场景面试题
-
MySQL面试题
-
SQL Server应用场景面试题
资源下载
下载链接1： .NET全栈经典面试题库
下载链接2： .NET全栈经典面试题库
浙公网安备 33010602011771号