一、css操作方法
1、单个设置方法
$('#box').css('height', 200);
//样式值:默认为px,直接写数值也可以
样式名:可以采用驼峰命名法(推荐),也可以使用-形式
$('#box').css('backgroundColor', 'red');
$('#box').css('font-size', '30px');
2、多个设置方法
$('#box').css({
width : 100,
height : 100,
backgroundColor : 'red'
});
3、获取操作
可以获取元素计算后的样式,返回值是某个元素的某个样式值,字符串形式,带单位。
console.log($('#box').css('width'));
二、类名操作方法
1、addClass()——添加类名
$('#box').addClass('box1');
$('#box').addClass('box1 fl fr')
2、removeClass()——移除类名
$('#box').removeClass();
$('#box').removeClass('box2 box6');
3、toggleClass()——切换类名
如果某个类名存在,会被移除,如果类名不存在,会被添加
$('#box').toggleClass('box100');
$('#box').toggleClass('box100 box6');
不传参数可以移除元素所有类名,推荐使用removeClass()
$('#box').toggleClass();
4、hasClass()——用于检测某些类名是否存在
返回布尔类型值
console.log($('#box').hasClass('clearfix')); // true
//需要考虑结构中的类名顺序
console.log($('#box').hasClass('clearfix box2')); // true
console.log($('#box').hasClass('box2 clearfix')); // false
多个元素同时进行类名检测时,某个元素含有指定类名即可返回true。通常,如果没有特殊需求,不会使用这种方式。
console.log($('div').hasClass('box6'));
三、动画
1、显示隐藏
show()参数如果不传,默认是显示功能(没有动画)
hide()参数如果不传,默认是隐藏功能(没有动画)
运动时间,毫秒单位,还支持字符串参数 'fast’200, 'normal’400,'slow’600
参数2:回调函数,用于保存运动完毕后执行的操作
$('#box1').show('slow', function () {
console.log('运动执行完毕了');
});
$('#box2').hide(1000, function () {
console.log('box隐藏了');
});
2、上拉下拉
slideDown()下拉,slideUp()上拉,slideToggle()切换
参数1:运动时间,默认为400ms
参数2:回调函数
3、渐入渐出
fadeIn()渐入(透明度从0到1),fadeOut()渐出,fadeToggle()切换
fadeTo()渐变到透明度为多少的位置,通常使用较少,会对其他的运动效果造成影响
$('#box').fadeTo(1000, 0.3, function () {
console.log('box渐变到0.3了');
});
4、自定义
animate() - 用于对元素设置自定义动画操作
参数1:对象结构,表示元素要进行哪些样式的运动,必选
参数2:运动时间,可选
参数3:运动模式,默认值’swing’变速,'linear’匀速
参数4:回调函数
可选参数中可以忽略任意一个,顺序不可修改
$('#box').animate({
left : 856
}, function () {
console.log('运动完毕');
});
5、动画队列
jQuery的动画采用排队的机制,称为动画队列。新的动画需要等待旧动画执行完毕后才会执行。
stop()用于结束元素的某个旧动画,设置位置在新动画之前。
$(".box").stop().slideDown(1000);
$(".box").stop().slideUp(1000);