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的基礎語法是通過選取(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");
});
結果就是改變元素文字內容後繫結點選事件的呼叫函式,操作可以繫結多個,並且是依次執行,方法類似,其他操作以此類推。