jQuery 是個快速、輕巧且功能豐富的 JavaScript library。它提供容易使用且相容於多個Browser的 API,讓 HTML 的事件處理、建立動畫效果與 Ajax 等操作變的更簡單。 jQuery 透過多功能性與可擴充性的組合已經改變數百萬人撰寫 JavaScript 的方式。
jQuery 的入門門檻
上面已經有提到 jQuery 是 JavaScript 的 library,若您是個完全未接觸過網頁程式語言的玩家,那建議您應該先學會:
- HTML
- 基礎的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" );
}
});
參考來源
- jQuery 官方網站
http://jquery.com/ - Visual jQuery
http://visualjquery.com/ - 維基百科 - jQuery
https://zh.wikipedia.org/wiki/JQuery
沒有留言:
張貼留言