jQuery常见的元素隐藏显示效果

最新推荐文章于 2022-01-05 18:53:43 发布
置顶 最新推荐文章于 2022-01-05 18:53:43 发布
阅读量170 收藏
点赞数
分类专栏： jQuery元素隐藏与显示 文章标签： hide show toggle none block
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43027839/article/details/84586648
版权

jQuery效果
元素隐藏与显示的不同方式（如有发现不全的请提出宝贵建议）
使用几个方式时需引用jquery.min.js。如果不引否则代码无效
下载地址：https://code.jquery.com/jquery-3.3.1.min.js
1》使用hide隐藏，show显示，

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<p>如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>
</html>

2》使用display：none隐藏和display:block显示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").css("display","none")
  });
  $("#show").click(function(){
    $("p").css("display","block")
  });
});
</script>
</head>
<body>
<p>如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>
</html>

或者：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p")[0].style.display='none'
  });
  $("#show").click(function(){
    $("p")[0].style.display='block'
  });
});
</script>
</head>
<body>
<p>如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>
</html>

3》使用在css中定义方法，然后JS调用

//CSS:
<style>
.hide{
display:none；
}
.show{
display：block；
}
</style>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").addClass("hide")
  });
  $("#show").click(function(){
    $("p").addClass("show")
  });
});
</script>
</head>
<body>
<p>如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>
</html>

4》使用toggle单个按钮实现

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
</script>
</head>
<body>

<button>隐藏/显示</button>
<p>这是一个文本段落。</p>
<p>这是另外一个文本段落。</p>
</body>
</html>

5.使用’visibility’,‘hidden’隐藏和’visibility’,'visible’显示
visible　元素可见。
hidden　元素不可见。
这种方式按钮会留在原地不动，不会因为元素消失而浮动。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").css('visibility','hidden');
  });
  $("#show").click(function(){
    $("p").css('visibility','visible');
  });
});
</script>
</head>
<body>
<p>如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>
</html>

注意：
display:none和visible:hidden都能把网页上某个元素隐藏起来，在视觉效果上没有区别，但是在一些DOM操作中两者有区别:

display:none —不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。

visible:hidden— 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，即它仍然具有高度、宽度等属性，通俗来说就是看不见但摸得到。

hero@华琨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery效果——隐藏和显示、淡入淡出、滑动
青柠晶晶的博客
11-26 2792
jquery(javascript库，极大简化了javascript编程) jquery选择器 元素选择器： &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"/&gt; &lt;script src="jquery(1).js"&gt;&lt;/script&gt; &lt;script type="text/j
jQuery 实现显示与隐藏效果
ivenqin的博客
07-23 1291
本节我们来学习如何使用 jQuery 中的方法来实现元素的显示与隐藏效。 hide()方法 hide() 方法用于隐藏指定的元素，与 CSS 中的 display:none 效果类似。 语法如下所示： $(selector).hide(speed,easing,callback) speed：可选，规定隐藏效果的速度。可选值为 slow、fast、毫秒。 easing：可选，规定在动画的不同点上元素的速度，可选值为 swing、linear。 callback：可选，hide() 方法执行完之后，要执行
jQuery效果（隐藏和显示）
shao_xuan_的博客
01-05 7266
jQuery效果解析隐藏和显示hide()和show()jQuery toggle()淡入淡出jQuery fadeIn() 方法jQuery fadeOut() 方法jQuery fadeToggle() 方法jQuery fadeTo() 方法滑动jQuery slideDown() 方法jQuery slideUp() 方法jQuery slideToggle() 方法自定义动画jQuery animate() 方法停止动画jQuery stop() 方法 隐藏和显示 hide()和show() hi
jQuery隐藏和显示效果实现
11-28
实例 jQuery hide() 简单的jQuery hide()方法演示。 jQuery hide() 另一个hide()实例。演示如何隐藏文本。 jQuery hide() 和 show() 通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素： 实例 $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); 语法: $(selector).hide(speed,callback); $(selector).s
Jquery 隐藏及显示效果
宇臾的博客
11-10 504
Jquery实现隐藏及显示效果主要是用到hide()跟show()两个方法，相比于js改变标签的display属性，Jquery的这两个方法显得更简单一点
JQuery显示和隐藏元素进阶（动画效果）
飞翔的仙女杀手的博客
05-12 857
你需要在body标签中写入如下代码 <script> for(var i = 0;i<5;i++){ $("<div>").appendTo(document.body); //写出5个div块 } $("div").click(function(){ ...
jQuery中隐藏元素的hide方法
weixin_44592274的博客
07-18 3033
jQuery中隐藏元素的hide方法 隐藏元素hide是让页面的元素不可见，一般可以通过设置css的display为none属性，通过css直接修改是静态的布局，如果在代码执行的时候，一般通过js控制元素的style属性，在这里jquery提供了一个快捷的方法。hide（）来达到这个效果。 $elem.hide(); hide([speed,[easing],[fn]]) 参数说明： Speed：...
jquery显示隐藏元素的实现代码
10-22
在jQuery库中，控制元素的显示与隐藏是常见的操作，这对于网页动态效果的实现至关重要。以下将详细讲解jQuery中如何实现元素的显示和隐藏，并提供相关的实现代码。 首先，jQuery提供了`.hide()`、`.show()`和`....
jQuery控制元素隐藏和显示
12-03
一、jQuery隐藏和显示效果 jQuery提供了`hide()`和`show()`两个方法，用于隐藏和显示HTML元素。例如，我们可以通过绑定`click`事件来控制`<p>`标签的显示和隐藏： ```javascript $("#hide").click(function(){ $...
jQuery简单实现列表隐藏和显示效果示例
10-21
主要介绍了jQuery简单实现列表隐藏和显示效果,结合实例形式分析了jQuery中slideToggle动态操作页面元素切换的相关技巧,需要的朋友可以参考下
jQuery 隐藏/显示效果函数用法实例分析
10-15
在jQuery库中，隐藏和显示元素是常见的操作，主要通过`hide()`、`show()`以及`toggle()`这三个函数实现。这些函数提供了灵活的方式来...总之，理解和掌握这些基本的隐藏/显示效果函数是每个jQuery开发者的必备技能。
jquery效果 显示隐藏 滑入滑出
欢迎来到我的博客
11-27 1597
jquery jquery效果 jquery 给我们封装了很多动画效果，最为常见的如下： 显示隐藏：show() / hide() / toggle() ; 滑入滑出：slideDown() / slideUp() / slideToggle() ; 淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ; 自定义动画：animate() ; ...
jquery实现隐藏效果
foryone的专栏
06-03 365
今天为大家推荐的是用jquery实现隐藏效果， 当右上角的上图标被点击时，内容被隐藏。当被定义为 <img class="delete"> 的图片被点击，它会手找到父级元素 并激活它的能力，慢慢消失，隐藏起来。关键代码： $(document).ready(function(){$(".pane .delete").click(function(){ $
jQuery-----实现显示隐藏效果
weixin_43750811的博客
05-24 268
一,显示隐藏 hide() 隐藏 //用如下代码隐藏target元素 $(".target").hide(); //与用css()的方法设置display属性效果相同 $(".target").css("display","none"); show() 显示 //用如下代码隐藏target元素 $(".target").show(); //与用css()的方法设置display属性效果相同 $(".target").css("display","block"); toggle() 绑定两
jQuery显示隐藏多效果特效
Those who achieve great thing do not stick to trifles
01-27 1542
jQuery显示隐藏多效果特效 一、jquery中效果: 隐藏或展示 show(毫秒数) hide(毫秒数) 滑入或滑出 slideDown(毫秒数):向下滑入 slideUp(毫秒数):向上滑出 淡入或淡出 fadeIn(int):淡入 fadeOut(int):淡出 二、步骤分析 1、通过JQ方式获取元素，派发事件 2、通过JQ方式获取特效元素，编写...
jQuery效果之显示与隐藏
bboyjoe的博客
08-09 1010
hide([duration][,complete])——目标元素的隐藏； show([duration][,complete])——目标元素的显示； toggle([duration][,complete])——当目标元素隐藏时则显示，否则隐藏； 注：可选参数[duration]为方法执行的时间间隔；[,complete]为回调函数。 显示与隐藏
jquery显示隐藏效果
weixin_30846599的博客
02-02 66
通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素toggle() 方法来切换 hide() 和 show() 方法。 1、hide()隐藏元素 $(selector).hide(speed,callback); speed选择参数：可选的 speed 参数规定隐藏的速度，可以取以下值："slow"、"fast" 或毫秒。 可选的 callba...
陕西应用物理化学研究所考研6个学院，54个专业课历年考试真题及答案汇总整理，备考资料题库视频.pdf
最新发布
07-15
陕西应用物理化学研究所考研6个学院，54个专业课历年考试真题及答案汇总整理，备考资料题库视频.pdf
励志商务聚力领航2024新年工作计划PPT模板
07-15
【作品名称】：励志商务聚力领航2024新年工作计划PPT模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
jquery实现元素向下滑动隐藏
06-06
可以通过jQuery的slideDown()方法来实现元素向下滑动隐藏的效果。 HTML代码： ```html 这里是要被隐藏的内容 ``` CSS代码： ```css .box { height: 0; background-color: #ccc; overflow: hidden; } ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值