基础 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节点操作