登陆题目详情
填空题 阅读下列说明、效果图和代码,用jquery完成指定功能. 【说明】 先要完成一个通讯录,在需要添加人员的时候,点击"添加行",当点击删除的时候,序号需要重新排序.同时为了提高用户体验,需要用js实现隔行换色.请根据现有的代码和效果图补全代码(1)-(10) 【效果图】 
【index.html】 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>通讯录</title> <link rel="stylesheet" href="css/style.css"> <!-- 引入jq库 --> <script src="_____(1)______"></script> <script src="js/index.js"></script> </head> <body> <div> <!-- 表格居中 --> <table ___(2)___="center"> <!-- 表格标题 --> <___(3)____>通讯录</___(3)____> <thead> <tr> <th>序号</th> <th>姓名</th> <th>电话</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>张三</td> <td>13754448888</td> <td> <button>删除</button> </td> </tr> <tr> <td>2</td> <td>李四</td> <td>13788889999</td> <td> <button>删除</button> </td> </tr> </tbody> </table> <button>添加一行</button> </div> </body> </html> 【style.css】 .box{ width: 400px; margin:30px auto; text-align: center; } .box>button{ width: 100%; height: 40px; margin-top:20px; border:none; border-radius: 10px; background-color: green; color:#fff; } table{ width:400px; text-align:center; /*边框重叠*/ _____(4)_______; } table caption{ height: 60px; line-height: 60px; font-weight: 600; } table th{ background-color: #f5f5f5; } table,td,th{ border:1px solid #ccc; } table tr{ height:50px; } 【index.js】 $(function(){ // 添加行 绑定点击事件 $(".add").___(5)____(function(){ var newTr=$("<tr></tr>"); for(i=0;i<$("thead>tr>th").length;i++){ newTd=$("<td></td>"); if(i==0){ newTd.text($("tbody>tr").length+1); } if(i==$("thead>tr>th").length-1){ //设置标签内容 newTd.__(6)____("<button>删除</button>") } //追加节点 newTd.__(7)_____(newTr); }; $("tbody").append(newTr); changeColor(); }) // 隔行换色 function changeColor(){ $("tbody tr:odd").css("background","#f5f5f5"); $("tbody tr:even").css("background","#fff"); } changeColor(); // 删除行 $("tbody").____(8)___("click","button",function(){ $(this).parents("tr").remove(); changeColor(); order(); }); //重新排序 function order(){ $("tbody tr").__(9)____(function(index){ $(this).children().eq(0).text(__(10)____); }); } }) 素材下载: 
第四题.rar
学科：响应式Web开发
时间：2026-05-21 22:58:46
相关题目
相关作业
题目1填空题
阅读下列说明、效果图和HTML代码,进行静态网页开发,填写(1)至(10)代码. 【说明】 这个某项目中的其中一部分,应用HTML5和css3技术完成页面的布局.项目包含主页index.html、style.css和img.要求鼠标经过翻转出现遮罩层,根据效果图和已有的代码补全(1)-(10)的代码 【效果图】 <img src="https://tihai-oss-cloud.itihey.com/img/0b7fce3d2c865d9fe268527185c9fce0.png"> 【代码:主页index.html】此页代码在此省略,请在"实操代码"中第二题查看 【代码:style.css】 .clearfix:after{ display:block; content:''; ____(1)_____;/*清除浮动*/ } .clearfix{ zoom:1; ____(2)_____;/*文字居中*/ } .fl{ float:left; } .fr{ float:right; } .part5 .tBox{ width: 1154px; height: 430px; margin: 30px auto 0; position: relative; } .part5 .tBox .picBox{ width: 1000px; margin: 0 auto;/*盒子居中*/ height: 100%; ______(3)_____;/*溢出隐藏*/ position: relative; } .part5 .tBox .picBox .roll{ position: relative; margin-right: 24px; perspective: 1000px; ___(4)______;/*鼠标经过变小手状态*/ } /*最后一个元素*/ .part5 .tBox .picBox .roll:last-child{ margin-right:0; } .part5 .tBox .picBox li .bg{ width: 100%; height: 65px; background:____(5)_____; /*背景黑色透明80%*/ position: absolute; left: 0; bottom: 0; } .part5 .tBox .picBox li h3{ position: absolute; left: 0; bottom: 0; width: 100%; height: 65px; text-align: left; padding-left: 13px; } .part5 .tBox .picBox li .tName{ font-size: 18px; color: #fff; padding-top: 13px; margin-bottom: 5px; } .part5 .tBox .picBox li .tTitle{ font-size: 12px; color: #b4b4b4; } .roll .box-content{ width: 100%; height: 480px; position: absolute; top: 0; left: 0; background: ____(5)_______; transform: ____(6)____;/*Y轴旋转90度*/ transition: all 0.50s ease-in-out 0s;/*过渡效果*/ overflow: hidden; } .roll .box-img{ transform: rotateY(0); transition: all 0.50s ease-in-out 0s;/*过渡效果*/ } .roll:hover .box-img{ transform: ___(7)_____;/*Y轴旋转-90度*/ } .roll:hover .box-content{ transform: ___(8)_____;/*Y轴旋转0度*/; } .roll .box-content .t1{ font-size: 20px; ___(9)____: bold;/*文字加粗*/ color: #fff; padding-top: 50px; } .roll .box-content .t2{ font-size: 16px; color: #fff; padding-top: 12px; } .roll .box-content .t3{ width: 190px; height: 1px ; background: #fff; margin: 20px auto 0; } .roll .box-content .t4{ font-size: 14px; width: 182px; ____(10)______;/*文字两端对齐*/ color: #fff; margin: 20px auto 0; } 【问题】(20分,每空2分) 进行静态页开发,补全代码,在(1)至(10)处填入正确的内容. <img src="https://tihai-oss-cloud.itihey.com/img/b1764b4a6fc8684c6a1865adb99803a9.gif">第二题.rar题目2填空题
阅读下列说明、效果图和代码,用jquery完成指定功能. 【说明】 先要完成一个通讯录,在需要添加人员的时候,点击"添加行",当点击删除的时候,序号需要重新排序.同时为了提高用户体验,需要用js实现隔行换色.请根据现有的代码和效果图补全代码(1)-(10) 【效果图】 <img src="https://tihai-oss-cloud.itihey.com/img/fe0256c0919bb199a31790802b6a02db.png"> 【index.html】 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>通讯录</title> <link rel="stylesheet" href="css/style.css"> <!-- 引入jq库 --> <script src="_____(1)______"></script> <script src="js/index.js"></script> </head> <body> <div> <!-- 表格居中 --> <table ___(2)___="center"> <!-- 表格标题 --> <___(3)____>通讯录</___(3)____> <thead> <tr> <th>序号</th> <th>姓名</th> <th>电话</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>张三</td> <td>13754448888</td> <td> <button>删除</button> </td> </tr> <tr> <td>2</td> <td>李四</td> <td>13788889999</td> <td> <button>删除</button> </td> </tr> </tbody> </table> <button>添加一行</button> </div> </body> </html> 【style.css】 .box{ width: 400px; margin:30px auto; text-align: center; } .box>button{ width: 100%; height: 40px; margin-top:20px; border:none; border-radius: 10px; background-color: green; color:#fff; } table{ width:400px; text-align:center; /*边框重叠*/ _____(4)_______; } table caption{ height: 60px; line-height: 60px; font-weight: 600; } table th{ background-color: #f5f5f5; } table,td,th{ border:1px solid #ccc; } table tr{ height:50px; } 【index.js】 $(function(){ // 添加行 绑定点击事件 $(".add").___(5)____(function(){ var newTr=$("<tr></tr>"); for(i=0;i<$("thead>tr>th").length;i++){ newTd=$("<td></td>"); if(i==0){ newTd.text($("tbody>tr").length+1); } if(i==$("thead>tr>th").length-1){ //设置标签内容 newTd.__(6)____("<button>删除</button>") } //追加节点 newTd.__(7)_____(newTr); }; $("tbody").append(newTr); changeColor(); }) // 隔行换色 function changeColor(){ $("tbody tr:odd").css("background","#f5f5f5"); $("tbody tr:even").css("background","#fff"); } changeColor(); // 删除行 $("tbody").____(8)___("click","button",function(){ $(this).parents("tr").remove(); changeColor(); order(); }); //重新排序 function order(){ $("tbody tr").__(9)____(function(index){ $(this).children().eq(0).text(__(10)____); }); } }) 素材下载: <img src="https://tihai-oss-cloud.itihey.com/img/b1764b4a6fc8684c6a1865adb99803a9.gif">第四题.rar题目3填空题
阅读下列说明、效果图和代码,完成移动端布局. 【说明】 在某项目中,项目中的文件包含index.html、style.css和images文件夹.请根据现有的代码和效果图补全代码(1)-(5) 【效果图】 <img src="https://tihai-oss-cloud.itihey.com/img/036ebcecaa1b2a7475a764d2ce42319b.png"> 【index.html】参考附件素材资源 【style.css】 html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, textarea, th, td { margin: 0; padding: 0; } html,body { color: #333; margin: 0; height: 100%; font-family: '微软雅黑'; font-weight: normal; } * { box-sizing: border-box; } a { text-decoration: none; color: #000; } img { width: 100%; height: auto; display: block; border: 0; } body { background: #fff; color: #666; } ul,ol{ list-style: none; } .clearfix::after { clear: both; content: ""; display: block; } .header{ height: 44px; position: relative; display: flex; z-index: 102; background:#fefefe; } .header .center{ -webkit-box-ordinal-group: 3; ____(1)_____;/*设置弹性盒子*/ justify-content: center; align-items: center; height: 44px; width: 90%; margin-left: 4%; } .search-box { background: #ededed; border-radius: 22px; position: relative; width: 100%; margin: 0 auto; height: 32px; } .icon-search { position: absolute; background-image: url("../images/index.png"); left: 8px; top: 0.4rem; background-size: 19px; } .search-box input { width: 100%; background: none; border: none; font-size: 0.85rem; text-align: left; height: 32px; border-radius: 3px; padding: 0.55rem 0 0.55rem 1.8rem; } .scrollView { width: 100%; height: 100%; _____(2)_____;/*剩余空间全部分给该盒子*/ overflow-y: auto; overflow-x: hidden; position: relative; padding-bottom: 53px; } .slider-wrapper { display: flex; width: 96%; margin:0 auto; transform: translate3d(0px, 0px, 0px); position: relative; z-index: 1; padding:0.55rem; } .slider-wrapper img { width: 100%; height: auto; display: block; border: none; } .item { width: 96%; margin:0 auto; padding: 0.5rem; position: relative; overflow: hidden; ____(1)_____; justify-content: space-between; } .palace-grid .palace-grid-icon{ width: 40px; height: 40px; margin:0 auto; } .palace-grid .palace-grid-text { display: block; text-align: center; color: #333; font-size: 0.85rem; _____(3)_______;/*阻止换行*/ _____(4)_______;/*文字溢出显示省略号*/ overflow: hidden; padding-top: 0.2rem; } .palace-grid .palace-grid-text h2 { font-size: 0.8rem; font-weight: normal; color: #666666; } .flex { display: flex; align-items: center; padding: 15px; position: relative; } .flex h1 { flex: 1; min-width: 0; font-size: 14px; color: #333; } .list-theme{ width: 96%; margin:0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; } .list-item { width: 46%; margin: 0 2% 2% 2%; background: #fff; display: block; overflow: hidden; } .list-theme-message { background: #fff; padding: 0.3rem 0; } .list-theme-title { color: #333; font-size: 0.92rem; margin: 0.2rem 0; overflow: hidden; font-weight: normal; _____(3)_______;/*阻止换行*/ _____(4)_______;/*文字溢出显示省略号*/ } .list-theme-message p { color: #f68f40; font-size: 0.99rem; font-weight: 500; height: 1.5rem; } .list-theme-message p i { font-style: normal; font-size: 0.7rem; border: 1px solid #f68f40; border-radius: 2px; padding: 0 0.2rem; } .list-theme-message p em { font-style: normal; font-size: 0.7rem; padding: 0 0.2rem; color: #999999; ____(5)_____;/*删除线*/ } 素材下载: <img src="https://tihai-oss-cloud.itihey.com/img/b1764b4a6fc8684c6a1865adb99803a9.gif">第五题.rar题目4单选题
aimA. 目标,瞄准B. 潜力C. 缺席D. 思考
题目5单选题
potentialA. 目标B. 潜力C. 土豆D. 蛋白质
题目6单选题
foremanA. 职员B. 工头C. 警察D. 工人
题目7单选题
absentA. 缺席的B. 资源C. 打扫D. 照顾
题目8单选题
thoughtA. 通过B. 想法C. 尽管D. 带来
题目9单选题
clerkA. 钟B. 工头C. 时钟D. 职员
题目10单选题
resourceA. 资源B. 源泉C. 酸D. 思考
下载 题海APP
拍照搜题更快捷
- 海量题库
- 无搜索限制
- 快捷拍照搜题
