二月 19, 2019 | 前端與Vue

從零開始的jQuery介紹《2》

前一篇介紹了什麼是jQuery以及jQuery的運作方式! 這次來聊聊怎麼在網站上使用jQuery!

前一篇介紹了什麼是jQuery以及jQuery的運作方式

這次來聊聊怎麼在網站上使用jQuery!

要使用jQuery的話,必須先把jQuery的JavaScript文件引入網頁中! 引入的方法有兩種

  1. 到jQuery的官網下載jQuery的檔案來用(可是會很大包)

  2. google CDNhttp://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js

決定好引入方式後就把它寫在HTML的head裡面

如果是下載檔案的話,src的雙引號裡面放的就是你的jquery.js的路徑。

// 使用下載檔案



使用CDN的話就雙引號裡面就是放CDN的網址

// 使用CDN



不知道大家有沒有注意到檔案有分jquery.js跟jquery.min.js呢? min的檔案是有被壓縮過的,程式碼全部以一行呈現在載入速度上會比較快唷!

確認是否成功 引入動作完成之後就是來確認有沒有成功的時候啦!

我們可以在html檔案的````標籤後面加上


$(document).ready(function(){
...
};

要確認有沒有成功的話我們有兩種方法!

第一種是使用console.log


$(document).ready(function(){
console.log('jQuery引入成功!');
};

這個訊息會出現在開發者工具的Console裡頭

第二種是使用alert


$(document).ready(function(){
alert('jQuery引入成功!');
};

這個訊息會以彈出視窗的方式出現在畫面上

順利引入成功之後就可以盡情的使用jQuery囉!

hashtags: