jQuery入門筆記之（二）文檔對象模型
基礎 DOM 和 和 CSS
一. 設置元素及內容
我們通過前面所學習的各種選擇器、過濾器來得到我們想要操作的元素。這個時候，我們就可以對這些元素進行 DOM 的操作。
那么，最常用的操作就是對元素內容的獲取和修改。 html() 和 text() 方法:
| 方法名 | 描述 | 區分 |
|---|---|---|
| html() | 獲取元素中 HTML 內容 | 連同標簽一起提取 |
| html(value) | 設置元素中 HTML 內容 | 清空原數據，設置html內容 |
| text() | 獲取元素中文本內容 | 自動清理html標簽 |
| text(value) | 設置元素中文本內容 | 自動轉義html標簽以文本形式呈現 |
| val() | 獲取表單中的文本內容 | value屬性的值 |
| val(value) | 設置表單中的文本內容 | 設置value的值(有特殊用法) |
注意：當我們使用 html() 或 text() 設置元素里的內容時，會清空原來的數據。而我們期望能夠追加數據的話，需要先獲取原本的數據。
$('#box').html($('#box').html() + '<em>guowenfh.github.io</em>'); //追加數據
//當然它還支持使用函數來進行更復雜的追加val() 的特殊用法：
如果想設置多個選項的選定狀態，比如下拉列表、單選復選框等等，可以通過數組傳遞操作。
$("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){}) | 通過 fn 來設置設置某個元素 key屬性 |
注意：
- jQuery中很多方法都可以使用 function() {} 來返回出字符串，比如 html() 、 text() 、 val() 和上一章剛學過的 is() 、 filter() 方法。
這些方法里的 function() {} ，可以不傳參數。可以只傳一個參數 index ，表示當前元素的索引(從0開始)。也可以傳遞兩個參數 index 、 value ，第二個參數表示屬性原本的值。
(當然并不是所有方法都適合，有興趣可以自己逐個嘗試)。 - 刪除指定的屬性，這個方法就不可以使用匿名函數，傳遞 index 和 value 均無效。 $('div').removeAttr('title'); //刪除指定的屬性
- 當然因為 id 和 class 也是元素的屬性，自然也可以使用attr進行設置，但是建議不這樣使用，因為會導致整個頁面結構的混亂，有專門的屬性對它們進行設置。
三. 元素樣式操作
元素樣式操作包括了直接設置 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) | 在匿名函數設置時傳遞三個參數 |
理解：
在獲取多個 CSS 樣式時，獲取到的是一個對象數組，如果用原生JS進行解析需要使用 for in 遍歷。
var box = $('div').css(['color', 'height', 'width']); //得到多個 CSS 樣式的數組對象
for (var i in box) { //逐個遍歷出來
alert(i + ':' + box[i]);
}在jQuery顯然不需要那么麻煩，因為它提供了一個遍歷工具專門來處理這種對象數組， $.each() 方法，這個方法可以輕松的遍歷對象數組。
/**
* 遍歷對象數組
* @param {String} index 索引，鍵，屬性名
* @param {String} value 屬性值，值（相當于arr[i]）
*/
//遍歷原生JS對象數組時，value為元素DOM。
$.each(box, function(index, value) {
alert(index+":"+value);//效果和上面的一樣
});如果想設置某個元素的 CSS 樣式的值，但這個值需要計算我們可以傳遞一個匿名函數。
$('div').css('width', function (index, value) {
return (parseInt(value) - 50) + 'px';//局部操作，不影響全局，避免沖突。
});在使用 .toggleClass() 使用時，可以使用傳入匿名函數的方法，實現由默認到幾個class之間的切換。例如：
//注意這里必須要先刪除原有的樣式，不然只是被覆蓋了，而不是替換。
$('div').click(function() {
$(this).toggleClass(function() {
if ($(this).hasClass('red')) {
$(this).removeClass('red');
return 'blue';
} else {
$(this).removeClass('blue');
return 'red';
}
});
});對于 .toggleClass() 傳入匿名函數的方法，還可以可以傳遞 index 索引、 class 類兩個參數以及頻率布爾值，可以得到當前的索引、class類名和頻率布爾值。
四. CSS方法
（一）width()方法
| 方法名 | 描述 |
|---|---|
| width() | 獲取某個元素的寬度(number) |
| width(value) | 設置某個元素的寬度(無單位時，默認px) |
| width(function (index, width) {}) | 通過匿名函數設置某個元素的寬度 |
雖然可以不加單位，但是建議加上，使代碼更加清晰。index 是索引，value 是原本值。
（二）height()方法
| 方法名 | 描述 |
|---|---|
| height() | 獲取某個元素的高度 |
| height(value) | 設置某個元素的高度 |
| height(function (index, height) {}) | 通過匿名函數設置某個元素的高度 |
上述兩個方法不包括內外邊距和邊框
（三）內外邊距和邊框尺寸方法
| 方法名 | 描述 |
|---|---|
| innerWidth() | 獲取元素寬度，包含內邊距 padding |
| innerHeight() | 獲取元素高度，包含內邊距 padding |
| outerWidth() | 獲取元素寬度，包含邊框 border 和內邊距 padding |
| outerHeight() | 獲取元素高度，包含邊框 border 和內邊距 padding |
| outerWidth(ture) | 同上，且包含外邊距(注意里面的true) |
| outerHeight(true) | 同上，且包含外邊距 |
（四）元素偏移方法
| 方法名 | 描述 |
|---|---|
| offset() | 獲取某個元素相對于視口的偏移位置(無論定位與否) |
| position() | 獲取某個元素相對于父元素的偏移位置 |
| scrollTop() | 獲取垂直滾動條的位置 |
| scrollTop(value) | 設置垂直滾動條的位置 |
| scrollLeft() | 獲取水平滾動條的值 |
| scrollLeft(value) | 設置水平滾動條的值 |
注意：
前兩個方法，獲取得到的是一個對象，如： {left:12,top:32} ，所以需要獲取其中的一個值的時候，還需要進行選取，例如： $(div).offset.left 。獲取相對與視口的偏移。
在獲取滾動條的值時需要注意的是，對象為window且需要用$包裝轉化成jQ對象
$(window).scrollTop(); //獲取當前滾動條的位置 $(window).scrollTop(300); //設置當前滾動條的位置
DOM 節點操作
DOM中有一個非常重要的功能，就是節點模型，也就是DOM中的“M”。頁面中的元素結構就是通過這種節點模型來互相對應著的，我們只需要通過這些節點關系，可以創建、插入、替換、克隆、刪除等等一些列的元素操作。
一. 創建節點
為了使頁面更加智能化，有時我們想動態的在 html 結構頁面添加一個元素標簽，那么在插入之前首先要做的動作就是：創建節點。
在jQuery中創建節點異常簡單。
var box = $('<div id="box">節點</div>'); //創建一個節點
$('body').append(box); //將節點插入到<body>元素內部二． 插入節點
在創建節點的過程中，其實我們已經演示怎么通過.append()方法來插入一個節點。但僅僅這個功能遠遠不能滿足我們的需求，除了這個方法，jQuery提供了其他幾個方法來插入節點。
內部插入節點方法
| 方法名 | 描述 |
|---|---|
| append(content) | 向指定元素內部后面插入節點content |
| append(function (index, html) {}) | 使用匿名函數向指定元素內部后面插入節點 |
| appendTo(content) | 將指定元素移入到指定元素content 內部后面 |
| prepend(content) | 向指定元素content 內部的前面插入節點 |
| prepend(function (index, html) {}) | 使用匿名函數向指定元素內部的前面插入節點 |
| prependTo(content) | 將指定元素移入到指定元素 content 內部前面 |
需要注意的是 appendTo(content) 與 prependTo(content) 在使用方法上與其他兩個略微有些不同， $("<em>new</em>").appendTo("div"); ，它代表的是創建的節點傳入div內部。
匿名函數方式：
$('div').append(function (index, html) {
//使用匿名函數插入節點index是獲取到的div的索引，html 是原節點
if(index==1){
return '<strong>節點</strong>';//在獲取到的第二個div內部添加節點
}
});外部插入節點方法
| 方法名 | 描述 |
|---|---|
| after(content) | 向指定元素的外部后面插入節點 content |
| after(function (index, html) {}) | 使用匿名函數向指定元素的外部后面插入節點 |
| before(content) | 向指定元素的外部前面插入節點 content |
| before(function (index, html) {}) | 使用匿名函數向指定元素的外部前面插入節點 |
| insertAfter(content) | 將指定節點移到指定元素 content 外部的后面 |
| insertBefore(content) | 將指定節點移到指定元素 content 外部的前面 |
與上面相同 insertAfter(content) 與 insertBefore(content) 也與其它兩個是相反的。
三．包裹節點
jQuery 提供了一系列方法用于包裹節點，那包裹節點是什么意思呢？其實就是使用字符串代碼將指定元素的代碼包含著的意思。
| 方法名 | 描述 |
|---|---|
| wrap(html) | 向指定元素包裹一層 html 代碼 |
| wrap(element) | 向指定元素包裹一層 DOM 對象節點 |
| wrap(function (index) {}) | 使用匿名函數向指定元素包裹一層自定義內容 |
| unwrap() | 移除一層指定元素包裹的內容（多層需移除多次） |
| wrapAll(html) | 用 html 將所有元素包裹到一起 |
| wrapAll(element) | 用 DOM 對象將所有元素包裹在一起 |
| wrapInner(html) | 向指定元素的子內容包裹一層 html |
| wrapInner(element) | 向指定元素的子內容包裹一層 DOM 對象節點 |
| wrapInner(function (index) {}) | 用匿名函數向指定元素的子內容包裹一層 |
wrap的多種用法：
$('div').wrap('<strong class="ing"></strong>'); //在 div 外層包裹一層 strong
$('div').wrap('<strong>123</strong>'); //包裹的元素可以帶內容
$('div').wrap('<strong><em></em></strong>'); //包裹多個元素
$('div').wrap($('strong').get(0)); //也可以包裹一個原生 DOM
$('div').wrap(document.createElement('strong')); //臨時的原生 DOM
$('div').wrap(function (index) { //匿名函數
return '<strong></strong>';
});注意： .wrap() 和 .wrapAll() 的區別在前者把每個元素當成一個獨立體，分別包含一層外層；后者將所有元素作為一個整體作為一個獨立體，只包含一層外層。這兩種都是在外層包含，而 .wrapInner() 在內層包含。
四. 節點操作
| 方法名 | 描述 | 參數解析 |
|---|---|---|
| $('div').clone(true); | 復制一個節點 | true時表示同時復制事件行為，空或false都表示只復制元素及內容 |
| $('div').remove("#box"); | 刪除一個id=box的div元素 | 無參數時，表示直接刪除元素 |
| $('div').detach(); | 保留事件行為的刪除 | 同上 |
| $('div').empty(); | 情況節點里的內容 | 無參數 |
| $('div').replaceWith('<span>節點</span>') | 將 div 替換成 span 元素 | HTML字符串，DOM元素，或者jQuery對象 |
| $('<span>節點</span>').replaceAll('div'); | 同上 | 同上 |
注意：
- .remove() 和 .detach() 都是刪除節點，而刪除后本身方法可以返回當前被刪除的節點對象，但區別在于前者在恢復時不保留事件行為，后者則保留。
- 節點被替換后，所包含的事件行為就全部消失了。
來自： http://guowenfh.github.io/2015/12/31/jQuery-02-DocumentObjectModel/