Pages

標題

技術提供:Blogger.

2015/10/30

【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.

沒有留言:

張貼留言

 

Analytics