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 相关文章推荐
jquery post方式传递多个参数值后台以数组的方式进行接收
Jan 11 Javascript
jquery parent和parents的区别分析
Oct 02 Javascript
Javascript window对象详解
Nov 12 Javascript
javascript实现切换td中的值
Dec 05 Javascript
深入探密Javascript数组方法
Jan 08 Javascript
AngularJS仿苹果滑屏删除控件
Jan 18 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
JavaScript如何对图片进行黑白化
Apr 10 Javascript
vue加载完成后的回调函数方法
Sep 07 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 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
第四节--构造函数和析构函数
2006/11/16 PHP
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
PHP程序员的技术成长规划
2016/03/25 PHP
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
Javascript中的Array数组对象详谈
2014/03/03 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
JSON格式的键盘编码对照表
2015/01/29 Javascript
js实现点击链接后延迟3秒再跳转的方法
2015/06/05 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
封装获取dom元素的简单实例
2016/07/08 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
vue完成项目后,打包成静态文件的方法
2018/09/03 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
python正则分组的应用
2013/11/10 Python
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
详解Python中heapq模块的用法
2016/06/28 Python
Django1.7+python 2.78+pycharm配置mysql数据库
2016/10/09 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
python多维数组分位数的求取方式
2020/03/03 Python
django在开发中取消外键约束的实现
2020/05/20 Python
使用CSS3的rem属性制作响应式页面布局的要点解析
2016/05/24 HTML / CSS
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
数学专业推荐信范文
2013/11/21 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
党支部季度考核意见
2015/06/02 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android