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 validate使用攻略 第四步
Jul 01 Javascript
菜鸟javascript基础整理1
Dec 06 Javascript
js保留小数点后几位的写法
Jan 03 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
Nov 17 Javascript
JavaScript核心语法总结(推荐)
Jun 02 Javascript
javascript中获取class的简单实现
Jul 12 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
Dec 14 Javascript
Ionic2调用本地SQlite实例
Apr 22 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
Jun 04 Javascript
vue 指定组件缓存实例详解
Apr 01 Javascript
vue.js实现带日期星期的数字时钟功能示例
Aug 28 Javascript
微信小程序仿知乎实现评论留言功能
Nov 28 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 heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
php db类库进行数据库操作
2009/03/19 PHP
php中current、next与reset函数用法实例
2014/11/17 PHP
php+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
php使用explode()函数将字符串拆分成数组的方法
2015/02/17 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
js操作二级联动实现代码
2010/07/27 Javascript
推荐20家国外的脚本下载网站
2011/04/28 Javascript
你必须知道的Javascript知识点之&quot;深入理解作用域链&quot;的介绍
2013/04/23 Javascript
详解jQuery插件开发中的extend方法
2013/11/19 Javascript
从零学jquery之如何使用回调函数
2014/05/16 Javascript
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
vue.js实现刷新当前页面的方法教程
2017/07/05 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
vue.js如何将echarts封装为组件一键使用详解
2017/10/10 Javascript
jQuery实现仿京东防抖动菜单效果示例
2018/07/06 jQuery
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
2020/05/29 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
Python绑定方法与非绑定方法详解
2017/08/18 Python
Python实现随机选择元素功能
2017/09/14 Python
python3库numpy数组属性的查看方法
2018/04/17 Python
python执行CMD指令,并获取返回的方法
2018/12/19 Python
python基于socket进行端口转发实现后门隐藏的示例
2019/07/25 Python
python切片(获取一个子列表(数组))详解
2019/08/09 Python
python3 enum模块的应用实例详解
2019/08/12 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
汇智创新科技发展有限公司
2015/12/06 面试题
企业为何需要商业计划书
2013/12/26 职场文书
读书之星事迹材料
2014/05/12 职场文书
校园元旦活动总结
2014/07/09 职场文书
银行党员批评与自我批评
2014/10/15 职场文书
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python