您的位置: 首页  >  文章  >  jQuery中的事件与动画

jQuery中的事件与动画

分类: 文章 • 2024-03-18 09:44:52

jQuery中的事件

事件在元素对象与功能代码中起着重要的桥梁作用。在jQuery中，事件总体分为两大类：基础事件和复合事件。

基础事件

在JavaScript中，常用的基础事件有鼠标点击事件、键盘事件、window事件、表单事件。事件绑定和处理函数的语法格式如下。

语法：

事件名=“函数名()”;

或者：

DOM对象.事件名=函数;

基础事件的各种类型

1.加载事件

所谓加载事件，也就是window事件的一种，window事件表示当用户执行某些会影响浏览器的操作时，而触发的事件。

2.鼠标事件

鼠标事件顾名思义就是当用户在文档上移动或单击鼠标时而产生的事件，常用的鼠标事件如下图所示：

jQuery中的事件与动画

3.键盘事件

键盘事件指当键盘聚焦到Web浏览器时，用户每次按下或者释放键盘上的按键时都会产生事件。常用的键盘事件如下图所示：

jQuery中的事件与动画

示例：

<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("[type=password]").keyup(function () {
            $("#events").append("keyup");
        }).keydown(function () {
            $("#events").append("keydown");
        }).keypress(function () {
            $("#events").append("keypress");
        });
        $(document).keydown(function (event) {
            if(event.keyCode=="13"){
                alert("确认要提交吗？");
            }
        })
    })
</script>

4.浏览器事件

语法：

$(selector).resize();

示例：

<script type="text/javascript">
    var num=1;
    $(document).ready(function () {
        $(window).resize(function () {
            $("#events").text(num+=1);
        });
    })
</script>

绑定事件与移除事件

在jQuery中，绑定事件与移除事件也属于基础事件，它们主要用于绑定或移除其他基础事件。

1.绑定事件

在jQuery中，如果需要为匹配的元素同时绑定一个或多个事件，则可以使用bind()方法。

语法：

bind(type,[data],fn)

bind()方法有三个参数，其中参数data不是必须的，详细说明如下表：

jQuery中的事件与动画

绑定单个事件

示例：

 <script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
 $(document).ready(function () {
  $(".on").bind("mouseover",function () {
      $(".topDown").show();
        })
    })
</script>

2.移除事件

语法：

unbind([type],[fn])

unbind()方法有两个参数，这两个参数不是必须的，当unbind()不带参数时，表示移除所绑定的全部事件。unbind()方法的参数说明如下图所示：

jQuery中的事件与动画

示例：

<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#del").click(function () {
             $("#nav li:first").unbind();
        })
    })
</script>

复合事件

1.hover()方法

在jQuery中，hover()方法用于模拟指针移入和移出事件。

语法：

hover(enter,leave);

示例：

<script type="text/javascript">
 $(document).ready(function () {
  $(".top-m .on").hover(function () {
   $(".topDown").show();
        },function () {
   $(".topDown").hide();
        })
    })
</script>

2.toggle()方法

在jQuery中，toggle()分为带参数的方法和不带参数的方法；带参数的方法用于模拟鼠标连续click事件。

语法：

toggle(fn1,fn2,....,fnN);

示例：

<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#tv_yao").click(function () {
            $("p").toggle(1000);
        })
    })
</script>

toggle()不带参数时，与show()和hide()方法的作用一样，切换元素的可见状态，如果元素是可见的，则切换为隐藏状态；如果元素是隐藏的，则切换为可见状态。

语法:

toggle();

jQuery中的动画

控制元素的显示和隐藏

1.控制元素显示

在jQuery 中，可以使用show( )方法控制元素的显示，show( )等同于$(selector).css("display","block"),除了可以控制元素的显示外，它还能定义显示元素时的效果，如显示速度。show( )的语法格式如下。

语法:
$ (selector).show( [speed],[callback])
show的参数说明
jQuery中的事件与动画

 2.控制元素隐藏

  在jQuery 中，与show( )方法对应的是hide( )方法，该方法可以控制元素隐藏。hide( )方法等同于$(selector).css("display","none" ),除了可以控制元素的隐藏外，它还能定义隐藏元素时的效果，如隐藏速度。hide( )方法的语法格式如下。

语法：

$ (selector).hide( [speed],[callback])

示例：

<script type="text/javascript">
    $(document).ready(function () {
        $(".top-m .on").hover(function () {
            $(".topDown").show("slow");
        },function () {
            $(".topDown").hide("fast");
        })
    })
</script>

改变元素透明度

1.控制元素淡入

语法：

$(selector).fadeIn([speed],[callback])

fadeIn方法的参数说明

参数 描述
speed

可选。规定元素从隐藏到可见的速度。默认为 "normal"。

可能的值：

  • 毫秒 （比如 1500）
  • "slow"
  • "normal"
  • "fast"

在设置速度的情况下，元素从隐藏到可见的过程中，会逐渐地改变其透明度（这样会创造淡入效果）。
callback

可选。fadeIn 函数执行完之后，要执行的函数。

如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数，否则不能设置该参数。

2.控制元素淡出

语法：

$(selector).fadeOut([speed],[callback])

示例：

<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
   $(document).ready(function () {
       $("#w1").click(function () {
           $("p").fadeIn("slow");
       });
       $("#w2").click(function () {
           $("p").fadeOut(2000);
       });
   })
</script>

控制元素高度

在jQuery 中，用于改变元素高度的方法是slideUp()和slideDown()。若元素的display 属性值为none,当调用slideDown( )方法时，这个元素会从上向下延伸显示，而slideUp()方法正好相反，元素从下到上缩短直至隐藏，slideUp( )和slideDown()方法的语法格式如下。

$ (selector).slideUp ([speed] ，[callback] )
$ (selector).slideDown ([speed] ，[callback] )

自定义动画

语法：

$(selector).animate({params},speed,callback)
与show( )和hide( )中的参数用法一样，自定义动画方面animate( )的参数说明如下：

params: 必须，定义形成动画的CSS 属性。

speed: 可选，规定效果时长，取值: 毫秒、fast、slow。

callback:  可选，滑动完成后执行的函数名称。







相关推荐