jQuery 元素選擇器
jQuery 使用 CSS 選擇器來選取 HTML 元素。
$("p") 選取 <p> 元素。
$("p.intro") 選取所有 class="intro" 的 <p> 元素。
$("p#demo") 選取 id="demo" 的第一個 <p> 元素。
jQuery 屬性選擇器
jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素。
$("[href]") 選取所有帶有 href 屬性的元素。
$("[href='#']") 選取所有帶有 href 值等於 "#" 的元素。
$("[href!='#']") 選取所有帶有 href 值不等於 "#" 的元素。
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。
jQuery CSS 選擇器
jQuery CSS 選擇器可用於改變 HTML 元素的 CSS 屬性。
下面的例子把所有 p 元素的背景顏色更改爲紅色:
實例
$("p").css("background-color","red");
$(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 事件函數
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
$("button").click(function() {..some code... } )
jQuery 事件
下面是 jQuery 中事件方法的一些例子:
Event 函數 綁定函數至
$(document).ready(function) 將函數綁定到文檔的就緒事件(當文檔完成加載時)
$(selector).click(function) 觸發或將函數綁定到被選元素的點擊事件
$(selector).dblclick(function) 觸發或將函數綁定到被選元素的雙擊事件
$(selector).focus(function) 觸發或將函數綁定到被選元素的獲得焦點事件
$(selector).mouseover(function) 觸發或將函數綁定到被選元素的鼠標懸停事件
實例
jQuery hide()
jQuery hide() 函數。 隱藏
。
jQuery slideToggle() 切換
演示簡單的 slide panel 效果。
jQuery fadeTo() 淡化效果
演示簡單的 jQuery fadeTo() 函數。
jQuery animate() 自定義動畫
演示簡單的 jQuery animate() 函數。
改變HTML內容
$(selector).html(content)html() 函數改變所匹配的 HTML 元素的內容(innerHTML)。
添加 HTML 內容
語法
$(selector).append(content)append() 函數向所匹配的 HTML 元素內部追加內容。
語法
$(selector).prepend(content)prepend() 函數向所匹配的 HTML 元素內部預置(Prepend)內容