jQuery 笔试真题（含详细答案）

jQuery笔试真题（含详细答案）说明：本套试题贴合前端初级岗位面试笔试场景，涵盖jQuery核心基础、选择器、事件机制、DOM操作、Ajax、遍历、动画、兼容性等高频考点，题型全面，答案通俗易懂，适合自测、面试复习、新人考核。一、单项选择题（10题）1.下列关于jQuery的说法，错误的是（）A.jQuery是一款轻量级JavaScript库B.jQuery可以简化DOM操作、事件处理、Ajax请求C.jQuery完全可以替代原生JavaScriptD.jQuery兼容大部分主流浏览器答案：C解析：jQuery是对原生JS的封装和简化，依托原生JavaScript运行，无法完全替代原生JS，部分底层逻辑、特殊场景仍需原生JS实现。2.jQuery核心入口函数写法正确的是（）A.$(function(){})B.window.onload(function(){})C.jQuery(function(){})()D.$(document).load(function(){})答案：A解析：$(function(){})是jQuery页面DOM加载完成的简写方式，等价于$(document).ready(function(){})。B是原生加载事件，C语法错误，D无load页面加载写法。3.选择页面中所有class为box的div元素，写法正确的是（）A.$(div.box)B.$("div.box")C.$(".boxdiv")D.$(#box)答案：B解析：jQuery选择器必须加引号。div.box匹配类名为box的div标签；A语法错误无引号；C匹配box元素内部的div；D是id选择器且无引号。4.下列方法中，用于获取元素自定义属性data-id值的是（）A.attr("data-id")B.prop("data-id")C.val("data-id")D.html("data-id")答案：A解析：attr()用于获取/设置元素自定义属性；prop()用于获取/设置元素固有属性（checked、selected等）；val()获取表单值；html()获取元素内容。5.jQuery中解绑所有事件的方法是（）A.unbind()B.off()C.removeEvent()D.clearEvent()答案：B解析：jQuery1.7+推荐使用off()解绑事件，无参数时解绑元素所有事件；unbind()是旧版本方法，已逐步废弃；CD为原生不存在方法。6.下列哪个方法可以实现元素隐藏（不占页面空间）（）A.css("display","block")B.hide()C.css("visibility","hidden")D.opacity(0)答案：B解析：hide()本质是设置display:none，元素隐藏且不占空间；visibility:hidden和opacity=0元素隐藏但仍占用页面原有空间。7.jQuery中each()遍历方法，终止循环的写法是（）A.breakB.continueC.returnfalseD.returntrue答案：C解析：jQueryeach遍历中，returnfalse等同于break，终止整个循环；returntrue等同于continue，跳过当前次循环，进入下一次。不能直接使用原生break。8.关于jQuery中$(this)说法正确的是（）A.指代当前页面所有元素B.指代触发当前事件的DOM原生对象C.指代触发当前事件的jQuery对象D.无具体含义答案：C解析：this是原生DOM对象，$(this)是将原生DOM对象包装为jQuery对象，可以调用jQuery所有方法。9.jQueryAjax中，用于请求成功的回调参数是（）A.errorB.successC.completeD.beforeSend答案：B解析：success：请求成功回调；error：请求失败回调；complete：请求完成（无论成功失败）回调；beforeSend：请求发送前回调。10.移除元素自身及内部所有内容和事件的方法是（）A.empty()B.remove()C.detach()D.clear()答案：B解析：empty()只清空元素内部内容，保留自身标签；remove()移除元素自身+内部所有内容+解绑所有事件；detach()移除元素但保留事件数据；clear()非jQuery方法。二、填空题（5题）1.jQuery中_________方法可以获取元素的文本内容，_________方法可以获取元素的HTML内容。答案：text()、html()2.筛选jQuery对象中第一个元素的方法是_________，筛选最后一个元素的方法是_________。答案：first()、last()3.jQuery中_________方法可以阻止事件冒泡，_________方法可以阻止默认行为。答案：event.stopPropagation()、event.preventDefault()4.给元素绑定点击事件的两种常用写法是click()和_________。答案：on('click',function(){})5.jQuery中_________方法可以在元素内部末尾追加内容，_________方法可以在元素内部开头追加内容。答案：append()、prepend()三、简答题（5题，高频面试）1.简述$(function(){})和window.onload的区别？答案：1）执行时机不同：$(function(){})是DOM结构加载完成后立即执行，无需等待图片、样式、视频等资源加载；window.onload需要等待页面所有资源全部加载完毕才执行，速度更慢。2）执行次数不同：页面可同时定义多个$(function(){})，会按顺序全部执行；多个window.onload会发生覆盖，仅最后一个生效。3）本质不同：$(function(){})是jQuery封装的DOM就绪事件；window.onload是原生页面加载事件。2.attr()和prop()的区别是什么？答案：1）attr()：操作HTML属性，适用于自定义属性（data-xxx）、普通固有属性（class、id、src），获取的是标签上书写的原始属性值，返回字符串。2）prop()：操作DOM对象属性，适用于表单布尔属性（checked、selected、disabled），返回布尔值/实时状态。核心场景：表单复选框、单选框状态判断必须用prop()，attr()无法获取实时选中状态。3.jQuery事件委托的原理和优势是什么？常用方法？答案：原理：利用事件冒泡机制，将子元素的事件绑定到父元素身上，通过事件源判断触发元素。优势：1）支持动态生成的元素绑定事件；2）减少事件绑定次数，优化性能；3）简化批量元素事件绑定代码。常用方法：on()实现事件委托，语法：$('父元素').on('事件名','子元素',回调)。4.hide()/show()和css隐藏显示的区别？答案：1）hide()/show()：jQuery封装的动画方法，自带过渡动画效果，本质操作display属性，隐藏后不占页面空间，支持设置动画时长。2）直接操作css：无动画效果，代码更繁琐，需要手动设置display、visibility、opacity，兼容性需要自行处理。补充：fadeIn/fadeOut透明过渡显示隐藏，slideUp/slideDown滑动过渡显示隐藏。5.简述jQuery中end()方法的作用？答案：end()用于返回上一次的jQuery对象状态，实现链式调用回溯。jQuery链式调用中，筛选、查找元素后会改变当前操作对象，调用end()可撤销上一次筛选，回到之前的元素集合，继续链式操作，精简代码。示例：$('.box').find('p').css('color','red').end().css('border','1pxsolid#000')；先修改p标签颜色，回溯修改box边框。四、编程题（3道，实操必考）1.页面存在多个class为item的列表项，实现：点击当前item，给当前项加active类，其余兄弟项移除active类（排他效果）参考答案：javascript

//排他选项卡效果

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

//当前元素加类，兄弟元素移除类

$(this).addClass("active").siblings().removeClass("active");

})2.封装一个简单的jQueryAjaxGET请求，请求地址为test.php，传递参数name和age，成功后打印返回数据，失败弹出错误提示参考答案：javascript

$.ajax({

url:"test.php",

type:"GET",

data:{

name:"张三",

age:20

},

dataType:"json",

success:function(res){

console.log("请求成功",res);

},

error:function(){

alert("请求失败，请检查接口地址或网络");

}

})3.动态创建一个div元素，class为content，文本内容为“测试动态元素”，添加到body最后，并给这个新元素绑定点击弹窗提示事件参考答案：javascript

//动态创建元素

var$div=$("<divclass='content'>测试动态元素</div>");

//添加到页面body末尾

$("body").append($div);

//绑定点击事件

$div.click(function(){

alert("点击了动态创建的元素");

})五、拓展判断题（5题）1.jQuery中的$符号可以用jQuery替代。（√）解析：为避免$冲突，可使用jQuery.noConflict()释放$，用jQuery关键字操作。2.find()查找子元素，children()查找所有后代元素。（×）解析：children()仅查找直接子元素；find()查找所有后代元素。3.jQuery对象和原生DOM对象可以直接互相调用方法。（×）解析：原生DOM对象需用$()包装为jQuery对象；jQuery对象可通过[0]或get(0)转为原生DOM对象。4.on()方法可以绑定多个事件，也可以实现事件委托。（√）5.empty()会移除元素自身标签。（×）解析：empty()