《Jquery基礎教程》讀書筆記

前言

JQuery是功能強大卻又簡潔明快的輕量級JavaScript庫，在DOM操做、事件處理、Ajax特性以及動畫特效等方面表現出色。

1、選擇符--取得你想要的一切

JQuery最強大的方面之一就是它能簡化DOM遍歷任務，$()函數其實是JQuery對象的一個製造工廠，放在圓括號中的任何元素都將自動執行循環遍歷（隱式迭代），而且會被保存到一個JQuery對象中（JQuery對象中會封裝零個或多個DOM元素），JQuery利用CSS的優點，查找頁面元素的機制構建於CSS選擇符之上。

標籤名：$('p')會取得文檔中全部的段落。

ID：$('#some-id')會取得文檔中具備對應的some-id ID的一個元素。

類：$('.some-class')會取得文檔中帶有some-class類的全部元素。

如下列舉一些CSS和XPath選擇符，以及jQuery獨有的自定義選擇符：

• $('#selected-plays > li')  查找ID爲selected-plays的元素的子元素（不包括孫元素）中全部的列表項(li)。
• $('#selected-plays li:not(.horizontal)')   查找ID爲selected-plays的元素的後代元素中沒有horizontal類的列表項(li)。
• $('a[@title]')  選擇全部帶有title屬性的連接
• $('a[@href^="mailto:"]')  全部帶有href屬性且以mailto開頭的錨元素(a)
• $('a[@href$=".pdf"]')   全部帶有href屬性且以.pdf結尾的錨元素(a)
• $('a[@href*="mysite.com"]')  全部帶有href屬性且屬性值包含mysite.com的錨元素(a)
• $('div[ol]')  包含ol元素的全部div元素
• $('div.horizontal:eq(1)')  帶有horizontal類的div集合中，選擇第2項
• $('li:nth-child(3n)')  第三、第六、第九、…、全部3的倍數的li
• $('tr:odd')  表格中奇數行編號的tr（:nth-child(odd) 與(2n+1)結果同樣）
• $('td:contains("Henry")')  包含Henry的td
• $('tr').parent() 取得父元素，.next()取得最接近下一個的同輩元素，.find()查找知足條件的元素，.end()回溯到上一次篩選結果的DOM元素。

2、事件--扣動扳機

$(document).ready(function() {
　　//這裏是代碼... ...（保證當前文檔中DOM樹加載完成後執行代碼，以避免沒法定位DOM元素）
});

1. 但願用戶單擊按鈕時執行，引入.bind()方法

$(document).ready(function() {
    $('#some-id').bind('click', function() {
        $(this).addClass('selected'); //關鍵字this引用的就是#some-id
        alert("you have clicked some-id");
        $(this).removeClass('selected'); //去除class
});
});       

補充說明：

• .removeClass()方法的參數是可選的，即當省略參數時，該方法會移除元素中全部的類。例如：$('body').removeClass()

• .bind('click', function() {})的簡寫是.click()，.unbind()移除綁定。

• 對於只需觸發一次，隨後要當即解除綁定的狀況也有一種簡寫方法爲.one()。

2. 顯示和隱藏高級特性

• .toggle()方法接受兩個參數，並且這兩個參數都是函數。第一次在元素上單擊會調用第一個函數，第2次單擊會觸發第2個函數。
• .hover()控制鼠標指針進入元素和離開元素時執行任意操做，IE瀏覽器對:hover僞類選擇符支持很差，開發時要注意。
• .trigger()方法能夠完成模擬事件的操做，好比$('#some-id').trigger('click')

3、效果--爲操做添加藝術性

內聯CSS：

• .css('property', 'value')  能夠修改內聯的CSS屬性
• var $speech = $('div.speech'); var currentSize = $speech.css('fontSize');  獲取文字大小
• .hide()和.show()方法控制隱藏與展現
• .animate()該方法能夠建立包含多重效果的自定義動畫
• .animate({param1: 'value1', param2: 'value2'},speed,function() {})

4、DOM操做--基於命令改變頁面

• 要在每一個匹配的元素中插入新元素，使用：
  • .append()
  • .appendTo()
  • .prepend()
  • .prependTo()
• 要在每一個匹配的元素響鈴的位置上插入新元素，使用：
  • .after()
  • .insertAfter()
  • .before()
  • .insertBefore()
• 要在每一個匹配的元素外部插入新元素，使用：
  • .wrap()   好比：$(this).wrap('<li></li>')，效果是<li>$this</li>
• 要用新元素或文本替換每一個匹配的元素，使用：
  • .html()   好比：.html('&hellip;')  p.s.這裏是省略號
  • .text()
• 要移除每一個匹配的元素中的元素，使用：
  • .empty()
• 要從文檔中移除每一個匹配的元素及後代元素，但不實際刪除它們，使用：
  • .remove()
• 複製元素：
  • .clone()，.clone(false)只複製匹配的元素，不會複製其全部的後代元素。

5、AJAX--讓網站與時俱進

• AJAX用XMLHttpRequest對象，經過這個對象能夠在不中斷其餘瀏覽器任務的狀況下向服務器發送請求。
• 對於服務器的提供的文件格式，主要有JSON和XML兩種選擇，在性能和文件大小方面具備優點的JSON一般是不錯的選擇。而當遠程應用程序未知時，XML則可以爲良好的互操做性提供最可靠的保證。
• GET或者POST，決定使用哪一種辦法的惟一理由就是遵守服務器端的代碼的約定，或者是要傳輸大量的數據---GET方法對傳輸的數據量有更嚴格的限制。從視覺上來看，它們之間一個最大的區別就是GET請求把參數放在做爲URL一部分的查詢字符串中，而POST請求則不是。

6、表格操做

• 主要介紹用js在客戶端完成表格內的排序，分頁，交替行顯示，擴展和摺疊表格

7、構建功能型表單

• 主要介紹表單的驗證，客戶端驗證不能取代服務端的驗證，不能依賴用戶啓用了JavaScript
• 電子郵件的正則表達式驗證：!/.+@+\.[a-zA-Z]{2,4}$/.test(this.value)
• $.unique()方法能夠去掉數組中重複的字符串
• javaScript的本地函數join把數組轉換成字符串
• 字段的佔位符文本，（推薦仔細看）好比在搜索框中默認寫"search the site"，至關於給用戶提示。.focus()捕捉鼠標焦點，.blur()失去焦點時，執行響應操做。
• 自動完成與實時搜索，（推薦仔細看）這邊是基於一個經常使用詞的搜索詞典，用js實現實時搜索
• 一個訂單網頁的編寫，應用了漸進加強原則：首先確保頁面在沒有JavaScript的狀況下能夠正常運行，而後使用jQuery在可能的狀況下更優雅地完成相同的任務。

8、滑移和翻轉效果

• 標題與圖片的一些效果，有插件能夠直接實現，等須要時候能夠再看這部份內容。
• jCarousel插件實現了循環滾動一組圖像的機制。
• Thickbox插件提供了在頁面上顯示疊放信息的方式。

9、插件

• 有一個可用的插件列表，持續更新中http://plugins.jquery.com/
• 編寫方法時，方法應該返回jQuery對象以保持連綴能力，若是匹配的對象集合被修改，那麼應該經過調用.pushStack()建立一個新的jQuery對象，並且應該返回這個新對象。好比：return this.pushStack(some-var)
• String.constructor == Number能夠作類型檢查