<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p3{
color: gold;
}
.p2{
font-size: 20px;
}
</style>
<script src="js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
//attr方法 获取属性值
/*var $attr = $('p').attr('id');
console.log($attr);*/
//attr方法 设置属性值
//$('p').attr('name','hello');
//通过attr 方法 给标签添加多个属性
使用 大括号包裹多组 每组属性使用逗号分隔,属性名和属性值之间用冒号分隔
$('p').attr({'id':'one',
'name':'hello',
'class':'yuan'})
//removeAttr()移除标签的属性
//$('p').removeAttr('class');
addClass() 给标签添加类名 给标签增加新的类名,而不是覆盖类名
//$('p').addClass("p3")
//hasClass() 判断标签是否具备某个类名
返回值为 true false
/*var $bool = $('p').hasClass('p4');
console.log($bool);*/
//removeClass()移除某个类名
/*$('p').removeClass('p3')*/
//toggleClass 根据当前标签是否有某个类名,判断是添加还是删除该类名;
$('p').toggleClass('p3');
例子:点击按钮交换颜色
$('button').click(function(){
//每次点击按钮 变换颜色
$('p').toggleClass('p3');
});
})
</script>
</head>
<body>
<p id="p1" class="p2 p3">一只乌鸦口渴了</p>
<button>切换颜色</button>
</body>
</html>