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 相关文章推荐
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 Javascript
AngularJS 2.0入门权威指南
Oct 08 Javascript
学习Node.js模块机制
Oct 17 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
Mar 27 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
May 28 Javascript
vue-router的使用方法及含参数的配置方法
Nov 13 Javascript
angular 实现下拉列表组件的示例代码
Mar 09 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
Vue数字输入框组件示例代码详解
Jan 15 Javascript
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
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获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
php实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
PHP封装的HttpClient类用法实例
2015/06/17 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
2010/06/07 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
使用Python获取Linux系统的各种信息
2014/07/10 Python
Python中实现最小二乘法思路及实现代码
2018/01/04 Python
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
python实现超市商品销售管理系统
2019/10/25 Python
python用requests实现http请求代码实例
2019/10/31 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
从pandas一个单元格的字符串中提取字符串方式
2019/12/17 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
简单了解Java Netty Reactor三种线程模型
2020/04/26 Python
美国社交购物市场:MassGenie
2019/02/18 全球购物
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
抽样调查项目计划书
2014/04/24 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
经管应届生求职信范文
2014/05/18 职场文书
媒矿安全生产承诺书
2014/05/23 职场文书
应届生自荐书
2014/06/23 职场文书
质量负责人岗位职责
2015/02/15 职场文书
2015高考寄语集锦
2015/02/27 职场文书
储备店长岗位职责
2015/04/14 职场文书
网聊搭讪开场白
2015/05/28 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书