javascript核心技术(二十八)jq的标签节点操作(三) 添加属性 attr方法

[复制链接]
查看: 1502|回复: 31
发表于 2023-1-26 13:18:12 | 显示全部楼层 | 阅读模式
首先,我们需要先说一下。
属性分为两类:
一类属性的取值为布尔类型,如 checked、selected 和 disabled 等。
另一类属性的取值为数值或字符串,如value、name、id、class等。

jQuery 官方建议:取值为布尔类型的属性,建议使用 prop() 方法来操作,而其他的属性都建议使用 attr() 方法来操作。

下面我们先来讲一下attr()方法的使用
一、添加单个属性
  1. $('#span2').attr('value','span2name');
复制代码


二、添加多个属性
  1. $('#span3').attr({'value':'span3name','sex':'男'});
复制代码


三、链式操作

  1. $('#span4').attr({'value':'span4name','sex':'男','age':20}).removeAttr('age');
复制代码
下面请看代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加属性 attr</title>
    <script src="./jquery.js"></script>
</head>
<body>
    <div id="box">
        <span id="span1" name="spanname" value="spanvalue" class="spanclass" sx="spansx">这是span1</span>
        <span id="span2">这是span2</span>
        <span id="span3">这是span3</span>
        <span id="span4">这是span4</span>
    </div>
    <div id="box1"></div>
    <div id="box2">

    </div>
</body>
<script>
    console.log($('#span2'));
    $('#span2').attr('value','span2name');
    $('#span3').attr({'value':'span3name','sex':'男'});
    $('#span4').attr({'value':'span4name','sex':'男','age':20}).removeAttr('age');
</script>
</html>

以上,我们分别用attr方法添加了单个属性、多个属性和链式操作(即在一条语句中,可以同时添加和删除属性)。
执行结果如下:
javascript核心技术(二十八)jq的标签节点操作(三) 添加属性 attr方法

以上就是关于attr方法添加属性的操作方法,请大家动手练习一下。

易博软件介绍

0

主题

12

帖子

7

积分

营销入门

Rank: 2

积分
7
发表于 2023-2-19 05:30:29 | 显示全部楼层
对初学者来说指明了方向和方法!不错!!!

0

主题

9

帖子

5

积分

营销入门

Rank: 2

积分
5
发表于 2023-3-3 07:07:26 | 显示全部楼层
8错  8错

0

主题

12

帖子

7

积分

营销入门

Rank: 2

积分
7
发表于 2023-3-13 10:39:36 | 显示全部楼层
我一定会比以前更加努力  我的理想是成为一个优秀的程序员   

0

主题

14

帖子

8

积分

营销入门

Rank: 2

积分
8
发表于 2023-3-23 14:17:33 | 显示全部楼层
^看了你文章之后,顿感自己太无知了,一点都不懂……要努力学编程了……谢谢……    没白看,我也刚开始学习编程,很有启发,也知道了一些经验,谢谢

0

主题

17

帖子

9

积分

营销入门

Rank: 2

积分
9
发表于 2023-3-28 22:09:21 | 显示全部楼层
学无止尽,多谢楼主,让我们为中国的软件事业做点什么吧!

0

主题

12

帖子

6

积分

终身会员

Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25

积分
6
发表于 2023-4-3 05:21:56 | 显示全部楼层
真的是让很受用,谢谢你的文章。  真的是学无止境啊!
发表于 2023-4-8 13:37:19 | 显示全部楼层
编程 a我不懂  但是我正要学编程呢希望我能学的不一定有你好 但也要和你一样可可 够qiang

0

主题

6

帖子

3

积分

营销入门

Rank: 2

积分
3
发表于 2023-4-13 08:28:35 | 显示全部楼层
有点怕怕的,面试这么严

0

主题

12

帖子

7

积分

营销入门

Rank: 2

积分
7
发表于 2023-4-18 00:32:54 | 显示全部楼层
不错
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1、请认真发帖,禁止回复纯表情,纯数字等无意义的内容!帖子内容不要太简单!
2、提倡文明上网,净化网络环境!抵制低俗不良违法有害信息。
3、如果你对主帖作者的帖子不屑一顾的话,请勿回帖。谢谢合作!
3、问答求助区发帖求助后,如有其他用户热心帮您解决问题后,请自觉点击设为最佳答案按钮。

 
 
QQ在线客服
QQ技术支持
工作时间:
8:00-18:00
软著登字:
1361266号
官方微信扫一扫
weixin

QQ|小黑屋|Archiver|慈众营销 ( 粤ICP备15049986号 )|网站地图

自动发帖软件 | 自动发帖器 | 营销推广软件 | 网络营销工具 | 网络营销软件 | 网站推广工具 | 网络推广软件 | 网络推广工具 | 网页推广软件 | 信息发布软件 | 网站推广工具 | 网页推广软件

Powered by Discuz! X3.4   © 2012-2020 Comsenz Inc.  慈众科技 - Collect from 深圳吉宝泰佛文化有限公司 公司地址:罗湖区黄贝街道深南东路集浩大厦A1403

返回顶部 返回列表