jQuery操作样式
操作css方法:
- $(‘this’).css(‘color’) //参数只写属性名,则是返回属性值
- $(‘this’).css(‘color’,‘red’) //参数是属性名,属性值,逗号分隔 设置css属性
- $(‘this’).css({‘color’:‘white’,‘font-size’:‘20px’}) //参数可以是对象形式,可以设置多种样式
操作样式之类操作:
- 添加类:$(‘div’).addClass(‘类名’) (相当于追加类名 不影响以前的类名)
- 删除类:$(‘div’).removeClass(‘类名’)
- 切换类:$(‘div’).toggleClass(‘类名’) (有就删除,没有就加)
链式编程:
$(this).css('color','red').siblings().css('color','');
Tab栏切换:
<script>
// 1.点击上部的li,当前li 添加current类,其余兄弟移除类
$(".tab_list li").click(function() {
// 链式编程
$(this).addClass('current').siblings().removeClass('current');
// 2.点击的同时,得到当前li 的索引号
let index = $(this).index();
})
// 3.让下部里面相应索引号的item显示,其余的item隐藏
$(".tab_con .item").eq(index).show().siblings().hide();
</script>
jQuery效果显示与隐藏
显示:$(‘div’).show(持续时间, 调用函数)
隐藏:$(‘div’).hide(持续时间, 调用函数)
切换:$(‘div’).toggle(持续时间, 调用函数)
jQuery效果滑动
下滑动:$(‘div’).slideDown(持续时间, 调用函数)
上滑动:$(‘div’).slideUp(持续时间, 调用函数)
切换:$(‘div’).slideToggle(持续时间, 调用函数)
jQuery简易滑动下拉菜单
鼠标经过:$(‘div’).mouseover(function(){});
鼠标离开:$(‘div’).mouseout(function(){});
事件切换 hover 就是鼠标经过和离开的复合写法:
$('.nav li').hover(function(){
$(this).children('ul').slideDown(200);
},function(){
$(this).children('ul').slideUp(200)
})
事件切换 hover 如果只写一个函数,那么鼠标经过和鼠标离开都会触发这个函数
写一个hover,配合toggle使用
$('.nav li').hover(function(){
$(this).children('ul').slideToggle(200);
})
停止排队 stop( )
stop方法 必须写在动画前面
$(this).children('ul').stop().slideToggle();
jQuery 效果淡入淡出
淡入:$(‘div’).fadeIn(持续时间,调用函数)
淡出:$(‘div’).fadeOut(持续时间,调用函数)
淡入淡出切换:$(‘div’).fadeToggle(持续时间,调用函数)
修改透明度:$(‘div’).fadeTo(持续时间,透明度) //速度和透明度必须写
jQuery自定义动画效果
自定义函数:$(‘div’).animate({键值对},持续时间);
$('div').aniamte({
left:500,
top:300,
opacity:.4,
width:500
},1000)