1.1.2 jQuery之美

jQuery帶給我們的是JavaScript開發(fā)的革命。在沒有腳本庫的日子，開發(fā)腳本絕對是一件容易出錯的工作，并且實現(xiàn)類似跨瀏覽器、頁面動畫效果等都屬于高難度的應(yīng)用，“救世主”jQuery有如下神力。

1. 提供了功能強(qiáng)大的腳本函數(shù)類庫

使用這些功能函數(shù), 能夠幫助Web開發(fā)人員快速完成各種功能，而且會讓代碼異常簡潔。比如，通過jQuery選擇器一次選中頁面上所有的Checkbox元素，通過each遍歷選中的所有元素。

        $("*:checkbox").each(function() { });

2. 解決瀏覽器兼容性問題

JavaScript腳本在不同瀏覽器的兼容性問題一直是Web開發(fā)人員的噩夢，常常一個頁面在IE 7、Firefox下運行正常，但在IE 6下就出現(xiàn)莫名其妙的問題。針對不同的瀏覽器編寫不同的腳本是一件痛苦的事情。jQuery將開發(fā)人員從這個噩夢中拯救出來，比如jQuery中的event事件對象已經(jīng)被格式化成所有瀏覽器通用，從前要根據(jù)event獲取事件觸發(fā)者，在IE下是event.srcElements而在Firefox等標(biāo)準(zhǔn)瀏覽器下是event.target。jQuery則通過統(tǒng)一event對象，可以在所有瀏覽器中使用event.target獲取事件對象。當(dāng)單擊一個<a>元素時, 默認(rèn)會鏈接到href屬性中的地址，使用event.preventDefault()方法就可以取消此行為（瀏覽器默認(rèn)行為）。

3. 實現(xiàn)豐富的UI

jQuery可以實現(xiàn)比如漸變彈出、圖層移動等動畫效果，這樣可獲得更好的用戶體驗。以漸變效果為例，從前為了寫一個可以兼容IE和Firefox的漸變動畫，要使用大量JavaScript代碼實現(xiàn)。費心費力不說，寫完后沒有太多幫助，過一段時間就忘記了，再開發(fā)類似的功能還要再次費心費力。現(xiàn)在使用jQuery就可以快速完成此類應(yīng)用。

jQuery UI就是用來幫助完成上面所有功能的jQuery插件庫，除了實現(xiàn)效果外，其還提供了很多精美的主題和模板，可以實現(xiàn)在不改變?nèi)魏未a的情況下更改樣式風(fēng)格。如圖1-1所示為不同主題下的日歷控件。

圖1-1 不同主題的日歷控件

圖1-2和圖1-3是使用dialog組件實現(xiàn)的對話框拖拽和拉伸效果。

圖1-2 可拖拽

圖1-3 可縮放

4. 優(yōu)雅的鏈?zhǔn)骄幊谭绞?/span>

jQuery中，常常使用如下所示的鏈?zhǔn)椒绞骄幊蹋?/p>

        $("#myDiv").attr("title","myTitle").css("color","red");

上面的代碼，首先獲取到id為myDiv的元素，然后首先修改title屬性，接著修改了CSS樣式設(shè)置顏色為紅色。jQuery這種鏈?zhǔn)骄幊谭绞绞謨?yōu)雅，而且更適合用來描述語意。在最新版本的Prototype中也已經(jīng)開始借鑒jQuery的這種語法結(jié)構(gòu)，但是就導(dǎo)致了Prototype有兩套編碼方法。而jQuery作為創(chuàng)造者，使所有使用jQuery的編碼人員都能用最優(yōu)雅的方式編寫代碼。

5. 學(xué)習(xí)簡單，上手快

jQuery的學(xué)習(xí)成本非常低，因為jQuery是輕量級、靈活的腳本框架，并且其官方提供了豐富的在線文檔和實例，任何人都可以輕松上手。

6. 太多了! 等待我們一一去發(fā)現(xiàn)