jQuery 簡介LOGIN

jQuery 簡介

什麼是jQuery

jQuery是一套Javascript腳本庫.  我們將一些工具方法或物件方法封裝在類別庫中, 方便使用者使用.

#注意jQuery是腳本庫, 而不是腳本框架. "庫"不等於"框架", 例如"System組件"是類別庫,而"ASP.NET MVC"是框架. jQuery並不能幫助我們解決腳本的引用管理和功能管理,這些都是腳本框架要做的事.

腳本庫能夠幫助我們完成編碼邏輯,實現業務功能. 使用jQuery將極大的提高編寫javascript代碼的效率, 讓寫出來的程式碼更優雅, 更健壯. 同時網路上豐富的jQuery外掛也讓我們的工作變成了"有了jQuery,天天喝茶水"--因為我們已經站在巨人的肩膀上了.

jQuery是個輕量級的"寫的少,做的多"的JavaScript函式庫。

jQuery函式庫包含以下功能:

HTML 元素選取

#HTML 元素操作

CSS 操作

HTML 事件函數

JavaScript 特效與動畫

HTML DOM 遍歷與修改

AJAX

#Utilities


################################################ jQuery有以下特點:#########1.提供了強大的功能函數######使用這些功能函數, 能夠幫助我們快速完成各種功能, 而且會讓我們的程式碼異常簡潔.######2.解決瀏覽器相容性問題######javascript腳本在不同瀏覽器的兼容性一直是Web開發人員的噩夢,  常常一個頁面在IE7,Firefox下運行正常, 在IE6下就出現莫名其妙的問題. 針對不同的瀏覽器編寫不同的腳本是一件痛苦的事情. 有了jQuery我們將從這個噩夢中醒來, 比如在jQuery中的Event事件對像已經被格式化成所有瀏覽器通用的, 從前要根據event獲取事件觸發器, 在ie下是event.srcElements 而ff等標準瀏覽器下下是event.target. jQuery則通過統一event對象,讓我們可以在所有瀏覽器中使用event .target取得事件物件.######3.實現豐富的UI######jQuery可以實現例如漸變彈出, 圖層移動等動畫效果, 讓我們獲得更好的使用者體驗. 單以漸變效果為例, 從前我自己寫了一個可以兼容ie和ff的漸變動畫, 使用大量javascript代碼實現, 費心費力不說, 寫完後沒有太多幫助過一段時間就忘記了. 再開發類似的功能還要再次費心費力. 如今使用jQuery就可以幫助我們快速完成此類應用.###

4.修正錯誤的腳本知識

大部分開發人員對於javascript存在錯誤的認識. 例如在頁面中編寫載入時即執行的操作DOM的語句, 在HTML元素或document物件上直接例如"onclick"屬性,  不知道onclick其實是一個匿名函數等等.  擁有這些錯誤腳本知識的技術人員也能完成所有的開發工作, 但是這樣的程序是不健壯的."在頁面中編寫加載時即執行的操作DOM的語句", 當頁面代碼很小用戶加載很快時沒有問題, 當頁面加載稍慢時就會出現瀏覽器"終止操作"的錯誤.jQuery提供了很多簡便的方法幫助我們解決這些問題, 一旦使用jQuery你就將糾正這些錯誤的知識--因為我們都是用標準的正確的jQuery腳本編寫方法!

為什麼使用jQuery ?

目前網路上有大量開源的 JS 框架, 但是 jQuery 是目前最受歡迎的 JS 框架,而且提供了大量的擴充。

很多大公司都在使用jQuery, 例如:

Google

Microsoft

IBM

##Netflix

#您需要具備的基礎知識

在您開始學習jQuery 之前,您應該對以下知識有基本的了解:

HTML

CSS

JavaScript

如果您需要先學習這些科目,請在我們的 首頁 尋找這些教學課程。

下一節

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $(".ex .hide").click(function(){ $(this).parents(".ex").hide("slow"); }); }); </script> <style type="text/css"> div.ex { background-color:pink; padding:7px; border:solid 1px black; width:50%; } </style> </head> <body> <div class="ex"> <button class="hide">点我隐藏</button> <p>站点名: php中文网<br> 站点 URL:http://www.php.cn</p> </div> </body> </html>
章節課件