響應(yīng)式Web應(yīng)用前端開發(fā)教程 試卷及答案 A

1、命題人：申閱人：弒卷（A卷）（2021-2022學年第一 學期期末考試）考試科目適用專業(yè) 班級（年級）得分一、填空（5分，每空1分）1、jQuery默認的縮寫符號是。2、Bootstrap設(shè)置右側(cè)外邊距為1倍$spacer。3、Bootstrap信息提示框基礎(chǔ)類是。4、版本中推薦使用 為元素綁定事件和處理函數(shù)，使用函數(shù)解除綁定。二、單項選擇題（30分，每題3分）1、設(shè)置Bootstrap卡片體中副標題的類是（）A. .titleA. .titleB.subtitleC. .card-subtitleD.card-title2.、jQuery設(shè)置元素樣式的方法是（nip料nip料A.first(

2、)B.C.css()D.3、Bootstrap4通過為卡片組的外包裹元素設(shè)置類A.accordionB.eq() style()()實現(xiàn)手風琴效果.cardC. .card-group4、Bootstrap4設(shè)置文本居右的類是(A. text-rightC. right-text5、Bootstrap巨幕基礎(chǔ)類是()。A. .jumpC、.jumb6、Bootstrap圓圈形加載動畫的基礎(chǔ)類是A. .spinnerD. .streched-card)B align-rightD. right-alignB、.jumbotronD、.jumbotron-fluidB. .spinner-circ

3、le面對不同分辨率設(shè)備靈活性強能夠快捷解決多設(shè)備顯示適應(yīng)問題缺點：兼容各種設(shè)備工作量大，效率低下代碼累贅，會出現(xiàn)隱藏無用的元素，加載時間加長2、.列出至少5種jQuer選擇器并簡述其功能（5分）答：斑徉器具體描述id選擇器根據(jù)id選取對應(yīng)的html元素類選擇器根據(jù)應(yīng)用的css類選取對應(yīng)的html元素標簽名選擇器根據(jù)標簽的名稱選取對應(yīng)的html元素祖先后代選擇器選擇指定祖先元素的所有指定類型的后代元素父子選擇器選擇指定父元素的所有指定類型的子元素prevsiblings 選擇器選擇指定prev元素后的根據(jù)siblings過濾的元素prev+next前后選擇器選擇指定prev元素后的所有next元

4、素上表中列出的，答對任意5個選擇器均可得分。3、試列舉Bootstrap圖標的三種用法。（5分）答：Svg HTML引用，在HTML文件中引用目標圖標的svghtml代碼。作為svg圖片引用，需要下載或者網(wǎng)絡(luò)引用目標圖標的svg文件。以web字體的方式引用，需要下載或者網(wǎng)絡(luò)引用圖標庫樣式文件，并配置目標圖標 類。4、列舉5種具有JS行為的Bootstrap組件。（5分）答:輪播器、下拉菜單、模態(tài)框、折疊面板、選項卡導航5、試述“互聯(lián)網(wǎng)+”創(chuàng)業(yè)、創(chuàng)新的理解，以及相關(guān)的創(chuàng)業(yè)、創(chuàng)新思路。（5分）開放性答案六、編程題（10分）1、補足以下空白出，采用Bootstrap4卡片組件實現(xiàn)上圖下文的圖文單元，

5、設(shè)置延展鏈接,超鏈效果在整個卡片區(qū)域有效。（5分，每空1分）h5 c lass =card-title”婺源/h5p class二card-text婺源縣,隸屬于江西省上饒市，位于江西省東北部，總 面積2967平方千米。2、將代碼空白的局部補充完整（要求使用jQuery）,完成如下要求的功能：（5分）1、表格首行和尾行的顏色為綠色（green）,數(shù)據(jù)行做斑馬紋效果底色為淺綠色（lightgreen）2、表格最后一個單元格中顯示所有“食品類”商品的價格總和。如以下圖所示編號分類名稱價格（元）I01良口口農(nóng)夫山泉礦泉水2.0002日用品洗發(fā)水25.0003娛樂休閑暑顏游5000.0004合口 良口

6、口面包20.00總額22.00評分標準 TOC o 1-5 h z jQuery選擇器使用1分jQuery設(shè)置樣式1分jQuery循環(huán)流程控制1分jQuery獲取文本并計算1分jQuery輸出1分#bills width: 400px;border-collapse: collapse;)th, td border: solid Ipx;)$(function() $(,tr:even,).css(,background-colorVlightgreen,);$(*tr:first,tr:last,).css(backgroiiiidcolor:green,color:* white,)；$f

7、oods = $(tr:contains(食品);sum = 0;$foods.each(function() $this = $(this);sum += parseFloat($this.find(,td:last,).text();!)；$Ctd:last).text(sum.toFixed(2);)；vth 編號 vth 分類 vth 名稱 v/thvth 價格(元)v/th01 vtd 食品 vtd農(nóng)夫山泉礦泉水 2.0002日用品v/td洗發(fā)水25.0003娛樂休閑暑假旅游5000.0004vtd 食品 v/tdvtd 面包 v/td20.00總額/td 20.00C. .spin

8、ner-growD. .spinner-border7、Mock.js中中文字的占位符是（）8、B ccentenceD. ctextA. cwordC. cletter可以使圖片呈現(xiàn)縮略圖效果的類是（A. .imgC. .img-fluidB. .img-shrinkD. .img-thumbnail9、使用以下哪個方法可以以滑動效果顯示HTML元素（A. slideToggle()C. slideUp()B . slideDown()D. slie()10. Bootstrap提供了一系列的對齊樣式，表示超出屏幕局部不換行的樣式是（）A. text-centerC . text-autoB

9、. text-justifyD. text-nowrap三、多項選擇題（10分，每題2分）1、以下哪些是正確的Bootstrap文本類（B. . text-infbD. . text-red2、以下那些是Bootstrap定義的主題顏色（A. .text-primaryC. . text-dangerD. mutedA. .blueA. .blueB .orangeC. .warning3、以下正確的定位相關(guān)的Bootstrap類是（A. .position-staticB .position-relativeC. .position-absoluteD. .position-sticky4、

10、下歹U Bootstrap斷點設(shè)置與像素對應(yīng)正確的選項是A. sm (540px)B ,xl (1200px)C. md (720px)D. 1g (992px)5、卜列哪些jQuery方法可以向指定兀素中添加兀素（A append()B prepend()C after()D before()四、判斷題（20分，每題2分）1、() Bootstrap內(nèi)置了一套響應(yīng)式、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)，最多24列2、() Ajax請求成功時觸發(fā)局部事件success。3、()語法中的“jQuery”是大小寫敏感的。4、()可以在導航鏈接標簽配置disable類禁用Bootstnip選項卡。5、()文

11、件名中含有“min”的Bootstrap庫文件經(jīng)過“壓縮”減小了文件大小。6、().one()為指定元素綁定事件和處理函數(shù)。每個元素可屢次運行事件處理器函數(shù)。7、() Bootstrap媒體對象只能實現(xiàn)左圖右文的圖文單元。8、()事件由目標元素向祖先元素逐級傳遞，直到DOM根節(jié)點的機制稱為事件捕獲。9、() Bootstrap*的組件行為是不依賴jQuery的。10 ()媒體對象組件需要設(shè)置“.positon-relative”類來支持延展鏈接。五、問答題(25分)1、試述響應(yīng)式布局的優(yōu)缺點(5分)2、列出至少5中jQuery選擇器并簡述其功能。(5分)3、試列舉Bootstrap圖標的三種用

12、法。（5分）4、列舉5種具有JS行為的Bootstrap組件。（5分）5、試述“互聯(lián)網(wǎng)+”創(chuàng)業(yè)、創(chuàng)新的理解，以及相關(guān)的創(chuàng)業(yè)、創(chuàng)新思路。（5分）六、程序填空題（10分）1、補足以下空白出，采用Bootstrap4卡片組件實現(xiàn)上圖下文的圖文單元，設(shè)置延展鏈接， 超鏈效果在整個卡片區(qū)域有效。（5分，每空1分）h5 class =婺源/h5p class=婺源縣，隸屬于江西省上饒市，位于江西省東北 部，總面積2967平方千米。a href二detail. html?id=33z， class=2、將代碼空白的局部（要求使用jQiie）補充完整，完成如下要求的功能：（5分）1）表格首行和尾行的顏色為綠色

13、（green）,數(shù)據(jù)行做斑馬紋效果底色為淺綠色（lightgreen）2）表格最后一個單元格中顯示所有“食品類”商品的價格總和。如以下圖所示編號分類名稱價格（元）I01良口口農(nóng)夫山泉礦泉水2.0002日用品發(fā)水25.0003娛樂休閑暑顏游5000.0004合口 良口口面包20.00總額22.00#bills width: 400px;border-collapse: collapse;)th, td border: solid Ipx;)$(function() ）;vth 編號 v/th 分類 vth 名稱 vth 價格（元）01vtd 食品 vtd農(nóng)夫山泉礦泉水 2.0002日用品 vtd洗發(fā)水v/td 25.0003vtd娛樂休閑 vtd暑假旅游v/td 5000.0004 食品 面包 20.0020.00命題人:中閱人:弒卷答多（A春）（2021-2022學年第一 學期期末考試）考試科目適用專業(yè)適用專業(yè)班級（年級）草稿紙頁!（此頁與試卷一起裝訂，作為試卷第9頁）I一、填空（5分，每空1分）11、$2、mr-3：3、toastI4、on（） off（）4二、單項選擇題