本文实例讲述了JQuery样式操作、click事件以及索引值-选项卡应用。分享给大家供大家参考，具体如下：
JQuery的css函数既能读属性值，也能写属性值：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式操作</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var $div=$('#box');
var sTr=$div.css('fontSize');//读
alert(sTr);
$div.css({backgroundColor:'pink',color:'black',fontSize:'20px'})//写
});
</script>
</head>
<body>
<div id="box">div元素</div>
</body>
</html>其实不光是css函数，JQuery内的其他函数也是这样的，如果放值就是写，如果不放就是读。
样式的加减
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var $div=$('.box');
$div.addClass('big');//加入big类
$div.removeClass('red');//去除red样式类
})
</script>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: red;
}
.big{
font-size: 30px;
}
.red{
color: green;
}
</style>
</head>
<body>
<div class="box red">div元素</div>
</body>
</html>给元素绑定click事件
$('#btn1').click(function)(){
//内部的this指的是原生对象
//使用JQuery对象用$(this)
}点击事件，切换样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var $btn=$('#btn');
$btn.click(function () {//绑定事件
// var $div=$('.box');
// if(!$div.hasClass('col01')){
// alert(1);
// }
// $div.addClass('col01');
//可以简化成下面的写法
$('.box').toggleClass('col01');//切换样式
})
});
</script>
<style type="text/css">
