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

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

2、改单元格内容。能动态删除某行及选中多行并删除。能添加样式及动态改变元素的样式实现表格美化 。目标TARGET技能目标能使用混合模式（原型模式 + 构造函 1 任务描述 2 JavaScript自定义对象 3 JavaScript动态表格 4 任务实施 1 任务描述 2 JavaScript自定义对象 3 1任务描述Part实现学生成绩管理 1任务描述Part实现学生成绩管理 本任务是编写JavaScript程序，实现学生成绩信息的添加、删除及展示功能。任务描述：实现学生成绩管理 本任务是编写JavaScript程序，实现学生成2JavaScript 自定义对象Part JavaScript 对

3、象 JavaScript 自定义对象建立方案 学生对象的建立 使用表单动态创建学生对象 遍历数组输出展示学生对象信息 2JavaScript 自定义对象Part JavaScr1 JavaScript对象 JavaScript 中的所有事物都是对象：字符串、数值、数组、Date、RegExp、Math 等，对象只是一种特殊的数据。对象拥有属性和方法。这为我们编程提供了许多方便。但对于复杂的客户端程序而言，这些还远远不够。根据 JavaScript 的对象扩展机制，用户可以自定义 JavaScript 对象。String 有 length 等属性，有 indexof 等方法，建立自定义对象 St

4、udent，Student 对象有学号，姓名，各科成绩等属性，有求总分方法。 属性是与对象相关的值。访问对象属性的语法是： objectNpertyName 方法是能够在对象上执行的动作。可以通过以下语法来调用方法： objectName.methodName() 1 JavaScript对象 JavaScrip2 JavaScript自定义对象建立方案通过 JavaScript，能够定义并创建自己的对象。创建新对象有如下不同的方法：1. 直接创建模式这是最简单也是最直接的一种模式，首先创建一个引用类型的对象，然后为其添加自定义属性和方法。示例代码如下：var person = new Obj

5、ect(); = Lily;person.age = 19;person.speak = function()alert( + is + this.age + years old);person.speak();2 JavaScript自定义对象建立方案通过 JavaSc2.工厂模式 在函数内创建一个对象，给对象赋予属性及方法再将对象返回即可。它主要是将创建对象的过程进行了封装，示例代码如下：function createPerson(name, age)var person = new Object(); = name;person.age = age;person.speak = func

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

7、+ years old);var person1 = new Person(Lily , 19);var person2 = new Person(Jack, 18);console.log(person2 instanceof Person); / true，判断 person2 是否是 Person 的实例3.构造函数模式 使用构造函数可以创建特定类型的对4 . 原型模式 创建的每个函数都有 prototype（原型）属性，这个属性会被对象副本所继承，这样创建新对象时不用重复已有的属性、方法，节省了内存空间。使用原型对象的好处就是可以让所有对象实例共享它所包含的属性及方法。function

8、 Person()P=Lily;Ptotype.age=19;Ptotype.speak = function()alert( + is + this.age + years old);var person1 = new Person();person1.speak();4 . 原型模式 创建的每个函数都有 prot5 . 混合模式 （原型模式 + 构造函数模式） 混合模式中构造函数模式用于定义实例属性，而原型模式用于定义方法和共享属性。每个实例都会有自己的一份实例属性，但同时又共享着方法，最大限度的节省了内存。function Person(name, age) = name;this.ag

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

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

11、=_top数组的常用方法举例演示【例 4-2】 使用表单动态创建学生对象实例。4 使用表单动态创建学生对象表单元素访问的两种常用方式：方法5 遍历数组输出展示学生对象信息举例演示【例 4-3】 遍历数组，实现验证学号是否重复，输出学生信息。JavaScript for.in 语句循环遍历对象的属性。5 遍历数组输出展示学生对象信息举例演示【例 4-3】 3动态表格Part 表格建立 动态插入行和单元格 动态删除某行 动态选中多行并删除 3动态表格Part 表格建立 动态插入行和单元格 1 表格建立标签：在 HTML 中定义表格布局。包含的元素：表头信息；：定义一个表格行；：定义一个表格头；若是

12、纯文字，默认会以粗体的样式表现。 ：定义一个单元格；table 常用的属性 border ：定义表格的边框宽度，默认为 0，即无边框举例演示 设计学生基本信息统计表。1 表格建立标签：在 HTML 中定义表格布局2 动态插入行和单元格 JavaScript 可以控制 table，动态的插入行和单元格。rows 保存着元素中行的HTMLCollection。语法： tableObject.insertRow(index) 该方法创建一个新的 TableRow 对象，表示一个新的 标记，用于在表格中的指定位置插入一个新行，并返回这个新插入的行 TableRow，新行将被插入 index 所在行之前

13、。table.insertRow()，默认添加到最后一行，统计行数：table.rows.lengthcells 保存着元素中单元格的 HTMLCollectioin 集合； insertCell(pos) 向 cells 集合的指定位置插入一个单元格,并返回引用；table.insertCell()，默认添加到最后一列，还可以根据需要动态改变单元格的属性，统计列数：table.rows.item(0).cells.length举例演示【例 4-4】 动态添加行与列。【例 4-5】 动态添加行与列，展示学生信息。2 动态插入行和单元格 JavaScript 可3 动态删除某行语法： table

14、.deleteRow(index) 用来删除指定位置的行。row.deleteCell(index) 用来/删除指定位置的单元格; DOM 方法：removeChild(node)用来删除子节点（元素）；parentNode 用来获取节点（元素）的父节点。举例演示【例 4-6】 动态删除某行。【例 4-7】 动态删除学生管理表格的某行。3 动态删除某行语法： table.deleteRow(i4 动态选中多行并动态删除举例演示【例 4-8】 单复选按钮值的获取和展示。【案例 4-7】 动态删除学生管理表格的某行。1. 单复选按钮的应用语法： document.getElementsByName(nodeName) 表示通过 name 属性的值获取一组元素。该方法接受一个参数，查找名称。方法返回一个HTMLCollection 对象，返回所有带有给定 name 属性的元素，通常用于表单单复选按钮组的获取。4 动态选中多行并动态删除举例演示【例 4-8】 单复选按【案例 4-7】 动态删除学生管理表格的某行。2.复选框对象应用在表格 举例演示【例 4-9】 复选按钮实现选中多个商品，并删