<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style type="text/css">
.anco{ width:500px; height:390px; background-color:#FF0000; font-size:16px; color:#000000}
.coco{ width:600px; height:500px; background-color:#CC0000; font-size:14px; color:#FFFF00}
</style>
</head>
<body>
<div class="anco">
中国电信
</div>
<button id="ribi" type="button">改变css背景</button>
<button id="rxj" type="button">改变css背景并且把里面的文字颜色和字号大小改大，文字颜色改变</button>
<button id="txjb" type="button">增加css样式</button>
<button id="txjj" type="button">删除css样式</button>
<button id="rixj" type="button">增加删除css样式在一个按钮上</button>
<script type="text/javascript">
$(document).ready(function(){//页面加载完在执行jq
$("#ribi").click(function(){//当鼠标点击这个按钮时则执行
$(".anco").css("background-color","#0066FF")//找到anco这个元素，把他的背景色换了
});
//下面在学另一种
$('#rxj').click(function(){//当鼠标点击这个按钮时则执行
$('.anco').css({'background-color':'#000','font-size':'25px','color':'#fff'})//这个是一行内给css加多个效果合并的书写方法
});
//下面在学另一种，给css在增加一个样式
$('#txjb').click(function(){//当鼠标点击这个按钮时则执行
$('.anco').addClass('coco')//这个css样式名不要加.也不能加#
});
//下面是删除css样式
$('#txjj').click(function(){
$('.anco').removeClass('coco')//这个css样式名不要加.也不能加#
});
//增加删除css样式在一个按钮上
$('#rixj').click(function(){
$('.anco').toggleClass('coco');
});
});
</script>