标签：jQuery Educoder attr DOM text 如下 设置 div 属性

任务描述

本关任务：用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. });

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

标签：jQuery,Educoder,attr,DOM,text,如下,设置,div,属性
来源： https://www.cnblogs.com/Tim161718/p/16325360.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。