2025年jQuery的考試題及答案一、單項(xiàng)選擇題（每題2分，共20分）1.以下哪個(gè)jQuery選擇器可以選中所有包含“data-role”屬性且值為“modal”的div元素？A.$("div[data-role='modal']")B.$("div[attr='data-role:modal']")C.$("div:has(data-role='modal')")D.$("div[class~='data-role-modal']")2.執(zhí)行以下代碼后，頁(yè)面中p元素的文本內(nèi)容是？```javascript$("p").text("Hello").append("<span>World</span>");```A.HelloWorld（span標(biāo)簽被轉(zhuǎn)義顯示）B.Hello（span標(biāo)簽被忽略）C.HelloWorld（span標(biāo)簽正常渲染）D.Hello<span>World</span>（文本包含標(biāo)簽）3.關(guān)于jQuery的事件委托，以下描述錯(cuò)誤的是？A.使用`.on()`方法綁定事件時(shí)，第二個(gè)參數(shù)指定委托的目標(biāo)元素B.事件委托適用于動(dòng)態(tài)添加的元素C.委托的事件會(huì)在事件冒泡階段觸發(fā)D.委托的事件無(wú)法通過(guò)`.off()`完全移除4.若要將id為“container”的元素的背景色在300ms內(nèi)漸變?yōu)榧t色，以下代碼正確的是？A.$("container").css("background-color","red",300);B.$("container").animate({backgroundColor:"red"},300);C.$("container").fadeTo(300,1,"red");D.$("container").slideDown(300,()=>{$(this).css("background","red")});5.以下哪段代碼可以正確獲取選中的單選按鈕（name為“gender”）的值？A.$("input[name='gender']:checked").val();B.$("input[name='gender']").val();C.$("input:radio[name='gender']:selected").val();D.$("input[type='radio'][name='gender']").attr("value");6.執(zhí)行`$.ajax({url:"/api/data",dataType:"json"})`時(shí)，若服務(wù)器返回“{code:200,data:[1,2,3]}”，則回調(diào)函數(shù)中`xhr.status`的值是？A.200B.404C.500D.由服務(wù)器端設(shè)置7.關(guān)于jQuery的鏈?zhǔn)讲僮?，以下說(shuō)法正確的是？A.所有jQuery方法都支持鏈?zhǔn)讲僮鰾.鏈?zhǔn)讲僮鞯谋举|(zhì)是方法返回當(dāng)前jQuery對(duì)象C.鏈?zhǔn)讲僮鲿?huì)導(dǎo)致性能顯著下降D.鏈?zhǔn)讲僮髦荒茉趩蝹€(gè)元素上使用8.要為所有class為“btn”的按鈕綁定點(diǎn)擊事件，且事件處理函數(shù)中`this`指向被點(diǎn)擊的按鈕元素，正確的代碼是？A.$(".btn").on("click",function(){...});B.$(".btn").click(()=>{...});C.$("body").on("click",".btn",()=>{...});D.$(".btn").bind("click",()=>{...});9.以下哪個(gè)方法可以獲取元素相對(duì)于其offsetparent的坐標(biāo)？A.`.position()`B.`.offset()`C.`.scrollTop()`D.`.outerHeight()`10.若要將jQuery對(duì)象轉(zhuǎn)換為原生DOM對(duì)象數(shù)組，應(yīng)使用？A.`.get()`B.`.toArray()`C.`.dom()`D.`.elements()`二、填空題（每空2分，共20分）1.jQuery的核心設(shè)計(jì)思想是“__________，__________”（WriteLess,DoMore）。2.使用`$("div").eq(2)`可以獲取第__________個(gè)div元素（從0開始計(jì)數(shù)）。3.若要阻止事件冒泡，應(yīng)在事件處理函數(shù)中調(diào)用__________方法；若要阻止默認(rèn)行為，應(yīng)調(diào)用__________方法。4.`$.extend({add:function(a,b){returna+b}})`會(huì)將`add`方法添加到__________對(duì)象上。5.動(dòng)畫隊(duì)列的默認(rèn)執(zhí)行方式是__________（填“并行”或“串行”）。6.當(dāng)使用`$().serialize()`序列化表單時(shí)，會(huì)自動(dòng)忽略__________的表單元素（至少寫一種狀態(tài)）。7.若要獲取窗口的可視寬度，應(yīng)使用`$(window).__________()`方法。8.編寫jQuery插件時(shí)，通常使用`$.fn.extend()`擴(kuò)展__________對(duì)象的方法。三、簡(jiǎn)答題（每題8分，共40分）1.簡(jiǎn)述jQuery中`$(document).ready()`與`window.onload()`的區(qū)別。2.說(shuō)明事件委托的原理及其適用場(chǎng)景。3.比較`$.ajax()`與`$.getJSON()`的異同點(diǎn)。4.如何理解jQuery的“隱式迭代”特性？請(qǐng)舉例說(shuō)明。5.當(dāng)頁(yè)面中同時(shí)引入jQuery和其他庫(kù)（如Prototype）導(dǎo)致`$`沖突時(shí)，應(yīng)如何解決？至少寫出兩種方法。四、編程題（共70分）1.（15分）使用jQuery實(shí)現(xiàn)以下功能：頁(yè)面加載后，動(dòng)態(tài)提供一個(gè)包含5行2列的表格（id為“dataTable”），第一行是表頭（內(nèi)容為“姓名”“年齡”），其余4行為數(shù)據(jù)行（內(nèi)容自定義），并為每個(gè)數(shù)據(jù)行的單元格綁定鼠標(biāo)移入事件（鼠標(biāo)移入時(shí)背景色變?yōu)閒0f0f0，移出時(shí)恢復(fù)默認(rèn)）。2.（20分）實(shí)現(xiàn)一個(gè)選項(xiàng)卡組件：頁(yè)面中有3個(gè)選項(xiàng)卡標(biāo)題（class為“tab-title”）和3個(gè)內(nèi)容面板（class為“tab-content”），初始顯示第一個(gè)內(nèi)容面板。要求：點(diǎn)擊選項(xiàng)卡標(biāo)題時(shí)，切換顯示對(duì)應(yīng)的內(nèi)容面板；被選中的標(biāo)題添加class“active”（其他標(biāo)題移除該class）；內(nèi)容面板切換時(shí)使用`slideToggle()`動(dòng)畫（300ms）；禁止快速連續(xù)點(diǎn)擊導(dǎo)致的動(dòng)畫隊(duì)列堆積。3.（20分）使用`$.ajax()`實(shí)現(xiàn)分頁(yè)加載數(shù)據(jù)：當(dāng)頁(yè)面滾動(dòng)到底部時(shí)，加載下一頁(yè)數(shù)據(jù)（每頁(yè)10條），并將數(shù)據(jù)追加到id為“l(fā)ist”的ul列表中。要求：接口地址：`/api/list?page=頁(yè)碼`（返回JSON格式：{code:200,data:[{id:1,title:"標(biāo)題1"},...]}）；加載時(shí)顯示“加載中...”提示，加載完成后隱藏；無(wú)更多數(shù)據(jù)時(shí)顯示“沒(méi)有更多內(nèi)容”并停止加載；防止重復(fù)請(qǐng)求（如滾動(dòng)過(guò)快時(shí)多次觸發(fā)）。4.（15分）封裝一個(gè)jQuery插件`$.fn.highlight()`，要求：支持配置參數(shù)：`color`（高亮顏色，默認(rèn)ffeb3b）、`duration`（持續(xù)時(shí)間，默認(rèn)1000ms）；調(diào)用后，，使插件該元素的背景色先變?yōu)閌color`，然后漸變?yōu)樵尘吧恢С宙準(zhǔn)秸{(diào)用（如`$("p").highlight().css("font-size","14px")`）。答案一、單項(xiàng)選擇題1.A2.C3.D4.B5.A6.A7.B8.A9.A10.B二、填空題1.寫得少；做得多2.3（eq(2)表示索引為2的元素，即第三個(gè)）3.event.stopPropagation()；event.preventDefault()4.jQuery（或$）5.串行6.禁用（disabled）或未勾選（如復(fù)選框未選中）7.width8.jQuery實(shí)例（或$.fn）三、簡(jiǎn)答題1.區(qū)別：`$(document).ready()`在DOM結(jié)構(gòu)加載完成后觸發(fā)（無(wú)需等待圖片、樣式表等資源），可多次綁定；`window.onload()`在頁(yè)面所有資源（包括圖片、視頻）加載完成后觸發(fā)，只能綁定一次（后綁定的會(huì)覆蓋之前的）；執(zhí)行時(shí)機(jī)：`ready()`早于`onload()`。2.事件委托原理：利用事件冒泡機(jī)制，將事件綁定到父元素，通過(guò)判斷事件目標(biāo)（event.target）是否為目標(biāo)元素來(lái)觸發(fā)處理函數(shù)。適用場(chǎng)景：動(dòng)態(tài)添加的元素事件綁定；減少事件綁定次數(shù)（多個(gè)子元素共享同一事件處理邏輯）；提高性能（避免為每個(gè)子元素單獨(dú)綁定事件）。3.異同點(diǎn)：相同點(diǎn)：均用于發(fā)起HTTPGET請(qǐng)求獲取數(shù)據(jù)，底層均基于`$.ajax()`。不同點(diǎn)：`$.getJSON()`是`$.ajax()`的簡(jiǎn)化封裝，固定`dataType:"json"`；`$.ajax()`支持更多配置（如type、data、beforeSend、error等），功能更靈活；`$.getJSON()`的回調(diào)函數(shù)參數(shù)為（data,status,xhr），而`$.ajax()`通過(guò)success、error等回調(diào)處理。4.隱式迭代指jQuery對(duì)選中的多個(gè)元素默認(rèn)執(zhí)行“遍歷”操作，無(wú)需手動(dòng)循環(huán)。例如`$("p").css("color","red")`會(huì)將所有p元素的顏色設(shè)為紅色，無(wú)需寫`$("p").each(function(){$(this).css(...)})`。5.解決方法：使用`jQuery.noConflict()`釋放`$`符號(hào)，后續(xù)用`jQuery`代替（如`jQuery("div")`）；自定義作用域：`(function($){/使用$/})(jQuery)`；同時(shí)引入時(shí)調(diào)整順序，讓jQuery最后加載（避免被其他庫(kù)覆蓋`$`）。四、編程題1.參考代碼：```javascript$(document).ready(function(){const$table=$("<tableid='dataTable'></table>");lethtml="<tr><th>姓名</th><th>年齡</th></tr>";for(leti=1;i<=4;i++){html+=`<tr><td>用戶${i}</td><td>${20+i}</td></tr>`;}$table.html(html).appendTo("body");$("dataTabletd").on({mouseenter:function(){$(this).css("background-color","f0f0f0");},mouseleave:function(){$(this).css("background-color","");}});});```2.參考代碼：```javascript$(function(){$(".tab-content").eq(0).show().siblings(".tab-content").hide();$(".tab-title").eq(0).addClass("active");$(".tab-title").on("click",function(){if($(this).hasClass("active"))return;//防止重復(fù)點(diǎn)擊constindex=$(this).index();//清除動(dòng)畫隊(duì)列并停止當(dāng)前動(dòng)畫$(".tab-content:visible").stop(true,true).slideToggle(300,()=>{$(".tab-content").eq(index).slideToggle(300);});$(this).addClass("active").siblings(".tab-title").removeClass("active");});});```3.參考代碼：```javascript$(function(){letcurrentPage=1;letisLoading=false;lethasMore=true;functionloadData(){if(!hasMore||isLoading)return;isLoading=true;$("loading").text("加載中...").show();$.ajax({url:`/api/list?page=${currentPage}`,dataType:"json",success:function(res){if(res.code===200){if(res.data.length<10){hasMore=false;$("loading").text("沒(méi)有更多內(nèi)容");}else{currentPage++;$("loading").hide();}res.data.forEach(item=>{$(`<li>${item.title}</li>`).appendTo("list");});}},complete:function(){isLoading=false;},error:function(){$("loading").text("加載失敗").show();}});}$(window).