第一章 jQuery框架簡單介紹
1.1 jQuery簡介
jQuery是一款優秀的javaScript庫（框架），該框架憑借簡潔的語法和跨平台的兼容性，極大的簡化了開發人員對HTML文檔，DOM，事件以及Ajax的操作。
主旨口號：寫的更少, 干的更多(以更少的代碼,實現更多的功能)
1.2 作者和版本介紹
jQuery最早由約翰·雷西格（John Resig）於2006年1月的BarCamp NYC上發布第一個版本。目前由Dave Methvin領導的開發團隊進行開發，是目前最受歡迎的JavaScript庫。
作者：John Resig(約翰·雷西格)
John Resig(約翰·雷西格)，1984年5月8日出生於美國紐約。
個人著作：精通Javascript以及JavaScript忍者的秘密
工作經驗：先后於Mozilla、可汗學院擔任開發工程師。
jQuery框架版本相關介紹
開源許可協議： MIT許可證
官方網站： http://jquery.com/
托管倉庫： https://github.com/jquery/jquery
版本情況：
JQuery目前分成1.x版、2.x版和3.x版本，從2.0.0開始不再支持IE 6/7/8，2.0.0版本之前通過jQuery Migrate plugin與先前版本保持兼容。
最新版本：3.3.1
1.3 jQuery的優點（特點）
-
- 輕量級
- 免費開源
- 完善的文檔
- 豐富的插件支持
- 完善的Ajax功能
- 不會污染頂級變量
- 強大的選擇器功能
- 出色的DOM操作封裝
- 出色的瀏覽器兼容性
- 可靠的事件處理機制
- 隱式迭代和鏈式編程操作
1.4 jQuery的基本功能
① 訪問和操作DOM元素
說明：使用jQuery庫,可以很方便地獲取和修改頁面中的元素，無論是刪除、移動、復制元素,jQuery都提供了一整套方便、快捷的方法,既減少了代碼的編寫,又大大提高了用戶的體驗。 方法示例：append() prepend() remove() empty() html() text()等
② 控制頁面的CSS樣式
說明：引入jQuery框架后,開發人員可以方便快捷的來操作頁面中的CSS樣式，而且jQuery已經幫我們完成了令人頭疼的瀏覽器兼容性處理。 方法示例：css() addClass() toggleClass() hasClass() removeClass()等
③ 完善的Ajax網絡請求
說明：Ajax是在原生頁面中異步發送和讀取服務器數據所采用的組合技術，使用Ajax實現網絡通信提高了用戶體驗和程序性能，而jQuery框架中提供了專門處理網絡請求的Ajax組件。 我們可以方便的使用jQuery中提供的方法來實現Ajax網絡請求。 方法示例：ajax() get() post()等
④ 頁面標簽事件處理
說明：jQuery框架中對標簽的處理，讓頁面的表現層與功能開發分離，開發者只需要更多的關注業務邏輯方面的實現即可。 方法示例：on() off() click() mouseenter() hover() 等
⑤ 優雅的動畫特效實現
說明：jQuery框架中提供了一整套的動畫方法，可以滿足開發中常見的動畫效果實現，而且使用簡單方便。 方法示例：show() hide() slideDown() slideUp() Animate() 等
⑥ 好用的工具方法和強大的插件支持
說明：jQuery框架中提供了插件機制，利用插件機制程序員可以方便的對原有的框架和功能進行擴展，另外框架本身也提供了表單、UI等大量的插件。 這些插件的使用,極大豐富了頁的展示效果。除了插件之外，jQuery框架中還為我們提供了很多好用的工具方法，我們可以通過調用這些工具方法來解決開發中一些常見的需求。 方法示例：extend() each() map()等
1.5 第一個jQuery程序
① jQuery框架的使用步驟
-
- 下載jQuery框架在本地的電腦上（官網提供框架的下載鏈接，兩個版本可供選擇）
- 創建項目，在項目中使用script引入jQuery框架
- 使用jQuery框架來實現相關的功能
② jQuery框架示例程序
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!--01 先下載(獲取)jQuery框架到項目中--> 7 <!--02 把下載好的jQuery框架導入到項目中--> 8 <script src="jquery-3.2.1.js"></script> 9 </head> 10 <body> 11 <button>我是按鈕</button> 12 <script> 13 /*03 直接使用jQuery框架里面的方法來實現指定的功能*/ 14 $(document).ready(function () { 15 /* 16 * 04 表示等DOM加載后,獲取頁面中的按鈕,並且給按鈕添加點擊事件 17 * 點擊按鈕后,在控制台打印消息 18 * */ 19 $("button").click(function () { 20 console.log("點擊了頁面中的按鈕"); 21 }) 22 }) 23 </script> 24 </body> 25 </html>
1.6 jQuery框架的代碼風格
① 美元起始風格
在jQuery框架中，不管是頁面元素的選擇、內置的功能函數，都使用美元符號來起始的。
這個美元符號其實就是jQuery框架當中最重要且獨有的對象: jQuery對象。
② 鏈式編程風格
jQuery框架中為我們提供了鏈式編程操作，鏈式編程的特點中，幾乎每個jQuery方法執行完畢后都會把當前正在操作的對象作為返回值返回，如果我們需要對某個標簽執行多個操作，那么使用鏈式編程可以讓代碼更短更簡潔。
ex：$("#demoID").addClass("cur").siblings().removeClass("cur")
附: jQuery框架知識體系
- Posted by 博客園·文頂頂 ~ 文頂頂的個人博客_花田半畝
- 聯系作者 簡書·文頂頂 新浪微博·文頂頂
- 原創文章，版權聲明：自由轉載-非商用-非衍生-保持署名 | 文頂頂