JQuery基礎——選擇器

經過 jQuery，能夠選取（查詢，query） HTML 元素，並對它們執行「操做」（actions）
$(document).ready(function(){})能夠簡寫成$(funtion(){})

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" 的元素

---

$(document).ready(function(){

--- jquery 的方法寫在這個區域中 ----
這是爲了防止文檔在徹底加載就緒以前運行jquery代碼。

});