ｊｑｕｅｒｙ

jQuery 選擇器


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）內容