基础 DOM 和 CSS 操作
1.设置元素及内容
| 方法名 | 描述 |
|---|---|
| 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 值是这些的将被选定
2.元素属性操作
| 方法名 | 描述 |
|---|---|
| attr(key) | 获取某个元素 key 属性的属性值 |
| attr(key, value) | 设置某个元素 key 属性的属性值 |
| attr({key1:value2, key2:value2...}) | 设置某个元素多个 key 属性的属性值 |
| attr(key, function (index, value) {}) | 设置某个元素 key 通过 fn 来设置 |
3.元素样式操作
| 方法名 | 描述 |
|---|---|
| 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 获取上，我们也可以获取多个 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);
});
4.CSS 方法
| 方法名 | 描述 |
|---|---|
| width() | 获取某个元素的长度 |
| width(value) | 设置某个元素的长度 |
| width(function (index, width) {}) | 通过匿名函数设置某个元素的长度 |
| height() | 获取某个元素的长度 |
| height(value) | 设置某个元素的长度 |
| height(function (index, width) {}) | 通过匿名函数设置某个元素的长度 |
| innerWidth() | 获取元素宽度，包含内边距 padding |
| innerHeight() | 获取元素高度，包含内边距 padding |
| outerWidth() | 获取元素宽度，包含边框 border 和内边距 padding |
| outerHeight() | 获取元素高度，包含边框 border 和内边距 padding |
| outerWidth(ture) | 同上，且包含外边距 |
| outerHeight(true) | 同上，且包含外边距 |
| 方法名 | 描述 |
|---|---|
| offset() | 获取某个元素相对于视口的偏移位置 |
| position() | 获取某个元素相对于父元素的偏移位置 |
| scrollTop() | 获取垂直滚动条的值 |
| scrollTop(value) | 设置垂直滚动条的值 |
| scrollLeft() | 获取水平滚动条的值 |
| scrollLeft(value) | 设置水平滚动条的值 |
元素偏移方法
| 方法名 | 描述 |
|---|---|
| offset() | 获取某个元素相对于视口的偏移位置 |
| position() | 获取某个元素相对于父元素的偏移位置 |
| scrollTop() | 获取垂直滚动条的值 |
| scrollTop(value) | 设置垂直滚动条的值 |
| scrollLeft() | 获取水平滚动条的值 |
| scrollLeft(value) | 设置水平滚动条的值 |
上一篇: jQuery的基础DOM,CSS操作篇
下一篇: jQuery的DOM节点操作
