jQuery操作样式

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)