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程序来实现动画功能
Mar 06 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
Mar 07 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
Feb 17 Javascript
Node.js编码规范
Jul 14 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
微信小程序实现传参数的几种方法示例
Jan 10 Javascript
vue.js实现带日期星期的数字时钟功能示例
Aug 28 Javascript
微信小程序列表中item左滑删除功能
Nov 07 Javascript
小程序实现悬浮搜索框
Jul 12 Javascript
vue 获取url里参数的两种方法小结
Nov 12 Javascript
解决vue页面刷新,数据丢失的问题
Nov 24 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
解析curl提交GET,POST,Cookie的简单方法
2013/06/29 PHP
php将图片文件转换成二进制输出的方法
2015/06/10 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
js中hash和ico的关联分析
2015/02/05 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
2015/05/03 Javascript
文字垂直滚动之javascript代码
2015/07/29 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
2020/04/28 Javascript
优化Python代码使其加快作用域内的查找
2015/03/30 Python
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
transform python环境快速配置方法
2018/09/27 Python
python实现的自动发送消息功能详解
2019/08/15 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
英国领先的餐饮折扣俱乐部:Gourmet Society
2020/07/26 全球购物
产品促销活动策划书
2014/01/15 职场文书
幼儿教师暑期培训方案
2014/08/27 职场文书
农林经济管理专业自荐信
2014/09/01 职场文书
新闻人物通讯稿
2014/10/09 职场文书
销售员态度差检讨书
2014/10/26 职场文书
安全生产先进个人总结
2015/02/15 职场文书
介绍信范文大全
2015/05/07 职场文书
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL