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 相关文章推荐
JavaScript 继承详解 第一篇
Aug 30 Javascript
jQuery中jqGrid分页实现代码
Nov 04 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Jul 21 Javascript
JS定时刷新页面及跳转页面的方法
Jul 04 Javascript
javascript结合fileReader 实现上传图片
Jan 30 Javascript
封装了jQuery的Ajax请求全局配置
Feb 05 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 Javascript
数组Array的排序sort方法
Feb 17 Javascript
vue组件Prop传递数据的实现示例
Aug 17 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
简述vue状态管理模式之vuex
Aug 29 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函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
PhpStorm terminal无法输入命令的解决方法
2016/10/09 PHP
Laravel使用支付宝进行支付的示例代码
2017/08/16 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
Laravel 实现添加多语言提示信息
2019/10/25 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
理解Javascript_14_函数形式参数与arguments
2010/10/20 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
2010/11/02 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
JS中准确判断变量类型的方法
2020/06/01 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
python 判断一个进程是否存在
2009/04/09 Python
Python中的多重装饰器
2015/04/11 Python
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
PyQT实现多窗口切换
2018/04/20 Python
python用post访问restful服务接口的方法
2018/12/07 Python
使用Python的SymPy库解决数学运算问题的方法
2019/03/27 Python
属性与 @property 方法让你的python更高效
2020/09/21 Python
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
《油菜花开了》教学反思
2014/02/22 职场文书
软件测试专业推荐信
2014/09/18 职场文书
表彰大会新闻稿
2015/07/17 职场文书
警用民用对讲机找不同
2022/02/18 无线电