Educoder jQuery DOM操作 第2关：jQuery设置内容和属性

任务描述

本关任务：用jQuery设置元素的内容和属性值。效果如下：

相关知识

为了完成本关任务，你需要掌握：1.设置元素的内容，2.设置元素的属性。

设置元素的内容

基本的html结构如下：

1. <p class="first"></p>
2. <p class="second">我是第二个</p>
3. <input class="third" type="text"/>

效果如下：

如何设置上面标签的内容呢？在第一关的基础上，我们深入学习一下前面的几种方法。代码如下：

1. $(".first").text("<h3>我是第一个</h3>");
2. $(".second").html("<h3>我是第二个</h3>");
3. $(".third").val("我是第三个");

效果图如下：

可以看出：

• 这三个方法在使用上基本是一样的；

• 以text()为例，text()表示获取内容，text(content)表示设置内容。

设置元素的属性

基本的html结构如下：

1. <div class="box" id="wrap" name="容器" data-count="none">
2. </div>

如何设置该div的各种属性呢？这里用attr(att, newValue)，代码如下：

1. $("div").attr("class","alterClass");
2. $("div").attr("id","alterId");
3. $("div").attr("name","alterName");
4. $("div").attr("data-count","alterDataCount");

然后，再获取一下它们的属性，效果图如下：

上面的写法是用来设置一种属性的，可不可以设置多种属性呢？当然是可以的，上面的代码简写如下：

1. $("div").attr({
2. "class": "alterClass",
3. "id": "alterId",
4. "name": "alterName",
5. "data-count": "alterDataCount"
6. });

设置多种属性是用对象的方式来实现的。