jQuery学习笔记_03day

mouseover 事件在鼠标移动到选取的元素及其子元素上时触发
mouseenter 事件只在鼠标移动到选取的元素上时触发

如果有鼠标移入事件，请使用mouseenter，而不是mouseover
鼠标离开事件使用mouseleave，就不要使用mouseout

addClass()添加类

//给id为div1得元素添加类
//添加单个类
$('#div1').addClass('fontSize30');
//添加多个类
$('#div1').addClass('fontSize30 width200');

removeClass()移除类

//移除单个类
$('#div1').removeClass('fontSize30');
//移除多个类
$('#div1').removeClass('fontSize30 width200');
//给id为div1得元素移除所有类
 $('#div1').removeClass();

hasClass()判断类

 //判断一个元素有没有某个类，如果有就返回true，没有就返回false
console.log($('#div1').hasClass('fontSize30'));

toggleClass()切换类

 //如果元素有某个类就移除这个类，如果元素没有这个类就添加这个类
 $('#div1').toggleClass('fontSize30');

show()显示
1.参数1，代表执行动画得时长，毫秒数，也可以是代表时长得字符串
2.参数2. 代表动画执行完毕后得回调函数
3.如果不给参数就没有动画效果
4.如果动画时长得单词写错了，就相当于写了normal

回调函数

hide()隐藏

toggle()切换

滑入 slideDown(参数1，参数2)
参数1，动画执行得时长
参数2，动画执行完毕后得回调函数

滑出 slideUp(参数1，参数2)

切换 slideToggle()

淡入 fadeIn(参数1,参数2)

淡出 fadeOut(参数1，参数2)

切换fadeToggle();

淡入到哪里fadeTo(参数1，参数2)
参数1：动画执行时间
参数2：透明度

自定义动画 animate

参数1：必选得 对象 代表的是需要做动画的属性
参数2：可选的 代表执行动画的时长
参数3：可选的easing代表的是缓动还是匀速 linear(匀速) swing(缓动) 默认不写是缓动
参数4：动画执行完毕后的回调函数

 $('#lr800').click(function(){
 // 让div1移动到800位置
                // $('#div1').animate({
                //     left:800,
                //     width:200,
                //     height:200,
                //     opacity:0.5,
                // },2000,'linear',function(){
                //      alert('动画执行完毕了');
                // });

                 $('#div1').animate({
                    left:800,
                    width:200,
                    height:200,
                    opacity:0.5,
                },2000,'linear',function(){
                     //既然这里是函数，那就可以写任意的代码，那就可以在这里让div1做动画
                     $('#div1').animate({
                         left:400,
                         width:300,
                         height:300,
                         top:200,
                         opacity:1,
                     })
                });

停止动画 stop()

第一个参数：是否清除队列
第二个参数：是否跳转到最终效果

 $(function(){
            //开始动画：模拟一个动画队列
            $('#start').click(function(){
                 $('div').slideDown(2000).slideUp(2000);
             });   
             //停止动画：执行stop方法
             //stop()
             //第一个参数：是否清除队列
             //第二个参数：是否跳转到最终效果
            $('#stop').click(function(){
                //$('div').stop(true,true);
                $('div').stop(true,false);
                //$('div').stop(false,true);
                //$('div').stop(false,false);
             })       
        })

第三课…