一、addClass() - 向被选元素添加一个或多个类
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div,p").addClass("important");
});
});
</script>
<style type="text/css">
.important{font-weight:bold; font-size:xx-large;}
.blue{color:blue;}
</style>
</head>
<body>
<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<div>这是非常重要的文本！</div><br>
<button>向元素添加类</button>
</body>
也可以在 addClass() 方法中规定多个类：
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
$("#div1").addClass("important blue");
});
});
</script>
<style type="text/css">
.important{font-weight:bold; font-size:xx-large;}
.blue{color:blue;}
</style>
</head>
<body>
<div id="div1">这是一些文本。</div>
<div id="div2">这是一些文本。</div><br>
<button>向第一个 div 元素添加多个类</button>
</body>
二、removeClass() - 从被选元素删除一个或多个类
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
});
</script>
<style type="text/css">
.important{font-weight:bold; font-size:xx-large;}
.blue{color:blue;}
</style>
</head>
<body>
<h1 class="blue">标题 1</h1>
<h2 class="blue">标题 2</h2>
<p class="blue">这是一个段落。</p>
<p>这是另一个段落。</p><br>
<button>从元素上删除类</button>
</body>
三、hasClass() - 对被选元素进行判断是否有该类
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
$("h1").click(function(){
if($(this).hasClass("blue")){
$(this).removeClass("important");
}else{
/*...............*/
}
});
});
</script>
<style type="text/css">
.important{font-weight:bold; font-size:xx-large;}
.blue{color:blue;}
</style>
</head>
<body>
<h1 class="blue important">标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>切换 CSS 类</button>
</body>
四、toggleClass() - 对被选元素进行添加/删除类的切换操作
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");//切换css类，当类存在时，就删除，不存在时就添加，必须要有点击动作
});
});
</script>
<style type="text/css">
.important{font-weight:bold; font-size:xx-large;}
.blue{color:blue;}
</style>
</head>
<body>
<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>切换 CSS 类</button>
</body>
默认的 CSS 类切换只能是无样式和指定样式之间的切换，如果想实现样式 red和样式 blue之间的切换还必须自己写一些逻辑。
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
$('div').click(function () {
$(this).toggleClass('red'); //一开始切换到样式 red
if ($(this).hasClass('red')) { //判断样式 red 存在后
$(this).removeClass('blue'); //删除样式 blue
} else {
$(this).toggleClass('blue'); //添加样式 blue，这里也可以 addClass
}
});
});
</script>
<style type="text/css">
.blue{ color:blue;}
.red{ color:red;}
.size{ font-size:36px;}
.green{ color:green;}
</style>
</head>
<body>
<div>JQuery1</div>
<div>JQuery2</div>
</body>
.toggleClass()方法提供了传递匿名函数的方式，来设置你所需要切换的规则。
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
/* $('div').click(function () {
$(this).toggleClass(function () { //传递匿名函数，返回要切换的样式
return $(this).hasClass('red') ? 'blue' : 'red'; //这里有个缺陷red添加进去后就删除不了
});
});
*/
$('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">
.blue{ color:blue;}
.red{ color:red;}
.size{ font-size:36px;}
.green{ color:green;}
</style>
</head>
<body>
<div class="blue">JQuery1</div>
<div>JQuery2</div>
</body>
五、css() - 设置或返回被选元素的一个或多个样式属性
1、返回指定的 CSS 属性的值：
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
alert("Background color = " + $("p").eq(1).css("background-color"));//这里可以通过eq()这个方法来选择第几个p标签
});
</script>
</head>
<body>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
</body>
在 CSS 获取上，我们也可以获取多个 CSS 样式，而获取到的是一个对象数组，如果用传统方式进行解析需要使用 for in 遍历。
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
var box = $('p').css(['color', 'height', 'width']); //得到多个 CSS 样式的数组对象
alert(box);//返回的是一个对象数组object
/*
for (var i in box) { //逐个遍历出来
alert(i + ':' + box[i]);
}
*/
//上面使用了js的原生方法，这里jQuery 提供了一个遍历工具专门来处理这种对象数组，$.each()方法，这个方法可以轻松的遍历对象数组。
$.each(box, function (attr, value) { //遍历 JavaScript 原生态的对象数组
alert(attr + ':' + value);
});
//使用$.each()可以遍历原生的 JavaScript 对象数组，如果是 jQuery 对象的数组怎么使用.each()方法呢？
$('p').each(function (index, element) { //index 为索引，element 为元素 DOM对象
alert(index + ':' + element);
});
});
</script>
<style type="text/css">
p{ background-color:#ff0000;}
</style>
</head>
<body>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
</body>
2、设置指定的 CSS 属性：
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
$("p").eq(0).css("background-color","#FF0");//这里可以通过eq()这个方法来选择第几个p标签
});
</script>
</head>
<body>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<p>这是一个段落。</p>
</body>
在需要设置多个样式的时候，我们可以传递多个 CSS 样式的键值对即可。
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
$("p").eq(0).css({
"background-color":"#FF0",
"font-size":"36px"
});//这里可以通过eq()这个方法来选择第几个p标签
});
</script>
</head>
<body>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<p>这是一个段落。</p>
</body>
如果想设置某个元素的 CSS 样式的值， 但这个值需要计算我们可以传递一个匿名函数。
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
$('p').css('width', function (index, value) {
alert(value);
return (parseInt(value) - 500) + 'px';
});
});
</script>
</head>
<body>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<p>这是一个段落。</p>
</body>