jQuery属性操作之html属性操作
2024-10-03 20:12:38
jQuery的属性操作， 是对html文档中的属性进行读取、设置和移除操作。比如，attr()、 removeAttr()。
1. attr()
attr()可以设置属性值或者返回被选元素的属性值
1.1 使用attr()获取值
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>attr()获取值</title>
<script type="text/javascript" src="jquery.js"></script>
<script> $(function () {
var cla = $("div").attr("class");
console.log(cla);
var id = $("div").attr("id");
console.log(id);
}) </script>
</head>
<body>
<div class="divClass" id="divId"></div>
</body>
</html>
结果为：
1.2 使用attr()设置值
1.2.1 使用attr()设置一个值
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>attr() Demo</title>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(function () {
$("div").attr("class", "box");
})
</script>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
结果显示为：
1.2.2 使用attr()设置多个值
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>attr() Demo</title>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(function () {
$("div").attr({
"class": "divClass",
"id": "divId"
});
})
</script>
</head>
<body>
<div></div>
</body>
</html>
设置效果为:
2. removeAttr()
移除属性
2.1 删除单个属性
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>removeAttr() Demo</title>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(function () {
$("div").removeAttr("class");
$("div").removeAttr("id");
})
</script>
</head>
<body>
<div class="divClass" id="divId"></div>
</body>
</html>
设置效果为：
2.2 removeAttr()设置多个属性值
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>removeAttr() Demo</title>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(function () {
$("div").removeAttr("class id");
})
</script>
</head>
<body>
<div class="divClass" id="divId"></div>
</body>
</html>
显示结果为：
最新文章
- 基于SVN的项目管理——集中与分散
- BZOJ-1067 降雨量 线段树+分类讨论
- IOS基础之 (十二) Block
- DFS(剪枝) POJ 1724 ROADS
- 李洪强iOS开发之keychain的使用
- XtraBackup原理5
- Python比较函数__cmp__
- localtunnel.me 原理流程浅析
- java桌面项目打包_by icewee_写得太棒了，直接转载了
- 一个很简单的SqlServer生成常用C#语句工具的诞生
- 工作总结：MFC调用Windows自带新建、保存对话框代码
- HDOJ1232 并查集
- iconv 文件编码转换
- python 集合相关操作
- 在JS中如何判断所输入的是一个数、整数、正数、非数值？
- WebApi上传文件
- [HDFS_add_3] HDFS 机架感知
- 【php增删改查实例】第十三节 - EasyUI列格式化
- MT【35】用复数得到的两组恒等式
- hdu2255 奔小康赚大钱，最大权匹配，KM算法