首页 技术 正文
技术 2022年11月7日
0 收藏 838 点赞 603 浏览 1067 个字

事件的分类

  基础事件:

    鼠标事件
    键盘事件
    window事件
    表单事件

  复合事件:

    鼠标光标悬停
    鼠标连续点击

基础事件:

    第七章 jQuery中的事件与动画

  实例:

    第七章 jQuery中的事件与动画

mouseenter()和mouseover()用法的区别:

  mouseover():鼠标指针进入被选元素时会触发mouseover事件,如归鼠标指针在其被选元素的子元素上来回进入时也会触发mouseover事件;

  mouseenter():鼠标指针进入被选元素时会触发mouseenter事件,如果鼠标指针在其被选元素的子元素上来回进入则不会触发mouseenter事件;

mouseout()和mouseleave()用法的区别:

  mouseout():鼠标指针离开被选元素时会触发mouseout事件,如果鼠标指针在其被选元素的子元素上来离开也会触发mouseout事件;

  mouseleave():鼠标指针离开被选元素时会触发mouseleave事件,如果鼠标指针在其被选元素的子元素上来回离开则不会触发mouseleave事件;

常用的键盘事件:

    第七章 jQuery中的事件与动画

  实例:

    第七章 jQuery中的事件与动画

浏览器事件:

    第七章 jQuery中的事件与动画

绑定事件与移除事件

    bind()方法:为匹配的元素同时绑定一个或对个事件。

    第七章 jQuery中的事件与动画

  移除事件:

    unbind()方法:在绑定事件时,可以匹配一个或多个事件,可以为匹配的元素移除单个或多个事件。

    第七章 jQuery中的事件与动画

复合事件

  hover()方法:

    用于模拟鼠标指针移动和移除的事件,当鼠标指针移至元素上时,会触发指定的第一个函数(enter);当鼠标指针移出这个元素时,会触发指定的第二个函数(leave),该方法相当于mouseenter和mouseleave事件的组合。

    第七章 jQuery中的事件与动画

  toggle()方法:

    toggle()分为带参数和不带参数的方法;带参数的方法用于模拟鼠标连续click事件。第一次单击元素,触发指定的第一个函数;当再次单击同一个元素时,则触发指定的第二个函数;如果有更多的函数,则依次触发,知道最后一个。

    第七章 jQuery中的事件与动画

  toggleClass()方法:

    第七章 jQuery中的事件与动画

    第七章 jQuery中的事件与动画

控制元素淡入和淡出:

    第七章 jQuery中的事件与动画

改变元素高度:

    第七章 jQuery中的事件与动画

自定义动画:

      $(selector).animate({params},speed,callback)

    params:必须,定义形成动画的CSS属性;

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

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

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,958
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,482
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,328
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,111
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,743
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,777