[jQuery]
Published in
Nov 15, 2019
jQuery是一套跨瀏覽器的JavaScript函式庫,簡化HTML 與 JavaScript 之間的操作。
- 使用jQuery最大的好處就是選擇器(selector)。
- 除了一些新潮的架構設計與套件完全使用Javascript 來長出網頁內容外,大部分使用時機是改變HTML 元件的顏色、文字、狀態。也就是改變HTML 元件的CSS、HTML本身的屬性(Attributes)或是HTML 容器的內容。
- jQuery是一套 JavaScript 的 Library,可幫助JavaScript 與HTML 元素進行交互。
- jQuery 是針對 JavaScript 內在不足的地方加以增進,你仍然需要自己寫一些程式來完成你需要的各種功能,不同的是,正確地使用了 jQuery 可以讓你的程式碼更精簡、更優雅的表達出來,這在後續的範例中可以看到,更重要的是,應該也會讓你更快速的開發出你要的功能。
- jQuery 主要是用在 DOM 文件的操作。
要使用jQuery 必須要先加載jQuery
例如:
<script src=’https://code.jquery.com/jquery-3.1.0.min.js'></script>
如果您觀察上什麼的Google URL — 在URL 中規定了jQuery 版本(1.8.0)。如果您希望使用最新版本的jQuery,也可以從版本字符串的末尾(比如本例1.8)刪除一個數字,谷歌會返回1.8 系列中最新的可用版本(1.8.0、1.8.1 等等),或者也可以只剩第一個數字,那麼谷歌會返回1 系列中最新的可用版本(從1.1.0 到1.9.9)。
許多用戶在訪問其他站點時,已經從谷歌或微軟加載過jQuery。所有結果是,當他們訪問您的站點時,會從緩存中加載jQuery,這樣可以減少加載時間。同時,大多數CDN 都可以確保當用戶向其請求文件時,會從離用戶最近的服務器上返迴響應,這樣也可以提高加載速度。
將程式寫在 $(document).ready() 方法中,確保網頁載入完畢才執行程式
$(document).ready(function() {
// Your code here
});
也可以縮寫為:
$(function() {
// Your code here
});
將程式置於網頁最後(在 </body> 之前),也有相同效果。
如果網站包含許多頁面,並且希望 jQuery 函數易於維護,那麼請把 jQuery 函數放到獨立的 .js 文件中。把它們放到一個單獨的文件中會更好,就像這樣(通過src 屬性來引用文件):
<head>
<script type =“ text / javascript” src =“ jquery.js”> </ script>
<script type =“ text / javascript” src =“ my_jquery_functions.js”> </ script>
</ head>
- 語法: $(“#id”),短短的一句話就可以用id 抓到物件,用Class 的話可以用$(“.className”) 去找,跟CSS的寫法是一模一樣的。
- 我們可以確保我們的頁面已準備就緒
$(document).ready()
。然後,我們可以傳遞一個函數,ready
該函數將在頁面加載時執行。 - jQuery 使用與CSS 相同的選擇器名稱。
- 我們可以使用隱藏元素
hide
,並使用顯示它們show
。 - 我們可以使用來使元素出現
fadeIn
。 on('click')
函數使我們能夠使HTML元素可點擊。單擊元素後,click函數將執行我們提供的函數。它的完整sytnax看起來像:
$('.example-class').on('click', function() {
// Execute when .example-class is clicked
});
toggle
將在頁面上切換元素。$(this)
如果將其放置在click 函數中,它將選擇被單擊的特定元素。this
是JavaScript 內的keyword ,因此不需加引號。toggleClass
可以打開和關閉CSS class。- 我們可以使用選擇彼此相鄰的元素
.next
。 text
將DOM元素的文本替換為我們指定的文本。slideToggle
將使元素隨動畫一起滑入和滑出頁面。
推薦閱讀:
jQuery 總結與進階
w3school jQuery 教程