2013-03-07 75 views
0
var firstBodyChild = document.body.children[0]; 
$('li', firstBodyChild); 

// make a selection within a previous selection 
var paragraph = $('p'); 
$('a', paragraph); 

這是來自網站http://jqfundamentals.com指南的示例。jQuery對象和屬性

有幾件事情我不明白:

  1. 格式$()創建一個對象,據我瞭解。這意味着paragraph是一個對象 - 但它的屬性是什麼?它是什麼樣的對象?

2.

var firstBodyChild = document.body.children[0]; 
$('li', firstBodyChild); 

我希望如果有人能解釋這一部分。 firstBodyChild將在身體部分firstChild,但第二行意味着什麼?

謝謝。

回答

1
  1. $()是的別名,這可能更具可讀性。所以你正在調用一個函數並將參數傳遞給它。
  2. 通常,第一個參數是一個選擇器,正如您從CSS中瞭解的那樣。第二個參數是可選的,稱爲上下文。

假設你有兩個列表ul在你的身體,並希望使第一個紅色列表中的元素,你可以使用體.children[0]的情況下只得到這個元素列表中的項目,如你的第一個代碼例。

然後,您可以繼續使用jQuery來獲取所有li元素的列表,整個文檔或者在(通過使用$('li')),或一個特定的環境中,例如,第一個列表ul你已經保存在變量,使用$('li', firstBodyChild)

jQuery調用的返回對象是DOM節點的包裝器。因此它存儲了可以通過查詢傳遞的元素以及可以用來過濾和修改這些元素的一大堆函數。

要完成此示例,要將這些列表元素染成紅色,可以使用jQueries .css來修改這些元素的外觀。

var firstBodyChild = document.body.children[0]; 
$('li', firstBodyChild).css({color: 'red'}); 
1
  1. '段'變量成爲一個jQuery對象,可以使用jQuery的標準功能集。

  2. 第二行表示jQuery應該在'firstBodyChild'元素的上下文中尋找一個<li>元素。查看文檔此處瞭解詳情:http://api.jquery.com/jQuery/#jQuery1

1

$()延伸的對象 - 在這種情況下,DOM元素 - 與所有標準的jQuery方法。

和(IMHO):

$('li', document.body.children[0])是說的一個令人困惑的方式:

$('body *:first li')

換句話說,第二個參數傳遞給$()方法定義了li要素應中找到上下文。