转自个人博客
基础 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()都是删除节点，而删除后本身方法可以返回当前被删除的节点对象，但区别在于前者在恢复时不保留事件行为，后者则保留。节点被替换后，所包含的事件行为就全部消失了。
