Web网页设计之jQuery_4. jQuery操作DOM元素（上）

一、使用 jQuery 获取 DOM 元素的内容或属性

jQuery 中非常重要的部分，就是操作 DOM 的能力。

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

在这之前，我先来说一下什么是 DOM

DOM

DOM 全称是 Document Object Model，说白了，就是我们的标签，好比 <p>标签，这个就是一个 DOM节点

然后我们来看一下如何去获取 DOM 元素的内容或者属性

1. 获取内容

获取内容，我们有三种方式

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值

下面我们来看看如何去使用

text()

我们点击一下 button

可以看到，我们获取到了 p 标签中包括 strong 标签里面的所有内容

html()

还是刚刚的内个例子，我们只需要将 text 修改成 html 即可，我们再来看一下效果

可以看到，我们不仅连内容获取上了，而且连标签都有

val()

val我们其实是用来获取 DOM 节点中 value 值的，我们再来看一下

我们运行一下

可以看到，是没有问题的

2. 获取属性

我们再来看看如何去获取属性。获取属性我们需要用到 attr 这个方法，然后需要传入一个参数，好比是我们要获取 id，那我们就传一个 id，如果获取 value，那我们就传入一个 value，来看一下

运行一下

再来获取一下 type

也是OK的

二、使用 jQuery 设置 DOM 元素的内容或者属性

其实这个设置值和获取值很类似，希望大家可以举一反三

1.给 DOM 元素内容设置值

text()

我们点击一下 button

html()

html 和 text 不同的地方，html 可以设置一些标签值，我们来看一下

然后我们点击一下 button

是OK的，直接进行替换成 button

val()

这个同样，是给 input 之类有 value 属性的标签进行设置值的，我们来看一下

点击 button

OK的

2.给 DOM 元素内容设置属性

属性也是很容易的，我们来看一下

我们点击一下 button，看是不是能够使用上 a 这个样式

OK的，没有问题

三、使用 jQuery 修改 css 样式

我们可以通过 jQuery 修改 css 的样式，来看一下例子

然后我们点击一下 button，看看效果

OK的，但是，如果我们要让这个既变成黄色底，还要让文字放大，这个怎么去做？当然，jQuery 给我们已经想好了，我们来看一下

我们只需要定义成 json 串即可，我们点击一下试试看

是没有问题的