基礎 DOM 和 CSS 操作

1.設置元素及內容

在常規的 DOM 元素中，我們可以使用 html()和 text()方法獲取內部的數據。html()方法可以獲取或設置 html 內容，text()可以獲取或設置文本內容。

$('#box').html(); //獲取 html 內容
$('#box').text(); //獲取文本內容，會自動清理 html 標簽
$('#box').html('<em>www.li.cc</em>'); //設置 html 內容
$('#box').text('<em>www.li.cc</em>'); //設置文本內容，會自動轉義 html標簽

注意：當我們使用 html()或 text()設置元素里的內容時，會清空原來的數據。而我們期望能夠追加數據的話，需要先獲取原本的數據

$('#box').html($('#box').html() + '<em>www.li.cc</em>'); //追加數據如果元素是表單的話，jQuery 提供了 val()方法進行獲取或設置內部的文本數據。
$('input').val(); //獲取表單內容
$('input').val('www.li.cc'); //設置表單內容

如果想設置多個選項的選定狀態，比如下拉列表、單選復選框等等，可以通過數組傳遞操作。

$("input").val(["check1","check2", "radio1" ]); //value 值是這些的將被選定

2.元素屬性操作

3.元素樣式操作

在 CSS 獲取上，我們也可以獲取多個 CSS 樣式，而獲取到的是一個對象數組，如果用傳統方式進行解析需要使用 for in 遍歷。

var box = $('div').css(['color', 'height', 'width']); //得到多個 CSS 樣式的數組對象
for (var i in box) { //逐個遍歷出來
alert(i + ':' + box[i]);
}

jQuery 提供了一個遍歷工具專門來處理這種對象數組，$.each()方法，這個方法可以輕松的遍歷對象數組。

$.each(box, function (attr, value) { //遍歷 JavaScript 原生態的對象數組
alert(attr + ':' + value);
});

使用$.each()可以遍歷原生的 JavaScript 對象數組，如果是 jQuery 對象的數組怎么使用.each()方法呢？

$('div').each(function (index, element) { //index 為索引，element 為元素 DOM
alert(index + ':' + element);
});

4.CSS 方法

元素偏移方法

上一篇: jQuery的基礎DOM,CSS操作篇
下一篇: jQuery的DOM節點操作