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 相关文章推荐
Javascript的闭包
Dec 31 Javascript
JavaScript访问样式表代码
Oct 15 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
jquery 3D 标签云示例代码
Jun 12 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
Jan 19 Javascript
html的DOM中document对象anchors集合用法实例
Jan 21 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
Jul 08 Javascript
详解js中Json的语法与格式
Nov 22 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
微信小程序实现轮播图效果
Sep 07 Javascript
vue中锚点的三种方法
Jul 06 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
缅甸的咖啡简史
2021/03/04 咖啡文化
PHP获取表单textarea数据中的换行问题
2010/09/10 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
php打包网站并在线压缩为zip
2016/02/13 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
php post换行的方法
2020/02/03 PHP
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
javascript 闭包详解
2015/07/02 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
2015/08/23 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
2016/06/08 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
javascript自执行函数
2017/02/10 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
2017/08/17 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
JavaScript中this关键字用法实例分析
2018/08/24 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
[00:10]神之谴戒
2019/03/06 DOTA
python 随机数生成的代码的详细分析
2011/05/15 Python
python实现socket客户端和服务端简单示例
2014/02/24 Python
Python使用multiprocessing创建进程的方法
2015/06/04 Python
浅谈Python的Django框架中的缓存控制
2015/07/24 Python
python生成二维码的实例详解
2017/10/29 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
浅谈Django的缓存机制
2018/08/23 Python
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
教师节学生演讲稿
2014/09/03 职场文书
钱学森电影观后感
2015/06/04 职场文书
javaScript Array api梳理
2021/03/31 Javascript