jQuery中的事件和动画效果

Posted 2020-07-11

刚刚学习了jqyery的一些事件和动画，下面我来总结一下：

1.基础事件

1.window事件，它的对应方法是ready()，$(document).ready()方法是事件模块中最重要的一个函数，可以极大的提高web应用程序的响应速度。(不做过多的讲解)

2.鼠标事件

鼠标事件就是用户在文档上移动或者点击时引发的操作。

1.click();

2.mouseout();

3.mouseout();

 $(function () {
            $(‘li‘).on(‘mouseenter‘,function () {
                $(this).css(‘background‘, ‘pink‘);
            }).on(‘mouseout‘,function () {
                $(this).css(‘background‘, "");
            })
            $("li").off("mouseout");
        })

上面这段代码把鼠标事件展示出来了。

3.键盘事件

方法有：keydown()  keyup()  keypress()

$(document).keydown(function(event)){
if(event.keyCode==‘13‘)
}

4.表单事件

表单事件是所有事件中类型最稳定，且支持最稳定的事件之一。

当元素获得焦点时会触发focus事件，失去焦点会触发blur事件。

下面我来写一个例子

        $(function () {
            $("[name=zh]").focus(function () {
                $(this).addClass(‘myclass‘)
            });
            $("[name=zh]").blur(function () {
                $(this).removeClass(‘myclass‘);
            })

        })

获得焦点会变颜色，blur就会移除添加的元素。

5.绑定事件与移除事件

在jquery绑定一个或者多个事件可以使用 bind() 或者 on() 2者等价，推荐使用 on()，移除事件可以使用 unbind()  或者 off().

例子：

   $(function () {
            $(‘li‘).on(‘mouseenter‘,function () {
                $(this).css(‘background‘, ‘pink‘);
            }).on(‘mouseout‘,function () {
                $(this).css(‘background‘, "");
            })
            $("li").off("mouseout");
        })

6.复合事件

在jquery中 复合事件方法：hover()和toggle()

hover()方法的作用是模拟鼠标悬停事件，当鼠标移动到元素上时会触发第一个函数，鼠标移出这个元素时 会触发第二个函数 和mouseover mouseout一样

代码：

$(‘#mum‘).hover(function(){
$(#mu).css("display","block");
},function(){
$(#mu).css("display","none");
});
});

toggle() 模拟鼠标连续点击事件 第一次单击元素，触发第一个函数，在单击同一个元素会触发第二个函数 

代码和hover()的形式一样，不做过多演示。

 

 

最后在说一下jquery中的动画

控制元素显示和隐藏

1.控制元素显示

语法：$(selector).show([speed],[callback])

2.元素隐藏

语法：$(selector).hide([speed],[callback])

通过上面2个语法可以使元素自由的显示和隐藏。

 

 

改变元素透明度

1控制元素淡入

2控制元素淡出

淡入语法:$(selector).fadeIn([],[])

淡出语法：$(selector).fadeOut([],[])

代码如下：

 $(function () {
           $("[type=button]").bind("click", function () {
               $("div").animate({
                   borderWidth: 10



               }, 5000).animate({

                   fontSize: "50px",


               }, { queue: false, duration: 5000 });

           })
       })

注意： queue 指 是否队列，fales就是假，这样就会几个动画一起执行，不会出现先执行一个元素再执行下一个元素。