JQuery中的DOM操作-實訓(xùn)報告

1、v1.0可編輯可修改邯鄲學(xué)院信息工程學(xué)院實訓(xùn)報告編制人：姓名學(xué)號班級成績學(xué)習(xí)情景編號4學(xué)習(xí)情景名稱JQuery中的DOMt作學(xué)時4一、實驗?zāi)康呐c及要求實訓(xùn)任務(wù)1 .制作圖片展示效果2 .制作留日板前端局部更新效果3 .制作郵件刪除效果4 .表格隔行變色和當(dāng)前行變色訓(xùn)練技能點1 .學(xué)會查找節(jié)點、創(chuàng)建節(jié)點、刪除節(jié)點2 .學(xué)會復(fù)制節(jié)點、替換節(jié)點、遍歷節(jié)點3 .能夠根據(jù)需要動態(tài)改變頁面兀素的樣式4 .能夠動態(tài)改變兀素的屬性5 .通過元素的隱藏、顯示制作選項卡、菜單等效果二、實訓(xùn)任務(wù)和步驟實訓(xùn)1.制作圖片展示效果訓(xùn)練要點(1)掌握獲取和設(shè)置屬性的方法attr()(2)掌握創(chuàng)建節(jié)點和插入節(jié)點的方法(3)掌

2、握html()方法需求說明在頁面中有四幅小圖片和一個圖片展示區(qū)域，當(dāng)鼠標(biāo)移入某幅小圖片時，在圖片展示區(qū)域可看到其對應(yīng)的大圖。為凸顯當(dāng)前的小圖狀態(tài)，把其它三幅小圖透明度設(shè)為，如圖1所示。圖i圖片展示效果實現(xiàn)思路及步驟1 .設(shè)計頁面HTML吉構(gòu)，應(yīng)用CSS羊式。2 .為四幅小圖片綁定鼠標(biāo)移入事件。3 .獲取當(dāng)前發(fā)生鼠標(biāo)移入事件的小圖片的src屬性，將其作為大圖的src屬性值。這樣大圖也就隨之改變了。4 .為凸顯當(dāng)前的小圖狀態(tài)，把其它三幅小圖透明度設(shè)為。實訓(xùn)2.制作留言板前端局部更新效果訓(xùn)練要點(1)進一步練習(xí)選擇器的使用(2)練習(xí)創(chuàng)建節(jié)點和插入節(jié)點的方法需求說明當(dāng)在“昵稱”和“留言內(nèi)容”文本框內(nèi)輸

3、入信息后，單擊“單擊這里提交留言”按鈕，輸入的信息會顯示在頁面上端的留言板中，如圖2所示。若沒有輸入昵稱和留言內(nèi)容，單擊“單擊這里提交留言”時不能發(fā)送留言。制件窗言板前端局部更新效果功夫題硒你實現(xiàn)思路及步驟1 .設(shè)計頁面HTML吉構(gòu)，應(yīng)用CSS羊式。2 .找到“單擊這里提交留言”按鈕，綁定onclick事件。3 .在“昵稱”和“留言內(nèi)容”文本框中顯示提示文字，獲得焦點時提示文字消失，失去焦點時若內(nèi)容為空，則再次顯示提示文字。4 .獲取用戶輸入的“昵稱”和“留言內(nèi)容”5 .若用戶輸入了“昵稱”和“留言內(nèi)容”，則創(chuàng)建一條留言，并顯示在頁面上面的留言板中。6 .將“昵稱”和“留言內(nèi)容”文本框的val

4、ue值變?yōu)槌跏贾?。實?xùn)3.制作郵件刪除效果訓(xùn)練要點(1)進一步練習(xí)選擇器的使用(2)練習(xí)刪除節(jié)點的方法需求說明在郵件列表前都有一個復(fù)選框，單擊可以選中或取消選中。當(dāng)單擊“全選/全不選”按鈕，所有復(fù)選框都隨之選中或取消選中。單擊“刪除郵件”按鈕可刪除被選中的郵件，如圖3所示。圖3郵件刪除效果實現(xiàn)思路及步驟1 .設(shè)計頁面HTML吉構(gòu)，應(yīng)用CSS羊式。2 .找到“全選/全不選”按鈕，綁定onclick事件。3 .查找所有的復(fù)選框，把每個復(fù)選框的checked屬性值變?yōu)閠rue或false,實現(xiàn)全選或全不選。4 .找到“刪除郵件”按鈕，綁定onclick事件。5 .查找所有checked屬性值為tru

5、e的復(fù)選框，刪除其所在的行，即刪除了該郵件。實訓(xùn)4.表格隔行變色和當(dāng)前行變色訓(xùn)練要點(1)進一步練習(xí)選擇器的使用(2)練習(xí)追加樣式、刪除樣式、改變css樣式的方法需求說明請使用jQuery實現(xiàn)如圖4所示的學(xué)生信息表，表格的奇數(shù)行和偶數(shù)行背景顏色不同，奇數(shù)行背景色為#d9ffdc，偶數(shù)行背景色為#a5e5aa。表頭的背景色為#00a40c,當(dāng)用戶鼠標(biāo)移入某行，該行背景色變?yōu)?ff9,使數(shù)據(jù)顯示一目了然。學(xué)生信息表年帶電話胃科1仙皿1稼容直1S13BR3ass享4居男Ifi皿華收加所段諛加3盧古戀更煲L3克E四非L20141三岷檢再111海M網(wǎng)候卻S朱惶蠱鴇1£1L33B2.4Z4J&#

6、174;即141226范觀華房1913352424工口到航募忖需L&2。加工迫吳京良里同13擔(dān)”兇貂220141200張密享弟ifi13E2424469201412W直is一簟:3Ml犯420W1211如一睚女陰1:走疆加比器示/更更15352K1412LB用居ineMfiMor女LBL2充24E必龍即2仃才配佳罷1S型2二國工的圖4表格隔行變色和當(dāng)前行變色實現(xiàn)思路及步驟1.設(shè)計頁面HTML吉構(gòu)，應(yīng)用CSS羊式，將表格的背景色全部設(shè)置為#d9ffdc加載完成后，單獨為表頭設(shè)置背景色，然后為偶數(shù)行設(shè)置不同的背景顏色，即設(shè)置tr節(jié)點的backgroundColor屬性，可以直接通過css()方法設(shè)置，也可以先在css樣式表中設(shè)置好類樣式，然后使用addClass()方法添加該樣式。3 .為每一行綁定鼠標(biāo)移入事件，鼠標(biāo)移入某行后，該行背景色設(shè)置為#ff9。4 .為