基礎(chǔ) DOM 和 CSS 操作
1.設(shè)置元素及內(nèi)容
| 方法名 | 描述 |
|---|---|
| html() | 獲取元素中 HTML 內(nèi)容 |
| html(value) | 設(shè)置元素中 HTML 內(nèi)容 |
| text() | 獲取元素中文本內(nèi)容 |
| text(value) | 設(shè)置原生中文本內(nèi)容 |
| val() | 獲取表單中的文本內(nèi)容 |
| val(value) | 設(shè)置表單中的文本內(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ì)清空原來的數(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ù)選框等等松逊，可以通過數(shù)組傳遞操作躺屁。
$("input").val(["check1","check2", "radio1" ]); //value 值是這些的將被選定
2.元素屬性操作
| 方法名 | 描述 |
|---|---|
| attr(key) | 獲取某個(gè)元素 key 屬性的屬性值 |
| attr(key, value) | 設(shè)置某個(gè)元素 key 屬性的屬性值 |
| attr({key1:value2, key2:value2...}) | 設(shè)置某個(gè)元素多個(gè) key 屬性的屬性值 |
| attr(key, function (index, value) {}) | 設(shè)置某個(gè)元素 key 通過 fn 來設(shè)置 |
3.元素樣式操作
| 方法名 | 描述 |
|---|---|
| css(name) | 獲取某個(gè)元素行內(nèi)的 CSS 樣式 |
| css([name1, name2, name3]) | 獲取某個(gè)元素行內(nèi)多個(gè) CSS 樣式 |
| css(name, value) | 設(shè)置某個(gè)元素行內(nèi)的 CSS 樣式 |
| css(name, function (index, value) ) | 設(shè)置某個(gè)元素行內(nèi)的 CSS 樣式 |
| css({name1 : value1, name2 : value2}) | 設(shè)置某個(gè)元素行內(nèi)多個(gè) CSS 樣式 |
| addClass(class) | 給某個(gè)元素添加一個(gè) CSS 類 |
| addClass(class1 class2 class3...) | 給某個(gè)元素添加多個(gè) CSS 類 |
| removeClass(class) | 刪除某個(gè)元素的一個(gè) CSS 類 |
| removeClass(class1 class2 class3...) | 刪除某個(gè)元素的多個(gè) CSS 類 |
| toggleClass(class) | 來回切換默認(rèn)樣式和指定樣式 |
| toggleClass(class1 class2 class3...) | 同上 |
| toggleClass(class, switch) | 來回切換樣式的時(shí)候設(shè)置切換頻率 |
| toggleClass(function () {}) | 通過匿名函數(shù)設(shè)置切換的規(guī)則 |
| toggleClass(function () {}, switch) | 在匿名函數(shù)設(shè)置時(shí)也可以設(shè)置頻率 |
| toggleClass(function (i, c, s) {}, switch) | 在匿名函數(shù)設(shè)置時(shí)傳遞三個(gè)參數(shù) |
在 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è)遍歷出來
alert(i + ':' + box[i]);
}
jQuery 提供了一個(gè)遍歷工具專門來處理這種對(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);
});
4.CSS 方法
| 方法名 | 描述 |
|---|---|
| width() | 獲取某個(gè)元素的長度 |
| width(value) | 設(shè)置某個(gè)元素的長度 |
| width(function (index, width) {}) | 通過匿名函數(shù)設(shè)置某個(gè)元素的長度 |
| height() | 獲取某個(gè)元素的長度 |
| height(value) | 設(shè)置某個(gè)元素的長度 |
| height(function (index, width) {}) | 通過匿名函數(shù)設(shè)置某個(gè)元素的長度 |
| innerWidth() | 獲取元素寬度主之，包含內(nèi)邊距 padding |
| innerHeight() | 獲取元素高度择吊，包含內(nèi)邊距 padding |
| outerWidth() | 獲取元素寬度，包含邊框 border 和內(nèi)邊距 padding |
| outerHeight() | 獲取元素高度槽奕，包含邊框 border 和內(nèi)邊距 padding |
| outerWidth(ture) | 同上几睛，且包含外邊距 |
| outerHeight(true) | 同上，且包含外邊距 |
| 方法名 | 描述 |
|---|---|
| offset() | 獲取某個(gè)元素相對(duì)于視口的偏移位置 |
| position() | 獲取某個(gè)元素相對(duì)于父元素的偏移位置 |
| scrollTop() | 獲取垂直滾動(dòng)條的值 |
| scrollTop(value) | 設(shè)置垂直滾動(dòng)條的值 |
| scrollLeft() | 獲取水平滾動(dòng)條的值 |
| scrollLeft(value) | 設(shè)置水平滾動(dòng)條的值 |
元素偏移方法
| 方法名 | 描述 |
|---|---|
| offset() | 獲取某個(gè)元素相對(duì)于視口的偏移位置 |
| position() | 獲取某個(gè)元素相對(duì)于父元素的偏移位置 |
| scrollTop() | 獲取垂直滾動(dòng)條的值 |
| scrollTop(value) | 設(shè)置垂直滾動(dòng)條的值 |
| scrollLeft() | 獲取水平滾動(dòng)條的值 |
| scrollLeft(value) | 設(shè)置水平滾動(dòng)條的值 |
上一篇: jQuery的基礎(chǔ)DOM,CSS操作篇
下一篇: jQuery的DOM節(jié)點(diǎn)操作
