1.jQuery - 獲取內容和屬性

jQuery DOM 操作

DOM = Document Object Model（文件物件模型）
DOM 定義訪問 HTML 和 XML 文件的標準：
“W3C 文件物件模型獨立於平臺和語言的介面，允許程式和指令碼動態訪問和更新文件的內容、結構以及樣式。”

獲得內容 - text()、html() 以及 val()

三個簡單實用的用於 DOM 操作的 jQuery 方法：

• text() - 設定或返回所選元素的文字內容
• html() - 設定或返回所選元素的內容（包括 HTML 標記）
• val() - 設定或返回表單欄位的值

下面的例子演示如何通過 jQuery text() 和 html() 方法來獲得內容和val獲得輸入內容：

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});
 $("#btn1").click(function(){
 alert("值為: " + $("#test").val());
 });

獲取屬性 - attr()
jQuery attr() 方法用於獲取屬性值。

下面的例子演示如何獲得連結中 href 屬性的值：

$("button").click(function(){
  alert($("#runoob").attr("href"));
});

2.jQuery - 設定內容和屬性

設定內容 - text()、html() 以及 val()
我們將使用前一章中的三個相同的方法來設定內容：

• text() - 設定或返回所選元素的文字內容

• html() - 設定或返回所選元素的內容（包括 HTML 標記）

• val() - 設定或返回表單欄位的值

  $("#btn1").click(function(){
  $("#test1").text(“Hello world!”);
  });
  $("#btn2").click(function(){
  $("#test2").html(“Hello world!

  ”);
  });
  $("#btn3").click(function(){
  $("#test3").val(“RUNOOB”);
  });

text()、html() 以及 val() 的回撥函式
上面的三個 jQuery 方法：text()、html() 以及 val()，同樣擁有回撥函式。回撥函式有兩個引數：被選元素列表中當前元素的下標，以及原始（舊的）值。然後以函式新值返回您希望使用的字串。

$("#btn1").click(function(){
    $("#test1").text(function(i,origText){
        return "舊文字: " + origText + " 新文字: Hello world! (index: " + i + ")"; 
    });
});

設定屬性 - attr()

$("button").click(function(){
    $("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",
        "title" : "jQuery 教程"
    });
});

3.jQuery - 新增元素

• append() - 在被選元素的結尾插入內容
• prepend() - 在被選元素的開頭插入內容
• after() - 在被選元素之後插入內容
• before() - 在被選元素之前插入內容

function appendText()
{
    var txt1="<p>文字。</p>";              // 使用 HTML 標籤建立文字
    var txt2=$("<p></p>").text("文字。");  // 使用 jQuery 建立文字
    var txt3=document.createElement("p");
    txt3.innerHTML="文字。";               // 使用 DOM 建立文字 text with DOM
    $("body").append(txt1,txt2,txt3);        // 追加新元素
}

4.jQuery - 刪除元素

如需刪除元素和內容，一般可使用以下兩個 jQuery 方法：

• remove() - 刪除被選元素（及其子元素）
• empty() - 從被選元素中刪除子元素

$("#div1").remove();

5.jQuery - 獲取並設定 CSS 類

jQuery 操作 CSS
jQuery 擁有若干進行 CSS 操作的方法。我們將學習下面這些：

• addClass() - 向被選元素新增一個或多個類
• removeClass() - 從被選元素刪除一個或多個類
• toggleClass() - 對被選元素進行新增/刪除類的切換操作
• css() - 設定或返回樣式屬性

.important
{
        font-weight:bold;
        font-size:xx-large;
}
 
.blue
{
        color:blue;
}

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

6.jQuery css() 方法

css() 方法設定或返回被選元素的一個或多個樣式屬性。

$("p").css("background-color"); //返回

$("p").css({"background-color":"yellow","font-size":"200%"}); //設定

7.獲得尺寸

jQuery 尺寸方法
jQuery 提供多個處理尺寸的重要方法：

• width()
• height()
• innerWidth()
• innerHeight() 不包含外邊距
• outerWidth()
• outerHeight()