【JQuery】《第三回》使用選擇器控制HTML元素

本次要來介紹JQuery的選擇器，以及如何用選擇器來控制HTML的元素

操作前注意事項

1．本篇只介紹基礎常見的類別選擇器，詳細介紹請參考http://www.w3school.com.cn/

其它相關JQuery教學請參考 【JQuery系列文章介紹清單】

繼「JQuery變數宣告與型態及變數生命週期」之後
緊接著就要來介紹JQuery中最重要也是最基礎的部分了
這個部分叫做「選擇器」，為什麼會說「選擇器」很重要呢？
因為如果看不懂選擇器，會有以下幾個問題出現（以下問題僅代表我個人立場不代表每個人都會有相同困擾）

1.JQuery無法正常運行

2.在參考別人範例的時候會看不懂

3.兩行能寫完的程式可能要多寫很多行

上述問題中最重要的當然還是第一點，因為沒有辦法正確的選擇到你要的元素
因而造成程式無法正常執行或是根本無法執行，所以選擇器是一定要能看得懂的唷
如果本身會CSS的話，其實會比較容易看懂JQuery的選擇器
因為JQuery的選擇器就跟CSS元素選擇的方式大同小異，如果你已經會寫CSS
那在讀這篇文章的時候就會事半功倍唷
接下來就讓我們進入正題　開始說明今天的主題囉
今天介紹的主題都是透過賦予CSS屬性來讓大家了解選擇器的差異唷
標籤選擇器

首先我們先來介紹「標籤選擇器」，標籤選擇器一般也比較常見
所謂的標籤選擇器呢，就是直接給予HTML的Tag名稱作為選擇條件
我們可以看到下面範例中有一個p標籤包含的文字
透過JQuery找到P標籤並賦予CSS參數，給他一個1象素實線而且是黑色的邊框
(最後顯示結果請參考文章最後的演示範例)

<!--標籤選擇器使用方式介紹-->
標籤選擇器

<!--P標籤-->
<!--透過標籤選擇器宣告P標籤有一個1像素的黑色邊框-->
$("p").css({"border":"1px solid #000"});

ID選擇器

ID選擇器是透過HTML Tag中的ID屬性來找到要控制的Tag
宣告的方式與CSS的方式相同是由 「#」+「ID名稱」即可
(最後顯示結果請參考文章最後的演示範例)
<!--顯示HTML CODE-->

<!--ID選擇器使用方式介紹-->
ID選擇器
<!--宣告一個包含有ID屬性的DIV標籤-->
<!--透過ID選擇器宣告ID為idSelect的標籤有1像素的紅色邊框-->
$("#idSelect").css({"border":"1px solid #F00","font-weight":"bold"});

類別選擇器
類別選擇器是透過HTML Tag中的Class屬性來找到要控制的Tag
宣告的方式與CSS的方式相同是由 「.」+「Class名稱」即可
(最後顯示結果請參考文章最後的演示範例)

<!--類別選擇器使用方式介紹-->
類別選擇器
<!--
宣告一個包含有類別屬性的DIV標籤
透過類別選擇器宣告類別屬性為classSelect的標籤有1像素的紅色邊框/粗體字/內容文字為紅色
-->
$(".classSelect").css({
  "border":"1px solid #F00",
  "font-weight":"bold","color":"#F00"
});

偽類選擇器

所謂的偽類選擇器就是指CSS中的偽元素
想要了解偽元素可以參考「那些 CSS 偽元素可以幫你做的 10 個效果」這篇文章，這邊就不贅述
一開始我們先來建立一個Table做為測試偽類選擇器的基礎

偽類選擇器範例
<table>
  <tbody>
    <tr>
      <td>列一</td>
      <td>列一</td>
      <td>列一</td>
    </tr>
    <tr>
        <td>列二</td>
        <td>列二</td>
        <td>列二</td>
      </tr>
    <tr>
      <td>列三</td>
      <td>列三</td>
      <td>列三</td>
    </tr>
    <tr>
      <td>列四</td>
      <td>列四</td>
      <td>列四</td>
    </tr>
  </tbody>
</table>

緊接著為這個Table設定一些基本的樣式

table {
  border-spacing:0px;/*清除TD間距*/
  border:1px solid #000;/*設定框線*/
}

最後我們透過CSS的偽元素選擇方式賦予Table中
偶數列的背景顏色為紅色

//偽類選擇器範例
//所有偶数  元素
$("tr:even").css({"background":"#F00"});

類別選擇器

範例展示

See the Pen JQuery選擇器 by jen (@jen_huang) on CodePen.