DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> JQuery的開發與使用心得
JQuery的開發與使用心得
編輯:JQuery特效代碼     

關於jQuery的

入門使用jQuery可以很容易或具有挑戰性的,這取決於你如何使用JavaScript,HTML,CSS進行開發和編程。

要知道一件重要的事情是,jQuery是只是一個JavaScript庫。jQuery的所有功能特性都是通過JavaScript訪問,所以要對javascript足夠的理解,並能使其構建和調試代碼是必不可少。雖然使用jQuery定期工作可以隨著時間的推移,提高使用JavaScript的熟練程度,可能沒有JavaScript的內置結構和語法的應用知識寫jQuery很難上手。因此,如果你是新來的JavaScript,我們建議您查看的JavaScript基礎教程 Mozilla開發者網絡(MDN)上。

  • 如何jQuery的工作原理
  • 附加jQuery的支持

如何jQuery的工作原理

jQuery的:基礎知識

這是一個基本的教程,旨在幫助您使用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,文件名可能包含一個版本號,例如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>

鏈接添加和刪除一個HTML類

重要提示:您必須將裡面剩余的jQuery的例子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(),用的價值觀param1param2

$.get( "myhtmlpage.html", function() {   myCallBack( param1, param2 );   });

$.get()完成後獲得的頁面myhtmlpage.html,它執行的匿名函數,該函數執行myCallBack( param1, param2 )

 
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved