<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>JQ动画</title>

    </head>

    <style>

        a{display: inline-block;background:#34daa2;border:1px solid #34daa2;padding:3px 15px;color: #fff;}

        .box{

            background: plum;

            padding:20px;

            color: #fff;

            width: 300px;

            display: none;

        }

        .span2{

            display: none;

        }

    </style>

    <body>

        <a href="#" onclick="boxClick()">点击<span class="span1">▶</span> <span class="span2">▼</span></a>

        <div class="box">

            一、JQ鼠标事件<br />

            1.click()事件；<br />

            2.dbclick事件；(表单验证、全选、反选)<br />

            3.focusin();获取焦点事件，可作用于父级<br />

            4.focusout();失去焦点事件，可作用于父级<br />

            5.mousedown();鼠标按下事件，和click有区别（鼠标按下就触发事件）<br />

            6.mouseup();鼠标抬起事件，和mousedown()事件结合起来就是click事件<br />

            7.mousemove()；鼠标移动事件<br />

            8.mouseover()；鼠标移入事件<br />

            9.mouseout()；鼠标移出事件<br />

            例：mouseover和mouseout可以写成链式写法：<br />

            $('p').mouseenter(function(){<br />

                $(this).css('color','pink')<br />

            }).mouseleave(function(){<br />

                $(this).css('color','blue')<br />

            })

        </div>

    </body>

</html>

<script src="https://cdn.bootcss.com/jquery/2.1.2/jquery.min.js"></script>

<script type="text/javascript">

    function boxClick(){

        if($('.box').is(':hidden')){

            $('.box').slideDown(500);

            $('.span2').show(500);

            $('.span1').hide(500);

        }else{

            $('.box').slideUp(500);

            $('.span2').hide(500);

            $('.span1').show(500);

        }

    }

</script>

JQ——利用一个开关，点击一个按钮完成展开收起功能的更多相关文章

  1. 当你输入一个网址/点击一个链接，发生了什么？（以www.baidu.com为例）

    >>>点击网址后,应用层的DNS协议会将网址解析为IP地址: DNS查找过程: 浏览器会检查缓存中有没有这个域名对应的解析过的IP地址,如果缓存中有,这个解析过程就将结束. 如果用户 ...

  2. 修改jq weui自定义对话框点击确定按钮不关闭对话框

    如果我们在对话框给用户输入值时,当用户输入空值点击确定按钮时,应该给个提示然后让用户继续输入. 如果在方法里使用 return false;,结果用户输入空值时对话框还是会关闭.正确做法如下: 先设置 ...

  3. JQuery------实现点击左右按钮，切换图片功能

    如图: 代码: html @*商品主图片*@ <div class="product-img" style="display:table-cell;width:40 ...

  4. Vue 实现点击展开收起

    Vue 展开收起功能实现 之前写项目的时候提到了一个需求 展开/收起 所有内容的需求 .因之前一值是重构,自己写功能还是比较少的,于是网上搜了一下,发现很多东西其实是jq的功能 虽然可以拿过来用,但是 ...

  5. PHP——0128练习相关2——js点击button按钮跳转到另一个新页面

    js点击button按钮跳转到另一个新页面 投稿:whsnow 字体:[增加 减小] 类型:转载 时间:2014-10-10我要评论 点击按钮怎么跳转到另外一个页面呢?点击图片要跳转到新的页面时,怎么 ...

  6. 用html5(requestFullscreen) js实现点击一个按钮使浏览器全屏效果

    项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...

  7. 问题：asp.net 点击button按钮调到页面顶部；结果：asp.net点击一个按钮，使页面跳转到本面页上的指定位置

    asp.net点击一个按钮,使页面跳转到本面页上的指定位置 (2011-04-19 16:46:51) 转载▼ 标签: it   最近在做一个项目. 用到标题所说的功能. 实现方法: 1.在aspx中 ...

  8. 页面上有3个输入框：分别为max，min，num；三个按钮：分别为生成，排序，去重；在输入框输入三个数字后，先点击生成按钮，生成一个数组长度为num，值为max到min之间的随机整数点击排序，对当前数组进行排序，点击去重，对当前数组进行去重。 每次点击之后使结果显示在控制台

    <!DOCTYPE html> <html> <head> <!-- 页面上有3个输入框:分别为max,min,num:三个按钮:分别为生成,排序,去重: 在 ...

  9. 作用域通信对象：session用户在登录时通过`void setAttribute(String name,Object value)`方法设置用户名和密码。点击登录按钮后，跳转到另外一个页面显示用户

    作用域通信对象:session session对象基于会话,不同用户拥有不同的会话.同一个用户共享session对象的所有属性.作用域开始客户连接到应用程序的某个页面,结束与服务器断开连接.sessi ...

随机推荐

  1. Django学习之三：django-admin 和 项目manage.py程序

    目录 Django django-admin 和 项目manage.py程序 它俩是什么? 命令程序用法 常用命令 Django django-admin 和 项目manage.py程序 它俩是什么? ...

  2. Fundebug后端Java异常监控插件更新至0.3.1，修复Maven下载失败的问题

    摘要: 0.3.1修复Maven下载失败的问题. 监控Java应用 1. pom.xml 配置fundebug-java依赖 <dependency> <groupId>com ...

  3. android中的相对路径

    转载请标明出处:https://www.cnblogs.com/tangZH/p/9939655.html  1.同个文件夹访问 D:\Java\main\A.java D:\Java\main\B. ...

  4. vs文件上传失败--超过最大字符限制

    一.问题 在文件上传时,会遇到大文件上传失败. >F12查看报错网络请求返回结果 >问题分析 由于vs上传文件默认的字符大小控制. 二.解决方法 >在web.config中修改或添加 ...

  5. 用canvas给视频图片添加特效

    Canvas制作视频图片特效 1. Canvas介绍 1.1Canvas是html5上的一个画布标签,功能有点类似java的swing.可以在canvas上画线条 弧线, 文字 就是画布的功能. 具体 ...

  6. 使用django 中间件在所有请求前执行功能

    django中间是一个轻级,低耦合的插件,用来改变全局的输入和输出. 一 如何使用中间件 定义中间件 注册中间件 # 这是一个中间件代码片段的说明,在各个位置的代码将在何时执行 def simple_ ...

  7. SQL根据细粒度为天的查询

    当我们集成了一些前端框架,在某些展示页面上往往具有某些查询条件.而这其中日期查询的处理又较为麻烦,此处,我罗列了一种当前台上传了一种默认的date格式的日期查询数据至后台未经Controller或Se ...

  8. python 实例四

    https://www.cnblogs.com/evablogs/p/6754981.html 题目:输入某年某月某日,判断这一天是这一年的第几天? 程序分析: 月份天数: 月份 天数 2 平年28天 ...

  9. Linux IO 模型

    Linux 中主要有五种IO模式:阻塞IO, 非阻塞IO, IO 多路复用,信号驱动IO和异步IO; 如果从同步非同步,阻塞非阻塞角度来看,又可以分为:同步阻塞IO, 同步非阻塞IO,异步阻塞IO和异 ...

  10. JavaScript -- 原型：prototype的使用

    JavaScript -- 原型:prototype的使用 在 JavaScript 中,prototype 是函数的一个属性,同时也是由构造函数创建的对象的一个属性. 函数的原型为对象. 它主要在函 ...