博客
关于我
JQuery框架动画、遍历以及事件的绑定、案例【广告显示和隐藏、抽奖】
阅读量:291 次
发布时间:2019-03-01

本文共 2211 字,大约阅读时间需要 7 分钟。

JQuery 高级

一、JQuery动画

(一)、三种方式显示和隐藏元素

1、默认显示和隐藏方式

  1. show([speed,[easing],[fn]])
  • 参数:
    ①、 speed:动画的速度。三个预定义的值(“slow”,“normal”, “fast”)或表示动画时长的毫秒数值(如:1000)
    ②、 easing:用来指定切换效果,默认是"swing",可用参数"linear"
    Ⅰ、swing:动画执行时效果是 先慢,中间快,最后又慢
    Ⅱ、linear:动画执行时速度是匀速的
    ③、 fn:在动画完成时执行的函数,每个元素执行一次。
  1. hide([speed,[easing],[fn]])
  2. toggle([speed],[easing],[fn])
    
Insert title here
div显示和隐藏

页面效果如下:

在这里插入图片描述

2. 滑动显示和隐藏方式

  1. slideDown([speed],[easing],[fn])
  2. slideUp([speed,[easing],[fn]])
  3. slideToggle([speed],[easing],[fn])

页面效果如下:

在这里插入图片描述

3. 淡入淡出显示和隐藏方式

  1. fadeIn([speed],[easing],[fn])
  2. fadeOut([speed],[easing],[fn])
  3. fadeToggle([speed,[easing],[fn]])

页面效果如下:

在这里插入图片描述

二、JQuery遍历

(一)、js的遍历方式

  • for(初始化值;循环结束条件;步长)
    
  • 北京
  • 上海
  • 天津
  • 重庆

在这里插入图片描述

(二)、jq的遍历方式

  1. jq对象.each(callback)
  • 第一种方式:【但是这种方法不能获取前面的索引】
  • 第二种方式:【通过添加下面的索引和元素对象的值就可以获取元素的索引值】
  1. 语法:
    jquery对象.each(function(index,element){});
    index:就是元素在集合中的索引
    element:就是集合中的每一个元素对象
    this:集合中的每一个元素对象

运行的效果和上面的for循环运行的结果一样。

  1. 回调函数返回值:
    ①、true:如果当前function返回为false,则结束循环(break)。
    ②、 false:如果当前function返回为true,则结束本次循环,继续下次循环(continue)
  1. $.each(object, [callback])
  1. for..of: jquery 3.0 版本之后提供的方式
  • for(元素对象 of 容器对象)

(三)、事件绑定

  1. jquery标准的绑定方式
    ①、 jq对象.事件方法(回调函数);
    ②、 注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。
    

链式编程:【给name绑定鼠标移动到元素之上事件,绑定鼠标移除事件。】

【注意:$("#name").foucus();让文本输入框获取焦点。】

③、 表单对象.submit();//让表单提交

  1. on绑定事件/off解除绑定
    ①、 jq对象.on("事件名称",回调函数)
    ②、 jq对象.off("事件名称")
    ③、如果off方法不传递任何参数,则将组件上的所有事件全部解绑

在这里插入图片描述

3. 事件切换:toggle
①、 jq对象.toggle(fn1,fn2...)
②、 当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2…

    
点击按钮变成绿色,再次点击红色
  • 注意:1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。
    <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
    在这里插入图片描述

(四)、案例

1. 广告显示和隐藏

  • 需求:

    ①、 当页面加载完,3秒后。自动显示广告
    ②、 广告显示5秒后,自动消失。

  • 分析:

    ①、 使用定时器来完成。setTimeout (执行一次定时器)
    ②、 分析发现JQuery的显示和隐藏动画效果其实就是控制display
    ③、 使用 show/hide方法来完成广告的显示

    
广告的自动显示与隐藏
正文部分

在这里插入图片描述

2. 抽奖

  • 分析:
  1. 给开始按钮绑定单击事件

    ①、 定义循环定时器
    ②、 切换小相框的src属性【定义数组,存放图片资源路径、生成随机数。数组索引】

  2. 给结束按钮绑定单击事件

    ①、 停止定时器
    ②、 给大相框设置src属性

    
jquery案例之抽奖

在这里插入图片描述

转载地址:http://eqja.baihongyu.com/

你可能感兴趣的文章
mysql CPU使用率过高的一次处理经历
查看>>
Multisim中555定时器使用技巧
查看>>
MySQL CRUD 数据表基础操作实战
查看>>
multisim变压器反馈式_穿过隔离栅供电:认识隔离式直流/ 直流偏置电源
查看>>
mysql csv import meets charset
查看>>
multivariate_normal TypeError: ufunc ‘add‘ output (typecode ‘O‘) could not be coerced to provided……
查看>>
MySQL DBA 数据库优化策略
查看>>
multi_index_container
查看>>
MySQL DBA 进阶知识详解
查看>>
Mura CMS processAsyncObject SQL注入漏洞复现(CVE-2024-32640)
查看>>
Mysql DBA 高级运维学习之路-DQL语句之select知识讲解
查看>>
mysql deadlock found when trying to get lock暴力解决
查看>>
MuseTalk如何生成高质量视频(使用技巧)
查看>>
mutiplemap 总结
查看>>
MySQL DELETE 表别名问题
查看>>
MySQL Error Handling in Stored Procedures---转载
查看>>
MVC 区域功能
查看>>
MySQL FEDERATED 提示
查看>>
mysql generic安装_MySQL 5.6 Generic Binary安装与配置_MySQL
查看>>
Mysql group by
查看>>