jQuery获取、设置、移除属性

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

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

一：操作元素属性

基础代码：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> <a
    						style="color: darkgreen" href="http://www.so.com">360</a>
    				</span>
    				</li>
    				<li>电子邮箱：<a href="http://mail.163.com">网易邮箱</a> <span> <a
    						style="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" /> 密码：<input
    						type="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>

HL🌱数字花园

探索