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

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

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

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

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

5、ect(); = Lily;person.age = 19;person.speak = function()alert( + is + this.age + years old);person.speak();2 JavaScript自定義對象建立方案通過 JavaSc2.工廠模式 在函數(shù)內(nèi)創(chuàng)建一個對象，給對象賦予屬性及方法再將對象返回即可。它主要是將創(chuàng)建對象的過程進行了封裝，示例代碼如下：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); /由對象構(gòu)造器創(chuàng)建新的對象實例2.工廠模式 在函數(shù)內(nèi)創(chuàng)建一個對象，給對象賦予屬3.構(gòu)造函數(shù)模式 使用構(gòu)造函數(shù)可以創(chuàng)建特定類型的對象，類似于 Array、Date 等原生 JavaScript 的對象。其實現(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 的實例3.構(gòu)造函數(shù)模式 使用構(gòu)造函數(shù)可以創(chuàng)建特定類型的對4 . 原型模式 創(chuàng)建的每個函數(shù)都有 prototype（原型）屬性，這個屬性會被對象副本所繼承，這樣創(chuàng)建新對象時不用重復(fù)已有的屬性、方法，節(jié)省了內(nèi)存空間。使用原型對象的好處就是可以讓所有對象實例共享它所包含的屬性及方法。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)建的每個函數(shù)都有 prot5 . 混合模式 （原型模式 + 構(gòu)造函數(shù)模式） 混合模式中構(gòu)造函數(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é)生對象的建立舉例演示【例 4-1】 使用混合模式方案創(chuàng)建學(xué)生對象實例，展示學(xué)生信息。3 學(xué)生對象的建立舉例演示【例 4-1】 使用混合模式方案4 使用表單動態(tài)創(chuàng)建學(xué)生對象表單元素訪問的兩種常用方式：表單名. 表單元素名 或 表單名. elementsi相應(yīng)訪問表單元素的值的兩種方式：表單名. 表單元素名.value

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

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

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

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

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