topcat 姍舞之間的極度凝聚

什麼是jQuery

• 一種JavaScript的Library
• 適用於各種的Web開發語言(asp, jsp, php, asp.net,…)
• 寫更少，做更多(Write less, do more.)
• 跨瀏覽器支援(IE,FireFox,Opera,…)(ps.目前測試Windows Mobile還未支援)
• 強大的Ajax支援
• 許多的jQuery PlugIn
• 官方網站：
  • http://docs.jquery.com/Main_Page

jQuery初體驗範例(一)

在還沒進入jQuery的世界，還不太清楚jQuery的程式碼是什麼樣子之前，我們先用個例子來體驗一下，jQuery是個什麼樣的狀況。當您在看這個範例時，如果您還沒有學過jQuery，看不懂沒有關係，後面會陸續的講解到各種jQuery的寫法。

目的：設定Form1裡面的Text1的值為ABC

傳統做法：

window.document.form1.Text1.value='ABC';

再精簡的做法：

document.getElementById('Text1').value='ABC';
document.all('Text1').value='ABC';  //(只支援IE)

jQuery的寫法：

$('#Text1').val('ABC');

這樣的寫法，是不是更精簡了呢??如果您還沒學過jQuery，看不懂她的語法沒關係，後面會陸續的解是讓您了解。

再來看看第二個範例

jQuery初體驗範例(二)

目的：按下按鈕，顯示隱藏某div的內容

傳統的寫法：

function button1_onclick() {
	var div1=document.getElementById('div1');
	if(div1.style.display=='')
	{
		div1.style.display='none';
	}
	else
	{
		div1.style.display='';
	}
}

jQuery的寫法：

$('#button2').click(function(){
     $('#div2').toggle(); 
});

小結語：

從這兩個範例來看，是否jQuery的程式碼簡潔很多呢??

沒錯，jQuery所標榜的就是【寫更少，做更多(Write Less, Do More.)】

下一篇：jQuery的基本語法，將為您介紹jQuery所有語法的根本。

以下是簽名：

• 歡迎轉貼本站的文章，不過請在貼文主旨上加上【轉貼】，並在文章中附上本篇的超連結與站名【topcat姍舞之間的極度凝聚】，感恩大家的配合。
• 小喵大部分的文章會以小喵熟悉的語言VB.NET撰寫，如果您需要C#的Code，也許您可以試著用線上的工具進行轉換，這裡提供幾個參考
  • http://converter.telerik.com/
  • http://www.carlosag.net/tools/codetranslator/
  • http://www.developerfusion.com/tools/convert/vb-to-csharp/