Jquery 第 5 章 章 基礎 DOM 和 和 CSS 操作
學習要點：
1.DOM 簡介
2.設置元素及內容
3.元素屬性操作
4.元素樣式操作
5.CSS 方法
DOM 在 JavaScript 課程中我們詳細的探討過，它是一種文檔對象模型。方便開發者對
HTML 結構元素內容進行展示和修改。在 JavaScript 中，DOM 不但內容龐大繁雜，而且我
們開發的過程中需要考慮更多的兼容性、擴展性。在 jQuery 中，已經將最常用的 DOM 操
作方法進行了有效封裝，並且不需要考慮瀏覽器的兼容性。
一．DOM 簡介
由於課程是基於 JavaScript 基礎上完成的， 這裏我們不去詳細的瞭解 DOM 到底是什麼。
只需要知道幾個基本概念：
1.D 表示的是頁面文檔 Document、O 表示對象，即一組含有獨立特性的數據集合、M
表示模型，即頁面上的元素節點和文本節點。
2.DOM 有三種形式，標準 DOM、HTML DOM、CSS DOM，大部分都進行了一系列的
封裝，在 jQuery 中並不需要深刻理解它。
3.樹形結構用來表示 DOM，就非常的貼切，大部分操作都是元素節點操作，還有少部
分是文本節點操作。
二． 設置元素及內容
我們通過前面所學習的各種選擇器、過濾器來得到我們想要操作的元素。這個時候， 我
們就可以對這些元素進行 DOM 的操作。 那麼， 最常用的操作就是對元素內容的獲取和修改。
html()和 text()方法
方法名 描述
html() 獲取元素中 HTML 內容
html(value) 設置元素中 HTML 內容
text() 獲取元素中文本內容
text(value) 設置原生中文本內容
val() 獲取表單中的文本內容
val(value) 設置表單中的文本內容
在常規的 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 值是這些的將被選定
三．元素屬性操作
除了對元素內容進行設置和獲取，通過 jQuery 也可以對元素本身的屬性進行操作，包
括獲取屬性的屬性值、設置屬性的屬性值，並且可以刪除掉屬性。
attr()和 removeAttr()
方法名 描述
attr(key) 獲取某個元素 key 屬性的屬性值
attr(key, value) 設置某個元素 key 屬性的屬性值
attr({key1:value2, key2:value2...}) 設置某個元素多個 key 屬性的屬性值
attr(key, function (index, value) {}) 設置某個元素 key 通過 fn 來設置
$('div').attr('title'); //獲取屬性的屬性值
$('div').attr('title', '我是域名'); //設置屬性及屬性值
$('div').attr('title', function () { //通過匿名函數返回屬性值
return '我是域名';
});
$('div').attr('title', function (index, value) { //可以接受兩個參數
return value + (index+1) + '，我是域名';
});
注意：attr()方法裏的 function() {}，可以不傳參數。可以只傳一個參數 index，表示當前
元素的索引(從 0 開始)。也可以傳遞兩個參數 index、value，第二個參數表示屬性原本的值。
注意：jQuery 中很多方法都可以使用 function() {}來返回出字符串，比如 html()、text()、
val()和上一章剛學過的 is()、filter()方法。而如果又涉及到多個元素集合的話，還可以傳遞
index 參數來獲取索引值，並且可以使用第二個參數 value(並不是所有方法都適合，有興趣
可以自己逐個嘗試)。
$('div').html(function (index) { //通過匿名函數賦值，並傳遞 index
return '我是' + (index+1) + '號 div';
});
$('div').html(function (index, value) { //還可以實現追加內容
return '我是' + (index+1) + '號 div：'+value ;
});
注意：我們也可以使用 attr()來創建 id 屬性，但我們強烈不建議這麼做。這樣會導致整
個頁面結構的混亂。 當然也可以創建class 屬性， 但後面會有一個語義更好的方法來代替 attr()
方法，所以也不建議使用。
刪除指定的屬性，這個方法就不可以使用匿名函數，傳遞 index 和 value 均無效。
$('div').removeAttr('title'); //刪除指定的屬性
四． 元素樣式操作
元素樣式操作包括了直接設置 CSS 樣式、增加 CSS 類別、類別切換、刪除類別這幾種
操作方法。而在整個 jQuery 使用頻率上來看，CSS 樣式的操作也是極高的，所以需要重點
掌握。
CSS 操作方法
方法名 描述
css(name) 獲取某個元素行內的 CSS 樣式
css([name1, name2, name3]) 獲取某個元素行內多個 CSS 樣式
css(name, value) 設置某個元素行內的 CSS 樣式
css(name, function (index, value) ) 設置某個元素行內的 CSS 樣式
css({name1 : value1, name2 : value2}) 設置某個元素行內多個 CSS 樣式
addClass(class) 給某個元素添加一個 CSS 類
addClass(class1 class2 class3...) 給某個元素添加多個 CSS 類
removeClass(class) 刪除某個元素的一個 CSS 類
removeClass(class1 class2 class3...) 刪除某個元素的多個 CSS 類
toggleClass(class) 來回切換默認樣式和指定樣式
toggleClass(class1 class2 class3...) 同上
toggleClass(class, switch) 來回切換樣式的時候設置切換頻率
toggleClass(function () {}) 通過匿名函數設置切換的規則
toggleClass(function () {}, switch) 在匿名函數設置時也可以設置頻率
toggleClass(function (i, c, s) {}, switch) 在匿名函數設置時傳遞三個參數
$('div').css('color'); //獲取元素行內 CSS 樣式的顏色
$('div').css('color', 'red'); //設置元素行內 CSS 樣式顏色爲紅色
在 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);
});
在需要設置多個樣式的時候，我們可以傳遞多個 CSS 樣式的鍵值對即可。
$('div').css({
'background-color' : '#ccc',
'color' : 'red',
'font-size' : '20px'
});
如果想設置某個元素的 CSS 樣式的值， 但這個值需要計算我們可以傳遞一個匿名函數。
$('div').css('width', function (index, value) {
return (parseInt(value) - 500) + 'px';
});
除了行內 CSS 設置，我們也可以直接給元素添加 CSS 類，可以添加單個或多個，並且
也可以刪除它。
$('div').addClass('red'); //添加一個 CSS 類
$('div').addClass('red bg'); //添加多個 CSS 類
$('div').removeClass('bg'); //刪除一個 CSS 類
$('div').removeClass('red bg'); //刪除多個 CSS 類
我們還可以結合事件來實現 CSS 類的樣式切換功能。
$('div').click(function () { //當點擊後觸發
$(this).toggleClass('red size'); //單個樣式多個樣式均可
});
.toggleClass()方法的第二個參數可以傳入一個布爾值， true表示執行切換到 class類， false
表示執行回默認 class 類(默認的是空 class)，運用這個特性，我們可以設置切換的頻率。
var count = 0;
$('div').click(function () { //每點擊兩次切換一次 red
$(this).toggleClass('red', count++ % 3 == 0);
});
默認的 CSS 類切換隻能是無樣式和指定樣式之間的切換，如果想實現樣式 1 和樣式 2
之間的切換還必須自己寫一些邏輯。
$('div').click(function () {
$(this).toggleClass('red size'); //一開始切換到樣式 2
if ($(this).hasClass('red')) { //判斷樣式 2 存在後
$(this).removeClass('blue'); //刪除樣式 1
} else {
$(this).toggleClass('blue'); //添加樣式 1，這裏也可以 addClass
}
});
上面的方法較爲繁瑣，.toggleClass()方法提供了傳遞匿名函數的方式，來設置你所需要
切換的規則。
$('div').click(function () {
$(this).toggleClass(function () { //傳遞匿名函數，返回要切換的樣式
return $(this).hasClass('red') ? 'blue' : 'red size';
});
});
注意：上面雖然一句話實現了這個功能，但還是有一些小缺陷，因爲原來的 class 類沒
有被刪除，只不過被替代了而已。所以，需要改寫一下。
$('div').click(function () {
$(this).toggleClass(function () {
if ($(this).hasClass('red')) {
$(this).removeClass('red');
return 'green';
} else {
$(this).removeClass('green');
return 'red';
}
});
});
我們也可以在傳遞匿名函數的模式下，增加第二個頻率參數。
var count = 0;
$('div').click(function () {
$(this).toggleClass(function () {
return $(this).hasClass('red') ? 'blue' : 'red size';
},count++ % 3 == 0); //增加了頻率
});
對於.toggleClass()傳入匿名函數的方法，還可以傳遞 index 索引、class 類兩個參數以及
頻率布爾值，可以得到當前的索引、class 類名和頻率布爾值。
var count = 0;
$('div').click(function () {
$(this).toggleClass(function (index, className, switchBool) {
alert(index + ':' + className + ':' + switchBool); //得到當前值
return $(this).hasClass('red') ? 'blue' : 'red size';
},count++ % 3 == 0);
});
五．CSS 方法
jQuery 不但提供了 CSS 的核心操作方法，比如.css()、.addClass()等。還封裝了一些特殊
功能的 CSS 操作方法，我們分別來了解一下。
width()方法
方法名 描述
width() 獲取某個元素的長度
width(value) 設置某個元素的長度
width(function (index, width) {}) 通過匿名函數設置某個元素的長度
$('div').width(); //獲取元素的長度， 返回的類型爲 number
$('div').width(500); //設置元素長度，直接傳數值，默認加 px
$('div').width('500pt'); //同上，設置了 pt 單位
$('div').width(function (index, value) { //index 是索引，value 是原本值
return value - 500; //無須調整類型，直接計算
});
height()方法
方法名 描述
height() 獲取某個元素的長度
height(value) 設置某個元素的長度
height(function (index, width) {}) 通過匿名函數設置某個元素的長度
$('div').height(); //獲取元素的高度， 返回的類型爲 number
$('div').height(500); //設置元素高度，直接傳數值，默認加 px
$('div').height('500pt'); //同上，設置了 pt 單位
$('div').height(function (index, value) { //index 是索引，value 是原本值
return value - 1; //無須調整類型，直接計算
});
內外邊距和邊框尺寸方法
方法名 描述
innerWidth() 獲取元素寬度，包含內邊距 padding
innerHeight() 獲取元素高度，包含內邊距 padding
outerWidth() 獲取元素寬度，包含邊框 border 和內邊距 padding
outerHeight() 獲取元素高度，包含邊框 border 和內邊距 padding
outerWidth(ture) 同上，且包含外邊距
outerHeight(true) 同上，且包含外邊距
alert($('div').width()); //不包含
alert($('div').innerWidth()); //包含內邊距 padding
alert($('div').outerWidth()); //包含內邊距 padding+邊框 border
alert($('div').outerWidth(true)); //包含內邊距 padding+邊框 border+外邊距 margin
元素偏移方法
方法名 描述
offset() 獲取某個元素相對於視口的偏移位置
position() 獲取某個元素相對於父元素的偏移位置
scrollTop() 獲取垂直滾動條的值
scrollTop(value) 設置垂直滾動條的值
scrollLeft() 獲取水平滾動條的值
scrollLeft(value) 設置水平滾動條的值
$('strong').offset().left; //相對於視口的偏移
$('strong').position().left; //相對於父元素的偏移
$(window).scrollTop(); //獲取當前滾動條的位置
$(window).scrollTop(300); //設置當前滾動條的位置
