271
jQuery庫的導入與選擇符
本人最近學圖靈係列叢書中《jQuery基礎教程》，現將相關摘錄整理如下（後續章節也會相繼整理出來）。
關於庫的導入：
引用jQuery庫文件的<script>標簽，必須放在引用自定義腳本文件的<script>標簽之前。否則，在我們編寫的代碼中將引用不到jQuery框架。
jQuery中基本的操作就是選擇文檔中的某個部分。這是通過$()結構來完成的。通常，該結構中需要一個字符串參數，參數可以包含任CSS選擇符表達式。
$()函數實際上就是jQuery對象的一個製造工廠。jQuery對象中會封裝零個或多個DOM元素，並允許我們以多種不同的方式與這些DOM元素進行交互。
.addClass()——加入新類
它會將一個CSS類應用到我們選擇的頁麵部分。該方法唯一的參數就是要添加的類名。.addClass()方法及其反方法.removeClass()為我們探索jQuery支持的各種選擇符表達式提供了便利。
值得注意的是jQuery在.addClass()等方法中使用了隱式迭代機製，因此一次函數調用就可以完成對所有選擇的文檔部分的修改。
關於代碼的執行
如果將代碼插入文檔的頭部，不會有任何效果。通常情況下JavaScript代碼在瀏覽器初次遇到它們時就會執行，而在瀏覽器處理頭部時，HTML還不會呈現樣式。因此我們需要將代碼延遲到DOM可用時再執行。
控製Javascript代碼何時執行的傳統機製是在事件處理程序中調用代碼。有許多針對用戶發起的事件的處理程序。
在沒有jQuery的情況下，我們需要依靠onload處理程序，它會在頁麵(連同其他包含的所有圖像)呈現完成後觸發。
所以為了在onload事件中執行修改樣式的代碼，需要先把代碼放到函數中，然後需要修改HTML的<body>標簽，將這個函數附加給事件：<body
>——這樣當頁麵加載完後，我們的代碼會執行。
但是，上述方法存在很多缺點，(缺點主要為：結構與功能變得緊耦合，導致代碼混亂等)。
為了避開這個缺陷，jQuery允許我們使用$(document).ready()結構預定DOM加載完成後(不必等待圖像加載完成)觸發的函數調用。
因此我們可以在文檔頭部包含代碼，並可以直接寫如下代碼即可：$(document).ready(函數名)
關於選擇符：
有三種基本的選擇符：標簽名、ID和類。這些選擇符可以單獨使用，也可以與其他選擇符組合使用。
選擇符
CSS jQuery
說明
標簽名
P
$('p') 取得文檔中所有的段落
ID
#some-id
$('#some-id') 取得文檔中ID為some-id的一個元素
類
.some-class
$('.some-class') 取得文檔中類為some-class的所有元素
將方法連綴到$()工廠函數後麵，包裝在jQuery對象中的元素會被自動、隱式地循環遍曆。換句話說，這樣就避免了使用for
循環之類的顯示迭代。
負責任的jQuery開發者應該在編寫自己的程序時，始終堅持漸進增強和平穩退化的理念，做到在Javascript禁用時頁麵仍然能夠
與啟用時一樣準確地呈現。
屬性選擇符
屬性選擇符石CSS選擇符中特別有用的一類選擇符。通過HTML元素的屬性選擇符元素，例如鏈接的title屬性或圖像的alt屬性。
例如，要選擇帶有alt屬性的所有圖像元素，可以使用以下代碼：
$(img[alt])
屬性選擇符允許以類似正則表達式的語法來標識字符串的開始(^)和結尾($)。而且，也可以使用星號(*)表示位於字符串中
任意位置的值，使用歎號(!)表示取相反的值。
比如：給所有電子郵件鏈接添加類：
代碼：$('a[href^=mailto]').addClass('mailto');
要為所有指向PDF文件的鏈接添加類：
代碼：$('a[href$=.pdf]').addClass('pdflink');
屬性選擇符也可以組合使用，例如，可以為href屬性既為以http開頭且任意位置又包含henry的所有鏈接添加一個類：
代碼：$(a[href^=http][href*=henry]).addClass('henrylink');
自定義選擇符
自定義選擇符的語法與CSS中的偽類選擇符語法相同，即選擇以一個冒號(:)開頭。
注意，javascript中的數組從0開始編號,而CSS則是從1開始編號的。
jQuery庫中有兩個非常有用的自定義選擇符是:odd和:even。
例如：要為一個表格的所有的偶數行增加一個灰色的背景色(奇數行為無背景色)可以寫下麵這句代碼：
$('tr:odd').addClass('alt'); ——alt是一個CSS類；
注意：為什麼爭對偶數行使用:odd選擇符呢？很簡單，:eq()選擇符、:odd和:even選擇符都使用Javascript內置從0開始的編號
方式。不過要注意的是，如果一個頁麵上存在多個表格，比如一個表格的最後一行擁有白色背景，所以下一個表格的第一行
就會帶有“另一種”淺灰色背景。(jQuery默認去遍曆頁麵中所有的“tr”並一直使用:odd機製去添加背景色)
解決的辦法是使用:nth-child()選擇符。這個選擇符可以接受一個數值、odd或even作為參數。值得一提的是，:nth-child()
是jQuery中唯一從1開始計數的選擇符。所以要讓一個頁麵上所有的表格效果一致，可以用下麵這句代碼來代替上麵一句：
$('tr:nth-child(even)').addClass('alt');
contains——自定義選擇符
假如出於某種原因，我們希望突出顯示提到的任何一種特定的字符串所處的表格單元，並為此添加特定的樣式，假設樣式類為：
.highlight，我們可以使用contains選擇符：
$('td:contains(Henry)').addClass('highlight');
有一點需要注意的是：contains()選擇符區分大小寫。
$('tr:odd').addClass('alt');
的等價表達方式為： $('tr').filter(':odd').addClass('alt');
這兩種取得元素的方式在很大程度上可以互為補充。同樣，.filter的功能葉十分強大，因為它可以接受函數參數。通過傳入
的函數，可以執行複雜的測試，以決定相應元素是否應該保留在匹配的集合中。假如，我們要為所有外部鏈接添加一個類。
我們可以這樣實現：
$('a').filter(function{
return
this.hostname && this.hostname
!=location.hostname;
}).addClass('external');
第二行代碼可以篩選出符合下麵兩個條件的<a>元素：
(1)必須包含一個帶有域名（this.hostname）的href屬性，這個測試可以排除mailto及類似鏈接。
(2)鏈接指向的域名（還是this.hostname）必須不等於頁麵當前所在域的名稱。
更準確地說，.filter()方法會迭代所有匹配的元素，基於每個元素測試函數的返回值。
.next()方法：
.next()方法隻有選擇下一個最接近的同輩元素。
.nextAll()用於返回其後所有的同輩元素。
其中它們分別對應.prev()和.prevAll()。此外，.siblings()能夠選擇處於相同DOM層次的所有其他元素，無論這些元素處於當前
元素之前還是之後。
要在這些篩選的其他單元格中再包含原來的單元格，可以添加.andSelf()方法：
.parent()方法在DOM中上溯一層，
.children()選擇該行所有的單元格。
我們仍然有需要在代碼中直接訪問DOM元素的時候，訪問DOM中的元素，可以使用get()方法，要訪問jQUery對象引用的第一個元素，可是使用get(0)。如果需要在循環中使用DOM元素那麼應該使用.get(index)。因而如果想知道帶有屬性的元素的標簽名，可以使用如下代碼：
var
a= $('#hello')[0].tagName; 或者 var b= $('#hello').get(0).tagName;
原文發布時間為：2010-04-24
本文作者：vinoYang
本文來自雲棲社區合作夥伴CSDN博客，了解相關信息可以關注CSDN博客。
最後更新：2017-11-23 17:33:44