建立包裹元素集合.PDF

jQuery HTML DOM 2.1 選取元素進行處理 17 在前一章中討論了 jQuery $() 函式的幾個使用方式。功能涵蓋了選取 DOM 元素到定義 DOM 載入後的執行函式。 這一章要來看一下 $()兩個強悍且頻繁使用的功能：透過選擇器（selector ） 選取 DOM 元素以及建立新的 DOM 元素。藉此更詳細地了解，如何找出 DOM 元 素進行操作。 非常多 （ ）所需的功能，可藉由處理構成網頁 RIA Rich Internet Application 的 DOM 元素來達成。但對它們進行處理前，必須找出並選取元素。我們從 jQuery 如何指定目標元素以進行處理，作為深度之旅的開始。 2.1 選取元素進行處理 實際使用任何 jQuery 方法（常被稱為 jQuery 指令（command ））前，所要 作的第一件事就是選取網頁中打算進行操作的元素。有時描述所想要選取的元素 集合很簡單，像是「網頁中所有段落元素」。但有時描述它們會複雜一些，像是 「有listElement 類別並包含鏈結的所有清單元素」。 幸運地，jQuery 提供健全的選擇器語法；實際上它可以優雅且簡明地指定任 何元素集合。你也許早就知道一堆語法了：jQuery 使用你所熟悉愛用的 CSS 語 法，並用一些選取元素的自訂方法加以擴充；無論執行普通與複雜的工作，它都 可以助你一臂之力。 為了協助你更了解元素選擇器，在本書可下載的程式碼範例中放了個 Selectors Lab 網頁。如果你還沒有下範例程式碼，現在正是時候。請查看本書開 頭「關於本書」的說明，進一步了解如何找到程式碼並進行下載。 這個 Selectors Lab 可以讓你輸入 jQuery 選擇器字串，並看看執行時（即時 地 ！ ） 會 選 取 哪 個 DOM 元 素 。 Selectors Lab 可 在 範 例 程 式 碼 的 chapter2/lab.selectors.html 中找到。 當網頁顯示時，Lab 就像圖 2.1 所示（如果顯示時方框沒有正確地對齊，請 將瀏覽器視窗拉寬）。 左上方的 Selector 方框包括文字方塊與按鈕。要運行 Lab 實作的話，在文字 方塊中鍵入選擇器，並點選 Apply 按鈕。請自行在方塊中鍵入 li 字串，並點選 Apply 。 18 第 2 章 建立包裹元素集合 圖2.1 Selectors Lab 網頁可即時地觀察所指定的選擇器行為。 在右上方 DOM Sample 方框載入 iframe 的 HTML 網頁，會套用你所鍵入 的選擇器（這個情況中是 li）。範例網頁中的 jQuery 程式碼，會以紅色框線來 醒目地提示所有符合的元素。在點選 Apply 之後，你應該會看到圖 2.2 的畫面， 網頁中所有 li 元素都作了醒目的提示。 注意範例網頁中的 li 元素是以綱要列點方式顯示，而所執行的 jQuery 陳 述，以及所選取的元素標籤名稱，都顯示在 Selector 文字方塊中。 呈現 DOM 範例網頁所使用的 HTML 標記，顯示在底下標示為 HTML for DOM Sample 的方塊中，可協助你體會一下選擇器的撰寫。 在本章進行過程中，會對這個 Lab 的使用作更多的說明。但我們先在熟悉的 領域中再努力一下：傳統 CSS 選擇器。 2.1 選取元素進行處理 19 li li 圖2.2 符合 選擇器的所有