jQuery中hide()方法用法实例


Posted in Javascript onDecember 24, 2014

本文实例讲述了jQuery中hide()方法用法。分享给大家供大家参考。具体分析如下:

此方法可以将匹配元素隐藏。

hide()方法的用法:
此方法如果没有对隐藏效果加以时间限定,那么匹配元素会被瞬间隐藏。例如:

$("div").hide()

以上代码可以将所有div元素瞬间隐藏。
如果方法对隐藏效果加以时间限定,那么匹配元素将会在限定的事件内以比较优雅的形式隐藏。例如:
$("div").hide(2000)

以上代码可以将所有div元素在2000毫秒(2秒)内隐藏。
此方法也可以在隐藏完成后触发一个回调函数。例如:
$("div").hide(2000,function(){alert("我隐藏好了")});

实例代码:
<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>hide()函数-三水点靠木</title> 

<style type="text/css">

div{

  color:blue;

  background-color:green;

  width:100px;

  height:100px;

  margin-top:10px;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("#first").click(function(){

    $(".first").hide();

  })

  $("#second").click(function(){

    $(".second").hide(2000,function(){alert("我隐藏好了")});

  })

})

</script>

</head>

<body>

  <div class="first"></div>

  <div class="second"></div>

  <button id="first">瞬间隐藏</button>

  <button id="second">优雅的隐藏</button>

</body>

</html>

以上代码能够在隐藏完成以后触发回调函数,于是弹出一个提示框。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jquery uaMatch源代码
Feb 14 Javascript
extjs两个tbar问题探讨
Aug 08 Javascript
jquery text(),val(),html()方法区别总结
Nov 04 Javascript
jquery中对于批量deferred的处理方法
Jan 22 Javascript
jquery css 设置table的奇偶行背景色示例
Jun 03 Javascript
利用jquery实现瀑布流3种案例
Sep 18 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
webpack构建的详细流程探底
Jan 08 Javascript
JS中this的指向以及call、apply的作用
May 06 Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 Javascript
使用p5.js临摹动态图片
Nov 04 Javascript
JS实现页面炫酷的时钟特效示例
Aug 14 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 #Javascript
jQuery的css()方法用法实例
Dec 24 #Javascript
使用javascript获取页面名称
Dec 23 #Javascript
jQuery类选择器用法实例
Dec 23 #Javascript
基于JQuery制作可编辑的表格特效
Dec 23 #Javascript
JavaScript调试工具汇总
Dec 23 #Javascript
jQuery制作简洁的多级联动Select下拉框
Dec 23 #Javascript
You might like
php中转义mysql语句的实现代码
2011/06/24 PHP
PHP读取PDF内容配合Xpdf的使用
2012/11/24 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
php使用curl获取https请求的方法
2015/02/11 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
推荐一些非常不错的javascript学习资源站点
2007/08/29 Javascript
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
2008/09/08 Javascript
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
Javascript中Array.prototype.map()详解
2014/10/22 Javascript
js实现顶部可折叠的菜单工具栏效果实例
2015/05/09 Javascript
Jquery实现顶部弹出框特效
2015/08/08 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
vue中设置、获取、删除cookie的方法
2018/09/21 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
Promise扫盲贴
2019/06/24 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
Pycharm设置界面全黑的方法
2018/05/23 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
python3.x中安装web.py步骤方法
2020/06/23 Python
美国娱乐和流行文化商品店:FYE
2017/09/14 全球购物
平民服装店创业计划书
2014/01/17 职场文书
学习退步检讨书
2014/09/28 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书
团结主题班会
2015/08/13 职场文书
Linux下搭建SFTP服务器的命令详解
2022/06/25 Servers