jQuery中show与hide方法用法示例


Posted in Javascript onSeptember 16, 2016

本文实例分析了jQuery中show与hide方法用法。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
    *{font-size:12px;}
    div{width:600px;margin:auto;}
    #control{background-color:gold;padding:10px;}
  </style>
  <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $("#btnDisplay").click(function () {
        $("#message").show(3000);
      });
      $("#btnHide").click(function () {
        $("#message").hide(3000);
      });
    });
  </script>
</head>
<body>
  <div id="control">
    <input id="btnDisplay" type="button" value="显示div" />
    <input id="btnHide" type="button" value="隐藏div" />
  </div>
  <div id="message">
    mouseover、mouseenter的区别:div里套div。见备注。和事件冒泡有关系。<br /> 
    不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件 <br />
    只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件(穿过子元素不会触发)
  </div>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
TextArea不支持maxlength的解决办法(jquery)
Sep 13 Javascript
jQuery.clean使用方法及思路分析
Jan 07 Javascript
JavaScript排序算法之希尔排序的2个实例
Apr 04 Javascript
JQuery中DOM事件绑定用法详解
Jun 13 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
Jun 14 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
详解如何去除vue项目中的#——History模式
Oct 13 Javascript
JS实现的邮箱提示补全效果示例
Jan 30 Javascript
JavaScript中this关键字用法实例分析
Aug 24 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 #Javascript
Javascript函数中的arguments.callee用法实例分析
Sep 16 #Javascript
AngularJs 动态加载模块和依赖
Sep 15 #Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
Sep 15 #Javascript
基于JS+Canves实现点击按钮水波纹效果
Sep 15 #Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 #Javascript
Node.js connect ECONNREFUSED错误解决办法
Sep 15 #Javascript
You might like
新手配置 PHP 调试环境(IIS+PHP+MYSQL)
2007/01/10 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
php实现的通用图片处理类
2015/03/24 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
JQuery自定义事件的应用 JQuery最佳实践
2010/08/01 Javascript
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
使用jQuery简单实现模拟浏览器搜索功能
2014/12/21 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
JavaScript无阻塞加载和defer、async详解
2017/02/26 Javascript
vue2.0父子组件间通信的实现方法
2017/04/19 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Sanic框架基于类的视图用法示例
2018/07/18 Python
在python中bool函数的取值方法
2018/11/01 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
python用700行代码实现http客户端
2021/01/14 Python
韩国现代百货官网:Hmall
2018/03/21 全球购物
美国在线奢侈品寄售商店:Luxury Garage Sale
2018/08/19 全球购物
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
介绍一下常见的木马种类
2014/11/15 面试题
简历中自我评价分享
2013/10/09 职场文书
前厅收银主管岗位职责
2014/02/04 职场文书
女性励志书籍推荐
2019/08/19 职场文书
MySQL创建管理HASH分区
2022/04/13 MySQL
Oracle查看表空间使用率以及爆满解决方案详解
2022/07/23 Oracle