【Asp.net入門3-02】使用jQuery-jQuery 入門

標籤：

下面的幾小節將介紹jQuery的基礎知識。如前所述，不可能僅僅通過一章的內容詳細介紹jQuery， 但可以向你說明如何對HTML文檔中的內容執行簡單的操作，以及更重要的，如何逐步實現本書其他 部分的樣本。 jQuery功能通過一個名為jQuery的JavaScript函數訪問，但在實際應用中很少看到該jQuery函數。 這是因為該函數有一個簡寫的名稱，即貨幣符號（$）。當看到以$開頭的JavaScript代碼時，即表示jQuery 代碼。

等待DOM

在瀏覽器中處理HTML文檔的內容時，需要確保所有元素都已載入完畢，然後才能開始更改。這 點特別重要，因為jQuery的主要用途是使用CSS選取器尋找文檔中的元素，後文詳述。如果在瀏覽器 載入並處理完整個HTML文檔之前應用CSS選取器，那可能會得到出人意料的結果，因為此時尋找的 部分或所有元素還無法使用。 有兩個方法可以確保在完全處理DOM之後再執行jQuery代碼。第一種方法是將script元素放在 HTML文檔body部分的末尾，使它們成為最後由瀏覽器處理的元素。第二種方法（本書採用的方法） 是使用jQuery ready函數，如代碼清單4-5所示。

你會發現，線上看到的幾乎每個jQuery樣本或示範都使用了ready函數。傳遞給$函數的document 對象是瀏覽器用於呈現HTML文檔的標準DOM API對象。當DOM是唯一的參數時會傳遞希望執行的函 數，從而對$函數返回的結果調用ready函數。瀏覽器處理完文檔中的所有元素後，ready函數將執行以 參數形式提供的函數。

jQuery語句

jQuery語句通常由兩部分組成。第一部分選擇要處理的元素，第二部分對這些元素執行操作。代 碼清單4-6在Default.js檔案中添加了一條典型的jQuery語句。

jQuery使用CSS選取器尋找元素，因此，代碼清單4-6中的語句首先使用$函數選擇文檔中的所 有th元素。通常，$函數會調用其他jQuery函數，從而返回可以對其執行操作的匹配對象集合。該代 碼清單中調用了addClass函數，它會修改集合中所有元素的class特性，以添加指定的類（本例中為 highlight）。

以下是Web表單發送給瀏覽器的th元素

以下是執行jQuery代碼後的th元素：

jQuery語句將對HTML文檔中的所有th元素執行操作。jQuery使用瀏覽器定義的DOM API修改用 於向使用者顯示內容的HTML文檔的表示形式。也就是說，當使用jQuery對元素執行操作時，相關更改 將立即向使用者顯示；在th元素中添加highlight類的效果4-4所示。

中的表格之所以出現視覺變化，是因為代碼清單4-2的Styles.css檔案中定義了一個CSS樣式 highlight。在th元素中添加一個類，更改了瀏覽器顯示元素的方式。我們不想過多強調這一點，但請 注意，jQuery並未執行任何神奇的操作——它只是對標準瀏覽器API進行簡單封裝，使它們更易於使 用而已。

注意：jQuery所做的更改僅限於瀏覽器，而不會對通過Web表單產生的HTML造成任何影響。在Web表單到達瀏覽器後，jQuery用於最佳化由Web表單發送的內容。即使Web表單向瀏覽器發送jQuery語句，瀏覽器也將執行這些語句並做出相應的更改。

 

【Asp.net入門3-02】使用jQuery-jQuery 入門