jQuery應用之一【①學習筆記之jQuery】

2019-12-12 22:13:49

jQuery是一個很優秀的JavaScript庫，其不僅僅是一個輕量級的，而且具有完美的相容性，不僅僅是CSS3樣式的相容，對瀏覽器的相容也很突出。它簡化了HTML對事件、動畫等的處理，推動著網頁製作的快速發展。

1

?jQuery的基本功能? ? 1>.存取和操作DOM元素? ? ? ? ?在HTML頁面上，我們需要對某個元素進行特殊處理（如刪除、移動，點選後更改背景色等），而jQuery庫則能更好的使我們獲取到該元素。? ? 2>.控制頁面樣式? ? ? ? ?通過jQuery庫中的addClass（）方法為HTML頁面中的元素新增樣式。? ? 3>.對頁面事件的處理? ? 4>.大量外掛在頁面中的執行? ? 5>.與Ajax技術的完美結合

2

搭建jQuery開發環境

1>.下載jQuery檔案庫

2>.引入jQuery檔案庫

3

編寫第一個簡單的jQuery應用

1>.功能描述

在頁面載入時，彈出一個模式對話方塊，顯示「我的第一個jQuery小應用！」，單擊確定按鈕後關閉該視窗。

2>.實現程式碼如圖所示

4

jQuery程式的程式碼風格

1>.「$」美元符的使用，jQuery程式的標誌。

2>.事件操作鏈式書寫

①功能描述

頁面中一個<div>,其中包含兩個<div>,一個為主題，另一個為內容，頁面首次載入，顯示主題，內容不可見，點選主題，改變自身背景色，並顯示內容。

②實現程式碼如圖所示

5

jQuery存取DOM物件①什麼是DOM物件DOM（Document Object Model，文字物件模型），通過JavaScript方法存取頁面中的元素，就是存取DOM物件。var div_01=document.getElementById("divId");（獲取DOM物件）②什麼是jQuery物件在jQuery庫中，獲取頁面元素的物件，為jQuery物件。var div_01=$("#divId");（獲取jQuery物件）

6

jQuery控制DOM物件

①功能描述

在頁面中，使用者輸入內容，單擊「提交」按鈕後，將獲取到的資料資訊使用彈出框彈出。

②實現程式碼所示如下

7

jQuery是一個優秀的js庫，使用其給了我們很大的方便，從而提高了我們的開發效率。在HTML或者jsp頁面中，我們若需要對某個元素進行屬性或者事件的修改時，我們必須先要獲取到這個元素。在jQuery庫中，其選擇器能夠快速的定位該元素的位置，並對其進行操作。

jQuery應用之一【①學習筆記之jQuery】

1

2

3

4

5

6

7

熱門文章