入門使用jQuery可以很容易或具有挑戰性的,這取決於你如何使用JavaScript,HTML,CSS進行開發和編程。
要知道一件重要的事情是,jQuery是只是一個JavaScript庫。jQuery的所有功能特性都是通過JavaScript訪問,所以要對javascript足夠的理解,並能使其構建和調試代碼是必不可少。雖然使用jQuery定期工作可以隨著時間的推移,提高使用JavaScript的熟練程度,可能沒有JavaScript的內置結構和語法的應用知識寫jQuery很難上手。因此,如果你是新來的JavaScript,我們建議您查看的JavaScript基礎教程 Mozilla開發者網絡(MDN)上。
這是一個基本的教程,旨在幫助您使用jQuery上手。如果你沒有一個測試頁面設置呢,通過創建以下的HTML頁面開始:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<script src="jquery.js"></script>
<script>
// Your code goes here.
</script>
</body>
</html>
該src
屬性中的<script>
元素必須指向jQuery的副本。從下載的jQuery的副本下載jQuery的頁面和存儲jquery.js
文件在同一目錄作為您的HTML文件。
jquery-x.y.z.js
。請確保該文件或者重命名jquery.js
或更新src
的屬性<script>
相匹配的文件名元素。
為了確保他們的代碼運行在浏覽器完成加載該文件,許多JavaScript程序員包裝自己的代碼在後的onload
功能:
window.onload = function() {
alert( "welcome" );
};
不幸的是盡快運行代碼的文件已准備好進行操作,代碼不運行,直到所有圖像都下載完畢,包括橫幅廣告。jQuery ready事件:
$( document ).ready(function() {
// Your code here.
});
注:jQuery庫通過的兩個屬性暴露它的方法和屬性window
調用的對象jQuery
和$
,$
是一個簡單的別名jQuery
,它的經常使用,因為它是更短,更快地寫。
例如,在裡面ready
時,你可以添加一個單擊處理程序的鏈接:
$( document ).ready(function() {
$( "a" ).click(function( event ) {
alert( "Thanks for visiting!" );
});
});
上面的jQuery代碼復制到你的HTML文件,它說// Your code goes here
。然後,保存您的HTML文件,然後在浏覽器中刷新測試頁。點擊鏈接現在應該先顯示一個警告彈出,然後繼續導航到的默認行為http://jquery.com。
對於click
大部分其他的事件,您可以通過調用阻止默認行為event.preventDefault()
的事件處理程序:
$( document ).ready(function() {
$( "a" ).click(function( event ) {
alert( "As you can see, the link no longer took you to jquery.com" );
event.preventDefault();
});
});
嘗試更換您的jQuery代碼,先前復制到您的HTML文件中第一個片段,與上面的之一。再次保存HTML文件並重新加載嘗試一下。
下面的例子說明點擊上面的處理代碼的討論,直接在HTML嵌入<body>
。注意,在實踐中,它通常是最好將代碼在一個單獨的JS文件並加載它與在頁面上<script>
的元素的src
屬性。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<script src="jquery.js"></script>
<script>
$( document ).ready(function() {
$( "a" ).click(function( event ) {
alert( "The link will no longer take you to jquery.com" );
event.preventDefault();
});
});
</script>
</body>
</html>
ready
事件,這樣,當文檔准備工作在你的代碼執行。
另一種常見的任務就是添加或刪除類。
首先,添加一些樣式信息寫入<head>
文件,像這樣的:
<style>
a.test {
font-weight: bold;
}
</style>
接下來,添加.addClass()調用腳本:
$( "a" ).addClass( "test" );
所有的<a>
元素現在字體加粗。
要刪除現有類中,使用.removeClass() :
$( "a" ).removeClass( "test" );
jQuery的也提供了一些方便的效果,以幫助您使您的網站脫穎而出。例如,如果你創建一個click處理函數:
$( "a" ).click(function( event ) {
event.preventDefault();
$( this ).hide( "slow" );
});
然後單擊時慢慢鏈接消失。
不像許多其他編程語言,JavaScript的,可以自由地繞過功能在稍後的時間執行。一個回調是作為參數傳遞給另一個函數傳遞與其父功能完成後執行的函數。回調是特殊的,因為他們耐心地等待執行,直到他們的父母完成。同時,浏覽器可以執行其它功能或做其他各種的工作。
要使用回調,要知道如何將它們傳遞到它們的父功能是非常重要的。
如果回調沒有參數,你可以將它傳遞這樣的:
$.get( "myhtmlpage.html", myCallBack );
當$獲得()完獲取的頁面myhtmlpage.html
,它執行myCallBack()
的功能。
帶參數執行回調可能會非常棘手。
此代碼示例將無法正常工作:
$.get( "myhtmlpage.html", myCallBack( param1, param2 ) );
失敗的原因是,代碼執行myCallBack( param1, param2 )
立即,然後通過myCallBack()
的返回值作為第二個參數$.get()
。實際上,我們希望傳遞給函數myCallBack()
,而不是myCallBack( param1, param2 )
的返回值(這可能是也可能不是一個函數)。那麼,如何傳遞myCallBack()
和包括它的參數?
推遲執行myCallBack()
其參數,你可以使用匿名函數作為包裝。使用注意事項function() {
。匿名函數正是一件事:通話myCallBack()
,用的價值觀param1
和param2
。
$.get( "myhtmlpage.html", function() {
myCallBack( param1, param2 );
});
當$.get()
完成後獲得的頁面myhtmlpage.html
,它執行的匿名函數,該函數執行myCallBack( param1, param2 )
。