jQuery零基礎入門——（一）初識jQuery

時間 2019-11-05

原文原文鏈接

《jQuery零基礎入門》系列博文是在廖雪峯老師的博文基礎上，補充了我的的理解和平常遇到的點，主幹出處來自廖雪峯老師的技術分享。css

你們好，歡迎來到咱們新的課程。應部分讀者的要求，爲知足不一樣學習能力的初學者，在推《JavaScript零基礎入門》系列博文的同時，也穿插分享一下JavaScript江湖上廣爲人知的武林至尊——jQuery。今天，咱們先來了解一下這神祕之物的基本信息。html

jQuery，是JavaScript江湖上，被普遍使用的一個庫。據江湖上不徹底統計，世界上約有八成左右的網站，直接或間接的使用jQuery做爲原生JS的替代品，來提升開發效率。這麼神祕又強大的東西，值得咱們來一探究竟。jquery

jQuery的理念瀏覽器

jQuery一直用」Write Less, Do More「來宣傳本身，意思是，寫更少的代碼，作更多的事情，體現其簡潔高效的特性。網絡

jQuery的優勢學習

簡潔的操做DOM的方法：

document.getElementById("a") => document.querySelector("#a」） => $("#a")；
document.getElementsByTagName("span") => document.querySelectorAll("span」） => $("span")；
document.getElementsByClassName("css") => document.querySelectorAll(".css」） => $(".css")。

消除瀏覽器差別：

對於一些事件和樣式，不須要寫一堆代碼來兼容或適應不一樣瀏覽器，固然也包含AJAX。

快速修改CSS樣式，輕鬆實現動畫效果。

jQuery的版本動畫

截至目前，jQuery已經更新到3.3.1，換句話說，當前的jQuey存在1.x、2.x和3.x三個大版本，須要注意的是，2.0以上版本，已經再也不支持IE6/7/8，所以2.0+的版本，代碼會更精簡，固然也不是最新的版本就是好的，要根據項目需求來選擇合適的版本，若是你想支持IE6/7/8，還得用1.x。網站

另外，咱們能夠從jQuery官網直接下載jQuery的最新版本，也能夠從jQuery CDN找到歷史版本。通常來講，咱們這些版本文件，只是一個js或min.js文件，js文件是一個未壓縮的開發環境使用的版本，咱們能夠看到源碼，而min.js是被壓縮過的生產環境（也就是正式環境）使用的版本，基本上已經被壓縮、混淆和加密過。不過，使用效果沒什麼區別。加密

jQuery的使用spa

在使用jQuery以前，咱們能夠先決定是要使用CDN版本仍是本地版本，二者的區別就是，本地版本就是將jQuey文件下載到本地，CDN版本其實就是網絡版，用的時候瀏覽器會本身去對應的位置調用。不論是用哪種，咱們都須要在頁面上引用jQuery文件，以CDN版本爲例，本地版本就把src指向本地已下載好的文件便可：

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	</head>
	<body>
		
	</body>
</html>

jQuery的$符

$符號除了因美圓而被人熟知外，在IT世界，它就是著名的jQuery符號。在jQuey中，其實全部的方法對被封裝在一個全局變量裏，這個全局變量就是jQuery，而$做爲jQuery中一個合法的變量名，同時也是jQuery的別名，也就是說jQuery===$的結果是true。

須要說明的是，通常狀況下，咱們能夠直接用$替代jQuery來調用，但若是$被其餘代碼先聲明佔用了，並且沒辦法改的時候，咱們只能調用jQuery.noConflict()來解放$符，而調用以後，就只能乖乖使用jQuery了，$再也不是jQuery的替身了。