一、什么是jQuery？
jQuery是JavaScript的一個庫，它簡化了使用JavaScript進行網頁特效開發的一些復雜性，提供了對常見任務的自動化和復雜任務的簡化。使用jQuery不僅能夠將原本需要很多JavaScript代碼才能實現的功能縮減為幾行代碼，而且提供了足夠高速的性能。
相對於傳統的Javascript和DOM操作來說，JQuery的優勢：
1、輕量級
JQuery非常小,壓縮包只有200KB左右
2、強大的選擇器
JQuery不僅支持CSS里的所有選擇器,還有JQuery獨有的選擇器.
3、出色的DOM操作封裝.
JQuery封裝了大量常用的DOM操作.
4、兼容性好
JQuery能夠在不同瀏覽器中兼容,同時還修復了一些瀏覽器之間的差異.
5、鏈式編程
即對發生在同一個JQuery對象上的一組動作,可以直接連寫而無需重復獲取對象,使得JQuery的代碼無比優雅.
6、隱式迭代
當用JQuery找到帶有".class"類的全部元素,然后隱藏它們時,無需循環遍歷每個返回的元素.
7、行為與結構分離
8、豐富的插件支持
9、開源
任何人都可以自由使用並提出自己的意見
JQuery的核心理念翻譯過來是：寫更少代碼，做更多事情(write less,do more)。
二、為什么要使用jQuery？
因為jQuery是輕量級的框架，體積小，它有強大的選擇器，出色的DOM操作的封裝，有可靠的事件處理機制(jQuery在處理事件綁定的時候相當的可靠)，完善的ajax(它的ajax封裝的非常的好，不需要考慮復雜瀏覽器的兼容性和XMLHttpRequest對象的創建和使用的問題。)出色的瀏覽器的兼容性。 而且支持鏈式操作，隱式迭代。行為層和結構層的分離，還支持豐富的插件，jQuery的文檔也非常的豐富。
三、下載jQuery
目前jQuery有三個大版本：
- 1.x：兼容ie678,使用最為廣泛的，官方只做BUG維護，功能不再新增。因此一般項目來說，使用1.x版本就可以了，最終版本：1.12.4
- 2.x：不兼容ie678，很少有人使用，官方只做BUG維護，功能不再新增。如果不考慮兼容低版本的瀏覽器可以使用2.x，
- 3.x：不兼容ie678，只支持最新的瀏覽器。除非特殊要求，一般不會使用3.x版本的，很多老的jQuery插件不支持這個版本。目前該版本是官方主要更新維護的版本。
四、jQuery如何引入使用？
關於jQuery的使用需要先導入jQuery的js文件,jQuery本身就是一個JavaScript文件。jQuery.min.js是jQuery文件的壓縮版，生產環境下推薦壓縮版
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>頁面加載函數，其實就是頁面加載完成后，執行的操作</title> <!-- 引入jQuery文件 --> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> </body> </html>
五、頁面加載函數
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>頁面加載函數，其實就是頁面加載完成后，執行的操作</title> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <!-- 方式一：原生js 獲取span標簽的內容 --> <!-- <script type="text/javascript"> function f1(){ var s1Element = document.getElementById('s1') var s1Text = s1Element.innerText console.log(s1Text) } </script> --> <!-- 方式二：使用jQuery --> <!-- <script type="text/javascript"> jQuery(document).ready(function (){ var s1Element = document.getElementById('s1') var s1Text = s1Element.innerText console.log(s1Text) }) </script> --> <!-- 方式三：將jQuery 簡寫成 $ --> <!-- <script type="text/javascript"> $(document).ready(function (){ var s1Element = document.getElementById('s1') var s1Text = s1Element.innerText console.log(s1Text) }) </script> --> <!-- 方式四：對於方式三再次簡寫 可以同時執行多個頁面加載事件 --> <script type="text/javascript"> $(function (){ var s1Element = document.getElementById('s1') var s1Text = s1Element.innerText console.log(s1Text) }) </script> <script type="text/javascript"> $(function (){ console.log("零丁洋里嘆零丁") }) </script> <script type="text/javascript"> $(function (){ console.log("念去去，千里煙波") }) </script> </head> <body> <span id="s1"> 這是一個span標簽 </span> <!-- <br> <button type="button" onclick="f1()">點我 即可在控制台打印span標簽的文本信息</button> --> </body> </html>
$是jQuery是使用最多的符號，它有多個作用。這個示例中就使用了$的兩個作用。
作用1：頁面加載函數
jQuery(document).ready(function(){});和$(document).ready(function({}));簡寫為$(function(){}),相當於window.onload=function(){}但是功能比window.onload更強大window.onload一個頁面只能寫一個,但是可以寫多個$() 而不沖突,window.onload要等整個頁面加載完后再執行(包括圖片、超鏈接、音視頻等)，但是$()的執行時間要早
作用2：選擇器標志 $(selector)
選擇器。jQuery具有強大的選擇器功能，后面會有專門章節進行介紹