最近在整理一些以前的博文，發現瀏覽數以及評價數最高的算是《ExtJS的使用方法匯總》系列，通過大家的反饋，這一系列的七篇文章基本可以讓一個剛接觸ExtJS的人學習並開始使用ExtJS，在這裡，為了便於大家尋找，重新貼出地址：
ExtJS的使用方法匯總(1)——配置和表格控制項使用http://blog.csdn.net/rocket5725/article/details/4535323
ExtJS的使用方法匯總(2)——表單與輸入控制項http://blog.csdn.net/rocket5725/article/details/4538843
ExtJS的使用方法匯總(3)——樹形結構http://blog.csdn.net/rocket5725/article/details/4551429
ExtJS的使用方法匯總(4)——拖放以及快顯視窗http://blog.csdn.net/rocket5725/article/details/4553726
ExtJS的使用方法匯總(5)——布局http://blog.csdn.net/rocket5725/article/details/4554730
ExtJS的使用方法匯總(6)——工具列和菜單 http://blog.csdn.net/rocket5725/article/details/4555207
ExtJS的使用方法匯總(7)——資料存放區與傳輸http://blog.csdn.net/rocket5725/article/details/4557183
ExtJS是我在上一個系統所採用的JS庫，後來在實際的應用過程中，頁面的速度載入方面存在了一定的瓶頸，雖然一直在試圖最佳化，但是問題依舊存在。所以在後來的一個項目，我們選擇了JQuery。
為了讓更多的人更容易接觸到JS，從本文開始，將陸續推出《Jquery的使用方法匯總》系列文章，歡迎大家繼續支援並提出寶貴意見。
JQuery是什麼?如何使用JQuery?本文以“Hello JQuery !”為例，介紹JQuery的用法。1.下載JQuery在官網中，JQuery有兩種格式的指令碼可供下載：壓縮版（適合發布使用，因檔案的大小非常小）、非壓縮版（適合調試使用）如所示，目前網站上最新的版本是1.8.3，我們可以選擇Minified版本http://code.jquery.com/jquery-1.8.3.min.js，也可以選擇Uncompressed版本http://code.jquery.com/jquery-1.8.3.js。2.配置JQuery2.1 添加引用用相對路徑的方式引用即可
<html> <head> <title>JQuery學習系列教程</title> </head> <body> <a href="http://blog.csdn.net/rocket5725/">薛敬明的部落格</a> //STEP 1 <script src="jquery-1.8.3.min.js"></script> <script> </script> </body></html>2.2 添加入口函數這個有點類似於ExtJS的Ext.onReady(function(){});
<html> <head> <title>JQuery學習系列教程</title> </head> <body> <a href="http://blog.csdn.net/rocket5725/">薛敬明的部落格</a> //STEP 1 <script src="jquery-1.8.3.min.js"></script> <script> //STEP 2 $(document).ready(function(){ }); </script> </body></html>
$(document).ready()的寫法涉及到了JQuery的文法，下一篇文章會提到文法的相關知識。
這個地方還可以簡寫為： $(function(){ });2.3 添加代碼
<html> <head> <title>JQuery學習系列教程</title> </head> <body> <a href="http://blog.csdn.net/rocket5725/">薛敬明的部落格</a> //STEP 1 <script src="jquery-1.8.3.min.js"></script> <script> //STEP 2 $(document).ready(function(){ //STEP 3 alert("Hello JQuery World!"); }); </script> </body></html>
為什麼要把我們想執行的JS代碼寫到$(document).ready()內？ 一個原因就是防止文檔在完全載入之前運行 JQuery 代碼。這個跟ExtJS是相通的。
將上面部分的代碼拷貝到記事本中，將檔案名稱改為hello.html即可。<html> <head> <title>JQuery學習系列教程</title> </head> <body> <a href="http://blog.csdn.net/rocket5725/">薛敬明的部落格</a> //STEP 1 <script src="jquery-1.8.3.min.js"></script> <script> //STEP 2 $(document).ready(function(){ //STEP 3 alert("Hello JQuery World!"); //STEP 4 $("a").click(function(event){ alert("Welcome to Xue's Blog!"); }); }); </script> </body></html>這樣一來，一個簡單的JQuery代碼就編寫完成了。大家直接複製就可以使用。一旦點擊超連結，效果如下：
本系列文章包括些什嗎？由於時間的關係，本系列的文章大致會包括如下幾個部分：1、JQuery的入門讓初學者進入JQuery的世界2、JQuery的選取器讓JQuery的使用者認識到JQuery選取器的偉大之處，除了選取器之外，其中還包含屬性以及樣式的處理。3、JQuery Grid的介紹介紹JQuery Grid的初步使用，讓使用者愛上JQuery.4、JQuery UI的介紹認識到通用的UI，大家才會真正理解到為什麼JQuery改變了我們寫JS代碼的習慣5、大型執行個體應用證明為什麼我們選擇了JQuery。
作者:薛敬明
出處：http://blog.csdn.net/rocket5725
本文著作權歸作者和CSDN共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文串連，否則保留追究法律責任的權利。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
