第一百六十六节，jQuery，基础 DOM 和 CSS 操作

jQuery，基础 DOM 和 CSS 操作

学习要点：

1.DOM 简介

2.设置元素及内容

3.元素属性操作

4.元素样式操作

5.CSS 方法

一．DOM 简介

由于课程是基于 JavaScript 基础上完成的，这里我们不去详细的了解 DOM 到底是什么。 只需要知道几个基本概念：

　　1.D 表示的是页面文档 Document、O 表示对象，即一组含有独立特性的数据集合、M 表示模型，即页面上的元素节点和文本节点。

　　2.DOM 有三种形式，标准 DOM、HTML DOM、CSS DOM，大部分都进行了一系列的 封装，在 jQuery 中并不需要深刻理解它。

　　3.树形结构用来表示 DOM，就非常的贴切，大部分操作都是元素节点操作，还有少部 分是文本节点操作。

二．设置元素及内容

我们通过前面所学习的各种选择器、过滤器来得到我们想要操作的元素。这个时候，我 们就可以对这些元素进行 DOM 的操作。那么，最常用的操作就是对元素内容的获取和修改。

html()方法,获取或设置元素中html内容，包含标签，无参获取，有参设置

text()方法,获取或设置元素中文本内容，不包含标签，无参获取，有参设置

在常规的 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>‘); //追加数据

val()方法，获取或设置表单框的文本内容，也就是value值，无参获取，有参设置

如果元素是表单的话，jQuery 提供了 val()方法进行获取或设置内部的文本数据。

$(‘input‘).val(); //获取表单内容
$(‘input‘).val(‘www.li.cc‘); //设置表单内容

如果想设置多个选项的选定状态，比如下拉列表、单选复选框等等，可以通过数组传递 操作。就是设置默认勾选

$("input").val(["check1","check2", "radio1" ]); //value 值是这些的将被选定

三．元素属性操作

除了对元素内容进行设置和获取，通过 jQuery 也可以对元素本身的属性进行操作，包 括获取属性的属性值、设置属性的属性值，并且可以删除掉属性。

attr()方法，获取或设置元素的属性值
1个参数，获取属性值，参数是要获取的属性名称
2个参数，设置属性值，参数1是属性名称，参数2是属性值
1个参数，参数一个对象，键值对，设置多个属性和属性值
2个参数，参数1属性名称，参数2匿名函数，函数里设置属性值并且返回设置的属性值

$(‘div‘).attr(‘title‘); //获取属性的属性值
$(‘div‘).attr(‘title‘, ‘我是域名‘); //设置属性及属性值
$(‘div‘).attr(‘title‘, function () { //通过匿名函数返回属性值
return ‘我是域名‘;
});
$(‘div‘).attr(‘title‘, function (index, value) { //可以接受两个参数
return value + (index+1) + ‘，我是域名‘;
});

注意：attr()方法里的 function() {}，可以不传参数。可以只传一个参数 index，表示当前 元素的索引(从 0 开始)。也可以传递两个参数 index、value，第二个参数表示属性原本的值。

注意：jQuery 中很多方法都可以使用 function() {}来返回出字符串，比如 html()、text()、 val()和上一章刚学过的 is()、filter()方法。而如果又涉及到多个元素集合的话，还可以传递 index 参数来获取索引值，并且可以使用第二个参数 value(并不是所有方法都适合，有兴趣 可以自己逐个尝试)。

$(‘div‘).html(function (index) { //通过匿名函数赋值，并传递 index
return ‘我是‘ + (index+1) + ‘号 div‘;
});
$(‘div‘).html(function (index, value) { //还可以实现追加内容
return ‘我是‘ + (index+1) + ‘号 div：‘+value ;
});

注意：我们也可以使用 attr()来创建 id 属性，但我们强烈不建议这么做。这样会导致整 个页面结构的混乱。当然也可以创建 class 属性，但后面会有一个语义更好的方法来代替 attr() 方法，所以也不建议使用

removeAttr()方法，删除元素指定的属性，参数是要删除的属性名称

$(‘div‘).removeAttr(‘title‘); //删除指定的属性

四．元素样式操作

元素样式操作包括了直接设置 CSS 样式、增加 CSS 类别、类别切换、删除类别这几种 操作方法。而在整个 jQuery 使用频率上来看，CSS 样式的操作也是极高的，所以需要重点 掌握。

第一百六十六节，jQuery，基础 DOM 和 CSS 操作

原文：http://www.cnblogs.com/adc8868/p/6505915.html