jQuery learn - 1 - 選擇元素 && CSS

CDN=Content Delivery Networks
DOM=Document Object Model
W3C=World Wide Web Consortium
CSS home page
老是面向集合> 當指示jQuery「找到帶collapsible類的所有元素,而後隱藏它們」時,不需循環遍歷每一個返回的元素。.hide()被設計成自動操做對象集合,而非單獨的對象。利用這種稱做隱式迭代(implicit iteration)的技術,就可拋棄那些臃腫的循環結構,從而大幅地減小代碼量
將多重操做集於一行> 爲避免過分使用臨時變量/沒必要要的代碼重複,jQuery在其多數方法中採用連綴(chaining)的編程模式。這種模式意味着基於一個對象進行的多數操做的結果,都會返回該對象自身,以便爲該對象應用下一次操做
jQuery官方網站始終包含該庫最新的穩定版本

隨着jQuery的日益流行,不少公司都經過本身的CDN 託 管 其 庫 文 件 , 讓 開 發 人 員 能 更 方 便 地 使 用。 最 典 型 的 就 是 谷 歌和微軟和jQuery項目本身,jQuery庫文件被放在了強勁、低延時的服務器上,這些服務器遍及全球,不管用戶在哪兒,都能以快速下載到jQuery。雖然託管在CDN上的文件因爲分佈式和緩存緣由有速度優點,但在實際開發中仍是使用本地副本更方便
jQuery從2.0開始再也不支持IE六、IE7和IE8
若是項目中有針對jQuery 1.9以前的版本編寫的代碼,可以使用jQuery遷移插件實現兼容
引用jQuery庫文件的<script>標籤,必須放在引用自定義腳本文件的<script>前。不然,引用不到jQuery框架
瀏覽器中通常內置開發工具。例如:Internet Explorer Developer Tools,Safari Web Inspector,Chrome Developer Tools,Firefox插件Firebug,Opera Dragonfly
jQuery最強大的特性之一就是它能簡化在DOM中選擇元素的任務。DOM充當了JavaScript與網頁間的接口;它以對象網絡而非純文本形式來表現HTML源代碼
jQuery支持CSS規範1到3中幾乎全部選擇符,具體內容參考W3C
負 責 任 的 jQuery開 發 者 應  在 編 寫 自 己  程 序 時 , 始 終 堅 持 漸 進 增 強(progressive enhancement)和平穩退化(graceful degradation)理念,作到在JavaScript禁用時,頁面仍能與啓用JavaScript時同樣準確地呈現,即便沒有那麼美觀。漸進加強的更多信息
屬性選擇符使用一種從正則表達式中借鑑來的通配符語法
自定義選擇符的語法與CSS僞類選擇符語法相同,即以:開頭。例如,從帶有horizontal類的<div>集合中選擇第2項:
$('div.horizontal:eq(1)')。注意,JavaScript數組採用從0開始的編號方式,因此eq(1)取得第2個元素。而CSS從1開始,所以CSS選擇符$('div:nth-child(1)')取得的是做爲其父元素第1個子元素的全部 div元素。若是記不清哪一個從0開始,哪一個從1開始,能夠參考jQuery API文檔(:nth-child()是jQuery中惟一從1開始計數的選擇符)
表單選擇符:
    :input 輸入字段、文本區、選擇列表和按鈕元素
    :button 按鈕元素或type屬性值爲button的輸入元素
    :enabled 啓用的表單元素
    :disabled 禁用的表單元素
    :checked 勾選的單選按鈕或複選框
    :selected 選擇的選項元素
$('tr:even').addClass('alt');,可經過.filter()重寫成$('tr').filter(':even').addClass('alt');
.filter()十分強大,由於它能夠接受函數參數。經過傳入的函數,可執行復雜的測試,以決定相應元素是否應該保
留在匹配的集合中。例如,假設咱們要爲全部外部連接添加一個類。
    a.external {
        background: #fff url(images/external.png) no-repeat 100% 2px;
        padding-right: 16px;
    }
    jQuery中沒有針對這種需求的選擇符。若是沒有篩選函數,就必須顯式地遍歷每一個元素,對它們單獨進行測試。但有了下面   的篩選函數,就仍可利用jQuery的隱式迭代能力,保持代碼的簡潔:
    $('a').filter(function() {
        return this.hostname && this.hostname != location.hostname;
    }).addClass('external');
    第2行代碼能夠篩選出符合下面兩個條件的<a>元素:
        必須包含1個帶域名(this.hostname)的href屬性。這個測試能夠排除mailto及相似連接。
        連接指向的域名(仍是 this.hostname )必須 != 頁面當前所在域的名稱(location.hostname)
    更準確地說,.filter()會迭代全部匹配的元素,對每一個元素都調用傳入的函數並測試函數的返回值。若是函數返回false,則從匹配集合中刪除相應元素;true,保留。

突出顯示Henry所在單元格後面的所有單元格:
    $(document).ready(function() {
       $('td:contains(Henry)').nextAll().addClass('highlight');
    });
    .next() 和 .nextAll() 分別有一對應方法,即 .prev()和.prevAll()。此外,.siblings()能選擇處於相同DOM層的全部其餘元素,不管這些元素處於當前元素以前仍是以後.要在這些單元格中再包含原單元格可添加.addBack():
    $(document).ready(function() {
        $('td:contains(Henry)').nextAll().addBack().addClass('highlight');
    });
    要選擇同一組元素,可採用的選擇符和遍歷方法的組合不少。例如:
    $(document).ready(function() {
        $('td:contains(Henry)').parent().children().addClass('highlight');
    });
     $('td:contains(Henry)') // Find every cell containing "Henry"
        .parent() // Select its parent
        .find('td:eq(1)') // Find the 2nd descendant cell
        .addClass('highlight') // Add the "highlight" class
        .end() // Return to the parent of the cell containing "Henry"
        .find('td:eq(2)') // Find the 3rd descendant cell
        .addClass('highlight'); // Add the "highlight" class
想知道帶有id="my-element"屬性的元素的標籤名:
    var myTag = $('#my-element').get(0).tagName;
    爲進一步簡化,jQuery爲 .get() 提供了一種簡寫方式。好比,可將$('#my-element').get(0)簡寫爲:
        var myTag = $('#my-element')[0].tagName;
對象字面量:通常,數字值不需加引號而字符串值需加引號。因爲屬性名是字符串,因此屬性一般需加引號。但若是對象字面量中的屬性名是有效的JavaScript標識符,好比使用駝峯大小寫形式的DOM表示法時,則可省略引號。
parseFloat()會在一個字符串中從左到右地查找一個浮點(十進制)數。例如,它會將字符串'12'轉換成數字12。另外,它還會去掉末尾的非數字字符,所以'12px'就變成了12。若是字符串自己以一個非數字開頭,返回NaN
帶廠商前綴的樣式屬性:瀏覽器廠商在引入試驗性的樣式屬性時,一般會在實現達到CSS規範要求前,在屬性名前添加一個前綴。等到實現和規範都穩定後,這些屬性的前綴就會被去掉。但在jQuery中可直接使用標準的屬性名,好比:.css('propertyName', 'value')。若是樣式對象中不存在這個屬性,jQuery就會依次檢測全部帶前綴(Webkit、O、Moz、ms),而後使用第1個找到的那個屬性。
.hide()會將匹配的元素集合的內聯style屬性設爲display:none。並記住原先的display值,一般是block、inline或inline-block。剛好相反,.show()將匹配的元素集合的display屬性恢復爲應用display: none以前的可見屬性