捐血一袋救人一命

2013年7月25日 星期四

初學jQuery 1-2

首先我們先理解一下 jQuery 的設計理念,來進行學習。

一個網頁要產生動態效果,勢必要針對各標籤、文字、圖片等做動態處理。

那麼,要怎麼在網頁中,找到我們要處理的標籤、文字、圖片呢?

這就要靠 jQuery Selector 選擇器,

在傳統 JavaScript要取得某個元素內容,可以用 ID 來找,指令如下

getElementbyId("#id")

要取得標籤(Tag)必須使用

getElementsbyName("name")

至於要取得Class(類別)?抱歉,JavaScript 雖然有 getElementsbyClassName ,但是 IE 不支援(在某書裡提到 CSS 中,ID 與 Class 的區別在於一個可以用 JavaScript取用,一個不行,這樣的講法太不負責任…,就算 IE 不支援 byClassName,你還是可以用 JavaScript 來取得,只是過程就很繁瑣…)

改用 jQuery 只要寫

$("#id") 或 $(".class") 或 $("tag") ,引號裡面的用法與 CSS 一致,不用再記憶一大堆指令。

而且,你仔細看,getElementsbyName,多了一個 s ,表示複數,也就是說用這個指令,你會取得一大堆不相干的標籤,你還得再寫判斷式去篩選。

而 jQuery 多種 Selector 還可以組合運用,把不必要的元素篩掉。

所以,我們接下來介紹 jQuery Selector !!

先來三個基本型

$("name") 這裡面的 name ,不是只有 HTML 語法中的 Tag,你也可以自己定義標籤,然後用這個選擇器來找出正確的元素。
例如: <contact>John</contact>
          $("contact")
           <a href=”http://www.google.com.tw”>Google</a>
           $("a")
要注意的是,網頁裡可能會有多個相同標籤
$(".class") 這個就是指標籤裡的 class 名稱
例如:<input type="text" name="firstname" class="contact">
          <input type="text" name="lastname" class="contact">
          $(".contact")
要注意的是,網頁裡可能會有多個相同 Class (類別)
$(#id") 這裡指的就是標籤裡的 id 名稱
例如:<input type="text" name="username" id="username">
          <input type="password" name="passwd" id="passwd">
          $("#username") 指的就是 username 欄位
          $("#passwd") 指的就是 passwd 欄位
在HTML裡定義 ID 不可重覆,所當一個頁面裡有兩個以上相同的 ID ,會造成難以預測的結果(不動作或誤動作)

接下來再進階一點點

$("name, .class, #id") 這個Selector 只要符合任一 tag 或 class 或 id,就會被選擇到,中間以逗號區隔開
$("name .class #id") 這個Selector是指所有的 tag以及class和id 都要同時具備才會被選取
PS.每個 Tag 之間不要留空格!我是為了容易看清楚才留空格

反應:

2 意見:

匿名 提到...

$(#.id") <== 這個錯了, 應該是 $("#id")

Tom 提到...

感謝您的提醒...已修正