元素样式操作包括了直接设置CSS 样式、增加CSS 类别、类别切换、删除类别这几种操作方法。
而在整个jQuery 使用频率上来看，CSS 样式的操作也是极高的，所以需要重点掌握。
一、css()方法：
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(function(){
//alert($("#box").css("color"));//获取某个元素的行内样式，不同浏览器结果不一样，有些返回rgb格式的颜色值
$("#box").css("color","yellow");//设置某个元素的行内样式
});
</script>
<style type="text/css">
#box{color:red}
</style>
</head>
<body>
<div id="box" title="我是域名">发生</div>
</body>
在CSS 获取上，我们也可以获取多个CSS 样式，而获取到的是一个对象数组，如果用传统方式进行解析需要使用for in 遍历。
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(function(){
var box = $('div').css(['color', 'height', 'width']); //得到多个CSS 样式的数组对象
for (var i in box) { //逐个遍历出来
alert(i + ':' + box[i]);
}
});
</script>
<style type="text/css">
#box{color:red}
</style>
</head>
<body>
<div id="box" title="我是域名">发生</div>
</body>
jQuery 提供了一个遍历工具专门来处理这种对象数组，$.each()方法，这个方法可以轻松的遍历对象数组。
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(function(){
var box = $('div').css(['color', 'height', 'width']); //得到多个CSS 样式的数组对象
/*for (var i in box) { //逐个遍历出来
alert(i + ':' + box[i]);
}*/
$.each(box, function (attr, value) { //遍历JavaScript 原生态的对象数组
alert(attr + ':' + value);
});
});
</script>
<style type="text/css">
#box{
color:red;
height:200px;
width:300px;
}
</style>
</head>
<body>
<div id="box" title="我是域名">发生</div>
</body>
使用$.each()可以遍历原生的JavaScript 对象数组，如果是jQuery 对象的数组怎么使用.each()方法呢？
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(function(){
var box = $('div').css(['color', 'height', 'width']); //得到多个CSS 样式的数组对象
/*for (var i in box) { //逐个遍历出来
alert(i + ':' + box[i]);
}*/
/*$.each(box, function (attr, value) { //遍历JavaScript 原生态的对象数组
alert(attr + ':' + value);
});*/
$('div').each(function (index, element) { //index 为索引，element 为元素DOM
alert(index + ':' + element);
});
});
</script>
<style type="text/css">
#box{
color:red;
height:200px;
width:300px;
}
</style>
</head>
<body>
<div id="box" title="我是域名">发生</div>
<div id="" title="我是域名">发生</div>
<div id="" title="我是域名">发生</div>
</body>
在需要设置多个样式的时候，我们可以传递多个CSS 样式的键值对即可。
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(function(){
$('div').css({
'background-color' : '#ccc',
'color' : 'red',
'font-size' : '20px'
});
});
</script>
<style type="text/css">
#box{
color:red;
height:200px;
width:300px;
}
</style>
</head>
<body>
<div id="box" title="我是域名">发生</div>
<div id="" title="我是域名">发生</div>
<div id="" title="我是域名">发生</div>
</body>
如果想设置某个元素的CSS 样式的值，但这个值需要计算我们可以传递一个匿名函数。
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(function(){
$('#box').css('width', function (index, value) {
return (parseInt(value) - 500) + 'px'; //value是之前的长度，这里将全局的操作包装成局部的操作
});
});
</script>
<style type="text/css">
#box{
color:red;
height:200px;
width:800px;
}
</style>
</head>
<body>
<div id="box" title="我是域名">发生</div>
<div id="" title="我是域名">发生</div>
<div id="" title="我是域名">发生</div>
</body>
二、addClass()方法/removeClass()方法
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(function(){
$('div').addClass("box");//添加一个类
$("div").addClass("box bg");//同事添加多个类
});
</script>
<style type="text/css">
.box{
color:red;
height:20px;
width:800px;
}
.bg{
background-color:yellow;
}
</style>
</head>
<body>
<div id="" title="我是域名">发生</div>
<div id="" title="我是域名">发生</div>
<div id="" title="我是域名">发生</div>
</body>
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(function(){
$('div').removeClass("box");//删除一个类
$("div").removeClass("box bg");//同时删除多个类
});
</script>
<style type="text/css">
.box{
color:red;
height:20px;
width:800px;
}
.bg{
background-color:yellow;
}
</style>
</head>
<body>
<div class="box" title="我是域名">发生</div>
<div class="box bg" title="我是域名">发生</div>
<div class="box" title="我是域名">发生</div>
</body>
三、toggleClass()方法
我们还可以结合事件来实现CSS 类的样式切换功能。
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(function(){
$('div').click(function(){ //当点击后触发
$(this).toggleClass('box bg'); //单个样式多个样式均可
});
});
</script>
<style type="text/css">
.box{
color:red;
height:20px;
width:800px;
}
.bg{
background-color:yellow;
}
</style>
</head>
<body>
<div class="" title="我是域名">发生</div>
<div class="" title="我是域名">发生</div>
<div class="" title="我是域名">发生</div>
</body>
.toggleClass()方法的第二个参数可以传入一个布尔值，true 表示执行切换到class 类，false表示执行回默认class 类(默认的是空class)，运用这个特性，我们可以设置切换的频率。
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(function(){
var count = 0;
$('div').click(function () { //每点击两次切换一次red
$(this).toggleClass('box bg', count++ % 3 == 0);
});
});
</script>
<style type="text/css">
.box{
color:red;
height:20px;
width:800px;
}
.bg{
background-color:yellow;
}
</style>
</head>
<body>
<div class="" title="我是域名">发生</div>
<div class="" title="我是域名">发生</div>
<div class="" title="我是域名">发生</div>
</body>
默认的CSS 类切换只能是无样式和指定样式之间的切换，如果想实现样式1 和样式2之间的切换还必须自己写一些逻辑。
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(function(){
$('div').click(function () {
$(this).toggleClass('blue'); //一开始切换到样式2
if ($(this).hasClass('blue')) { //判断样式2 存在后
$(this).removeClass('red'); //删除样式1
} else {
$(this).toggleClass('red'); //添加样式1，这里也可以addClass
}
});
});
</script>
<style type="text/css">
.red{
color:red;
}
.blue{
color:blue;
}
</style>
</head>
<body>
<div class="" title="我是域名">发生</div>
<div class="" title="我是域名">发生</div>
<div class="" title="我是域名">发生</div>
</body>
上面的方法较为繁琐，.toggleClass()方法提供了传递匿名函数的方式，来设置你所需要切换的规则。
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(function(){
$('div').click(function () {
$(this).toggleClass(function () { //传递匿名函数，返回要切换的样式
return $(this).hasClass('red') ? 'blue' : 'red';
});
});
});
</script>
<style type="text/css">
.red{
color:red;
}
.blue{
color:blue;
}
</style>
</head>
<body>
<div class="" title="我是域名">发生</div>
<div class="" title="我是域名">发生</div>
<div class="" title="我是域名">发生</div>
</body>
注意：上面虽然一句话实现了这个功能，但还是有一些小缺陷，因为原来的class 类没有被删除，只不过被替代了而已。所以，需要改写一下。
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(function(){
$('div').click(function () {
$(this).toggleClass(function () {
if ($(this).hasClass('red')) {
$(this).removeClass('red');
return 'blue';
} else {
$(this).removeClass('blue');
return 'red';
}
});
});
});
</script>
<style type="text/css">
.red{
color:red;
}
.blue{
color:blue;
}
</style>
</head>
<body>
<div class="" title="我是域名">发生</div>
<div class="" title="我是域名">发生</div>
<div class="" title="我是域名">发生</div>
</body>