學(xué)習(xí)要點(diǎn)：

• 1.DOM 簡(jiǎn)介
• 2.設(shè)置元素及內(nèi)容
• 3.元素屬性操作
• 4.元素樣式操作
• 5.CSS 方法

DOM 是一種文檔對(duì)象模型。方便開(kāi)發(fā)者對(duì)HTML 結(jié)構(gòu)元素內(nèi)容進(jìn)行展示和修改。在 JavaScript 中，DOM 不但內(nèi)容龐大繁雜，而且開(kāi)發(fā)的過(guò)程中需要考慮更多的兼容性、擴(kuò)展性。在 jQuery 中，已經(jīng)將最常用的 DOM 操作方法進(jìn)行了有效封裝，并且不需要考慮瀏覽器的兼容性。

一．DOM 簡(jiǎn)介

由于課程是基于 JavaScript 基礎(chǔ)上完成的，這里不去詳細(xì)的了解 DOM 到底是什么。只需要知道幾個(gè)基本概念：

• 1.D 表示的是頁(yè)面文檔 Document、O 表示對(duì)象，即一組含有獨(dú)立特性的數(shù)據(jù)集合、M表示模型，即頁(yè)面上的元素節(jié)點(diǎn)和文本節(jié)點(diǎn)。
• 2.DOM 有三種形式，標(biāo)準(zhǔn) DOM、HTML DOM、CSS DOM，大部分都進(jìn)行了一系列的封裝，在 jQuery 中并不需要深刻理解它。
• 3.樹(shù)形結(jié)構(gòu)用來(lái)表示 DOM，就非常的貼切，大部分操作都是元素節(jié)點(diǎn)操作，還有少部分是文本節(jié)點(diǎn)操作。

二．設(shè)置元素及內(nèi)容

通過(guò)前面所學(xué)習(xí)的各種選擇器、過(guò)濾器來(lái)得到想要操作的元素。這個(gè)時(shí)候就可以對(duì)這些元素進(jìn)行 DOM 的操作。那么，最常用的操作就是對(duì)元素內(nèi)容的獲取和修改。

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

$('#box').html(); //獲取 html 內(nèi)容
$('#box').text(); //獲取文本內(nèi)容，會(huì)自動(dòng)清理 html 標(biāo)簽
$('#box').html('<em>www.li.cc</em>'); //設(shè)置 html 內(nèi)容
$('#box').text('<em>www.li.cc</em>'); //設(shè)置文本內(nèi)容，會(huì)自動(dòng)轉(zhuǎn)義 html 標(biāo)簽

注意：當(dāng)使用 html()或 text()設(shè)置元素里的內(nèi)容時(shí)會(huì)清空原來(lái)的數(shù)據(jù)。期望能夠追加數(shù)據(jù)的話，需要先獲取原本的數(shù)據(jù)。

$('#box').html($('#box').html()   '<em>www.li.cc</em>'); //追加數(shù)據(jù)

如果元素是表單的話，jQuery 提供了 val()方法進(jìn)行獲取或設(shè)置內(nèi)部的文本數(shù)據(jù)。

$('input').val(); //獲取表單內(nèi)容
$('input').val('www.li.cc'); //設(shè)置表單內(nèi)容

如果想設(shè)置多個(gè)選項(xiàng)的選定狀態(tài)，比如下拉列表、單選復(fù)選框等等，可以通過(guò)數(shù)組傳遞操作。

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

三．元素屬性操作

除了對(duì)元素內(nèi)容進(jìn)行設(shè)置和獲取，通過(guò) jQuery 也可以對(duì)元素本身的屬性進(jìn)行操作，包括獲取屬性的屬性值、設(shè)置屬性的屬性值，并且可以刪除掉屬性。

$('div').attr('title'); //獲取屬性的屬性值

$('div').attr('title', '我是域名'); //設(shè)置屬性及屬性值

$('div').attr('title', function () { //通過(guò)匿名函數(shù)返回屬性值
　　return '我是域名';
});

$('div').attr('title', function (index, value) { //可以接受兩個(gè)參數(shù)
　　return value   (index 1)   '，我是域名';
});

注意：attr()方法里的 function() {}，可以不傳參數(shù)。可以只傳一個(gè)參數(shù) index，表示當(dāng)前元素的索引(從 0 開(kāi)始)。也可以傳遞兩個(gè)參數(shù) index、value，第二個(gè)參數(shù)表示屬性原本的值。

注意：jQuery 中很多方法都可以使用 function() {}來(lái)返回出字符串，比如 html()、text()、val()和 is()、filter()方法。而如果又涉及到多個(gè)元素集合的話，還可以傳遞
index 參數(shù)來(lái)獲取索引值，并且可以使用第二個(gè)參數(shù) value(并不是所有方法都適合)。

$('div').html(function (index) { //通過(guò)匿名函數(shù)賦值，并傳遞 index
    return '我是'   (index 1)   '號(hào) div';
});

$('div').html(function (index, value) { //還可以實(shí)現(xiàn)追加內(nèi)容
    return '我是'   (index 1)   '號(hào) div：' value ;
});

注意：可以使用 attr()來(lái)創(chuàng)建 id 屬性，但強(qiáng)烈不建議這么做。這樣會(huì)導(dǎo)致整個(gè)頁(yè)面結(jié)構(gòu)的混亂。當(dāng)然也可以創(chuàng)建 class 屬性，但后面會(huì)有一個(gè)語(yǔ)義更好的方法來(lái)代替 attr()方法，所以也不建議使用。

刪除指定的屬性，這個(gè)方法就不可以使用匿名函數(shù)，傳遞 index 和 value 均無(wú)效。

$('div').removeAttr('title'); //刪除指定的屬性

四．元素樣式操作

元素樣式操作包括了直接設(shè)置 CSS 樣式、增加 CSS 類別、類別切換、刪除類別這幾種操作方法。而在整個(gè) jQuery 使用頻率上來(lái)看，CSS 樣式的操作也是極高的，所以需要重點(diǎn)掌握。

?

?

$('div').css('color'); //獲取元素行內(nèi) CSS 樣式的顏色
$('div').css('color', 'red'); //設(shè)置元素行內(nèi) CSS 樣式顏色為紅色

在 CSS 獲取上，可以獲取多個(gè) CSS 樣式，而獲取到的是一個(gè)對(duì)象數(shù)組，如果用傳統(tǒng)方式進(jìn)行解析需要使用 for in 遍歷。

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

jQuery 提供了一個(gè)遍歷工具專門來(lái)處理這種對(duì)象數(shù)組，$.each()方法，這個(gè)方法可以輕松的遍歷對(duì)象數(shù)組。

$.each(box, function (attr, value) { //遍歷 JavaScript 原生態(tài)的對(duì)象數(shù)組
　　alert(attr   ':'   value);
});

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

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

在需要設(shè)置多個(gè)樣式的時(shí)候，可以傳遞多個(gè) CSS 樣式的鍵值對(duì)即可。

$('div').css({
　　'background-color' : '#ccc',
　　'color' : 'red','font-size' : '20px'
});

如果想設(shè)置某個(gè)元素的 CSS 樣式的值，但這個(gè)值需要計(jì)算，可以傳遞一個(gè)匿名函數(shù)。

$('div').css('width', function (index, value) {
　　return (parseInt(value) - 500)   'px';
});

除了行內(nèi) CSS 設(shè)置，也可以直接給元素添加 CSS 類，可以添加單個(gè)或多個(gè)，也可以刪除它。

$('div').addClass('red'); //添加一個(gè) CSS 類
$('div').addClass('red bg'); //添加多個(gè) CSS 類
$('div').removeClass('bg'); //刪除一個(gè) CSS 類
$('div').removeClass('red bg'); //刪除多個(gè) CSS 類

還可以結(jié)合事件來(lái)實(shí)現(xiàn) CSS 類的樣式切換功能。

$('div').click(function () { //當(dāng)點(diǎn)擊后觸發(fā)
　　$(this).toggleClass('red size'); //單個(gè)樣式多個(gè)樣式均可
});

.toggleClass()方法的第二個(gè)參數(shù)可以傳入一個(gè)布爾值，true 表示執(zhí)行切換到 class 類，false

表示執(zhí)行回默認(rèn) class 類(默認(rèn)的是空 class)，運(yùn)用這個(gè)特性，我們可以設(shè)置切換的頻率。

var count = 0;
$('div').click(function () { //每點(diǎn)擊兩次切換一次 red
    $(this).toggleClass('red', count   % 3 == 0);
});

默認(rèn)的 CSS 類切換只能是無(wú)樣式和指定樣式之間的切換，如果想實(shí)現(xiàn)樣式 1 和樣式 2之間的切換還必須自己寫一些邏輯。

$('div').click(function () {
　　$(this).toggleClass('red size'); //一開(kāi)始切換到樣式 2
　　if ($(this).hasClass('red')) { //判斷樣式 2 存在后
　　　　$(this).removeClass('blue'); //刪除樣式 1
　　} else {
　　　　$(this).toggleClass('blue'); //添加樣式 1，這里也可以 addClass
　　}
});

上面的方法較為繁瑣，.toggleClass()方法提供了傳遞匿名函數(shù)的方式，來(lái)設(shè)置所需要切換的規(guī)則。

$('div').click(function () {
　　$(this).toggleClass(function () { //傳遞匿名函數(shù)，返回要切換的樣式
　　　　return $(this).hasClass('red') ? 'blue' : 'red size';
   });
});

注意：上面雖然一句話實(shí)現(xiàn)了這個(gè)功能，但還是有一些小缺陷，因?yàn)樵瓉?lái)的 class 類沒(méi)有被刪除，只不過(guò)被替代了而已。所以，需要改寫一下。

$('div').click(function () {
　　$(this).toggleClass(function () {
　　　　if ($(this).hasClass('red')) {
　　　　　　$(this).removeClass('red');
　　　　　　return 'green';
　　　　} else {
　　　　　　$(this).removeClass('green');
　　　　　　return 'red';
　　　　}
　　});
});

也可以在傳遞匿名函數(shù)的模式下，增加第二個(gè)頻率參數(shù)。

var count = 0;
$('div').click(function () {
　　$(this).toggleClass(function () {
　　　　return $(this).hasClass('red') ? 'blue' : 'red size';
　　},count   % 3 == 0); //增加了頻率
});

對(duì)于.toggleClass()傳入匿名函數(shù)的方法，還可以傳遞 index 索引、class 類兩個(gè)參數(shù)以及頻率布爾值，可以得到當(dāng)前的索引、class 類名和頻率布爾值。

var count = 0;
$('div').click(function () {
　　$(this).toggleClass(function (index, className, switchBool) {
　　　　alert(index   ':'   className   ':'   switchBool); //得到當(dāng)前值
　　　　return $(this).hasClass('red') ? 'blue' : 'red size';
　　},count   % 3 == 0);
});

五．CSS 方法

?jQuery 不但提供了 CSS 的核心操作方法，比如.css()、.addClass()等。還封裝了一些特殊功能的 CSS 操作方法，分別來(lái)了解一下。

$('div').width(); //獲取元素的長(zhǎng)度，返回的類型為 number
$('div').width(500); //設(shè)置元素長(zhǎng)度，直接傳數(shù)值，默認(rèn)加 px
$('div').width('500pt'); //同上，設(shè)置了 pt 單位
$('div').width(function (index, value) { //index 是索引，value 是原本值
return value - 500; //無(wú)須調(diào)整類型，直接計(jì)算
});

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

alert($('div').width()); //不包含
alert($('div').innerWidth()); //包含內(nèi)邊距 padding
alert($('div').outerWidth()); //包含內(nèi)邊距 padding 邊框 border
alert($('div').outerWidth(true)); //包含內(nèi)邊距 padding 邊框 border 外邊距 margin

$('strong').offset().left; //相對(duì)于視口的偏移
$('strong').position().left; //相對(duì)于父元素的偏移
$(window).scrollTop(); //獲取當(dāng)前滾動(dòng)條的位置
$(window).scrollTop(300); //設(shè)置當(dāng)前滾動(dòng)條的位置

?