入門指南
您可以從www.jquery.com下載jQuery庫(kù)的副本,或者作為替代,您可以將其從CDN(內(nèi)容交付網(wǎng)絡(luò))(如Google或Microsoft)中包含。
我們將使用官方j(luò)Query網(wǎng)站的CDN。
要開始使用jQuery,我們首先需要使用腳本標(biāo)簽將其添加到我們的HTML文檔的頭上:
<!DOCTYPE html> <html> <head> <title>Page Title</title> <script src="https://code.jquery.com/jquery-3.1.1.js"></script> </head> <body> </body> </html>
jQuery是一個(gè)JavaScript庫(kù),所以它具有.js文件擴(kuò)展名。
<html> <head> < ="jquery.js"></script> <> </html>
在使用它之前,等待HTML文檔被完全加載并準(zhǔn)備好是一個(gè)很好的做法。為此,我們使用文檔對(duì)象的ready事件:
$(document).ready(function() { // jQuery code goes here });
$用于訪問jQuery。 從這里,代碼訪問文檔對(duì)象,并定義了當(dāng)文檔的ready事件觸發(fā)時(shí)要調(diào)用的函數(shù)。
這樣可以防止任何jQuery代碼在文檔加載完成之前運(yùn)行。
由于上面的代碼幾乎在使用jQuery的情況下使用,所以寫一個(gè)方便的快捷方式:
$(function() { // jQuery code goes here });
此代碼執(zhí)行與上面長(zhǎng)代碼相同的任務(wù)。
如果覺得jQuery語(yǔ)法似乎有點(diǎn)混亂,別擔(dān)心,后面我們將詳細(xì)介紹。
現(xiàn)在,在我們的頭部分中有jQuery庫(kù),并且已經(jīng)定義了文檔就緒事件,我們可以開始我們的第一個(gè)jQuery操作! 我們來改變div元素的內(nèi)容。
HTML:
<!DOCTYPE html> <html> <head> <title>Page Title</title> <script src="https://code.jquery.com/jquery-3.1.1.js"></script> </head> <body> <div id="start">Start</div> </body> </html>
The JavaScript:
$(function() { $("#start").html("Go!"); });
這會(huì)將id =“start”的元素的HTML更改為“Go!”。
jQuery用于選擇(查詢)HTML元素并對(duì)其執(zhí)行"操作"。
基本語(yǔ)法是:$("selector").action()
- $訪問jQuery。
- (選擇器)查找HTML元素。
- 然后對(duì)元素執(zhí)行action()。
例如:
$("p").hide() // hides all <p> elements $(".demo").hide() // hides all elements with class="demo" $("#demo").hide() // hides the element with id="demo"
回顧我們前面的例子中的代碼:
$("#start").html("Go!");
這將選擇id =“start”的元素,并為其調(diào)用html()方法。 html()方法用于更改元素的HTML內(nèi)容。
如果你以前使用CSS,你會(huì)注意到j(luò)Query使用CSS語(yǔ)法來選擇元素。
(" menu"). ()