jQuery 基础测试题（含详细答案）

jQuery基础测试题（含详细答案）适用场景：前端基础考核、自学自测、班级作业、面试基础刷题难易程度：基础入门，贴合日常开发常用语法考试时长：60分钟满分：100分一、单项选择题（共10题，每题3分，共30分）1.下列关于jQuery的说法，正确的是（）A.jQuery是一种新型编程语言B.jQuery是基于JavaScript的开源库，简化DOM操作C.jQuery完全可以替代HTML和CSSD.jQuery只能实现动画效果2.jQuery核心的选择器符号是（）A.$B.#C.D.@3.用来选取页面中id为box的元素，正确的jQuery写法是（）A.$(box)B.$("#box")C.$(".box")D.$(box.id)4.选取页面中所有class为item的元素，写法正确的是（）A.$("item")B.$("#item")C.$(".item")D.$(.item)5.jQuery中，等待页面DOM加载完成后再执行代码的方法是（）A.window.onload()B.$(function(){})C.ready()D.load()6.给元素设置点击事件的核心方法是（）A.hover()B.click()C.change()D.focus()7.隐藏指定元素的jQuery方法是（）A.show()B.hide()C.display()D.visible()8.获取input输入框的value值，正确的写法是（）A.$("input").val()B.$("input").value()C.$("input").html()D.$("input").text()9.给元素添加CSS类名active的方法是（）A.css("active")B.addClass("active")C.setClass("active")D.appendClass("active")10.jQuery中实现鼠标移入移出切换事件的方法是（）A.click()B.hover()C.mouseover()D.mouseout()二、填空题（共5题，每题4分，共20分）1.jQuery中_________方法可以获取/设置元素的文本内容（不含标签）。2.清空元素内部所有内容的方法是_________。3.jQuery中_________方法可以移除元素的指定CSS类名。4.获取页面中所有div元素的选择器写法是_________。5.实现元素淡入效果的方法是_________，淡出效果的方法是_________。三、简答题（共3题，每题10分，共30分）1.简述$(function(){})和window.onload的区别？2.简述html()、text()、val()三个方法的使用场景和区别？3.什么是jQuery隐式迭代？有什么作用？四、编程实操题（共1题，20分）编写完整代码，实现以下功能：1.页面中有一个按钮和一个div盒子；2.初始状态div隐藏；3.点击按钮，让div淡入显示，同时给div添加红色文字、20px字号；4.鼠标移入div，背景色变为浅灰色，鼠标移出恢复白色背景。参考答案（详细解析）一、单项选择题答案及解析1.B解析：jQuery不是编程语言，是JavaScript工具库，核心作用是简化原生JS的DOM操作、事件处理、动画、AJAX等操作，无法替代HTML、CSS，功能也不局限于动画。2.A解析：$是jQuery的核心简写符号，等同于jQuery()，是所有jQuery操作的起始标识。3.B解析：jQuery选择器规则和CSS一致，id选择器加#号，格式为$("#id名")。4.C解析：类名选择器使用.前缀，格式为$(".类名")，可以批量选取所有同名类的元素。5.B解析：$(function(){})是jQuery简写的DOM就绪事件，确保DOM结构加载完成后执行代码，比原生onload执行更早、更稳定。6.B解析：click()为元素绑定单机点击事件；hover是鼠标悬浮事件，change是值改变事件，focus是聚焦事件。7.B解析：hide()隐藏元素（占用文档流消失），show()显示元素，无display()、visible()原生jQuery方法。8.A解析：val()专门用于获取/设置表单元素（input、textarea、select）的值，html()获取标签内容，text()获取纯文本。9.B解析：addClass()追加CSS类名，removeClass()移除类名，toggleClass()切换类名，无另外两种写法。10.B解析：hover()可同时监听鼠标移入和移出两个状态；mouseover仅移入、mouseout仅移出，无法一键切换双向事件。二、填空题答案1.text()2.empty()3.removeClass()4.$("div")5.fadeIn()、fadeOut()三、简答题详细答案1.$(function(){})和window.onload的区别？①执行时机不同：$(function(){})在页面DOM结构加载完成后立即执行，无需等待图片、视频等资源加载；window.onload需要等待页面所有资源（图片、样式、脚本）全部加载完成后才执行，执行更晚。②执行次数不同：jQuery的DOM就绪事件可以同时编写多个，会依次全部执行；原生window.onload只能绑定一个事件，多个绑定会发生覆盖，仅最后一个生效。③兼容性不同：$(function(){})做了底层兼容处理，适配所有主流浏览器；window.onload是原生方法，部分低版本浏览器存在兼容问题。2.html()、text()、val()三个方法的使用场景和区别？①html()：用于获取/设置元素内部的HTML结构，支持解析标签。适用于div、p等普通容器元素，不用于表单元素。设置内容时会覆盖原有内容，可识别html标签。②text()：用于获取/设置元素的纯文本内容，会自动过滤HTML标签，只保留文字。适合只需要展示文本、不需要解析标签的场景，兼容性最好。③val()：专门针对表单元素（input、textarea、下拉框），用于获取/设置表单的输入值，普通容器元素无法使用该方法。3.什么是jQuery隐式迭代？有什么作用？隐式迭代是jQuery的核心特性之一：当jQuery选择器获取到一组多个元素时，后续调用的方法会自动遍历所有选中的元素，统一执行对应操作，无需开发者手动写循环遍历。作用：极大简化代码，替代原生JS的for循环操作，减少冗余代码，提高开发效率，同时让批量操作页面元素更加简洁直观。四、编程实操题参考答案（完整可运行代码）html

<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<title>jQuery实操题</title>

<scriptsrc="/jquery-3.6.4.min.js"></script>

<style>

.box{

width:200px;

height:100px;

line-height:100px;

text-align:center;

background:#fff;

border:1pxsolid#ccc;

display:none;/*初始隐藏*/

}

</style>

</head>

<body>

<buttonid="btn">点击显示盒子</button>

<divclass="box">测试内容</div>

<script>

//DOM加载完成后执行

$(function(){

//点击按钮事件

$("#btn").click(function(){

//淡入显示+设置文字颜色和字号

$(".box").fadeIn().css({

"color":"red",

"font-size":"20px"

});

})

//鼠标移入移出切换背景色

$(".box").hover(function(){

$(this).css("background","#eee");

},function(){

$(this).css("background","#fff")