第一章链接：初识JavaScript - 章节课后练习题及答案
第二章链接：JavaScript 基础（上） - 章节课后练习题及答案
第三章链接：JavaScript 基础（下） - 章节课后练习题及答案
第四章链接：JavaScript 函数 - 章节课后练习题及答案
第五章链接：JavaScript 对象 - 章节课后练习题及答案
第六章链接：DOM（上） - 章节课后练习题及答案
第七章链接：DOM（下） - 章节课后练习题及答案
第八章链接：BOM - 章节课后练习题及答案
第九章链接：JavaScript网页特效 - 章节课后练习题及答案
第十章链接：jQuery（上） - 章节课后练习题及答案
第十一章链接：jQuery（下） - 章节课后练习题及答案
注：使用的是人民邮电出版社出版的《JavaScript+jQuery 交互式 Web 前端开发》书籍。
一、填空题
1、面向对象编程优势为：易维护、易复用、______。
2、面向对象的特征是：______、______、______。
3、类的继承使用______关键字。
4、用于访问和调用对象在父类上的方法使用的关键字是______。
二、判断题
1、如果一个类中没有编写constructor()方法，类中会自动创建一个constructor()构造方法。（ ）
2、在类中定义方法时，需要使用function关键字。（ ）
3、继承指的是隐藏内部的实现细节，只对外开放操作接口。（ ）
4、ES 6增加了Class关键字，用来定义一个类。（ ）
三、选择题
1、下列选项中，不是面向对象的特征的是（ ）。
A. 封装性 B. 跨平台性 C. 继承性 D. 多态性
2、下面关于类的描述，错误的是（ ）。
A. 在命名习惯上，类名使用首字母大写的形式
B. class Person {}表示定义一个Person类
C. 在JavaScript中，子类可以继承父类的一些属性和方法，在继承以后还可以增加自己独有的属性和方法
D. super关键字只能调用父类的构造方法
四、编程题
请通过面向对象思想实现列表的增删和移动，要求如下。
①在页面中显示一个列表，每一项是一个文本框，可以编辑文本。
②在每个文本框右边放3个链接，分别是“上移”“下移”和“删除”。
③在列表底部提供一个添加列表项的功能，用可以添加新的列表项。
页面效果如下图所示。
列表的增删和移动
参考答案：
一、填空题
1、易扩展
2、封装性、继承性、多态性
3、extends
4、super
二、判断题
1、对 2、错 3、错 4、错
三、选择题
1、B 2、D
四、编程题
1、编写页面结构：
<body> <form> <div class="list"> <ul class="list-ul"> <li class="list-option"> <input class="list-input" type="text" name="list[]"> <span class="list-btn"> <span class="list-up">[上移]</span> <span class="list-down">[下移]</span> <span class="list-del">[删除]</span> </span> </li> </ul> <div class="list-bottom"> <span class="list-add-show"><span>添加项目</span></span> <div class="list-add-area list-hide"> 添加到列表： <input class="list-add-input" type="text" name="list[]"> <input class="list-add-add" type="button" value="添加"> <input class="list-add-cancel" type="button" value="取消"> </div> </div> </div> </form> <script src="SmartList.js"></script> <script> SmartList('list', ['PHP', 'JavaScript']); </script> </body>2、编写CSS代码：
<style> body{background:#ddd;text-align:center} .list{display:inline-block;margin-top:20px;padding:40px; border-radius:8px;background:#fff;color:#333;text-align:left;font-size:13px} .list-ul{list-style:none;margin:0;padding:0} .list-option{padding:6px 0;} .list-input{width:300px;border:1px solid #ccc; padding:4px;font-size:14px;color:#333} .list-input:hover{background:#effaff} .list-btn span{color:#0065A0;;cursor:pointer} .list-btn span:hover{text-decoration:underline} .list-btn b{text-align:center;background-color:#D6EDFF; border-radius:6px;width:20px;height:20px;display:inline-block; margin:0 2px;cursor:pointer;color:#238FCE;border:1px solid #B3DBF8;float:left} .list-bottom{margin-top:5px} .list-add-show{color:#f60;cursor:pointer} .list-add-show:before{position:relative;top:1px; margin-right:5px;content:"+";font-weight:700;font-size:16px;font-family:arial} .list-add-show span:hover{text-decoration:underline} .list-add-area{margin-top:5px} .list-add-add{cursor:pointer;margin-left:5px} .list-add-cancel{cursor:pointer;margin-left:4px} .list-add-input{width:180px;border:1px solid #ccc; padding:4px;font-size:14px;color:#333} .list-add-input:hover{background:#effaff} .list-tmp{display:none} .list-hide{display:none} </style>3、创建SmartList.js文件，编写JavaScript代码。
(function(window) { /** * SmartList 智能列表生成 * @param {String} prefix 前缀 * @param {Array} defList 默认项数组 */ var SmartList = function(prefix, defList) { Find.prototype.prefix = prefix; var find = new Find(document.getElementsByClassName(prefix)[0]); var list = new List(find.className('option')); for (var i in defList) { list.add(defList[i]); } var add = { 'show': find.className('add-show'), 'area': find.className('add-area'), 'input': find.className('add-input'), 'add': find.className('add-add'), 'cancel': find.className('add-cancel') }; add.show.onclick = function() { add.area.classList.remove(prefix + '-hide'); }; add.add.onclick = function() { list.add(add.input.value); }; add.cancel.onclick = function() { add.area.classList.add(prefix + '-hide'); }; }; /** * List 生成列表 * @constructor * @param {Object} tmp 模板对象 */ function List(tmp) { this.tmp = tmp; this.obj = tmp.parentNode; this.obj.removeChild(tmp); } List.prototype = { /** * 向列表中添加项目 * @param {String} value 新项目的文本值 */ add: function(value) { var tmp = this.tmp.cloneNode(true); // ① 将value添加到list-input的value属性中 var find = new Find(tmp); find.className('input').value = value; var obj = this.obj; // ② 为list-up（上移）添加单击事件 find.className('up').onclick = function() { var prev = find.prev(); if (prev) { obj.insertBefore(tmp, prev); } else { alert('已经是第1个'); } }; // ③ 为list-down（下移）添加单击事件 find.className('down').onclick = function() { var next = find.next(); if (next) { obj.insertBefore(next, tmp); } else { alert('已经是最后1个'); } }; // ④ 为list-del（删除）添加单击事件 find.className('del').onclick = function() { if (confirm('您确定要删除？')) { obj.removeChild(tmp); } }; // ⑤ 将创建的列表项添加到列表末尾 this.obj.appendChild(tmp); } }; /** * Find 查找器 * @constructor * @param {Object} obj 待查找对象所在容器 */ function Find(obj) { this.obj = obj; } Find.prototype = { prefix: '', // 待查找的前缀 /** * 按照class查找元素 * @param {String} className */ className: function(className) { return this.obj.getElementsByClassName(this.prefix + '-' + className)[0]; }, /** * 查找当前元素的前一个兄弟元素节点 * @returns {Object} 查找结果 */ prev: function() { var node = this.obj.previousSibling; while(node) { if (node.nodeType === Node.ELEMENT_NODE) { break; } node = node.previousSibling; } return node; }, /** * 查找当前元素的后一个兄弟元素节点 * @returns {Object} 查找结果 */ next: function() { var node = this.obj.nextSibling; while(node) { if (node.nodeType === Node.ELEMENT_NODE) { break; } node = node.nextSibling; } return node; } }; window['SmartList'] = SmartList; })(window);
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
