jQuery操作属性方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery第十节课</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
//jQuery操作属性方法
//attr() 方法设置或返回被选元素的属性值;
console.log($('a').attr('href'))
//$('a').attr('class','box')
// 同时设置多个属性
// $('选择器').attr({属性名:值, 属性名:值 ...})
$('a').attr({class:'box',id:'box'})
//removeAttr()从被选元素中移除属性;
$('p').click(function(){
$(this).removeAttr('class','text')
})
})
</script>
<style type="text/css">
*{margin:0;padding:0;}
p,div{margin:20px auto;text-align: center;}
div{width:300px;height:50px;line-height: 50px;}
p{width:300px;height:300px;line-height: 300px;background:#9BF25A;}
.box{padding: 8px;background: #ff6500;text-decoration: none;}
#box{color: #fff;}
.text{font-size: 30px;color: #fff;}
</style>
</head>
<body>
<div>
<a href="0133.cn"> HTML 中文网!</a>
<p class="text">~ 鼠标移上有惊喜 ~</p>
</div>
</body>
</html>
