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 相关文章推荐
mailto的使用技巧分享
Dec 21 Javascript
javascript代码运行不出来执行错误的可能情况整理
Oct 18 Javascript
JavaScript中的ArrayBuffer详细介绍
Dec 08 Javascript
JS选取DOM元素的简单方法
Jul 08 Javascript
Vue.js实现拖放效果的实例
Sep 30 Javascript
javascript实现简易计算器
Feb 01 Javascript
js实现延迟加载的几种方法
Apr 24 Javascript
微信小程序仿朋友圈发布动态功能
Jul 15 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
Jun 18 Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 Javascript
详解node.js 事件循环
Jul 22 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弹出对话框实现重定向代码
2014/01/23 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
PHP微信开发之文本自动回复
2016/06/23 PHP
PHP使用PHPExcel删除Excel单元格指定列的方法
2016/07/06 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
JavaScript错误处理
2015/02/03 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
2015/06/24 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
基于gulp合并压缩Seajs模块的方式说明
2016/06/14 Javascript
JavaScript实现实时更新系统时间的实例代码
2017/04/04 Javascript
详解AngularJS 路由 resolve用法
2017/04/24 Javascript
详解Angular2 关于*ngFor 嵌套循环
2017/05/22 Javascript
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
Angular排序实例详解
2017/06/28 Javascript
react-native 完整实现登录功能的示例代码
2017/09/11 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
js实现一个简易计算器
2020/03/30 Javascript
js实现鼠标拖拽div左右滑动
2020/01/15 Javascript
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
Python 分布式缓存之Reids数据类型操作详解
2020/06/24 Python
有750多个顶级品牌的瑞士时尚在线:ABOUT YOU
2017/01/04 全球购物
三星美国官网:Samsung美国
2017/02/06 全球购物
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
商务英语专业自荐信
2013/10/14 职场文书
行政文员岗位职责
2013/11/08 职场文书
初中科学教学反思
2014/01/21 职场文书
我们的节日清明节活动总结
2014/04/30 职场文书
入党个人总结范文
2015/03/02 职场文书
2016大学迎新欢迎词
2015/09/29 职场文书
教你漂亮打印Pandas DataFrames和Series
2021/05/29 Python
MySQL七种JOIN类型小结
2021/10/24 MySQL
零基础学java之循环语句的使用
2022/04/10 Java/Android