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 相关文章推荐
用js自动判断浏览器分辨率的代码
Jan 28 Javascript
使用js+jquery实现无限极联动
May 23 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
Bootstrap实现各种进度条样式详解
Apr 13 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
Dec 02 Javascript
Vue中this.$nextTick的作用及用法
Feb 04 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 Javascript
vue路由切换时取消之前的所有请求操作
Sep 01 Javascript
v-slot和slot、slot-scope之间相互替换实例
Sep 04 Javascript
vant中的toast轻提示实现代码
Nov 04 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贪婪算法解决0-1背包问题实例分析
2015/03/23 PHP
实例详解PHP中html word 互转的方法
2016/01/28 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
基于jquery的返回顶部效果(兼容IE6)
2011/01/17 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
2018/04/05 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
今天,小程序正式支持 SVG
2019/04/20 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
vue项目出现页面空白的解决方案
2019/10/31 Javascript
vue element自定义表单验证请求后端接口验证
2019/12/11 Javascript
手把手教你实现 Promise的使用方法
2020/09/02 Javascript
详解django三种文件下载方式
2018/04/06 Python
对python中Matplotlib的坐标轴的坐标区间的设定实例讲解
2018/05/25 Python
pytorch 实现模型不同层设置不同的学习率方式
2020/01/06 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
用opencv给图片换背景色的示例代码
2020/07/08 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
CSS3等相关属性制作分页导航实现代码
2012/12/24 HTML / CSS
MyFrenchPharma中文网:最大的法国药妆平台
2016/10/07 全球购物
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
艺龙旅行网酒店预订:国内、港澳台酒店
2018/06/26 全球购物
学校安全责任书
2014/04/14 职场文书
合作协议书
2014/04/23 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
委托书的写法
2014/08/30 职场文书
赔偿协议书怎么写
2015/01/28 职场文书
初中物理教学反思
2016/02/19 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫