jQuery系列第一章 jQuery框架簡單介紹

時間 2019-11-05

標籤 jquery 系列第一章框架簡單介紹欄目 JQuery 简体版

原文原文鏈接

第一章 jQuery框架簡單介紹

　　1.1 jQuery簡介

　　jQuery是一款優秀的javaScript庫（框架），該框架憑藉簡潔的語法和跨平臺的兼容性，極大的簡化了開發人員對HTML文檔，DOM，事件以及Ajax的操做。css

主旨口號：寫的更少, 乾的更多(以更少的代碼,實現更多的功能)html

　　1.2 做者和版本介紹

　　　　jQuery最先由約翰·雷西格（John Resig）於2006年1月的BarCamp NYC上發佈第一個版本。目前由Dave Methvin領導的開發團隊進行開發，是目前最受歡迎的JavaScript庫。java

做者：John Resig(約翰·雷西格)jquery

John Resig(約翰·雷西格)，1984年5月8日出生於美國紐約。git

我的著做：精通Javascript以及JavaScript忍者的祕密程序員

工做經驗：前後於Mozilla、可汗學院擔任開發工程師。github

jQuery框架版本相關介紹ajax

開源許可協議： 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框架的使用步驟

1. 下載jQuery框架在本地的電腦上（官網提供框架的下載連接，兩個版本可供選擇）
2. 建立項目，在項目中使用script引入jQuery框架
3. 使用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>