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 相关文章推荐
图片完美缩放
Sep 07 Javascript
Prototype Selector对象学习
Jul 23 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 Javascript
Jquery简单实现GridView行高亮的方法
Jun 15 Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 Javascript
javascript 利用arguments实现可变长参数
Nov 21 Javascript
Vue数据监听方法watch的使用
Mar 28 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 Javascript
页面点击小红心js实现代码
May 26 Javascript
VUEX 数据持久化,刷新后重新获取的例子
Nov 12 Javascript
利用javaScript处理常用事件详解
Apr 14 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垃圾回收机制引用计数器概念分析
2013/06/24 PHP
JQuery从头学起第一讲
2010/07/04 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
2015/08/07 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
详解RequireJS按需加载样式文件
2017/04/12 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
浅谈如何通过node.js对数据进行MD5加密
2018/05/16 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
Vue.js添加组件操作示例
2018/06/13 Javascript
小程序hover-class点击态效果实现
2019/02/26 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
python操作ie登陆土豆网的方法
2015/05/09 Python
python实现图片变亮或者变暗的方法
2015/06/01 Python
详解python 发送邮件实例代码
2016/12/22 Python
Python 安装setuptools和pip工具操作方法(必看)
2017/05/22 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
python3用PIL把图片转换为RGB图片的实例
2019/07/04 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
python使用socket实现的传输demo示例【基于TCP协议】
2019/09/24 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
铭立家具面试题
2012/12/06 面试题
质检员岗位职责
2013/12/17 职场文书
研究生考核个人自我鉴定
2014/03/27 职场文书
委托书怎样写
2014/08/30 职场文书
物业保洁员岗位职责
2015/02/13 职场文书
2015年大学组织委员个人工作总结
2015/10/23 职场文书
2019求职信大礼包
2019/05/15 职场文书