Jquery淺談

jQuery 是一個 JavaScript 庫。

jQuery 極大地簡化了 JavaScript 程式設計。

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選擇器例項

語法	描述
$(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 選擇器參考手冊。

jQuery 事件

下面是 jQuery 中事件方法的一些例子：

Event 函式	繫結函式至
$(document).ready(function)	將函式繫結到文件的就緒事件（當文件完成載入時）
$(selector).click(function)	觸發或將函式繫結到被選元素的點選事件
$(selector).dblclick(function)	觸發或將函式繫結到被選元素的雙擊事件
$(selector).focus(function)	觸發或將函式繫結到被選元素的獲得焦點事件
$(selector).mouseover(function)	觸發或將函式繫結到被選元素的滑鼠懸停事件

如需完整的參考手冊，請訪問 jQuery 事件參考手冊。

jQuery 效果 - 

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

如需完整的參考手冊，請訪問 jQuery Effect 參考手冊。

jQuery 屬性操作方法

下面列出的這些方法獲得或設定元素的 DOM 屬性。

這些方法對於 XML 文件和 HTML 文件均是適用的，除了：html()。

方法	描述
addClass()	向匹配的元素新增指定的類名。
attr()	設定或返回匹配元素的屬性和值。
hasClass()	檢查匹配的元素是否擁有指定的類。
html()	設定或返回匹配的元素集合中的 HTML 內容。
removeAttr()	從所有匹配的元素中移除指定的屬性。
removeClass()	從所有匹配的元素中刪除全部或者指定的類。
toggleClass()	從匹配的元素中新增或刪除一個類。
val()	設定或返回匹配元素的值。

註釋：jQuery 文件操作參考手冊中也列出了以上方法。

jQuery HTML 操作 - 

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

如需完整的參考手冊，請訪問 jQuery HTML 操作參考手冊。

jQuery CSS 函式 

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

如需完整的參考手冊，請訪問 jQuery CSS 函式參考手冊。