jQuery 常用語法的整理

jQuery 既然是 Javascript 的 framework，他在決定（或者存取）特定的 element 或者 form 中的元素值自然要比較簡潔有力。在這一篇文章中，我試圖盡量利用範例來介紹 jQuery 的語法。

jQuery 語法的設計理念是選擇一個特定的 element 並在該 element 上執行某個特定的功能，因此它的基本語法就是 $(selector).action()，其中 selector 的概念跟 CSS 類似，而 action() 即代表執行的功能。例如，在jQuery 的第一個範例中，我們用過

1. $(xml).find("areas")：其中 $(xml) 中的 xml 代表 callback 執行後的結果，而這個回傳的結果代表一個 XML 文件，而 find("areas") 這個功能就是從該 XML 文件找出名稱為 areas 的節點。
2. $(xml).find("areas").find("area")：$(xml).find("areas") 的結果是一棵樹的根結點，而 find("area") 就是從這個根節點找出所有名稱為 area 的子結點。
3. $(xml).find("areas").find("area").each(function...)：當找出所有的 area 子節點之後，each() 這個功能就是針對每一個節點進行處理，而處理的功能定義在 function() 內。
4. $(this).text()：$(this) 中的 this 代表目前的 context node，而 text() 功能就是回傳這個節點的文字內容。

在 jQuery 的第二個範例中，我們用過 $("#taichung").html(msg)，其中 $("#taichung") 是找到元素的 id 值定義為 taichung 的結點（在我們的範例中，就是 <div id="taichung"></div>），而 html(msg) 的功能就是把變數 msg 的內容當作 HTML 的內容寫入 <div> 和 </div> 之間。

除了這些已經用過的範例之外，還有哪些常見的 selector？假設我們要找出所有名為 div 的元素，selector 的寫法是 $("div") [記得剛剛的 $(xml) 是沒有雙引號的]。假設我們要找出所有 class 的名稱是 taichung 的元素（例如 <div class="taichung"></div>），那麼 selector 的寫法就是 $(".taichung")。

jQuery 常常跟 HTML 的 form 一起使用，而使用的時機大多是經由 Ajax 的呼叫來取得遠端的即時資料。為了取得遠端的資料，往往在呼叫的時候，我們會設計一個 form 讓使用者輸入，然後 jQuery 需要把使用者輸入的資料擷取出來，以便於 Ajax 的呼叫。使用者可能在文字欄位輸入文字，在 radio 按鈕選取單一選項，在核取方塊輸入多個選項，又或者在下拉式選單中選取單一選項。這些當然可以利用傳統的 Javascript 的寫法來完成，但是利用 jQuery 的方式將會更簡單。我們利用下列範例來說明：(demo 網頁)

姓名：
性別： 女性 男性
興趣： 騎單車 爬山 釣魚
地區： 高雄 台中 台北

這個範例的原始碼如下：

<form>
姓名：
  <input name="text" type="text" value="老呂" /><br />
性別：
  <input checked="" name="sex" type="radio" value="female" />女性
  <input name="sex" type="radio" value="male" />男性<br />
興趣：
  <input name="intst" type="checkbox" value="Bike" />騎單車
  <input name="intst" type="checkbox" value="Hiking" />爬山
  <input name="intst" type="checkbox" value="Fishing" />釣魚<br />
地區：
  <select name="area">
    <option selected="" value="kao">高雄</option>
    <option value="taichung">台中</option>
    <option value="taipei">台北</option>
  </select>
<br />
<input onclick="display()" type="button" value="OK" />
</form>

在開始解釋 jQuery 存取使用者輸入（或者選取）的值之前，我們先說明一下 jQuery 對於 form  輸入元素的 selector 寫法：$('tag名稱[name = "name值"]')。這裡的 tag名稱跟之前的說法一樣，在這個範例中有 input 或者 select；另外，由於這類標籤都由 name 的屬性來辨認，因此中括號就是代表符合的條件，例如，想要選擇本範例的"姓名"文字欄位，由於他的標籤是 input，而屬性 name 的值是 text，因此 selector 的寫法就是 $('input[name="text"]')；又，若想選擇性別的 radio 欄位，selector 的寫法就是 $('input[name="sex"]')，但是由於 radio 是多選一，我們有興趣的只是被使用者點選（checked）的那一項，selector 的寫法就成了 $('input[name="sex"]:checked')。

有了這個概念之後，再來的說明就簡單了。由於取得 form 欄位值的方法是 val()，因此取得姓名欄位的方式就是 $('input[name="text"]').val()，而取得性別選取值的方式就是 ㄒ.val()。很棒，對吧？不必再寫一段迴圈來判斷。

核取方塊的處理方式，稍微複雜一些，原因是核取方塊可能有多個值被選取，我們需要把被選取的項目一個一個處理，因此需要利用之前說過的 each() 方法。首先，先決定興趣的選取項目，這些項目的 selector 寫法是  $('input[name="intst"]:checked')，因為被選取的項目有可能是一個以上，因此加上 each() 的寫法是

$('input[name="intst"]:checked').each(function() {
        // 寫入處理的方式
});

由於這個範例只是把資料串起來而已，所以程式碼只有一行，那就是 tmp = tmp + $(this).val() + "; ";。完整的程式碼如下：

var tmp = "";
$('input[name="intst"]:checked').each(function() {
        tmp = tmp + $(this).val() + "; ";
});

最後，剩下"下拉式選單"的處理方式。下拉式選單是由 select 和 option 所組成，而 option 是 select 的子節點，因此 selector 的寫法是 $('select[name="area"] option:checked')，再來選取的值就是加上 .val() 來完成。

完整的程式碼如下：

<script type="text/javascript">
  function display() {
    var msg = "姓名是：" + $('input[name="text"]').val() + "\n";
    msg = msg + "性別是：" + $('input[name="sex"]:checked').val() + "\n";
    var tmp = "";
    $('input[name="intst"]:checked').each(function() {
        tmp = tmp + $(this).val() + "; ";
    });
    msg = msg + "興趣是：" + tmp + "\n";
    msg = msg + "地區是：" + $('select[name="area"] option:selected').val() + "\n";
    alert(msg);
  }
</script>