<!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. Java开发笔记（三十四）字符串的赋值及类型转换

    不管是基本的char字符型,还是包装字符类型Character,它们的每个变量只能存放一个字符,无法满足对一串字符的加工.为了能够直接操作一连串的字符,Java设计了专门的字符串类型String,该类 ...

  2. offic|集成|协同OA|移动办公|

    随着互联网时代的日新月异,移动通讯技术的飞速发展,移动网络技术的更新换代,手机.平板电脑等移动设备越来越智能化.越来越多样化,人们对移动办公的需求也在日益增长.在此背景下北京博信施科技有限公司自主研发 ...

  3. QT中pro文件编写的详细说明

    如果用QTCreator开发的小伙伴,可能都知道.pro文件,但是里面的具体配置可能比较模糊,今天我就来给大家好好讲解下 一.名称解释 QT += :这个是添加QT需要的模块 TARGET = :生成 ...

  4. django源码分析 LazySetting对象

    一.django中通过LazySetting对象来获取项目的配置,LazySetting对象有什么特性?为什么使用这个对象? LazySetting顾名思义,就是延迟获取配置内容.比如,我们定义了一个 ...

  5. [20190409]pre_page_sga=true与连接缓慢的问题.txt

    [20190409]pre_page_sga=true与连接缓慢的问题.txt --//曾经遇到11g下设置pre_page_sga=true启动缓慢的问题(没有使用hugepages).--//链接 ...

  6. SQL 日期时间比较

    原先的判断是 ae.首次受理时刻 >= '2015/12/1 0:00:00'  AND ae.首次受理时刻 <= '2015/12/25 0:00:00' ,改为如下和时间变量比较 效率 ...

  7. linux服务器硬盘IO读写负载高来源定位 pt-ioprofile

    首先 .用top命令查看   1 2 3 4 5 top - 16:15:05 up 6 days,  6:25,  2 users,  load average: 1.45, 1.77, 2.14 ...

  8. 好程序员技术教程分享JavaScript运动框架

    好程序员技术教程分享JavaScript运动框架,有需要的朋友可以参考下. JavaScript的运动,即让某元素的某些属性由一个值变到另一个值的过程.如让div的width属性由200px变到400 ...

  9. pyinstaller 打包selenium脚本 取消cmd

    更改源代码 找到文件(selenium->webdriver->common->service.py) 添加一个参数

  10. bzoj3122 [SDOI2013]随机数生成器

    bzoj3122 [SDOI2013]随机数生成器 给定一个递推式, \(X_i=(aX_{i-1}+b)\mod P\) 求满足 \(X_k=t\) 的最小整数解,无解输出 \(-1\) \(0\l ...