2013年8月24日 星期六

jQuery : 認識 jQuery ( What is jQuery ? )

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
jQuery 是個快速、輕巧且功能豐富的 JavaScript library。它提供容易使用且相容於多個Browser的 API,讓 HTML 的事件處理、建立動畫效果與 Ajax 等操作變的更簡單。 jQuery 透過多功能性與可擴充性的組合已經改變數百萬人撰寫 JavaScript 的方式。

jQuery 的入門門檻
上面已經有提到 jQuery 是 JavaScript 的 library,若您是個完全未接觸過網頁程式語言的玩家,那建議您應該先學會:
  1. HTML
  2. 基礎的JavaScript

簡單的操作範例 ( A Brief Look )

Dom的操作 ( DOM Traversal and Manipulation )

Get the <button> element with the class 'continue' and change its HTML to 'Next Step...'
取得 "continue" Class 的 button 元件,並把此元件的 html 屬性值改為 "Next Step"
$( "button.continue" ).html( "Next Step..." )

事件的處理 ( Event Handling )

Show the #banner-message element that is hidden with display:none in its CSS when any button in #button-container is clicked.
當在 id 為 "button-container" 中點擊任何的 button 時,把已經在 CSS 設定 display:none 隱藏且 id 為 "banner-message" 的元件顯示出來
var hiddenBox = $( "#banner-message" );
$( "#button-container button" ).on( "click", function( event ) {
  hiddenBox.show();
});

Ajax

Call a local script on the server /api/getWeather with the query parameter zipcode=97201 and replace the element #weather-temp's html with the returned text.
呼叫在 Server 端 /api/getWeather 的 Script 並傳送參數 zipcode = 97201。當取得 Server 回應時,把回應的文字,設定為 id  "weather-temp" 的 html 屬性值
$.ajax({
  url: "/api/getWeather",
  data: {
    zipcode: 97201
  },
  success: function( data ) {
    $( "#weather-temp" ).html( "<strong>" + data + "</strong> degrees" );
  }
});

參考來源
  1. jQuery 官方網站
    http://jquery.com/
  2. Visual jQuery
    http://visualjquery.com/
  3. 維基百科 - jQuery
    https://zh.wikipedia.org/wiki/JQuery



沒有留言:

張貼留言