jQuery是一個新形態的 JavaScript程式庫,主要是用在 DOM 文件的操作,此外 jQuery 的核心程式還加強了非同步傳輸(AJAX)以及事件(Event)的功能,讓你更容易操作遠端文件及事件。

 

jQuery 標榜的口號是:write less do more,其完全符合 KISS (Keep It Simple Stupid) 的原則,使得 Javascript 語言可以很容易的結合 jQuery 框架,故其可以作為 Ajax 的主要框架 (Frame Work)!

 

jQuery 核心檔的大小壓縮後只有 20kb 左右,可說是很袖珍型的,但他的外掛卻是漫無天地的...不過這些外掛需要的時候才將其掛入,不需要時不會增加網頁的負荷,而且都是免費的喔!

目前美化 jQuery 外觀 UI 的 plugin 已經有上百個了,這邊有人整理出來一些不錯的 plugin 可供你參考囉~

○ 傳統 Javascript 與 jQuery 的語法比較

傳統的 Javascript jQuery

var feed = document.getElementById('abc');

var feed = $('#abc');

Element.addClassName('element', 'myname');

$('#element').addclass('myname');

<script type="text.javascript">

  function firstAlert() {

    alert('Hello!');

  }

</script>

 

<a href = "#" onclick = "firstAlert(); return false;">Hi~</a>

<script>

$("a").click(function() {

  alert('Hello!');

  return false; });

</script>

 

<a href="#">Hi~</a>

<script type="text/javascript">

function toggleBox() {

  var elem = document.getElementById('box');

  if(elem.style.visibility == "hidden"

    elem.style.visibility = "visible";

  else

    elem.style.visibility = "hidden";

}

</script>

 

<a href = "#" onclick = "toogleBox(); return false;">Click Me!</a>

<div id="box" style="visibility:hidden">My Box</div>

 <script type="text/javascript">

$("#box").hide();

$("a").click( function() {

  $("#box").toggle()

  return false;

});

</script>

 

<a href = "#">Click Me!</a>

<div id = "box">My Box</div>

 

$(誰).怎麼的時候.(去做什麼)

e.g.$(他).被滑鼠按下的時候.(顯示)

 

jQuery 是跨瀏覽去的,雖然各瀏覽器因其各自特性所產生出來的效果並不盡相同,但大部分都能有效的將其呈現出來喔!

 

○ 參考來源:

jQuery 線上技術說明文件

網頁設計教學 : jQuery

jQuery 教學 - 基礎篇

jQuery: 寫得少, 做得多, JavaScript 程式庫

學習 jQuery 從入門到精通只要兩小時!

jQuery台灣 Google Group 線上討論群組

Visual JQuery

jQuery UI

 

創作者介紹
創作者 tsuozoe 的頭像
tsuozoe

隨便寫寫的新天地

tsuozoe 發表在 痞客邦 留言(0) 人氣()