5.1 JQuery - 获取并设置CSS类
JQuery 拥有可操作 HTML 元素和属性的强大方法.
5.1.1 JQuery操作CSS
JQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
*下面的样式表将用于本页的所有例子：*
<style type=”text/css”>
.important {
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>5.1.2 JQuery addClass()方法
下面的例子展示如何向不同的元素添加 class 属性。
当然，在添加类时，您也可以选取多个元素：
实例1:
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});也可以在 addClass() 方法中规定多个类：
实例2：
$("button").click(function(){
$("body div:first").addClass("important blue");
});5.1.3 JQuery removeClass()方法
下面的例子演示如何在不同的元素中删除指定的 class 属性：
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});5.1.4 jQuery toggleClass()方法
下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作：
实例:
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});案例演示:
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
});
</script>
<body>
<h1 class="blue">标题 1</h1>
<h2 class="blue">标题 2</h2>
<p class="blue">这是一个段落。</p>
<p>这是另外一个段落。</p>
<br>
<button>切换 class</button>
</body>5.2 JQuery - CSS()方法
css() 方法设置或返回被选元素的一个或多个样式属性。
5.2.1 返回CSS属性
如需返回指定的 CSS 属性的值，请使用如下语法：
css("propertyname");
下面的例子将返回首个匹配元素的 background-color 值：
实例:
$("p").css("background-color");5.2.2 设置CSS属性
如需设置指定的 CSS 属性，请使用如下语法：
css("propertyname","value");
下面的例子将为所有匹配元素设置 background-color 值：
实例:
$("p").css("background-color","yellow");5.2.3 设置多个CSS属性
如需设置多个 CSS 属性，请使用如下语法：
css({"propertyname":"value","propertyname":"value",...});
下面的例子将为所有匹配元素设置 background-color 和 font-size：
实例:
$("p").css({"background-color":"yellow","font-size":"200%"});5.3 JQuery 尺寸
通过 jQuery，很容易处理元素和浏览器窗口的尺寸。
5.3.1 JQuery尺寸方法
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
5.3.2 JQuery width()方法和height()方法
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
下面的例子返回指定的 <div> 元素的宽度和高度：
实例:
$("button").click(function(){
var txt="";
txt+="div 的宽度是: " + $("#div1").width() + "</br>";
txt+="div 的高度是: " + $("#div1").height();
$("#div1").html(txt);
});
<body>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>显示 div 元素的尺寸</button>
<p>width() - 返回元素的宽度</p>
<p>height() - 返回元素的高度</p>
</body>5.3.3 JQuery innerWidth()和innerHeight()方法
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
下面的例子返回指定的 <div> 元素的 inner-width/height：
实例:
$("button").click(function(){
var txt="";
txt+="div 宽度，包含内边距: " + $("#div1").innerWidth() + "</br>";
txt+="div 高度，包含内边距: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
<body>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>显示 div 元素的尺寸</button>
<p>innerWidth() - 返回元素的宽度 (包含内边距)。</p>
<p>innerHeight() - 返回元素的高度 (包含内边距)。</p>
</body>5.3.4 JQuery outerWidth()和outerHeight()方法
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
下面的例子返回指定的 <div> 元素的 outer-width/height：
实例:
$("button").click(function(){
var txt="";
txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
<body>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>显示 div 元素的尺寸</button>
<p>outerWidth() - 返回元素的宽度 (包含内边距和边框)。</p>
<p>outerHeight() - 返回元素的高度 (包含内边距和边框)。</p>
</body>