1. 程式人生 > >jQuery初識之安裝與語法簡介

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");
});

結果就是改變元素文字內容後繫結點選事件的呼叫函式,操作可以繫結多個,並且是依次執行,方法類似,其他操作以此類推。

技術文章推送
手機、電腦實用軟體分享