JavaScript與jQuery案例教程課件第4章

1、JavaScript與jQuery案例教程課件第4章JavaScript與jQuery案例教程課件第4章目標(biāo)TARGET知識(shí)目標(biāo)了解 JavaScript 自定義對(duì)象建立的 6 種方案及優(yōu)缺點(diǎn)。掌握 JavaScript 自定義對(duì)象的定義、創(chuàng)建及其屬性和方法的訪問。掌握 form 對(duì)象及其子對(duì)象的綜合應(yīng)用，數(shù)組的遍歷。鞏固學(xué)習(xí) HTML 和 CSS 的使用方法。目標(biāo)TARGET知識(shí)目標(biāo)了解 JavaScript 自定義對(duì)目標(biāo)TARGET技能目標(biāo)能使用混合模式（原型模式 + 構(gòu)造函數(shù)模式）建立自定義對(duì)象。能通過表單動(dòng)態(tài)創(chuàng)建自定義對(duì)象實(shí)例。能建立表格并設(shè)置其相關(guān)屬性。能動(dòng)態(tài)插入行和單元格，能動(dòng)態(tài)修

2、改單元格內(nèi)容。能動(dòng)態(tài)刪除某行及選中多行并刪除。能添加樣式及動(dòng)態(tài)改變?cè)氐臉邮綄?shí)現(xiàn)表格美化 。目標(biāo)TARGET技能目標(biāo)能使用混合模式（原型模式 + 構(gòu)造函 1 任務(wù)描述 2 JavaScript自定義對(duì)象 3 JavaScript動(dòng)態(tài)表格 4 任務(wù)實(shí)施 1 任務(wù)描述 2 JavaScript自定義對(duì)象 3 1任務(wù)描述Part實(shí)現(xiàn)學(xué)生成績管理 1任務(wù)描述Part實(shí)現(xiàn)學(xué)生成績管理 本任務(wù)是編寫JavaScript程序，實(shí)現(xiàn)學(xué)生成績信息的添加、刪除及展示功能。任務(wù)描述：實(shí)現(xiàn)學(xué)生成績管理 本任務(wù)是編寫JavaScript程序，實(shí)現(xiàn)學(xué)生成2JavaScript 自定義對(duì)象Part JavaScript 對(duì)

3、象 JavaScript 自定義對(duì)象建立方案 學(xué)生對(duì)象的建立 使用表單動(dòng)態(tài)創(chuàng)建學(xué)生對(duì)象 遍歷數(shù)組輸出展示學(xué)生對(duì)象信息 2JavaScript 自定義對(duì)象Part JavaScr1 JavaScript對(duì)象 JavaScript 中的所有事物都是對(duì)象：字符串、數(shù)值、數(shù)組、Date、RegExp、Math 等，對(duì)象只是一種特殊的數(shù)據(jù)。對(duì)象擁有屬性和方法。這為我們編程提供了許多方便。但對(duì)于復(fù)雜的客戶端程序而言，這些還遠(yuǎn)遠(yuǎn)不夠。根據(jù) JavaScript 的對(duì)象擴(kuò)展機(jī)制，用戶可以自定義 JavaScript 對(duì)象。String 有 length 等屬性，有 indexof 等方法，建立自定義對(duì)象 St

4、udent，Student 對(duì)象有學(xué)號(hào)，姓名，各科成績等屬性，有求總分方法。 屬性是與對(duì)象相關(guān)的值。訪問對(duì)象屬性的語法是： objectNpertyName 方法是能夠在對(duì)象上執(zhí)行的動(dòng)作?？梢酝ㄟ^以下語法來調(diào)用方法： objectName.methodName() 1 JavaScript對(duì)象 JavaScrip2 JavaScript自定義對(duì)象建立方案通過 JavaScript，能夠定義并創(chuàng)建自己的對(duì)象。創(chuàng)建新對(duì)象有如下不同的方法：1. 直接創(chuàng)建模式這是最簡單也是最直接的一種模式，首先創(chuàng)建一個(gè)引用類型的對(duì)象，然后為其添加自定義屬性和方法。示例代碼如下：var person = new Obj

5、ect(); = Lily;person.age = 19;person.speak = function()alert( + is + this.age + years old);person.speak();2 JavaScript自定義對(duì)象建立方案通過 JavaSc2.工廠模式 在函數(shù)內(nèi)創(chuàng)建一個(gè)對(duì)象，給對(duì)象賦予屬性及方法再將對(duì)象返回即可。它主要是將創(chuàng)建對(duì)象的過程進(jìn)行了封裝，示例代碼如下：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); /由對(duì)象構(gòu)造器創(chuàng)建新的對(duì)象實(shí)例2.工廠模式 在函數(shù)內(nèi)創(chuàng)建一個(gè)對(duì)象，給對(duì)象賦予屬3.構(gòu)造函數(shù)模式 使用構(gòu)造函數(shù)可以創(chuàng)建特定類型的對(duì)象，類似于 Array、Date 等原生 JavaScript 的對(duì)象。其實(shí)現(xiàn)方法如下：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 的實(shí)例3.構(gòu)造函數(shù)模式 使用構(gòu)造函數(shù)可以創(chuàng)建特定類型的對(duì)4 . 原型模式 創(chuàng)建的每個(gè)函數(shù)都有 prototype（原型）屬性，這個(gè)屬性會(huì)被對(duì)象副本所繼承，這樣創(chuàng)建新對(duì)象時(shí)不用重復(fù)已有的屬性、方法，節(jié)省了內(nèi)存空間。使用原型對(duì)象的好處就是可以讓所有對(duì)象實(shí)例共享它所包含的屬性及方法。function

8、 Person()P=Lily;Ptotype.age=19;Ptotype.speak = function()alert( + is + this.age + years old);var person1 = new Person();person1.speak();4 . 原型模式 創(chuàng)建的每個(gè)函數(shù)都有 prot5 . 混合模式 （原型模式 + 構(gòu)造函數(shù)模式） 混合模式中構(gòu)造函數(shù)模式用于定義實(shí)例屬性，而原型模式用于定義方法和共享屬性。每個(gè)實(shí)例都會(huì)有自己的一份實(shí)例屬性，但同時(shí)又共享著方法，最大限度的節(jié)省了內(nèi)存。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 . 混合模式 （原型模式 + 構(gòu)造函數(shù)模式） 3 學(xué)生對(duì)象的建立舉例演示【例 4-1】 使用混合模式方案創(chuàng)建學(xué)生對(duì)象實(shí)例，展示學(xué)生信息。3 學(xué)生對(duì)象的建立舉例演示【例 4-1】 使用混合模式方案4 使用表單動(dòng)態(tài)創(chuàng)建學(xué)生對(duì)象表單元素訪問的兩種常用方式：表單名. 表單元素名 或 表單名. elementsi相應(yīng)訪問表單元素的值的兩種方式：表單名. 表單元素名.value

10、或 表單名. elementsi.value 方法名稱意義示例action表單提交后的URLmyForm.action=Login.jspmyForm.action=http;/elements表單中包含的元素對(duì)象（例如，文本、按鈕等）數(shù)組myForm. elementsilength表單中元素的個(gè)數(shù)myForm.length(與myForm.elements.length一樣)method提交表單的方式，post或getmyForm.method=postname表單的名字，可以直接用于引用表單var formName=myFtarget提交表單后顯示下一網(wǎng)頁的位置myForm.target

11、=_top數(shù)組的常用方法舉例演示【例 4-2】 使用表單動(dòng)態(tài)創(chuàng)建學(xué)生對(duì)象實(shí)例。4 使用表單動(dòng)態(tài)創(chuàng)建學(xué)生對(duì)象表單元素訪問的兩種常用方式：方法5 遍歷數(shù)組輸出展示學(xué)生對(duì)象信息舉例演示【例 4-3】 遍歷數(shù)組，實(shí)現(xiàn)驗(yàn)證學(xué)號(hào)是否重復(fù)，輸出學(xué)生信息。JavaScript for.in 語句循環(huán)遍歷對(duì)象的屬性。5 遍歷數(shù)組輸出展示學(xué)生對(duì)象信息舉例演示【例 4-3】 3動(dòng)態(tài)表格Part 表格建立 動(dòng)態(tài)插入行和單元格 動(dòng)態(tài)刪除某行 動(dòng)態(tài)選中多行并刪除 3動(dòng)態(tài)表格Part 表格建立 動(dòng)態(tài)插入行和單元格 1 表格建立標(biāo)簽：在 HTML 中定義表格布局。包含的元素：表頭信息；：定義一個(gè)表格行；：定義一個(gè)表格頭；若是

12、純文字，默認(rèn)會(huì)以粗體的樣式表現(xiàn)。 ：定義一個(gè)單元格；table 常用的屬性 border ：定義表格的邊框?qū)挾?，默認(rèn)為 0，即無邊框舉例演示 設(shè)計(jì)學(xué)生基本信息統(tǒng)計(jì)表。1 表格建立標(biāo)簽：在 HTML 中定義表格布局2 動(dòng)態(tài)插入行和單元格 JavaScript 可以控制 table，動(dòng)態(tài)的插入行和單元格。rows 保存著元素中行的HTMLCollection。語法： tableObject.insertRow(index) 該方法創(chuàng)建一個(gè)新的 TableRow 對(duì)象，表示一個(gè)新的 標(biāo)記，用于在表格中的指定位置插入一個(gè)新行，并返回這個(gè)新插入的行 TableRow，新行將被插入 index 所在行之前

13、。table.insertRow()，默認(rèn)添加到最后一行，統(tǒng)計(jì)行數(shù)：table.rows.lengthcells 保存著元素中單元格的 HTMLCollectioin 集合； insertCell(pos) 向 cells 集合的指定位置插入一個(gè)單元格,并返回引用；table.insertCell()，默認(rèn)添加到最后一列，還可以根據(jù)需要?jiǎng)討B(tài)改變單元格的屬性，統(tǒng)計(jì)列數(shù)：table.rows.item(0).cells.length舉例演示【例 4-4】 動(dòng)態(tài)添加行與列?！纠?4-5】 動(dòng)態(tài)添加行與列，展示學(xué)生信息。2 動(dòng)態(tài)插入行和單元格 JavaScript 可3 動(dòng)態(tài)刪除某行語法： table

14、.deleteRow(index) 用來刪除指定位置的行。row.deleteCell(index) 用來/刪除指定位置的單元格; DOM 方法：removeChild(node)用來刪除子節(jié)點(diǎn)（元素）；parentNode 用來獲取節(jié)點(diǎn)（元素）的父節(jié)點(diǎn)。舉例演示【例 4-6】 動(dòng)態(tài)刪除某行?！纠?4-7】 動(dòng)態(tài)刪除學(xué)生管理表格的某行。3 動(dòng)態(tài)刪除某行語法： table.deleteRow(i4 動(dòng)態(tài)選中多行并動(dòng)態(tài)刪除舉例演示【例 4-8】 單復(fù)選按鈕值的獲取和展示。【案例 4-7】 動(dòng)態(tài)刪除學(xué)生管理表格的某行。1. 單復(fù)選按鈕的應(yīng)用語法： document.getElementsByName(nodeName) 表示通過 name 屬性的值獲取一組元素。該方法接受一個(gè)參數(shù)，查找名稱。方法返回一個(gè)HTMLCollection 對(duì)象，返回所有帶有給定 name 屬性的元素，通常用于表單單復(fù)選按鈕組的獲取。4 動(dòng)態(tài)選中多行并動(dòng)態(tài)刪除舉例演示【例 4-8】 單復(fù)選按【案例 4-7】 動(dòng)態(tài)刪除學(xué)生管理表格的某行。2.復(fù)選框?qū)ο髴?yīng)用在表格 舉例演示【例 4-9】 復(fù)選按鈕實(shí)現(xiàn)選中多個(gè)商品，并刪