
一、jQuery addClass() 方法
向不同的元素添加 class 属性。在添加类时,您也可以选取多个元素
<style>
.aa
{
color:red;
}; </style>
<body> <h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p> <button>给元素添加class属性</button>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").addClass("aa");//把上面的class属性aa,添加给“h1/h2/p” });
});
</script>
二、jQuery removeClass() 方法
<style>
.aa
{
color:red;
}; </style>
<body> <h1 class="aa">标题 1</h1>
<h2 class="aa">标题 2</h2>
<p class="aa">这是一个段落。</p> <button>给元素移除class属性</button>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").removeClass("aa");//给“h1/h2/p”移除aa属性 });
});
</script>
三、jQuery toggleClass() 方法:被选元素进行添加/删除类的切换操作
<style>
.aa
{
color:red;
}; </style>
<body> <h1 class="aa">标题 1</h1>
<h2 class="aa">标题 2</h2> <button>切换</button>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("h1,h2").toggleClass("aa");//给“h1/h2/p”切换aa属性 });
});
</script>
四、jQuery css() 方法
设置多个 CSS 属性
<body> <p style="background-color:#ff0000">这是一个段落。</p> <button>切换</button>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color":"yellow","font-size":"200%"});
});
});
</script>
尺寸:
jQuery width() 和 height() 方法
width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
jQuery innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的宽度(包括内边距)。
innerHeight() 方法返回元素的高度(包括内边距)。
jQuery outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的宽度(包括内边距和边框)。
outerHeight() 方法返回元素的高度(包括内边距和边框)。