學習要點：

• 1.DOM 簡介
• 2.設置元素及內容
• 3.元素屬性操作
• 4.元素樣式操作
• 5.CSS 方法

DOM 是一種文檔對象模型。方便開發者對HTML 結構元素內容進行展示和修改。在 JavaScript 中，DOM 不但內容龐大繁雜，而且開發的過程中需要考慮更多的兼容性、擴展性。在 jQuery 中，已經將最常用的 DOM 操作方法進行了有效封裝，並且不需要考慮瀏覽器的兼容性。

一．DOM 簡介

由於課程是基於 JavaScript 基礎上完成的，這裏不去詳細的了解 DOM 到底是什麽。只需要知道幾個基本概念：

• 1.D 表示的是頁面文檔 Document、O 表示對象，即一組含有獨立特性的數據集合、M表示模型，即頁面上的元素節點和文本節點。
• 2.DOM 有三種形式，標準 DOM、HTML DOM、CSS DOM，大部分都進行了一系列的封裝，在 jQuery 中並不需要深刻理解它。
• 3.樹形結構用來表示 DOM，就非常的貼切，大部分操作都是元素節點操作，還有少部分是文本節點操作。

二．設置元素及內容

通過前面所學習的各種選擇器、過濾器來得到想要操作的元素。這個時候就可以對這些元素進行 DOM 的操作。那麽，最常用的操作就是對元素內容的獲取和修改。

在常規的 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 也可以對元素本身的屬性進行操作，包括獲取屬性的屬性值、設置屬性的屬性值，並且可以刪除掉屬性。

$(‘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 樣式的操作也是極高的，所以需要重點掌握。

$(‘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 操作方法，分別來了解一下。

$(‘div‘).width(); //獲取元素的長度，返回的類型為 number
$(‘div‘).width(500); //設置元素長度，直接傳數值，默認加 px
$(‘div‘).width(‘500pt‘); //同上，設置了 pt 單位
$(‘div‘).width(function (index, value) { //index 是索引，value 是原本值
return value - 500; //無須調整類型，直接計算
});

$(‘div‘).height(); //獲取元素的高度，返回的類型為 number
$(‘div‘).height(500); //設置元素高度，直接傳數值，默認加 px
$(‘div‘).height(‘500pt‘); //同上，設置了 pt 單位
$(‘div‘).height(function (index, value) { //index 是索引，value 是原本值
　　return value - 1; //無須調整類型，直接計算
});

alert($(‘div‘).width()); //不包含
alert($(‘div‘).innerWidth()); //包含內邊距 padding
alert($(‘div‘).outerWidth()); //包含內邊距 padding+邊框 border
alert($(‘div‘).outerWidth(true)); //包含內邊距 padding+邊框 border+外邊距 margin

$(‘strong‘).offset().left; //相對於視口的偏移
$(‘strong‘).position().left; //相對於父元素的偏移
$(window).scrollTop(); //獲取當前滾動條的位置
$(window).scrollTop(300); //設置當前滾動條的位置

Jquery5 基礎 DOM 和 CSS 操作