jQuery四：获取、设置、移除属性；attr(“href“)、attr(“href“,“http://www.baidu.com“)、removeAttr(“href“)；

article/2025/10/19 13:31:54

attr()方法是用于设置标签的属性，比如src，href，title；（这些更多的是元素的基本属性，HTML的属性）；

一：操作元素属性

（1）attr()方法：只传一个参数：获取属性

（2）attr()方法：传两个参数：设置属性

（3）attr()方法：选中的是多个元素，获取时只会获取第一个：

（4）attr()方法：选中的是多个元素，设置时会设置所有选中的元素：

（5）removeAttr()方法：移除属性的方法：

选择了一些元素后，如何对选中的元素进行操作嘞？本篇博客主要内容是，对属性的设置，包括获取属性，设置属性，移除属性

一：操作元素属性

基础代码：sample1.html

<!DOCTYPE html ><html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>操作元素属性</title><style>
.myclass {font-style: italic;color: darkblue;
}
/* 高亮css类 */
.highlight {color: red;font-size: 30px;background: lightblue;
}
</style></head><body><div class="section"><h2>jQuery选择器实验室</h2><input style="height: 24px" id="txtSelector" /><button id="btnSelect" style="height: 30px">选择</button><hr /><div><p id="welcome">欢迎来到选择器实验室</p><ul><li>搜索引擎：<a href="http://www.baidu.com">百度</a> <span> <astyle="color: darkgreen" href="http://www.so.com">360</a></span></li><li>电子邮箱：<a href="http://mail.163.com">网易邮箱</a> <span> <astyle="color: darkgreen" href="http://mail.qq.com">QQ邮箱</a></span></li><li>中国名校：<a href="http://www.tsinghua.edu.cn">清华大学</a> <span><a style="color: darkgreen" href="https://www.pku.edu.cn/">北京大学</a></span></li></ul><span class="myclass ">我是拥有myclass类的span标签</span><p class="myclass">我是拥有myclass的p标签</p><form id="info" action="#" method="get"><div>用户名：<input type="text" name="uname" value="admin" /> 密码：<inputtype="password" name="upsd" value="123456" /></div><div>婚姻状况： <select id="marital_status"><option value="1">未婚</option><option value="2">已婚</option><option value="3">离异</option><option value="4">丧偶</option></select></div><div class="left clear-left"><input type="submit" value="提交" /> <input type="reset" value="重置" /></div></form></div></div><script type="text/javascript" src="js/jquery-3.5.1.js" ></script><script type="text/javascript">var href_attr = $("a[href*='.163.com']").attr("href");alert(href_attr);</script>
</body>
</html>

…………………………

（1）attr()方法：只传一个参数：获取属性

只传一个参数：获取属性：var href_attr = $("a[href*='.163.com']").attr("href");

	<script type="text/javascript">var href_attr = $("a[href*='.163.com']").attr("href");alert(href_attr);</script>

…………………………

（2）attr()方法：传两个参数：设置属性

传递两个参数：设置属性：$("a[href*='.163.com']").attr("href","http://www.163.com");将网易邮箱的超链接的href属性设置为“http://www.163.com”；

	<script type="text/javascript">$("a[href*='.163.com']").attr("href","http://www.163.com");</script>

此时，点击“网易邮箱”超链接，会转到网易官网。

…………………………

（3）attr()方法：选中的是多个元素，获取时只会获取第一个：

选择器是选中多个元素时：

获取时：$("a").attr("href");会获取多个，但只会将获取的第一个赋值给href_attr;

	<script type="text/javascript">var href_attr = $("a").attr("href");alert(attr);</script>

…………………………

（4）attr()方法：选中的是多个元素，设置时会设置所有选中的元素：

设置时：可以将所有的都设置；

如下，会将所有的超链接，href属性都设置为：“http://www.163.com”

	<script type="text/javascript">$("a").attr("href","http://www.163.com");</script>

…………………………

（5）removeAttr()方法：移除属性的方法：

移除属性：removeAttr()方法：

移除所有a元素的href属性，其作用就是所有的超链接都失效了

	<script type="text/javascript">$("a").removeAttr("href");</script>