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知识点收藏
Feb 22 Javascript
jQuery的live()方法对hover事件的处理示例
Feb 27 Javascript
Jquery实现动态切换图片的方法
May 18 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
Dec 02 Javascript
jquery滚动条插件(可以自定义)
Dec 11 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
JavaScript模板引擎实现原理实例详解
Dec 14 Javascript
JavaScript内置对象math,global功能与用法实例分析
Jun 10 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
Nov 20 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
vue如何实现动态加载脚本
Feb 05 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实现仿Google分页效果的分页函数
2015/07/29 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
javascript 字符串连接的性能问题(多浏览器)
2008/11/18 Javascript
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
JavaScript实现存储HTML字符串示例
2014/04/21 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
2015/10/20 Javascript
JQuery实现网页右侧随动广告特效
2016/01/17 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
2016/03/30 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
JavaScript调试之console.log调试的一个小技巧分享
2017/08/07 Javascript
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
python函数参数*args**kwargs用法实例
2013/12/04 Python
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
Python函数式编程
2017/07/20 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
Python数据报表之Excel操作模块用法分析
2019/03/11 Python
Python3基本输入与输出操作实例分析
2020/02/14 Python
简述进程的启动、终止的方式以及如何进行进程的查看
2013/07/12 面试题
幼儿园八一建军节活动方案
2014/08/27 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2015年电工工作总结
2015/04/10 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
离婚民事起诉状
2015/08/03 职场文书
高三数学教学反思
2016/02/18 职场文书
springboot如何初始化执行sql语句
2021/06/22 Java/Android