jQuery 学习-样式篇(四):jQuery 设置和删除元素的属性
推荐阅读
Helm3(K8S 资源对象管理工具)视频教程:https://edu.csdn.net/course/detail/32506
Helm3(K8S 资源对象管理工具)博客专栏:https://blog.csdn.net/xzk9381/category_10895812.html
本文原文链接:https://blog.csdn.net/xzk9381/article/details/111869886,转载请注明出处。如有发现文章中的任何问题,欢迎评论区留言。
一、设置、获取和修改属性及属性值
1. 设置单个属性和属性值
使用 $(‘DOM’).attr() 可以设置元素的属性和属性值:
<!DOCTYPE html>
<html>
<head><title></title><script src="jquery-1.12.4.js"></script><script type="text/javascript">$(document).ready(function (){$('#mydiv').attr('name','xuzk');})</script>
</head>
<body><div id="mydiv"></div>
</body>
</html>
2. 获取已存在的属性
使用 $(‘DOM’).attr() 也可以判断是否存在该属性,如果存在则返回属性值,如果不存在则返回 undefined:
<!DOCTYPE html>
<html>
<head><title></title><script src="jquery-1.12.4.js"></script><script type="text/javascript">$(document).ready(function (){$('#mydiv').attr('name','xuzk');console.log($('#mydiv').attr('name'));console.log($('#mydiv').attr('age'));})</script>
</head>
<body><div id="mydiv"></div>
</body>
</html>
3. 重新设置属性值
对于已存在的属性,还可以使用 $(‘DOM’).attr() 重新设置属性值:
<!DOCTYPE html>
<html>
<head><title></title><script src="jquery-1.12.4.js"></script><script type="text/javascript">$(document).ready(function (){$('#mydiv').attr('name','xuzk');console.log($('#mydiv').attr('name'));$('#mydiv').attr('name','aaron');console.log($('#mydiv').attr('name'));})</script>
</head>
<body><div id="mydiv"></div>
</body>
</html>
4. 同时设置多个属性值
$(‘DOM’).attr() 也可以同时设置多个属性值,方法是将所有的属性值以 JSON 对象的方式传递进去:
<!DOCTYPE html>
<html>
<head><title></title><script src="jquery-1.12.4.js"></script><script type="text/javascript">$(document).ready(function (){$('#mydiv').attr({'name':'xuzk','age':18,'sex':'male'});})</script>
</head>
<body><div id="mydiv"></div>
</body>
</html>
5. 使用函数返回值作为属性值
$(‘DOM’).attr() 还支持使用函数的返回值作为属性值:
<!DOCTYPE html>
<html>
<head><title></title><script src="jquery-1.12.4.js"></script><script type="text/javascript">$(document).ready(function (){$('#mydiv').attr('age',function (){return 18;});})</script>
</head>
<body><div id="mydiv"></div>
</body>
</html>
二、删除属性和属性值
使用 $(‘DOM’).removeAttr() 可以删除指定的属性:
<!DOCTYPE html>
<html>
<head><title></title><script src="jquery-1.12.4.js"></script><script type="text/javascript">$(document).ready(function (){$('#mydiv').attr('age','18');console.log($('#mydiv').attr('age')); // 输出属性值$('#mydiv').removeAttr('age');console.log($('#mydiv').attr('age')); // 输出 undefined})</script>
</head>
<body><div id="mydiv"></div>
</body>
</html>
需要注意的是,一次只能删除一个属性,但是可以使用链式操作的办法删除多个属性:
<!DOCTYPE html>
<html>
<head><title></title><script src="jquery-1.12.4.js"></script><script type="text/javascript">$(document).ready(function (){$('#mydiv').attr({'name':'xuzk','age':'18'});$('#mydiv').removeAttr('age').removeAttr('name');})</script>
</head>
<body><div id="mydiv"></div>
</body>
</html>
本文原文链接:https://blog.csdn.net/xzk9381/article/details/111869886,转载请注明出处。如有发现文章中的任何问题,欢迎评论区留言。
jQuery 学习-样式篇(四):jQuery 设置和删除元素的属性相关推荐
- jQuery 学习-样式篇(八):jQuery 设置元素的 CSS 样式
推荐阅读 Helm3(K8S 资源对象管理工具)视频教程:https://edu.csdn.net/course/detail/32506 Helm3(K8S 资源对象管理工具)博客专栏:https: ...
- jQuery 学习-样式篇(五):jQuery 设置元素的 html 结构或 text 内容
推荐阅读 Helm3(K8S 资源对象管理工具)视频教程:https://edu.csdn.net/course/detail/32506 Helm3(K8S 资源对象管理工具)博客专栏:https: ...
- jQuery 学习-样式篇(三):jQuery 选择器类型详解
推荐阅读 Helm3(K8S 资源对象管理工具)视频教程:https://edu.csdn.net/course/detail/32506 Helm3(K8S 资源对象管理工具)博客专栏:https: ...
- jQuery 学习-样式篇(九):jQuery 存储和删除元素私有数据的方法
推荐阅读 Helm3(K8S 资源对象管理工具)视频教程:https://edu.csdn.net/course/detail/32506 Helm3(K8S 资源对象管理工具)博客专栏:https: ...
- jQuery 学习-样式篇(七):jQuery 控制元素类属性
推荐阅读 Helm3(K8S 资源对象管理工具)视频教程:https://edu.csdn.net/course/detail/32506 Helm3(K8S 资源对象管理工具)博客专栏:https: ...
- jQuery 学习-样式篇(六):jQuery 获取和设置表单元素的值
推荐阅读 Helm3(K8S 资源对象管理工具)视频教程:https://edu.csdn.net/course/detail/32506 Helm3(K8S 资源对象管理工具)博客专栏:https: ...
- jQuery 学习-样式篇(二):jQuery 对象与原生 DOM 对象
推荐阅读 Helm3(K8S 资源对象管理工具)视频教程:https://edu.csdn.net/course/detail/32506 Helm3(K8S 资源对象管理工具)博客专栏:https: ...
- jQuery 学习-样式篇(一):如何引用 jQuery
推荐阅读 Helm3(K8S 资源对象管理工具)视频教程:https://edu.csdn.net/course/detail/32506 Helm3(K8S 资源对象管理工具)博客专栏:https: ...
- JQuery学习04篇(层次选择器)
直接po图和代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
最新文章
- 【网络编程】之七、select聊天室
- postgresql建表带注释_postgresql建表带自增id和注释语句
- ubuntu下常用服务器的构建
- MySQL(6)视图
- 循环小数是分数集合吗_人教版小学数学三年级上册 分数的简单计算 教案、课件,公开课视频...
- HDU 1004 Let the Balloon Rise (map)
- Sql Server系列:日期和时间函数
- C# 数组练习题及答案解析
- 思科模拟器 简单网络连接操作
- 3年出货5000万颗!国内老牌芯片商用平头哥玄铁处理器研发新芯片
- HDU 1114 iggy-Bank(完全背包)
- 3D图形学矩阵完全解析傻瓜版
- 小程序实现简单语音聊天
- TensorFlow2学习笔记:3、鸢尾花数据集载入
- 磨刀不误砍柴工(一)-高效的第一步
- 如何区分项目组合管理,项目集管理,和项目管理
- 江城武汉,一座离开后会怀念的城市
- 计算机新建没有excel,win7系统右键新建没有word、Excel、ppT选项的图文教程
- python 单词纠错_用 Python 实现英文单词纠错功能
- import express from 'express'; ^^^^^^^ SyntaxError: Unexpected identifier at Module._com