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 贪吃蛇实现代码
Nov 22 Javascript
jQuery each()方法的使用方法
Mar 18 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
Bootstrap CSS组件之输入框组
Dec 17 Javascript
JS验证字符串功能
Feb 22 Javascript
AngularJS中的拦截器实例详解
Apr 07 Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
JS removeAttribute()方法实现删除元素的某个属性
Jan 11 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
VFP与其他应用程序的集成
2006/10/09 PHP
linux php mysql数据库备份实现代码
2009/03/10 PHP
php FLEA中二叉树数组的遍历输出
2012/09/26 PHP
浅析PHP绘图技术
2013/07/03 PHP
使用php-timeit估计php函数的执行时间
2015/09/06 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
关于PHP通用返回值设置方法
2017/03/31 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
jquery 表格的增行删行实现思路
2013/03/21 Javascript
jquery ui对话框实例代码
2013/05/10 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
2016/12/13 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
vue不通过路由直接获取url中参数的方法示例
2017/08/24 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
JavaScript Canvas实现验证码
2020/08/02 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
Python使用requests发送POST请求实例代码
2018/01/25 Python
Atom的python插件和常用插件说明
2018/07/08 Python
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
解决PyCharm控制台输出乱码的问题
2019/01/16 Python
Python列表切片操作实例总结
2019/02/19 Python
pycharm创建一个python包方法图解
2019/04/10 Python
Python测试模块doctest使用解析
2019/08/10 Python
Python关于反射的实例代码分享
2020/02/20 Python
基于Python fminunc 的替代方法
2020/02/29 Python
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
同学聚会老师邀请函
2014/01/28 职场文书
学习党章的体会
2014/11/07 职场文书
数学教师个人工作总结
2015/02/06 职场文书
主持稿开场白
2015/06/01 职场文书
五一放假通知怎么写
2015/08/18 职场文书