iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 30
0

符合條件的元件集合/jQuery選取

當你選取一個或多個元件,會回傳一個jQuery物件:一般稱此物件為一個符合條件的元件集合或一個jQuery選取。

單一選取元件

如果一個選擇器只回傳一個元件,則此jQuery物件僅包含一個元件節點的參考值。

$('ul')

此選擇器會在頁面中選取<ul>元件,因此jQuery物件包含一個參考值指向一個選取的元件節點

每一個被選取的元件都會被指定一個索引值,若只有一個選取元件在物件中,則索引值為零。

多選取元件

如果一個選擇器回傳多個元件,則此jQuery物件會包含每一個元件節點的參考值。

$('li')

此選擇器會在頁面中選取所有<li>元件,因此jQuery物件包含多個參考值指向每一個被選取到的元件節點

最終jQuery物件會包含四個清單項目元件,索引值由零開始。

jQuery取得和設定資料的方法

有些jQuery方法不但可擷取資訊,也可變更元件內容,但是他們不一定可以套用至所有的元件上。

擷取資訊

若一個jQuery選取包含多個元件,並希望自其中擷取資訊,它只會自選取集合裡的第一個元件擷取資訊。

$('li')
當你使用.html()方法取得元件的內容時,他僅會回傳元件集合裡第一個元素所包含的內容。

var content = $('li').html();

上述程式碼會擷取第一個清單項目的內容,並儲存於名稱為content的變數中。

設定資訊

若一個jQuery選取包含多個元件,並希望更新其中的資訊,則他將會更新選取集合裡的所有元件資訓而非只有第一個元件。

當你使用.html()方法以變更元件內容,他會將元件集合裡符合條件的每一個元件內從均進行變更。

$('li').html('Updated');

這會將所有清單項目內容設定為文字「Updated」。

jQuery物件所儲存的元件參考值

當你以jQuery建立一個選取元件集合時,它會儲存一個參考值指向DOM樹中對應的元件節點,但是並不會複製這些節點。

將jQuery選取結果暫存於變數

jQuery物件會將儲存元件的參考值。
可將儲存元件參考值的jQuery物件暫存於變數中。

檢查頁面是否已準備完成

jQuery的.ready()方法可以檢查頁面是否已預備完成,可讓程式碼開始動作。

$(document).ready(function(){
//程式碼撰寫於此
});

上一篇
Day29::從零開始的jQuery 學習紀錄 -7-
系列文
三十哩路,我的前端學習路程30

1 則留言

0
SunAllen
iT邦高手 1 級 ‧ 2018-01-18 17:28:09

/images/emoticon/emoticon07.gif

/images/emoticon/emoticon12.gif

/images/emoticon/emoticon25.gif

剛瞬間打不出中文XD

恭賀大大完賽!!

謝謝~
還在學習中>///<

我要留言

立即登入留言