2.3.3 jQuery · Web全棧技術指南

# 2.3.3 jQuery ### 2.3.3 jQuery [jQuery](http://jquery.com/)是一個JavaScript代碼庫（library）。它既非ECMAScript標準庫（standard library）的一部分，也非瀏覽器對JavaScript的擴展（如DOM API那樣）。但它十分重要，有必要做一介紹。下面的例子用jQuery實現了與上面相同的功能： ``` <html> <head> <meta charset="utf-8" /> <title>你好</title> </head> <body> <button id="btn1">點我</button> <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> <script> $('#btn1').click(function() { $('body').html('<h1>你好，JavaScript！</h1>'); }); </script> </body> </html> ``` 這行代碼引入了jQuery庫： ``` <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> ``` 這段代碼對button的click事件注冊了一個回調函數： ``` <script> $('#btn1').click(function() { $('body').html('<h1>你好，JavaScript！</h1>'); }); </script> ``` jQuery有幾個重要功能。首先就是簡單、靈活的HTML元素選擇功能。如果讀者對CSS選擇器（selector）有一些了解就會發現：jQuery可以使用相同的選擇器來選擇HTML元素。例如，通過ID選擇對象 ``` $('#btn1') ``` 或者通過元素名稱選擇對象 ``` $('body') ``` 其次就是提供簡單、一致的編程接口。例如上面用來注冊事件的click方法，以及用來設置內容文本的html方法，都比對應的標準API要簡單。 “一致性”在此值得一提：我們希望相同的HTML文檔在不同的瀏覽器里表現一致——內容、排版和行為都一樣。但實際上這種一致性不是輕易可得的，尤其是在早些年Web標準（如HTML，CSS和ECMAScript的標準）還不完善的時候。雖然現在標準日臻完善，但各瀏覽器廠商在遵循/理解標準方面仍有差異。jQuery提供的編程接口“抹平”了這種差異性，使我們至少在JavaScript編程方面可以比較容易地做到跨瀏覽器一致。