1、邯鄲學院信息工程學院實訓報告編制人：姓 名學 號班級成績學習情景編號4學習情景名稱JQuery中的DOM操作學時4一、 實驗目的與及要求實訓任務1制作圖片展示效果2制作留言板前端局部更新效果3制作郵件刪除效果4表格隔行變色和當前行變色訓練技能點1學會查找節點、創建節點、刪除節點2學會復制節點、替換節點、遍歷節點3能夠根據需要動態改變頁面元素的樣式4能夠動態改變元素的屬性5通過元素的隱藏、顯示制作選項卡、菜單等效果二、 實訓任務和步驟實訓1. 制作圖片展示效果訓練要點（1）掌握獲取和設置屬性的方法attr()（2）掌握創建節點和插入節點的方法（3）掌握html()方法需求說明在頁面中有四幅小圖片

2、和一個圖片展示區域，當鼠標移入某幅小圖片時，在圖片展示區域可看到其對應的大圖。為凸顯當前的小圖狀態，把其它三幅小圖透明度設為0.2，如圖1所示。圖1 圖片展示效果實現思路及步驟1.設計頁面HTML結構，應用CSS樣式。2.為四幅小圖片綁定鼠標移入事件。3.獲取當前發生鼠標移入事件的小圖片的src屬性，將其作為大圖的src屬性值。這樣大圖也就隨之改變了。4.為凸顯當前的小圖狀態，把其它三幅小圖透明度設為0.2。實訓2. 制作留言板前端局部更新效果訓練要點（1）進一步練習選擇器的使用（2）練習創建節點和插入節點的方法需求說明當在“昵稱”和“留言內容”文本框內輸入信息后，單擊“單擊這里提交留言”按鈕

3、，輸入的信息會顯示在頁面上端的留言板中，如圖2所示。若沒有輸入昵稱和留言內容，單擊“單擊這里提交留言”時不能發送留言。圖2 留言板前端局部更新效果實現思路及步驟1.設計頁面HTML結構，應用CSS樣式。2.找到“單擊這里提交留言”按鈕，綁定onclick事件。3.在“昵稱”和“留言內容”文本框中顯示提示文字，獲得焦點時提示文字消失，失去焦點時若內容為空，則再次顯示提示文字。4.獲取用戶輸入的“昵稱”和“留言內容”。5.若用戶輸入了“昵稱”和“留言內容”，則創建一條留言，并顯示在頁面上面的留言板中。6.將“昵稱”和“留言內容”文本框的value值變為初始值。實訓3. 制作郵件刪除效果訓練要點（1

4、）進一步練習選擇器的使用（2）練習刪除節點的方法需求說明在郵件列表前都有一個復選框，單擊可以選中或取消選中。當單擊“全選/全不選”按鈕，所有復選框都隨之選中或取消選中。單擊“刪除郵件”按鈕可刪除被選中的郵件，如圖3所示。圖3郵件刪除效果實現思路及步驟1.設計頁面HTML結構，應用CSS樣式。2.找到“全選/全不選”按鈕，綁定onclick事件。3.查找所有的復選框，把每個復選框的checked屬性值變為true或false，實現全選或全不選。4.找到“刪除郵件”按鈕，綁定onclick事件。5.查找所有checked屬性值為true的復選框，刪除其所在的行，即刪除了該郵件。實訓4. 表格隔行變

5、色和當前行變色訓練要點（1）進一步練習選擇器的使用（2）練習追加樣式、刪除樣式、改變css樣式的方法需求說明請使用jQuery實現如圖4所示的學生信息表，表格的奇數行和偶數行背景顏色不同，奇數行背景色為#d9ffdc，偶數行背景色為#a5e5aa。表頭的背景色為#00a40c，當用戶鼠標移入某行，該行背景色變為#ff9，使數據顯示一目了然。圖4 表格隔行變色和當前行變色實現思路及步驟1.設計頁面HTML結構，應用CSS樣式，將表格的背景色全部設置為#d9ffdc。2.DOM加載完成后，單獨為表頭設置背景色，然后為偶數行設置不同的背景顏色，即設置<tr>節點的backgroundColor屬性，可以直接通過css()方法設置，也可以先在css樣式表中設置好類樣式，然后使用addClass()方法添加該樣式。3.為每一行綁定鼠標移入事件，鼠標移入某行后，該行背景色設置為#ff9。4.為每一行綁定鼠標移出事件，鼠標移出某行