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对象之间的转换 jQuery对象和原声DOM
Mar 07 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
js前台分页显示后端JAVA数据响应
Mar 18 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
jQuery选择器源码解读(一):Sizzle方法
Mar 31 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 Javascript
js实现select选择框效果及美化
Aug 19 Javascript
基于javaScript的this指向总结
Jul 22 Javascript
EL表达式截取字符串的函数说明
Sep 22 Javascript
解决vue打包项目后刷新404的问题
Mar 06 Javascript
微信小程序实现跑马灯效果
Oct 21 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+jQuery+Ajax实现分页效果 jPaginate插件的应用
2015/10/09 PHP
php微信开发自定义菜单
2016/08/27 PHP
JS input 数字验证代码
2009/07/30 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
2011/10/21 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
2016/07/20 Javascript
基于js中的原型、继承的一些想法
2016/08/10 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
2016/11/05 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
JavaScript实现二维坐标点排序效果
2017/07/18 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
package.json各个属性说明详解
2020/03/11 Javascript
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
Python文件和流(实例讲解)
2017/09/12 Python
python 实现在Excel末尾增加新行
2018/05/02 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
python使用PyQt5的简单方法
2019/02/27 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
详解Python设计模式之策略模式
2020/06/15 Python
在keras中对单一输入图像进行预测并返回预测结果操作
2020/07/09 Python
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
毕业设计说明书
2014/05/07 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
Python+Appium实现自动抢微信红包
2021/05/21 Python
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS
java设计模式--建造者模式详解
2021/07/21 Java/Android
Python中time标准库的使用教程
2022/04/13 Python