[jQuery]jQuery的簡介與初體驗

[jQuery]jQuery的簡介與初體驗

什麼是jQuery

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

 

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所有語法的根本。

 


以下是簽名:


Microsoft MVP
Visual Studio and Development Technologies
(2005~Now)