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 事件属性绑定带参数的函数
Mar 13 Javascript
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
Jul 06 Javascript
js 获取服务器控件值的代码
Mar 05 Javascript
js实现的日期操作类DateTime函数代码
Mar 16 Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
Jul 13 Javascript
将查询条件的input、select清空
Jan 14 Javascript
JS中的==运算: [''] == false —&gt;true
Jul 24 Javascript
vue中的event bus非父子组件通信解析
Oct 27 Javascript
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 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查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
PHP IF ELSE简化/三元一次式的使用
2011/08/22 PHP
QQ登录简单实现代码
2021/03/09 Javascript
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
2012/10/11 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
图片懒加载插件实例分享(含解析)
2017/01/09 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
解决vue attr取不到属性值的问题
2018/09/18 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
2020/10/22 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
用python的requests第三方模块抓取王者荣耀所有英雄的皮肤实例
2017/12/14 Python
Tensorflow卷积神经网络实例
2018/05/24 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例
2020/02/25 Python
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
英国网上花店:Bunches
2016/11/29 全球购物
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
高三体育教学反思
2014/01/29 职场文书
淘宝客服专员岗位职责
2014/04/11 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
停电调休通知
2015/04/16 职场文书
代理词怎么写
2015/05/25 职场文书
平凡的世界读书笔记
2015/06/25 职场文书
python实现图片九宫格分割的示例
2021/04/25 Python