1.显示与隐藏

  • show([speed,easing,function]) speed:毫秒单位的时间值
  • hide([speed,easing,function])
  • 用法:元素.show()/元素.hide()

2.代码如下

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>显示隐藏</title>
<style>
#box {
width: 300px;
height: 200px;
border: 1px solid #000;
background-color: #ccc;
}
</style>
</head> <body>
<button id="show">显示</button>
<button id="hide">隐藏</button>
<div id="box">文字</div>
<script src=" https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
<script>
$("#show").click(function() {
$("#box").show('fast', function() {
alert("元素显示成功")
})
})
$("#hide").click(function() {
$("#box").hide(2000)
})
</script>
</body> </html>

jQuery-显示与隐藏的更多相关文章

  1. js 与JQuery显示及隐藏方法

    虽然以后两种方式都能让文本信息隐藏和显示 第一种文本隐藏以后还是会占居位置, 第二种则不会占位置. <p id="p1">这是一段文本.</p> <i ...

  2. Jquery显示和隐藏的4种简单方法

    Html代码:  <div class="topicList">  <h3><span>学习天地</span></h3> ...

  3. JQuery显示,隐藏和淡入淡出效果

    为了把JQuery搞熟悉,看着菜鸟教程,一个一个例子打,边看边记,算是一晚上的一个小总结吧.加油,我很本但是我很勤奋啊.系统的了解它,就要花时间咯. <!DOCTYPE html> < ...

  4. jQuery显示和隐藏 常用的状态判断方法

    显示:show()  display:block; 隐藏:hide()   display:none; 当显示和隐藏切换的时候,需要判断此刻是显示还是隐藏,那判断条件常用以下几种方法: 1.if(th ...

  5. jQuery 显示与隐藏 tab选项卡

    方法一:使用display样式:block.none来控制文本的显示与隐藏 <div class="explain_text"> 移动互联网为企业提供了连接用户的新方式 ...

  6. jquery显示、隐藏div的方法

    $("#top_notice").css("display", "block");//第1种方法 //$("#top_notice ...

  7. Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明)

    一.隐藏和显示元素 $('#button_save_12').css('display', 'none'); // 隐藏按钮 $('#button_save_12').css('display', ' ...

  8. jQuery显示与隐藏返回顶层的箭头

    <script type="text/javascript">        $(window).scroll(function(){            var d ...

  9. jquery显示和隐藏元素

    1.$('#id').show()/$('#id').hide()/$('#id').toggle() 2.$('#id').css('display','none')/$('#id').css('d ...

  10. jquery 显示和隐藏的三种方式

     <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    & ...

随机推荐

  1. HDU1176(正推DP)

    时间和位置都可以决定这一秒捡到的馅饼数 不妨设\(dp[i][j]\)为在\(i\)秒\(j\)位置的最大收益 那么\(dp[0][5]=0\),dp数组的其他部分置成-1代表不能转移 那么对于第\( ...

  2. 第十章:Python高级编程-多线程、多进程和线程池编程

    第十章:Python高级编程-多线程.多进程和线程池编程 Python3高级核心技术97讲 笔记 目录 第十章:Python高级编程-多线程.多进程和线程池编程 10.1 Python中的GIL 10 ...

  3. JDBC07 事务

    事务 事务基本概念 一组要么同时执行成功,要么同时执行失败的SQL语句,是数据库操作的一个执行单元(比如:银行中,对账户的操作和日志的记录是一组事务) 事务开始于: -连接到数据库上,并执行一条DML ...

  4. 设计模式之GOF23备忘录模式

    备忘录模式Memento 场景: -Word文档编辑时,电脑死机或者断电,再次打开时,word提醒恢复之前的文档 -文件的撤回 核心: -就是保存某个对象内部状态的拷贝,这样以后就可以将该对象恢复到原 ...

  5. 设计者模式之GOF23命令模式

    命令模式Command 将一个请求封装为一个对象,从而使我们可用不同的请求对客户参数化:对请求排队或者记录请求日志,以及支持可撤销的操作.也称之为:动作Action模式,事务transaction模式 ...

  6. Struts2 为什么被淘汰?自己作死!

    Struts2 那些年可谓是风光无限啊,Struts2 + Spring + Hibernate 三大框架一起组成了 "SSH"----牛逼哄哄的 Java Web 框架三剑客. ...

  7. 给bootstrap右边的菜单加上右键关闭

    <ul class="rightmenu"> <li data-type="closethis">关闭当前</li> < ...

  8. Dotnet core使用JWT认证授权最佳实践(一)

    最近,团队的小伙伴们在做项目时,需要用到JWT认证.遂根据自己的经验,整理成了这篇文章,用来帮助理清JWT认证的原理和代码编写操作. 一.JWT JSON Web Token (JWT)是一个开放标准 ...

  9. mac下charles使用

    设置charles  电脑上一次性的工作 1 下载下面两个文件(这里版本自己定) a charles-proxy-4.1.4.dmg b charles4.1.4的副本.jar 2 进行charles ...

  10. Android 开发技术周报 Issue#280

    新闻 6分钟完整视频提前看光谷歌新机Pixel 4a 统一推送官方解读:消灭Android毒瘤.待机续航猛增43% Google Play细化搜索结果:可按评分.编辑推荐.最新上线过滤 教程 了解一下 ...