jQuery与AJAX基础知识试题（含详细答案）

jQuery与AJAX基础知识试题（含详细答案）考试说明：满分100分，答题时间60分钟，题型包含选择题、填空题、简答题、代码实操题，重点考察jQuery基础语法、DOM操作、AJAX原理及实战使用。一、单项选择题（共10题，每题3分，共30分）1.下列关于jQuery的说法，错误的是（）A.jQuery是一款轻量级JavaScript库B.jQuery可以简化DOM操作、事件处理和AJAX请求C.jQuery完全替代原生JavaScriptD.jQuery兼容主流浏览器2.jQuery的核心入口函数写法正确的是（）A.$(function(){})B.window.onload=function(){}C.function$(){}D.jQuery(function)()3.想要选取页面中所有class为box的div元素，正确的选择器是（）A.$(div.box)B.$("div.box")C.$(#box)D.$("box")4.jQuery中用来获取元素自定义属性data-id值的方法是（）A.attr("data-id")B.prop("data-id")C.getData("id")D.val("data-id")5.下列不属于AJAX特点的是（）A.异步请求数据B.无需刷新整个页面更新数据C.可以同步请求数据D.必须依赖服务器运行，本地直接打开文件可正常请求6.jQuery中$.ajax()方法里，表示请求成功的回调参数是（）A.errorB.successC.completeD.beforeSend7.想要清空某个div元素的所有内容，jQuery正确写法是（）A.$("div").remove()B.$("div").empty()C.$("div").delete()D.$("div").clear()8.AJAX请求中，GET请求和POST请求的核心区别说法正确的是（）A.GET请求速度比POST慢B.GET请求参数拼接在URL上，有长度限制；POST参数在请求体中，无严格长度限制C.POST请求是异步，GET请求是同步D.GET请求安全性高于POST9.jQuery中阻止事件冒泡的方法是（）A.event.stopPropagation()B.event.preventDefault()C.returntrueD.event.stop()10.$.get()方法默认的请求数据格式是（）A.JSONB.文本字符串C.XMLD.HTML二、填空题（共5题，每题4分，共20分）1.jQuery中__________方法可以获取表单输入框的value值。2.AJAX的全称是____________________。3.jQuery中链式编程的核心原理是____________________。4.$.ajax()中，__________属性用于指定请求的接口地址，__________属性用于指定请求方式。5.阻止表单默认提交行为的方法是____________________。三、简答题（共3题，每题10分，共30分）1.简述jQuery入口函数和window.onload入口函数的区别？2.简述AJAX异步请求的工作原理？3.简述attr()和prop()方法的使用区别？四、代码实操题（共2题，每题10分，共20分）1.编写jQuery代码，实现：页面加载完成后，给按钮绑定点击事件，点击后获取id为username的输入框内容，并将内容打印在控制台。2.编写完整的jQueryAJAX代码，使用POST方式请求接口/login，传递参数username、password，请求成功后控制台打印返回数据，请求失败弹出错误提示。参考答案及详细解析一、单项选择题答案及解析1.答案：C解析：jQuery是基于JavaScript的工具库，用于简化开发，无法完全替代原生JS，底层依然依赖原生JavaScript实现。A、B、D均为jQuery的正确特性。2.答案：A解析：$(function(){})是jQuery简写的入口函数，等价于jQuery(document).ready(function(){})，作用是等待DOM结构加载完成后执行代码。B是原生JS页面加载事件，C、D语法错误。3.答案：B解析：jQuery选择器必须为字符串格式，标签+类名选择器语法为标签名.类名，因此$("div.box")可选中所有class为box的div元素。4.答案：A解析：attr()用于获取/设置元素的自定义属性；prop()主要用于获取/设置元素固有属性（如checked、disabled）。data-id属于自定义属性，需用attr()获取。5.答案：D解析：AJAX请求基于浏览器同源策略，本地直接打开html文件（file协议）会出现跨域问题，无法正常请求接口，必须在服务器环境下运行。A、B、C均为AJAX正确特点。6.答案：B解析：success是请求成功（状态码200）的回调函数；error是请求失败回调；complete是请求完成（无论成功失败）回调；beforeSend是请求发送前回调。7.答案：B解析：empty()用于清空元素内部所有子节点和内容，保留元素本身；remove()是删除整个元素；jQuery无clear()、delete()方法。8.答案：B解析：GET参数拼接在URL末尾，有长度限制、不安全、可缓存；POST参数放在请求体中，无严格长度限制、相对安全、不可缓存。二者均为异步请求，POST速度略慢于GET。9.答案：A解析：event.stopPropagation()阻止事件冒泡；event.preventDefault()阻止元素默认行为；returnfalse可同时阻止冒泡和默认行为。10.答案：B解析：$.get()默认接收文本格式数据，可通过第四个参数指定返回格式（json、xml、html等）。二、填空题答案1.val()2.AsynchronousJavaScriptAndXML（异步JavaScript和XML）3.jQuery方法执行后返回当前jQuery对象4.url、type5.event.preventDefault()（或returnfalse）三、简答题详细答案1.jQuery入口函数和window.onload入口函数的区别？（1）执行时机不同：jQuery入口函数在DOM结构加载完成后立即执行，无需等待图片、样式、视频等资源加载；window.onload需要等待页面所有资源（DOM、图片、静态资源）全部加载完成后才执行，执行时机更晚。（2）执行次数不同：jQuery可以同时编写多个入口函数，会按顺序依次执行；window.onload多次赋值会发生覆盖，仅最后一个生效。（3）语法简洁度不同：jQuery入口函数语法更精简，原生window.onload写法更繁琐。2.简述AJAX异步请求的工作原理？AJAX核心是通过XMLHttpRequest（或fetch）对象，在浏览器和服务器之间建立异步通信通道。页面触发请求事件后，浏览器创建请求对象，向服务器发送请求，不会阻塞页面后续代码执行和用户操作。服务器接收请求后处理数据并返回响应结果，浏览器监听到请求完成状态变化后，触发回调函数，局部更新页面数据，全程无需刷新整个页面，实现页面无刷新数据交互。3.简述attr()和prop()方法的使用区别？（1）适用场景不同：attr()用于操作自定义属性（如data-id、title）和HTML原生属性；prop()专门用于操作元素固有属性（如input的checked、disabled、selected）。（2）返回值不同：固有属性使用attr()获取时，只会返回初始值，状态变化后无法获取最新值；prop()可以实时获取元素最新的状态值（如复选框选中状态）。（3）优先级：操作布尔类型固有属性（checked、disabled）必须用prop()，自定义属性统一用attr()。四、代码实操题参考答案1.第一题代码javascript

//jQuery入口函数，页面DOM加载完成执行

$(function(){

//绑定按钮点击事件

$("button").click(function(){

//获取输入框value值

varusername=$("#username").val();

//控制台打印内容

console.log("输入的用户名：",username);

})

})2.第二题代码javascript

$(function(){

//AJAXPOST请求

$.ajax({

//请求接口地址

url:"/login",

//请求方式

type:"POST",

//传递的参数

data:{

username:"测试账号",

password:"测试密码"

},