jQuery 基础进阶考试题库（含详细答案解析）

jQuery基础进阶考试题库（含详细答案解析）考试说明：满分100分，考试时长60分钟，题型包含选择题、填空题、简答题、代码实操题，侧重基础语法与实际项目常用场景，无偏题怪题。一、单项选择题（共15题，每题2分，共30分）1.下列选项中，不是jQuery选择器的是（）A.标签选择器B.类选择器C.正则选择器D.ID选择器2.jQuery入口函数的正确写法是（）A.$(function(){})B.window.onload=function(){}C.function$(){}D.jQuery(function)3.想要获取id为box的元素，正确的写法是（）A.$(box)B.$('#box')C.$('.box')D.$('box#')4.jQuery中，用来设置元素文本内容的方法是（）A.val()B.text()C.html()D.attr()5.想要为元素添加CSS类名active，正确的方法是（）A.addClass('active')B.setClass('active')C.css('active')D.appendClass('active')6.jQuery中，隐藏匹配元素的方法是（）A.show()B.hide()C.display()D.none()7.下列方法中，可以获取表单输入框value值的是（）A.text()B.html()C.val()D.attr('value')8.想要为所有div元素绑定点击事件，写法正确的是（）A.$('div').click(function(){})B.div.click()C.$(div).onClick()D.$('div').onclick()9.jQuery中，移除元素所有自定义类名的方法是（）A.removeClass()B.clearClass()C.delClass()D.empty()10.下列哪个方法可以实现元素的淡入效果（）A.slideDown()B.fadeIn()C.show()D.animate()11.想要获取第一个匹配的div元素，正确的是（）A.$('div:first')B.$('div#first')C.$('div.one')D.first('div')12.jQuery中，empty()方法的作用是（）A.删除当前元素B.清空元素内部所有子节点C.隐藏元素D.清空元素样式13.想要为元素添加自定义属性data-id，值为100，正确的是（）A.attr('data-id',100)B.data('id',100)C.setAttr('data-id',100)D.css('data-id',100)14.下列属于jQuery层级选择器的是（）A.$('divp')B.$('.box')C.$('#btn')D.$('input')15.jQuery中，stop()方法的主要作用是（）A.停止代码执行B.停止当前元素正在进行的动画C.关闭页面D.终止事件冒泡二、填空题（共10空，每空2分，共20分）1.jQuery的核心选择器符号$等价于__________。2.页面DOM结构加载完成后执行的jQuery入口函数是__________。3.移除元素指定属性的方法是__________。4.实现元素滑动展开的方法是slideDown()，滑动收起的方法是__________。5.jQuery中__________方法可以同时设置多个CSS样式属性。6.事件__________可以阻止事件冒泡，避免父元素事件触发。7.获取元素自身HTML内容的方法是__________。8.筛选选择器中，__________可以获取最后一个匹配元素。9.向元素内部末尾添加内容的方法是__________。10.jQuery中__________方法可以切换元素的显示和隐藏状态。三、简答题（共3题，每题10分，共30分）1.简述jQuery入口函数和原生JSwindow.onload的区别？2.简述html()、text()、val()三个方法的使用场景和区别？3.简述jQuery中parent()、children()、find()三个节点查找方法的区别？四、代码实操题（共2题，每题10分，共20分）1.编写jQuery代码，实现功能：页面加载完成后，点击按钮（id=btn），将盒子（id=box）的宽度改为300px、高度改为200px、背景色改为蓝色，同时切换显示/隐藏状态。2.编写jQuery代码，实现功能：获取页面中所有复选框，点击【全选】按钮时，所有复选框选中；点击【取消全选】按钮时，所有复选框取消选中。参考答案及详细解析一、单项选择题答案及解析1.答案：C解析：jQuery基础选择器包含标签、类、ID、通配符、并集、交集选择器，无正则选择器这一分类。2.答案：A解析：$(function(){})是jQuery最简入口函数，等待DOM加载完成执行；B是原生JS加载事件，C、D写法语法错误。3.答案：B解析：ID选择器语法为$('#id名')，类选择器为.，标签选择器直接写标签名。4.答案：B解析：text()用于获取/设置纯文本内容；html()操作带标签的内容，val()操作表单值，attr()操作属性。5.答案：A解析：jQuery专属类名操作方法：addClass()添加类名，removeClass()移除类名，toggleClass()切换类名。6.答案：B解析：hide()隐藏元素，show()显示元素，均为jQuery基础显示隐藏方法。7.答案：C解析：val()专门用于获取和设置表单元素（input、textarea、select）的value值。8.答案：A解析：jQuery事件绑定简洁写法：$(选择器).事件名(回调函数)，原生onclick不适用jQuery对象。9.答案：A解析：removeClass()不传参时，清空元素所有类名；传参则移除指定类名。10.答案：B解析：fadeIn()淡入、fadeOut()淡出；slide系列是滑动动画，show()是瞬时显示无过渡。11.答案：A解析：:first是jQuery基础筛选器，用于获取匹配元素的第一个对象。12.答案：B解析：empty()清空元素内部所有子内容和子节点，保留当前元素标签；remove()才是删除当前元素。13.答案：A解析：attr()用于设置/获取元素自定义属性，data()仅用于操作data-*属性的取值，不推荐赋值。14.答案：A解析：$('divp')是后代层级选择器，匹配div内部所有p标签，其余均为基础选择器。15.答案：B解析：stop()方法用于停止元素当前正在执行的动画队列，常用于解决动画叠加卡顿问题。二、填空题答案及解析1.jQuery解析：$是jQuery的简写别名，两者完全等价。2.$(function(){})解析：jQuery标准DOM就绪入口函数，优于原生加载事件。3.removeAttr()解析：专门用于移除元素指定属性的方法。4.slideUp()解析：slideUp收起、slideDown展开，为滑动过渡动画方法。5.css()解析：css({键值对})可批量设置多个样式，单参数可获取样式。6.event.stopPropagation()解析：阻止事件冒泡的标准方法，适配所有绑定事件。7.html()解析：html()读取/设置元素内部HTML结构，包含标签和文本。8.:last解析：:last筛选器获取最后一个匹配的DOM元素。9.append()解析：append()内部末尾追加，prepend()内部开头追加。10.toggle()解析：toggle()自动判断元素状态，实现显示/隐藏切换。三、简答题答案解析1.jQuery入口函数和原生JSwindow.onload的区别①执行时机不同：jQuery入口函数在DOM结构加载完成后立即执行，无需等待图片、样式等资源加载；window.onload需要等待页面所有资源（图片、视频、CSS）全部加载完成后才执行，执行时机更晚。②执行次数不同：jQuery入口函数可以书写多个，互不冲突，会按顺序依次执行；window.onload只能书写一个，多个书写时会发生覆盖，仅最后一个生效。③书写简洁度不同：jQuery入口函数写法极简，兼容性更好；原生onload写法繁琐，需兼容部分低版本浏览器问题。2.html()、text()、val()的使用场景和区别①html()：用于操作普通标签元素，可以获取/设置元素内部的HTML标签+文本内容，会解析HTML标签；不适用于表单元素。②text()：用于操作所有元素，仅获取/设置纯文本内容，会自动过滤HTML标签，只展示文字，安全性更高。③val()：专门用于操作表单元素（input、textarea、select、checkbox），用来获取/设置表单的value值，对普通标签无效。3.parent()、children()、find()的区别①parent()：查找直接父级元素，仅匹配紧邻的上一级父节点，不会向上递归查找。②children()：查找直接子元素，仅匹配当前元素的一级子节点，不包含孙子及更深层级节点。③find()：查找所有后代元素，会递归遍历当前元素下所有子、孙、曾孙等所有层级节点，支持传筛选器精准匹配。四、代码实操题答案解析1.按钮控制盒子样式及显隐切换代码javascript

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

$(function(){

//绑定按钮点击事件

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

//批量设置盒子样式+切换显隐

$('#box').css({

width:'300px',

height:'200px',

backgroundColor:'blue'

}).toggle();//链式调用切换显示隐藏

})

})解析：利用jQuery链式调用简化代码，css批量设置样式，toggle()自动切换显隐，符合项目常用简洁写法。2.复选框全选/取消全选功能代码javascript

$(function(){

//全选按钮

$('#allCheck').click(function(){

//所有复选框设为选中状态

$('input[type="checkbox"]').