Class选择器
Css设置的样式
div{width:100px; height:100px; margin-top:10px;}
.bgc{background-color:green;}
.fontsize30{font-size:30px;}
.width200{width:200px;}
html代码
<input type='button' value='添加类' id='addclass'/>
<input type='button' value='移除类' id='removeclass'/>
<input type='button' value='判断类' id='hasclass'/>
<input type='button' value='切换类' id='toggleclass'/>
<div id = 'div1' class ='bgc'>div1</div>
jq代码
$(function(){
添加类
$('#addclass').click(function(){
$('#div1').addclass('fontsize30');//给id为div1的元素添加一个类
$('#div1').addclass('fontsize30 width200');//给id为div1的元素添加多个类
});
移除类
$('#removeclass').click(function(){
$('#div1').removeclass('fontsize30');//给id为div1的元素移除一个类
$('#div1').removeclass('fontsize30 width200');//给id为div1的元素移除多个类
$('#div1').removeclass();
});
判断类
$('#hasclass').click(function(){
Console.log($('#div1').hasclass('fontsize30'));//判断一个元素有没有某个类，如果有就返回true，如果没有就返回false
})；
切换类
$('#toggleclass').click(function(){
$('#div1').toggleclass('fontsize30');//如果元素有某个类就移除这个类。如果元素没有这个类就添加这个类
});
});
案例1（tab栏切换）
jquery动画
jquery提供了三组基本动画，这些动画都是标准的有规律的效果，jquery还提供了自定义动画的功能。
<style>
div{width:200px; height:200px; background-color:red display:none;
</style>
<body>
<input type = 'button' value = '显示' id = 'show'/>
<input type = 'button' value = '隐藏' id = 'hide'/>
<input type = 'button' value = '切换' id = 'toggle'/>
//
<input type = 'button' value = '滑入' id = 'slidedown'/>
<input type = 'button' value = '滑出' id = 'slideup'/>
<input type = 'button' value = '切换' id = 'slidetoggle'/>
//
<input type = 'button' value = '淡入' id = 'fadein'/>
<input type = 'button' value = '淡出' id = 'fadeout'/>
<input type = 'button' value = '切换' id = 'fadetoggle'/>
<input type = 'button' value = '淡入到哪里' id = 'fadeto'>
<div id = 'div1'></div>
</body>
一. 显示（show）与隐藏（hide）是一组动画
$(function(){
//显示：show（）；
//参数1:代表动画执行的时长 毫秒数，也可以是代表时长的字符串 fast normar slow
//参数2:代表动画执行完毕后的回调函数
$('#show').click(function(){
//给id为div1的元素动画显示
$('#div1').show();//这个方法没有参数，那就没有动画效果。
//如果想要有动画效果那就给参数
$('#div1').show('2000');
$('#div1').show('fast');//200毫秒
$('#div1').show('normal');//400毫秒
$('#div1').show('slow');//600毫秒
$('#div1').show('pengli');//如果代表时长的单词写错了，就相当于写了normal
//有回调函数
$('#div1').show(2000, function(){
Alert('动画执行完毕')；
});
})；
//隐藏
$('#hide').click(function(){
$('#div1').hide();//没有参数没有动画效果
$('#div1').hide(2000);//有动画效果
$('#div1').hide(2000,function(){// hide（）；也有回调函数
Arlet('隐藏了')；
})；
});
//toggle切换
$('#toggle').click(function(){ //如果元素时隐藏状态就动画显示，如果元素时显示状态就动画隐藏
$('#div1').toggle(1000);
});
});
二.滑入（slidedown）与滑出（slidedown与切换slidetoggle）效果与卷帘门类似
$(function{
//滑入slidedown（参数1，参数2）；
参数1:动画执行的时长
参数2:动画执行完毕后的回调函数
$('#slidedown').click(function(){
$('div1#').slidedown(2000);//要是没有给参数相当于给了一个默认时长，normal
//也有回调函数
$('#div1').slidedown(2000,function(){
Alert('滑入完成了')；
})；
})；
//滑出 slideup（）；
$('#slideup').click(function(){
$('#div1').slideup(2000);//没有给参数相当于normal
//也有回调函数
$('#div1').slideup(2000,function(){
Alert('滑出完成了')；
})；
})；
//切换 slidetoggle（）；
$('#slidedowm').click(function(){ //元素是隐藏状态就滑入，元素是显示状态就滑出
$('#div1').slidetoggle(1000);
});
})
案例2（下拉菜单）
三.淡入（fadein）与淡出（fadeout）与切换（fadetoggle）
//淡入 ：fadein（）；
$(function(){
$('fadein').click(function(){
//让id为div1的元素淡入
$('#div1').fadein(1000);//不给参数相当于给了一个默认值normal
//也有回调函数
$('#div1').fadein(2000,function(){
Alert('淡入完成了')；
})；
})；
//淡出
$('#fadeout').click(function(){
//让id为div1的元素淡出
$('#div1').fadeout(1000);//不给参数相当于给了一个normal
//也有回调函数
$('#div1').fadeout(1000,function(){
Alert('淡出完成了')；
})；
})；
//切换 fadetoggle
$('#fadetoggle').click(function(){
$('#div1'),fadetoggle(1000);
});
//淡入到哪里 fadeto
$('fadeto').click(function(){
$('#div1').fadeto(1000,0.5);
});
});
自定义动画 animate
$(function(){
//自定义动画：animate（）；
//参数1:必选的 对象 代表的是需要做动画的属性
///参数2:可选的 代表执行动画的时长
/参数3:可选的 easing 代表的是缓动的还匀速的 linear（匀速） swing（缓动） 默认不写的话是缓动
//参数4:动画执行完毕后的回调函数
$(#lr800).click(function(){
$('#div1').animate({ //让id为div1的元素移动到800那个位置。
Left:800,
},2000,'linear',function(){
arlet('动画执行完毕了')；
})；
//也可以
$('#div1').animate({
Left:800;
width:200;
height:200;
opacity:0.5;
},2000,'linear',function(){}
$('#div1').naimate({
left:400,
width:300,
height:300;
Top:150;
opacity:1
},2000);
});
案例3（关机动画）
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
