《JavaScript与jQuery案例教程》 数字资源 第 4 章 自定义对象及表格操作.pptx

JavaScript与jQuery案例教程 第4章 自定义对象及表格操作前端开发课程组目标TARGET知识目标了解 JavaScript 自定义对象建立的 6 种方案及优缺点。掌握 JavaScript 自定义对象的定义、创建及其属性和方法的访问。掌握 form 对象及其子对象的综合应用，数组的遍历。巩固学习 HTML 和 CSS 的使用方法。目标TARGET技能目标能使用混合模式（原型模式 + 构造函数模式）建立自定义对象。能通过表单动态创建自定义对象实例。能建立表格并设置其相关属性。能动态插入行和单元格，能动态修改单元格内容。能动态删除某行及选中多行并删除。能添加样式及动态改变元素的样式实现表格美化 。 1 任务描述 2 JavaScript自定义对象 3 JavaScript动态表格 4 任务实施1任务描述Part实现学生成绩管理 任务描述：实现学生成绩管理 本任务是编写JavaScript程序，实现学生成绩信息的添加、删除及展示功能。 2JavaScript 自定义对象Part◎ JavaScript 对象 ◎ JavaScript 自定义对象建立方案 ◎ 学生对象的建立 ◎ 使用表单动态创建学生对象 ◎ 遍历数组输出展示学生对象信息 1 JavaScript对象 JavaScript 中的所有事物都是对象：字符串、数值、数组、Date、RegExp、Math 等，对象只是一种特殊的数据。对象拥有属性和方法。这为我们编程提供了许多方便。但对于复杂的客户端程序而言，这些还远远不够。根据 JavaScript 的对象扩展机制，用户可以自定义 JavaScript 对象。String 有 length 等属性，有 indexof 等方法，建立自定义对象 Student，Student 对象有学号，姓名，各科成绩等属性，有求总分方法。 属性是与对象相关的值。访问对象属性的语法是： 方法是能够在对象上执行的动作。可以通过以下语法来调用方法：() 2 JavaScript自定义对象建立方案通过 JavaScript，能够定义并创建自己的对象。创建新对象有如下不同的方法：1. 直接创建模式这是最简单也是最直接的一种模式，首先创建一个引用类型的对象，然后为其添加自定义属性和方法。示例代码如下：var person = new Object(); = "Lily";person.age = 19;person.speak = function(){alert( + "is " + this.age + "years old");}person.speak();2.工厂模式 在函数内创建一个对象，给对象赋予属性及方法再将对象返回即可。它主要是将创建对象的过程进行了封装，示例代码如下：function createPerson(name, age){var person = new Object(); = name;person.age = age;person.speak = function(){ alert( + "is " + this.age + "years old"); } return person;}var person1 = createPerson("Lily ", 19); //由对象构造器创建新的对象实例3.构造函数模式 使用构造函数可以创建特定类型的对象，类似于 Array、Date 等原生 JavaScript 的对象。其实现方法如下：function Person(name, age){ = name;this.age = age;this.speak = function(){alert( + "is " + this.age + "years old");}}var person1 = new Person("Lily ", 19);var person2 = new Person("Jack", 18);console.log(person2 instanceof Person); // true，判断 person2 是否是 Person 的实例4 . 原型模式 创建的每个函数都有 prototype（原型）属性，这个属性会被对象副本所继承，这样创建新对象时不用重复已有的属性、方法，节省了内存空间。使用原型对象的好处就是可以让所有对象实例共享它所包含的属性及方法。function Person(){}P="Lily";Ptotype.age=19;Ptotype.speak = function(){alert( + "is " + this.age + "years old");}var person1 = new Person();person1.speak();5 . 混