响应式Web应用前端开发教程 试卷及答案 共 2套 AB

1、命题人：申阅人：弑卷（A卷）（-学年第一学期期末考试）考试科目适用专业 班级（年级）得分一、填空（5分，每空1分）1、jQuery默认的缩写符号是。2、Bootstrap设置右侧外边距为1倍$spacer。3、Bootstrap信息提示框基础类是。4、版本中推荐使用 为元素绑定事件和处理函数，使用函数解除绑定。二、单项选择题（30分，每题3分）1、设置Bootstrap卡片体中副标题的类是（）B. .subtitleD. .card-title)B. .subtitleD. .card-title)A. .titleC. .card-subtitle2.、jQuery设置元素样式的方法是(ni

2、p料nip料A. first()B.C. css()D.3、Bootstrap4通过为卡片组的外包裹元素设置类A. .accordioneq()style()()实现手风琴效果C. .card-group4、Bootstrap4设置文本居右的类是(A. text-rightC. right-text5、Bootstrap巨幕基础类是()。A. .jumpC、.jumb6、Bootstrap圆圈形加载动画的基础类是A. .spinnerB .cardD. .streched-card)B align-rightD. right-alignB、.jumbotronD、.jumbotron-flui

3、dB. .spinner-circle面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题缺点：兼容各种设备工作量大，效率低下代码累赘，会出现隐藏无用的元素，加载时间加长2、.列出至少5种jQuer选择器并简述其功能（5分）答：斑徉器具体描述id选择器根据id选取对应的html元素类选择器根据应用的css类选取对应的html元素标签名选择器根据标签的名称选取对应的html元素祖先后代选择器选择指定祖先元素的所有指定类型的后代元素父子选择器选择指定父元素的所有指定类型的子元素prevsiblings 选择器选择指定prev元素后的根据siblings过滤的元素prev+next前后选择器选择

4、指定prev元素后的所有next元素上表中列出的，答对任意5个选择器均可得分。3、试列举Bootstrap图标的三种用法。（5分）答：Svg HTML引用，在HTML文件中引用目标图标的svghtml代码。作为svg图片引用，需要下载或者网络引用目标图标的svg文件。以web字体的方式引用，需要下载或者网络引用图标库样式文件，并配置目标图标 类。4、列举5种具有JS行为的Bootstrap组件。（5分）答:轮播器、下拉菜单、模态框、折叠面板、选项卡导航5、试述“互联网+”创业、创新的理解，以及相关的创业、创新思路。（5分）开放性答案六、编程题（10分）1、补足以下空白出，采用Bootstrap

5、4卡片组件实现上图下文的图文单元，设置延展链接,超链效果在整个卡片区域有效。（5分，每空1分）h5 c lass =card-title”婺源/h5p class二card-text婺源县,隶属于江西省上饶市，位于江西省东北部，总 面积2967平方千米。2、将代码空白的局部补充完整（要求使用jQuery）,完成如下要求的功能：（5分）1、表格首行和尾行的颜色为绿色（green）,数据行做斑马纹效果底色为浅绿色（lightgreen）2、表格最后一个单元格中显示所有“食品类”商品的价格总和。如以下图所示编号分类名称价格（元）I01良口口农夫山泉矿泉水2.0002日用品洗发水25.0003娱乐休闲

6、暑颜游5000.0004合口 良口口面包20.00总额22.00评分标准 TOC o 1-5 h z jQuery选择器使用1分jQuery设置样式1分jQuery循环流程控制1分jQuery获取文本并计算1分jQuery输出1分#bills width: 400px;border-collapse: collapse;)th, td border: solid Ipx;)$(function() $(,tr:even,).css(,background-color,/lightgreen,);$(*tr:first,tr:last,).css(backgrouiidcolor:green,c

7、olor:* white,)；$foods = $(，ti:contains(食品)，;sum = 0;$foods.each(function() $this = $(this);sum += parseFloat($this.find(td:last).text();)；$(td:last).text(sum.toFixed(2);)；vth 编号 vth 分类 vth 名称 v/thvth 价格(元)v/th01 vtd 食品 vtd农夫山泉矿泉水 2.0002日用品v/td洗发水25.0003娱乐休闲暑假旅游5000.0004vtd 食品 v/tdvtd 面包 v/td20.00总额/

8、td 20.00命题人：申阅人：nip料弑卷（B卷）（2021-2022学年第一学期期末考试）考试科目适用专业 班级（年级）得分一、填空（5分，每空1分）1、Mock随机中文城市的占位符是 o2、获取id为score的文本类型控件的值，jQuery实现代码为3、使用 过滤器可以匹配所有索引值为奇数的元素。公 4. jQuery的每个事件处理函数都包含一个 对象作为参数。!5、在script,元素中，可以使用 属性指定引用jQuery脚本的路径。： 二、单项选择题（30分，每题3分）1 Bootstrap4清除浮动的类是（）A. .clearC. .clearfixB. .clear-float

9、D. .clearfixed2、Bootstrap4设置表格中的行鼠标高亮的类是（）A. .table-stripedB. .table-hoverC. .table-darkD. .table-light3、Bootstrap4设置图片保持比例缩放的类是（）A. .img-fluidB. .img-changeC. .img-responsiveD. .img-flex4、Bootstrap显示右侧边框的类是（）。A. .border-bottomB. .border-leftC. .border-rightD. .border-top5、为导航栏设置浅色系配色的类是（）。A. .navba

10、r-lightC. .nav-darkB - nav-lightD. .navbar-dark TOC o 1-5 h z 6、Bootstrap可以增大字体的类是？（）.largeB.lead.biggerD.plus7、设置Bootstrap轮播器活跃状态应使用()类A.activeB.show.fadeD.toggle8、下面那个函数不是jQuery鼠标事件处理函数？（）B . keyup()B . keyup()A. mouseup()C. hover()9、卡片组件包裹元素的类是？(A. .card-bodyC. .card-wrapperC. hover()9、卡片组件包裹元素的类

11、是？(A. .card-bodyC. .card-wrapperD. contextmenu() )B .card-containerD. .card10、使用（）函数可以切换HTML元素的显示和隐藏状态10、使用（）函数可以切换HTML元素的显示和隐藏状态A. hide()C. toggleQB. show()D. change()三、多项选择题（10分，每题2分）1、以下哪些BootStr叩边距相关的类是正确的（A. .my-2B. .mz-3C. .pb-7D. .pt-02、以下设置相对宽度的Bootstrap类是正确的（A. .w-autoB . .w-25C. .w-30D. .w

12、-503、以下能够正确设置Bootstrap display属性的是A. .d-noneB .d-md-flexC. .d-lg-blockD. .d-sm-show4、以下哪些是Bootstrap折叠面板事件（)OB removeAll()D detach()5、以下哪些jQuery方法可以删除元素(A remove()C detachAll()四、判断题(20分，每题2分)1、() blur事件在元素获得焦点时发生。2、() Bootstrap栅格系统一行有12列。3、()在button标签上可以不设置Bootstrap按钮的基础类就可以显示Bootstrap按钮 外观。4、()语法中的“

13、jQuery”是大小写敏感的。5、() :checked只能选取指定集合中所有被选中的复选框。6、() jQuery库必须先于Bootstrap JS库引用。7、()相邻选择器的符号是“+工8、() Bootstrap文件名中含有“bundle”的js文件没有集成poppero9、()事件由目标元素向后代元素逐级传递的机制称为事件冒泡。10、() jQuery的$名2方法可以以get和post两种方法发送异步HTTP请求。五、简答题(25分)1、什么是响应式布局(5分)。2、列举至少5种具有JS行为的Bootstrap组件(5分)。3、jQuery对象与DOM对象之间如何相互转换（5分）。4、

14、列出至少5种jQuery动画函数并简述其功能及参数含义（5分）。5、试述“互联网+”创业、创新的理解，以及相关的创业、创新思路。（5分）六、编程题（10分）1、补足空白处，实现折叠面板，内容局部默认展开。（5分，每空1分）。一折叠触发元素一 线路管理! -折叠展开内容- 线路维护 定制线路/aX/div2、将代码空白的局部补充完整，完成如下要求的功能：（5分）1）表格首行和尾行的颜色为绿色（green）,数据行做斑马纹效果底色为浅绿色（lightgreen）2）表格最后一个单元格中显示所有“食品类”商品的价格总和。如以下图所示编号分类名称价格（元）I01良口口农夫山泉矿泉水2.0002日用品发

15、水25.0003娱乐休闲暑颜游5000.0004合口 良口口面包20.00总额22.00#bills width: 400px;border-collapse: collapse;)th, td border: solid Ipx;)$(function() C. .spinner-growD. .spinner-border7、Mock.js中中文字的占位符是（）8、B ccentenceD. ctextA. cwordC. cletter可以使图片呈现缩略图效果的类是（A. .imgC. .img-fluidB. .img-shrinkD. .img-thumbnail9、使用以下哪个方法

16、可以以滑动效果显示HTML元素（A. slideToggle()C. slideUp()B . slideDown()D. slie()10. Bootstrap提供了一系列的对齐样式，表示超出屏幕局部不换行的样式是（）A. text-centerC . text-autoB. text-justifyD. text-nowrap三、多项选择题（10分，每题2分）1、以下哪些是正确的Bootstrap文本类（B. . text-infbD. . text-red2、以下那些是Bootstrap定义的主题颜色（A. .text-primaryC. . text-dangerD. mutedA.

17、.blueA. .blueB .orangeC. .warning3、以下正确的定位相关的Bootstrap类是（A. .position-staticB .position-relativeC. .position-absoluteD. .position-sticky4、下歹U Bootstrap断点设置与像素对应正确的选项是A. sm (540px)B ,xl (1200px)C. md (720px)D. 1g (992px)5、卜列哪些jQuery方法可以向指定兀素中添加兀素（A append()B prepend()C after()D before()四、判断题（20分，每题2分

18、）;vth 编号 v/th 分类 vth 名称 vth 价格（元）01vtd 食品 vtd农夫山泉矿泉水 2.0002日用品 vtd洗发水v/td 25.0003vtd娱乐休闲 vtd暑假旅游v/td 5000.0004 食品 面包 20.0020.00命题人：中阅人：草稿纸页然卷答拿（B卷）（2021-2022学年第一 学期期末考试）考试科目适用专业 班级（年级）得分（此页与试卷一起装订，作为试卷第9页）一、填空（5分，每空1分）1、city2、$(#score).val()3、:odd4、 event5、src第二、单项选择题（30分，每题3分）I1、C2、C3、A4、C5、A止6、B7

19、A8、B9、D10 C.!三、多项选择题（10分，每题2分）烝1、AD 2、ABD 3、ABC 4、ABCD 5、ABD.1 四、判断题（20分，每题2分）!1、X2、J3、X4、J5、XI6、J7、J8、X9、X10、X五、简答题（25分）|1、什么是响应式布局（5分）。i答：!一个网站能够兼容多种视口宽度终端一一而不是为每种终端开发一个特定的版本。2、列举至少5种具有JS行为的Bootstrap组件（5分）。答：选项卡导航、模态框、轮播器、折叠面板、下拉菜3、jQue”对象与DOM对象之间如何相互转换（5分）。答：jQueryindex或者 jQuery.get（index）获取相应的 D

20、OM 对象通过将DOM对象包括在$（）中来获得相应的jQuery对象4.列出5种jQuery动画函数并简述其功能及参数含义（5分）单函数功能show()显示指定元素集合中每一个元素。hide()隐藏指定元素集合中的每一个元素toggle(显示或者隐藏指定元素集合中每一个元素 没有参数时，元素 在隐藏和显示之间切换fadeln()通过将元素变为不透明来显示指定元素集合中的每一个元素， 称为淡入效果fadeOut()通过将元素变为透明来隐藏元素集合中每一个元素，称为淡出 效果fadeTo()调节指定元素集合中每一个元素透明度opacity:0-1之间的数， 指明透明度fadeToggle()指定元

21、素集合中每一个元素切换淡入、淡出效果slideUpO以滑动效果隐藏兀素集合中每一个元素slideDown()以滑动效果显不指定兀素集合中的每一个元素slideToggle()以滑动效果隐藏或者显不指定兀素集合中每一个元素5、试述“互联网+”创业、创新的理解，以及相关的创业、创新思路。（5分）开放性答案，要点：互联网+六、编程题（10分）1、补足空白处，实现折叠面板，内容局部默认展开。（5分，每空1分）!一折叠触发元素一 线路管理!一折叠展开内容一 线路维护 /aX/div 定制线路2、将代码空白的局部补充完整，完成如下要求的功能：（5分）1、表格首行和尾行的颜色为绿色（green）,数据行做斑

22、马纹效果底色为浅绿色（lightgreen）2、表格最后一个单元格中显示所有“食品类”商品的价格总和。如以下图所示编号分类名称价格（元）I01良口口农夫山泉矿泉水2.0002日用品洗发水25.0003娱乐休闲暑颜游5000.0004合口 良口口面包20.00总额22.00评分标准 TOC o 1-5 h z jQuery选择器使用1分jQuery设置样式1分jQuery循环流程控制1分jQuery获取文本并计算1分jQuery输出1分#bills width: 400px;border-collapse: collapse;)th, td border: solid Ipx;)$(functi

23、on() $(*tr:even,).css(,background-color,/lightgreen,);$(ti:行 rst,tr:last).css(background-color:green,color:* white,)；$foods = $(tr:contains(食品)；sum = 0;$foods.each(function() $this = $(this);sum += parseFloat($this.find(*td:Iasf).text();)；$(td:last).text(sum.toFixed(2);)；vth 编号 vth 分类 名称 vth 价格(元)v/

24、th01vtd 食品 v/tdvtd农夫山泉矿泉水2.0002日用品v/td洗发水25.0003娱乐休闲v/td暑假旅游v/td5000.0004 食品 vtd 面包 v/td20.00总额/td20.001、() Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，最多24列2、() Ajax请求成功时触发局部事件success。3、()语法中的“jQuery”是大小写敏感的。4、()可以在导航链接标签配置disable类禁用Bootstnip选项卡。5、()文件名中含有“min”的Bootstrap库文件经过“压缩”减小了文件大小。6、().one()为指定元素绑定事件和处理函

25、数。每个元素可屡次运行事件处理器函数。7、() Bootstrap媒体对象只能实现左图右文的图文单元。8、()事件由目标元素向祖先元素逐级传递，直到DOM根节点的机制称为事件捕获。9、() Bootstrap*的组件行为是不依赖jQuery的。10 ()媒体对象组件需要设置“.positon-relative”类来支持延展链接。五、问答题(25分)1、试述响应式布局的优缺点(5分)2、列出至少5中jQuery选择器并简述其功能。(5分)3、试列举Bootstrap图标的三种用法。（5分）4、列举5种具有JS行为的Bootstrap组件。（5分）5、试述“互联网+”创业、创新的理解，以及相关的创业、创新思路。（5分）六、程序填空题（10分）1、补足以下空白出，采用Bootstrap4卡片组件实现上图下文的图文单元，设置延展链接， 超链效果在整个卡片区域有效。（5分，每空1分）h5 class =婺源/