大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新......

• github：https://github.com/Daotin/Web
• 微信公眾號：Web前端之巔
• 博客園：http://www.cnblogs.com/lvonve/
• CSDN：https://blog.csdn.net/lvonve/

在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！

一、jQuery獲取和操作元素屬性

DOM中有很多方式獲取元素，比如通過id，通過標簽名，通過類名，通過name的值，通過選擇器等方式。

在 jQuery 中就只有一種方式：$("選擇器")

1、id 選擇器

語法： $("#id選擇器的值")

$(function () {// 頁面加載
  $("#btn").click(function () {
    console.log($(this).val());
    $(this).val("改變按鈕");
    // this.value = "改變按鈕";
  });
});

註意：this 是DOM對象。

this.value = "改變按鈕"; // 是DOM的寫法，沒問題。

PS：jQuery 中使用 jQuery對象.val("內容") 來設置表單標簽的 value 屬性。

2、標簽選擇器

語法： $("標簽名")

$(function () {// 頁面加載
  $("#btn").click(function () {
    $("p").text("桃花依舊笑春風");
  });
});

1、jQuery 中的 .text() ，如果括號中沒有值的話，是獲取文本內容；如果有值的話，就是設置文本內容。

2、 $("p") 是獲取所有的 p 標簽，然後全部設置文本內容，我們並沒有循環設置，但是全部的 p 標簽的文本內容都改變了，這是 jQuery 內部自動循環了，這就是隱式叠代。

3、類選擇器

語法：$(".類型選擇器") ，註意前面的點。

$(function () { // 頁面加載
  $("#btn").click(function () {
    $(".cls").css("border", "1px solid red");
  });
});

點擊按鈕設置應用了 cls 類選擇器的標簽的邊框樣式。

PS：jQuery中使用 jQuery對象.css("屬性":"值"); 的方式設置標簽的樣式。

4、並集選擇器

語法：$("div,p,span")，中間使用逗號隔開。

如果上面的 div 有 id 選擇器 dv；span 有類選擇器 cls；

上面的寫法也可以這樣寫： $("#dv, p, .cls")

5、交集選擇器

語法：$("div.cls")