class类
| 方法 | 描述 |
|---|---|
| addClass(); | 添加类 |
| addClass(); | 移除类 |
| addClass(); | 判断类 |
| addClass(); | 切换类 |
<head>
<style>
.color{
color: aqua;
}
</style>
</head>
<body>
<input type="button" id="addClass" value="添加类"></input>
<input type="button" id="removeClass" value="移出类"></input>
<input type="button" id="hasClass" value="判断类"></input>
<input type="button" id="toggleClass" value="切换类"></input>
<div id="div" style="width: 100px;height: 100px;background-color: red;">div</div>
</body>
<script>
$(function () {
// 添加类 addClass('类名');
$('#addClass').click(function () {
$('#div').addClass('color'); //如果要添加多个类，用空格隔开
})
// 移除类 removeClass('类名')
$('#removeClass').click(function (){
$('#div').removeClass('color'); //如果要添加多个类，用空格隔开
//移除所有的类
$('#div').removeClass();
})
// 判断类 hasClass()
$('#hasClass').click(function (){
// 判断一个元素有没有某个类，如果有就返回true，反之返回false
console.log($('#div').hasClass('color'));
})
// 切换类 toggleClass()
$('#toggleClass').click(function (){
// 如果元素有某个类就移除这个类，如果没有则添加
console.log($('#div').toggleClass('color'));
})
})
</script>
jQuery动画
三组基本动画
- 显示(show)与隐藏(hide)是一组动画
- 滑入(slideDown)与滑出(slideUp)与切换(slideToggle)，效果与卷帘门类似
- 淡入(fadeln)与淡出(fadeOut)与切换(fadeToggle)
显示与隐藏
<head>
<style>
div{
width: 200px;
height: 200px;
background-color: aqua;
display: none;
}
</style>
</head>
<body>
<input type="button" id="show" value="显示动画"></input>
<input type="button" id="hide" value="隐藏动画"></input>
<input type="button" id="toggle" value="切换动画"></input>
<div id="div"></div>
</body>
<script>
$(function () {
// 显示动画 show()
// 如果show()没有参数则没有动画
// 动画需要参数，有两个
// 参数1：执行动画的时长，毫秒数/代表时长的字符串(fast , normal , slow)
// 参数2：代表动画执行完毕后的回调函数
$('#show').click(function () {
$('#div').show(2000,function(){
alert('执行完毕')
});
$('#div').show('fast'); //200毫秒
$('#div').show('normal'); //400毫秒
$('#div').show('slow'); //600毫秒
// 注 ：如果代表时长的字符串写错了，就会相当于 normal
})
// 隐藏动画 hide()
// 如果hide()没有参数则没有动画
// 动画需要参数，有两个
// 参数1：执行动画的时长，毫秒数/代表时长的字符串(fast , normal , slow)
// 参数2：代表动画执行完毕后的回调函数
$('#hide').click(function () {
$('#div').hide(2000,function(){
alert('执行完毕')
});
})
// 切换动画 toggle()
// 如果元素是隐藏状态就动画显示，反之动画隐藏
$('#t
最低0.47元/天 解锁文章
751
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
