JavaScript与jQuery案例教程课件第4章2.pptx

1、 第4章 自定义对象及表格操作前端开发课程组JavaScript与jQuery案例教程目标TARGET知识目标 了解 JavaScript 自定义对象建立的 6 种方案及优缺点。掌握 JavaScript 自定义对象的定义、创建及其属性和方法的访问。掌握 form 对象及其子对象的综合应用，数组的遍历。巩固学习 HTML 和 CSS 的使用方法。目标TARGET技能目标 能使用混合模式（原型模式+构造函数模式）建立自定义对象。能通过表单动态创建自定义对象实例。能建立表格并设置其相关属性。能动态插入行和单元格，能动态修改单元格内容。能动态删除某行及选中多行并删除。能添加样式及动态改变元素的样式实

2、现表格美化。1 任务描述 2 JavaScript自定义对象 3 JavaScript动态表格 4 任务实施1任务描述Part实现学生成绩管理 本任务是编写JavaScript程序，实现学生成绩信息的添加、删除及展示功能。任务描述：实现学生成绩管理 2JavaScript 自定义对象Part JavaScript 对象 JavaScript 自定义对象建立方案 学生对象的建立 使用表单动态创建学生对象 遍历数组输出展示学生对象信息 1 JavaScript对象 JavaScript 中的所有事物都是对象：字符串、数值、数组、Date、RegExp、Math 等，对象只是一种特殊的数据。对象拥有

3、属性和方法。这为我们编程提供了许多方便。但对于复杂的客户端程序而言，这些还远远不够。根据 JavaScript 的对象扩展机制，用户可以自定义 JavaScript 对象。String 有 length 等属性，有 indexof 等方法，建立自定义对象 Student，Student 对象有学号，姓名，各科成绩等属性，有求总分方法。属性是与对象相关的值。访问对象属性的语法是：objectName.propertyName 方法是能够在对象上执行的动作。可以通过以下语法来调用方法：objectName.methodName()2 JavaScript自定义对象建立方案通过 JavaScript

4、，能够定义并创建自己的对象。创建新对象有如下不同的方法：1.直接创建模式这是最简单也是最直接的一种模式，首先创建一个引用类型的对象，然后为其添加自定义属性和方法。示例代码如下：var person=new Object();person.name=Lily;person.age=19;person.speak=function()alert(this.name+is +this.age+years old);person.speak();2.工厂模式 在函数内创建一个对象，给对象赋予属性及方法再将对象返回即可。它主要是将创建对象的过程进行了封装，示例代码如下：function createPe

5、rson(name,age)var person=new Object();person.name=name;person.age=age;person.speak=function()alert(this.name+is +this.age+years old);return person;var person1=createPerson(Lily,19);/由对象构造器创建新的对象实例3.构造函数模式 使用构造函数可以创建特定类型的对象，类似于 Array、Date 等原生 JavaScript 的对象。其实现方法如下：function Person(name,age)this.name=

6、name;this.age=age;this.speak=function()alert(this.name+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（原型）属性，这个属性会被对象副本所继承，这样创建新对象时不用重复已有的属性、方法，节省了内存空间。使用原型对象的好处就是

7、可以让所有对象实例共享它所包含的属性及方法。function Person()Person.prototype.name=Lily;Person.prototype.age=19;Person.prototype.speak=function()alert(this.name+is +this.age+years old);var person1=new Person();person1.speak();5.混合模式（原型模式+构造函数模式）混合模式中构造函数模式用于定义实例属性，而原型模式用于定义方法和共享属性。每个实例都会有自己的一份实例属性，但同时又共享着方法，最大限度的节省了内存。fu

8、nction Person(name,age)this.name=name;this.age=age;Person.prototype.speak=function()alert(this.name+is +this.age+years old);var person1=new Person();person1.speak();3 学生对象的建立举例演示【例 4-1】使用混合模式方案创建学生对象实例，展示学生信息。4 使用表单动态创建学生对象表单元素访问的两种常用方式：表单名.表单元素名 或 表单名.elementsi相应访问表单元素的值的两种方式：表单名.表单元素名.value 或 表单名.

9、elementsi.value 方法名称意义示例action表单提交后的URLmyForm.action=Login.jspmyForm.action=http;/elements表单中包含的元素对象（例如，文本、按钮等）数组myForm.elementsilength表单中元素的个数myForm.length(与myForm.elements.length一样)method提交表单的方式，post或getmyForm.method=postname表单的名字，可以直接用于引用表单var formName=myForm.nametarget提交表单后显示下一网页的位置myForm.target

10、=_top数组的常用方法举例演示【例 4-2】使用表单动态创建学生对象实例。5 遍历数组输出展示学生对象信息举例演示【例 4-3】遍历数组，实现验证学号是否重复，输出学生信息。JavaScript for.in 语句循环遍历对象的属性。3动态表格Part 表格建立 动态插入行和单元格 动态删除某行 动态选中多行并删除 1 表格建立标签：在 HTML 中定义表格布局。包含的元素：表头信息；：定义一个表格行；：定义一个表格头；若是纯文字，默认会以粗体的样式表现。：定义一个单元格；table 常用的属性 border：定义表格的边框宽度，默认为 0，即无边框举例演示 设计学生基本信息统计表。2 动态

11、插入行和单元格 JavaScript 可以控制 table，动态的插入行和单元格。rows 保存着元素中行的HTMLCollection。语法：tableObject.insertRow(index)该方法创建一个新的 TableRow 对象，表示一个新的 标记，用于在表格中的指定位置插入一个新行，并返回这个新插入的行 TableRow，新行将被插入 index 所在行之前。table.insertRow()，默认添加到最后一行，统计行数：table.rows.lengthcells 保存着元素中单元格的 HTMLCollectioin 集合；insertCell(pos)向 cells 集合

12、的指定位置插入一个单元格,并返回引用；table.insertCell()，默认添加到最后一列，还可以根据需要动态改变单元格的属性，统计列数：table.rows.item(0).cells.length举例演示【例 4-4】动态添加行与列。【例 4-5】动态添加行与列，展示学生信息。3 动态删除某行语法：table.deleteRow(index)用来删除指定位置的行。row.deleteCell(index)用来/删除指定位置的单元格;DOM 方法：removeChild(node)用来删除子节点（元素）；parentNode 用来获取节点（元素）的父节点。举例演示【例 4-6】动态删除某

13、行。【例 4-7】动态删除学生管理表格的某行。4 动态选中多行并动态删除举例演示【例 4-8】单复选按钮值的获取和展示。【案例 4-7】动态删除学生管理表格的某行。1.单复选按钮的应用语法：document.getElementsByName(nodeName)表示通过 name 属性的值获取一组元素。该方法接受一个参数，查找名称。方法返回一个HTMLCollection 对象，返回所有带有给定 name 属性的元素，通常用于表单单复选按钮组的获取。【案例 4-7】动态删除学生管理表格的某行。2.复选框对象应用在表格 举例演示【例 4-9】复选按钮实现选中多个商品，并删除。4任务实施Part实现学生成绩管理功能【演示】本任务是采用 HTML+CSS 的布局方式，结合 JavaScript 方法，实现学生成绩信息的添加、删除及展示功能，如图所示。举例演示谢谢多一点努力,多一点实践,多一点点就能创造奇迹!