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 相关文章推荐
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
JavaScript阻止浏览器返回按钮的方法
Mar 18 Javascript
javascript实现复选框选中属性
Mar 25 Javascript
js图片轮播手动切换效果
Nov 10 Javascript
AngularJS轻松实现双击排序的功能
Aug 30 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
webuploader分片上传的实现代码(前后端分离)
Sep 10 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 Javascript
Vue组件跨层级获取组件操作
Jul 27 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
创建、调用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插件 HTMLPurifier HTML解析器
2013/07/01 PHP
javascript支持firefox,ie7页面布局拖拽效果代码
2007/12/20 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
捕获和分析JavaScript Error的方法
2014/03/25 Javascript
javascript如何操作HTML下拉列表标签
2015/08/20 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
2015/11/02 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
2016/04/11 Javascript
JS组件Bootstrap实现图片轮播效果
2016/05/16 Javascript
jQuery实现的tab标签切换效果示例
2016/09/05 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
JS实现简单的选择题测评系统代码思路详解(demo)
2017/09/03 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
2019/03/16 jQuery
js核心基础之闭包的应用实例分析
2019/05/11 Javascript
简单了解常用的JavaScript 库
2020/07/16 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
Python中的类学习笔记
2014/09/23 Python
在Python中操作字典之update()方法的使用
2015/05/22 Python
python批量提取word内信息
2015/08/09 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
使用python 将图片复制到系统剪贴中
2019/12/13 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
python实现串口通信的示例代码
2020/02/10 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
servlet面试题
2012/08/20 面试题
网络编辑岗位职责范本
2014/02/10 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
英文演讲稿开场白
2014/08/25 职场文书
幼儿园八一建军节活动方案
2014/08/27 职场文书
党员考试作弊检讨书1000字
2015/02/16 职场文书
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript