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入门教程(7) History历史对象
Jan 31 Javascript
firefox插件Firebug的使用教程
Jan 02 Javascript
javascript,jquery闭包概念分析
Jun 19 Javascript
基于jQuery的图片大小自动适应实现代码
Nov 17 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
JS和Jquery获取和修改label的值的示例代码
Jan 15 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
Jul 01 Javascript
JavaScript html5 canvas绘制时钟效果
Mar 01 Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
Sep 26 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
Aug 20 Javascript
通过原生vue添加滚动加载更多功能
Nov 21 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用户指南-cookies部分
2006/10/09 PHP
php下通过伪造http头破解防盗链的代码
2010/07/03 PHP
php 传值赋值与引用赋值的区别
2010/12/29 PHP
深入解析PHP垃圾回收机制对内存泄露的处理
2013/06/14 PHP
php获取$_POST同名参数数组的实现介绍
2013/06/30 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
PHP基于PDO扩展操作mysql数据库示例
2018/12/24 PHP
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
jQuery插件简单实现方法
2015/07/18 Javascript
通用javascript代码判断版本号是否在版本范围之间
2015/11/29 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
利用Vue v-model实现一个自定义的表单组件
2017/04/27 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
vue 实现 rem 布局或vw 布局的方法
2019/11/13 Javascript
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
Django异步任务之Celery的基本使用
2019/03/23 Python
10招!看骨灰级Pythoner玩转Python的方法
2019/04/15 Python
python opencv 批量改变图片的尺寸大小的方法
2019/06/28 Python
python flask搭建web应用教程
2019/11/19 Python
Python使用ElementTree美化XML格式的操作
2020/03/06 Python
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
台湾演唱会订票网站:StubHub台湾
2019/06/11 全球购物
领导干部群众路线教育实践活动剖析材料
2014/10/10 职场文书
单位委托书
2014/10/15 职场文书
教师读书活动心得体会
2016/01/14 职场文书
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android