| title | layout | categories | tags | excerpt |
|---|---|---|---|---|
jQuery初識之安裝與語法簡介 |
post |
JavaScript |
jquery語法 jQueryCDN |
jQuery簡介，安裝和語法介紹 |
概念
jQuery是一個JavaScript函數庫，是一個比較流行的js框架，功能就是簡化 js 代碼的書寫，因爲一些功能用原生javascript書寫代碼量是很大的。可以理解爲javascript query，畢竟Query也是它的一個功能。
安裝
要使用jQuery庫，可以從網上下載得到jQuery的 .js 文件，也可以使用**CDN (Content Delivery Content 內容分發網絡)**加載jQuery。
下載
需要去jQuery官網：jquery.com 下載需要的jQuery庫，一般有兩個版本，production 表示已被壓縮精簡的版本，用於放到實際網站中，development 表示測試開發版，用於編寫和開發，是可讀的代碼。
例如目前最新的版本是 jquery-3.3.1.js，壓縮版後綴是 .min.js，開發版文件有一萬多行，就是正常格式的JavaScript源代碼，包含一些註釋，文件大小爲 266k；壓縮版就是去掉裏面不必要的空格，回車與註釋，所以最後文件實際內容只有一行！，文件大小爲 85k，壓縮了近三倍，這也是網頁都使用壓縮版，提升網頁性能的原因。
下載好後放到網頁文件夾中，然後使用 <script> 標籤引用，例如：
<script scr="/js/jquery-3.3.1.min.js"></script>路徑中填寫 .js 文件的實際存放位置。
CDN
使用CDN（內容分發網絡）就可以不用下載jQuery文件，優點是可以使用這個機制儘量避開網絡中一些影響數據傳輸的路線，提高訪問速度和穩定性。原理就是使用在各處配置的節點服務器，讓用戶就近獲取所需內容。
常見CDN有很多，例如百度、新浪、谷歌、微軟等，如果是國內站點的話，建議使用國內CDN，國外站點可以使用谷歌或微軟，提高速度。
以百度CDN爲例，安裝方法如下：
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>微軟CDN：
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js"></script>微軟jQuery歷史版本可以從這裏查看https://docs.microsoft.com/en-us/aspnet/ajax/cdn/overview#jQuery_Releases_on_the_CDN_0。
更多內容可以訪問百度靜態資源公共庫(http://cdn.code.baidu.com/)，其他CDN可以自行百度搜索。
語法
jQuery的基礎語法是通過選取（query）文檔中的元素，對其進行操作（action），語法是：
$(selector).action()
選擇器
selector 是選擇器，類似於CSS選擇器，常見的有：
- 元素選擇器，如：
$("p") - ID選擇器，如：
$("#myId") - 類選擇器，如：
$(".myClass") - 屬性選擇器，如：
$("[href]")
操作
action() 是對所選元素執行的操作，例如：
- 隱藏元素：
.hide() - 單擊事件：
.click(myFunction()) - 雙擊：
.dblclick() - 懸停：
.hover()
其他語法與JavaScript類似，代碼寫在 <script> 中，例如隱藏 p 元素：
<script>
$("p").hide();
</script>有時需要等文檔加載完畢後執行代碼，很像JavaScript中的 window.onload：
window.onload = function(){
alert();
}jQuery中就要這麼寫：
$(document).ready(function(){
$("p").hide();
});簡化寫法：
$(function(){
$("p").hide();
});結果都是在整個文檔加載完後執行語句。
方法鏈接
相對於JavaScript，jQuery又一種特殊的操作方法叫做方法鏈接（chaining），即在一條語句上，對一個元素執行多個操作，語法是：
$(selector).action1().action2().action3()
例如：
$("p").html("<b>Hello</b>").click(function(){
alert("Hello world");
});結果就是改變元素文本內容後綁定點擊事件的調用函數，操作可以綁定多個，並且是依次執行，方法類似，其他操作以此類推。