jQuery 基本文法學習

       jQuery 文法

jQuery 文法是為 HTML 元素的選取編制，可以對元素執行某些操作。

基礎文法是：$(selector).action()

• 美元符号定義 jQuery
• 選擇符（selector）“查詢”和“查找” HTML 元素
• jQuery action() 執行對元素的操作

執行個體

$(this).hide() - 隐藏目前元素

$("p").hide() - 隐藏所有段落

$("p.test").hide() - 隐藏所有 class="test" 的段落

$("#test").hide() - 隐藏所有 id="test" 的元素

提示：jQuery 使用的文法是 XPath 與 CSS 選擇器文法的組合.

文檔就緒函數

所有 jQuery 函數位于一個 document ready 函數中：

$(document).ready(function(){

--- jQuery functions go here ----

});

下面是兩種假如文檔完全加載之前運作函數的話，操作失敗的情況：

• 試圖隐藏一個不存在的元素。
• 獲得未完全加載的圖像的大小。

jQuery 事件

$(this)	目前 HTML 元素
$("p")	所有 <p> 元素
$("p.intro")	所有 class="intro" 的 <p> 元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的第一個元素
$("ul li:first")	每個 <ul> 的第一個 <li> 元素
$("[href$='.jpg']")	所有帶有以 ".jpg" 結尾的 href 屬性的屬性
$("div#intro .head")	id="intro" 的 <div> 元素中的所有 class="head" 的元素

jQuery 事件

Event 函數	綁定函數至
$(document).ready(function)	文檔的就緒事件 （當 HTML 文檔就緒可用）
$(selector).click(function)	被選元素的點選事件
$(selector).dblclick(function)	被選元素的輕按兩下事件
$(selector).focus(function)	被選元素的獲得焦點事件
$(selector).mouseover(function)	被選元素的滑鼠懸停事件

jQuery 效果

函數	描述
$(selector).hide()	隐藏被選元素
$(selector).show()	顯示被選元素
$(selector).toggle()	切換（在隐藏與顯示之間）被選元素
$(selector).slideDown()	向下滑動（顯示）被選元素
$(selector).slideUp()	向上滑動（隐藏）被選元素
$(selector).slideToggle()	對被選元素切換向上滑動和向下滑動
$(selector).fadeIn()	淡入被選元素
$(selector).fadeOut()	淡出被選元素
$(selector).fadeTo()	把被選元素淡出為給定的不透明度
$(selector).animate()	對被選元素執行自定義動畫

jQuery HTML 操作

函數	描述
$(selector).html(content)	改變被選元素的（内部）HTML
$(selector).append(content)	向被選元素的（内部）HTML 追加内容
$(selector).prepend(content)	向被選元素的（内部）HTML “預置”（Prepend）内容
$(selector).after(content)	在被選元素之後添加 HTML
$(selector).before(content)	在被選元素之前添加 HTML

jQuery CSS 函數

CSS 屬性	描述
$(selector).css(name,value)	為比對元素設定樣式屬性的值
$(selector).css({properties})	為比對元素設定多個樣式屬性
$(selector).css(name)	獲得第一個比對元素的樣式屬性值
$(selector).height(value)	設定比對元素的高度
$(selector).width(value)	設定比對元素的寬度

jQuery AJAX 請求

請求	描述
$(selector).load(url,data,callback)	把遠端資料加載到被選的元素中
$.ajax(options)	把遠端資料加載到 XMLHttpRequest 對象中
$.get(url,data,callback,type)	使用 HTTP GET 來加載遠端資料
$.post(url,data,callback,type)	使用 HTTP POST 來加載遠端資料
$.getJSON(url,data,callback)	使用 HTTP GET 來加載遠端 JSON 資料
$.getScript(url,callback)	加載并執行遠端的 JavaScript 檔案

(url) 被加載的資料的 URL（位址）

(data) 發送到伺服器的資料的鍵/值對象

(callback) 當資料被加載時，所執行的函數

(type) 被傳回的資料的類型 (html,xml,json,jasonp,script,text)

(options) 完整 AJAX 請求的所有鍵選項/值對