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 相关文章推荐
xml分页+ajax请求数据源+dom取结果实例代码
Oct 31 Javascript
jQuery对表单的操作代码集合
Apr 06 Javascript
疯狂Jquery第一天(Jquery学习笔记)
May 11 Javascript
jquery制作 随机弹跳的小球特效
Feb 01 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
Sep 06 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
vue实现axios图片上传功能
Aug 20 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
Sep 18 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
vue表单数据交互提交演示教程
Nov 13 Javascript
JavaScript编写开发动态时钟
Jul 29 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
实例(Smarty+FCKeditor新闻系统)
2007/01/02 PHP
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
解决laravel5中auth用户登录其他页面获取不到登录信息的问题
2019/10/08 PHP
JavaScript高级程序设计 扩展--关于动态原型
2010/11/09 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
JS取文本框中最小值的简单实例
2013/11/29 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
深入理解逻辑表达式的用法 与或非的用法
2016/06/06 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
vue的diff算法知识点总结
2018/03/29 Javascript
JS实现数组的增删改查操作示例
2018/08/29 Javascript
vsCode安装使用教程和插件安装方法
2020/08/24 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
vue swipe自定义组件实现轮播效果
2019/07/03 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
python with statement 进行文件操作指南
2014/08/22 Python
Python数据类型详解(四)字典:dict
2016/05/12 Python
用Python设计一个经典小游戏
2017/05/15 Python
Python读取word文本操作详解
2018/01/22 Python
Python实现时间序列可视化的方法
2019/08/06 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
Python基于Socket实现简单聊天室
2020/02/17 Python
python里反向传播算法详解
2020/11/22 Python
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
预备党员入党思想汇报
2014/01/04 职场文书
交通安全演讲稿
2014/01/07 职场文书
2015年乡镇发展党员工作总结
2015/03/31 职场文书
如何用python反转图片,视频
2021/04/24 Python
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python