1. 程式人生 > >(3)選擇元素——(4)css選擇器(CSS selectors)

(3)選擇元素——(4)css選擇器(CSS selectors)

The jQuery library supports nearly all of the selectors included in CSS specifications 1 through 3, as outlined on the World Wide Web Consortium's site: http://www.w3.org/Style/CSS/specs. This support allows developers to enhance their websites without worrying about which browsers (particularly Internet Explorer 6) might not understand advanced selectors, as long as the browsers have JavaScript enabled.

jquery支援幾乎所有的css1到3的規範,在世界全球資訊網協會網站http://www.w3.org/Style/css/specs有一個概述。這份支援允許開發者擴充套件他們的網站,而不用擔心這是哪一個瀏覽器(尤其是IE6)或許不懂高階選擇器,只要瀏覽器支援js指令碼就行。

Progressive enhancement
Responsible jQuery developers should always apply the concepts of progressive enhancementand graceful degradationto their code, ensuring that a page will render as accurately, even if not as beautifully, with JavaScript disabled as it does with JavaScript turned on. We will continue to explore these concepts throughout the book.

漸進增強 有責任感的jquery開發者應該總是應用漸進增強和優雅降級的概念到自己程式碼中,確保這個網頁將會精確的渲染,即使在js被禁用後不是像啟用js後的那麼漂亮。我們將在整本書中繼續探索這個概念。 To begin learning how jQuery works with CSS selectors, we'll use a structure that appears on many websites, often for navigation: the nested, unordered list:

<ul id="selected-plays">
<li>Comedies
<ul>
<li><a href="/asyoulikeit/">As You Like It</a></li>
<li>All's Well That Ends Well</li>
<li>A Midsummer Night's Dream</li>
<li>Twelfth Night</li>
</ul>
</li>
<li>Tragedies
<ul>
<li><a href="hamlet.pdf">Hamlet</a></li>
<li>Macbeth</li>
<li>Romeo and Juliet</li>
</ul>
</li>
<li>Histories
<ul>
<li>Henry IV (<a href="mailto:

[email protected] 
">email</a>)
<ul>
<li>Part I</li>
<li>Part II</li>
</ul>

<li><a href="http://www.shakespeare.co.uk/henryv.htm">

Henry V
</a></li>
<li>Richard II</li>
</ul>
</li>
</ul>

為了開始學習jquery如何使用css選擇器工作,我們將使用在很多網站上出現的結構,通常是導航,一個巢狀的無序的列表:(程式碼如上)

Notice that the first <ul>has an ID of selected-plays, but none of the <li>tags have a class associated with them. Without any styles applied, the list looks similar to the following screenshot:


注意到第一個ul標籤有一個selected-play ID,但是任何一個li標籤上都沒有類。在沒有任何樣式的情況下,這個列表看起來就像下面的截圖一樣。

這個巢狀的列表現實的好像我問期望他是一系列元素垂直排列,然後根據級別縮排。