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 相关文章推荐
js中对象的声明方式以及数组的一些用法示例
Dec 11 Javascript
jQuery中ajax的get()方法用法实例
Dec 26 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
让图片跳跃起来  javascript图片轮播特效
Feb 16 Javascript
JavaScript绑定事件监听函数的通用方法
May 14 Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
Feb 11 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 Javascript
bootstrap Table的一些小操作
Nov 01 Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
Jan 21 Javascript
js实现跳一跳小游戏
Jul 31 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服务器实现多session并发运行
2006/10/09 PHP
php 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
PHP中echo和print的区别
2014/08/28 PHP
Thinkphp多文件上传实现方法
2014/10/31 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
用javascript实现计算两个日期的间隔天数
2007/08/14 Javascript
jquery中的事件处理详细介绍
2013/06/24 Javascript
Asp.Net alert弹出提示信息的几种方法总结
2014/01/29 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
jQuery实现页面顶部下拉广告
2016/12/30 Javascript
Node.js利用debug模块打印出调试日志的方法
2017/04/25 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
iView框架问题整理小结
2018/10/16 Javascript
vue element中axios下载文件(后端Python)
2019/05/10 Javascript
Vue Autocomplete 自动完成功能简单示例
2019/05/25 Javascript
python获取当前时间对应unix时间戳的方法
2015/05/15 Python
Python内建数据结构详解
2016/02/03 Python
Python 专题三 字符串的基础知识
2017/03/19 Python
从DataFrame中提取出Series或DataFrame对象的方法
2018/11/10 Python
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
python文件拆分与重组实例
2018/12/10 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
python文件路径操作方法总结
2020/12/21 Python
加拿大消费电子和手机购物网站:The Source
2017/01/28 全球购物
Expedia印度尼西亚站:预订酒店、廉价航班和度假套餐
2018/01/31 全球购物
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
汽车服务工程专业自荐信
2014/09/02 职场文书
2015年结对帮扶工作总结
2015/05/04 职场文书
信仰纪录片观后感
2015/06/08 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
校运会广播稿
2015/08/19 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
压缩Redis里的字符串大对象操作
2021/06/23 Redis
box-shadow单边阴影的实现
2023/05/21 HTML / CSS