.hide()或display:none？jQuery的

.hide()和display:none是jQuery中用于隐藏元素的两种方法。

.hide()是jQuery提供的一个方法，用于隐藏元素。调用.hide()方法后，元素会被设置为display:none，即不显示在页面上。使用.hide()方法隐藏元素可以通过调用.show()方法来再次显示。

.display:none是CSS中的一个属性值，用于隐藏元素。将元素的display属性设置为none后，元素将不会在页面上显示。使用.display:none隐藏元素可以通过将display属性设置为其他值（如block、inline等）来再次显示。

两者的区别在于.hide()是jQuery提供的方法，可以通过调用.show()方法来再次显示元素，而.display:none是CSS中的属性值，需要通过修改display属性来再次显示元素。

.hide()和.display:none的选择取决于具体的需求和使用场景。如果需要在JavaScript中动态控制元素的显示和隐藏，可以使用.hide()方法。如果只需要通过CSS来控制元素的显示和隐藏，可以使用.display:none。

腾讯云相关产品和产品介绍链接地址：

云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb
云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai
物联网（IoT）：https://cloud.tencent.com/product/iot
移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mobile
区块链（BCS）：https://cloud.tencent.com/product/bcs
元宇宙（Tencent Real-Time Rendering）：https://cloud.tencent.com/product/trr

相关·内容

js显示隐藏 display visibility以及jquery里的show hide的区别

js显示隐藏 display visibility以及jquery里的show hide的区别文章包含个人理解，错误请您指出。...display和visibility都是css样式，而show hide则是jquery的方法 display 值描述 none 此元素不会被显示。...元素是可见的。 hidden 元素是不可见的。 collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。...方法，跟display一样剩下了黄色和蓝色的div并且黄色跑到了顶部，其实hide方法就相当于display none隐藏，不会保留原位置。...: none; } <script src='http://libs.baidu.com/jquery/2.1.1/jquery.min.js

5.5K2 0

display:none和visibility:hidden的区别

空间占据上的区别如果用文字来描述，简单一句话就是display:none的元素是彻底消失，也就是说该元素的宽度、高度等各种属性值都将“丢失”，不在文档流中占位，浏览器也不会解析该元素；而visibility...因此，我们可以知道display:none的元素隐藏后不占据额外空间，状态切换会产生回流和重绘，而visibility:hidden的元素虽然隐藏了，但它们仍然占据着空间，它的状态切换只会引起页面重绘。...可以参考博文：页面重绘和回流以及优化浏览器的渲染过程及优化关于继承 display:none虽然不会被子元素继承，但是因为父元素都不在了，子元素自然也就不会显示了。...属性为block，并未继承父级div1的display:none，但因为div1不占有物理空间，所以div11仍不占有物理空间。...JS运用中的一些区别（学习JS后可以自行编写简单代码尝试）事件绑定 display:none 的元素都已经不再页面存在了，因此肯定也无法触发它上面绑定的事件； visibility:hidden 元素上绑定的事件也无法触发

1.6K2 0

display:none与visible:hidden的区别

display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别: display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到...visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。...例子： display:none和visible:hidden的区别隐藏区域显示区域 <span

6631 0

display:none的元素无法获取offsetWidth和offsetHeight

本章节只是分享一个事实，那就是如果一个元素被设置为display:none的话。我们是无法获取offsetWidth和offsetHeight属性值的。代码实例如下: 前端部落 #antzone { width:200px; height:200px; display...:none; } window.onload = function () { var oantzone = document.getElementById("antzone...div id="show"> 由上面的代码可以看出，antzone元素的offsetheight...是无法正确获取的。

1.6K6 0

display: none、visibility: hidden和opacity: 0的区别

是否脱离文档流 display: none：元素将脱离文档流，不占据原来的空间，会引起页面的重排 visibility: hidden：不会脱离文档流，元素不可见仍然占据原来的位置 opacity: 0...：不会脱离文档流，元素不可见仍然占据原来的位置是否继承可见性 display: none 和 opacity: 0，子元素会和父元素一样保持不可见。...visibility: hidden 的父元素下，若子元素设为 visibility: visible，则父元素不可见，子元素可见。...: #CCC; } child 结果如下：是否响应事件 display...: none元素都不在文档流中了，不会响应事件 visibility: hidden 的元素也不会响应事件 opacity: 0 的元素可以响应事件示例如下: <style type="text/css

8142 0

CSS魔法堂：display:none与visibility:hidden的恩怨情仇

前言还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗？...或多个盒子，然后浏览器以盒子模型的信息布局和渲染界面。...但除了上面的知识点外，还有以下8个点我们需要注意的 1.原生默认display:none的元素其实浏览器原生元素中有不少自带display:none的元素，如link,script,style,dialog...: none; } Hide and Seek: You can't see me!...；而父元素的display为none时，子元素的display必定为none，因此元素也没有机会位于事件捕获或冒泡阶段的路径路径上，因此display:none的元素无法响应事件。

1.4K3 1

【前端】display:none和visibility:hidden两者的区别

本文将深入探讨这两个属性，并提供代码示例来帮助理解它们之间的差异。一、display与元素的隐藏 display:none属性用于完全隐藏一个元素，并且不保留该元素在页面上所占的空间。...当元素的display属性设置为none时，它不会在文档流中占据任何位置，就好像它从未存在过一样。...另外，很多人认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留...:none：不适用于动画或过渡效果，因为元素不存在于文档流中。...选择哪一个取决于你的具体需求：如果你需要完全隐藏元素并释放其空间，display:none是更好的选择；如果你只是想让元素不可见但保留其空间，visibility:hidden将是一个合适的选项。

811 0

前端面试题-display:none和visibility:hidden的区别

一、display:none和visibility:hidden的区别 1.1 空间占据 1.2 回流和渲染 1.3 株连性二、空间占据 display:none 隐藏后的元素不占据任何空间，而 visibility...:hidden 隐藏的元素空间依旧存在。...三、回流和渲染 display:none 隐藏产生回流和重绘（reflow 和 repaint），而 visibility:hidden 只产生重绘。...三、株连性 display:none 就是“株连性”明显的声明：一旦父节点元素应用了 display:none，父节点及其子孙节点元素全部不可见，而且无论其子孙元素如何不屈地挣扎都无济于事。

5402 0

-企业面试题: display:none和visibility:hidden的区别？

考核内容: 样式的布局技巧题发散度: ★★ 试题难度: ★★ 解题思路: - display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。...- visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

3232 0

「css基础」如何理解Display的属性：None，Block，Inline，Inline-Block

开篇本篇文章，笔者将介绍display的基本属性，主要涉及以下内容： display: none vs visibility: hidden display: block display: inline...01 display: none vs visibility: hidden 如下段代码所示，我们有三个红、蓝、绿的方块： css部分 #box-1 { width: 100px; height...: none 属性隐藏蓝色的方块，如下段代码所示： #box-2 { display: none; width: 100px; height: 100px; background...: blue; } 如图所示，使用display: none，我们可以看出蓝色方块从中删除，中间的空位也被绿色的方块补位。...由此可以看出html元素都有个默认的display属性:block或inline。

1.4K2 0

第86节：Java中的JQuery基础

= "block" 隐藏： img.style.display = "none" 获取行 table.rows[] DOM: document.createElement document.createTextNode...("slow","normal",or"fase")或表示动画时长的毫秒数值，fn: 在动画完成执行的函数，每个元素执行一次 // 显示段落 html代码： display: none...this).hide()隐藏当前的 HTML 元素 $(selector).action() $(this).hide() - 隐藏当前元素 jquery函数 // 为了防止文档完全加载就绪之前运行的代码...： "slow", "fast", "normal" 或 milliseconds $("button").click(function(){ $("p").hide(1000); }); 隐藏显示的元素.../img/555.jpg" id="img1" width="100%" style="display:none" /> function showAd(){ $("#img1").slideDown

2.9K3 0

jquery学习

触发或将函数绑定到被选元素的鼠标悬停事件 jQuery 事件方法方法描述 bind() 向匹配元素附加一个或更多事件处理器 blur() 触发、或将函数绑定到指定元素的 blur 事件 change...，现在或将来 unload() 触发、或将函数绑定到指定元素的 unload 事件一 jQuery是什么？...{ display: none; } <div...{ display: none; } .models{ position: fixed; top...").mouseout(function(){ $(".float").css("display","none"); $(".big_box")

2.2K4 0

js 自动补全

("#"+id).offset();//offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。...' id='"+maxcount+"'>"+nn[0]+""+nn[1]+"";...}); } else { jQuery("#autoTxt").html(""); jQuery("#autoTxt").hide(); maxcount = 0; } }...jQuery("#autoTxt").hide(); }else { if(jQuery("#autoTxt").html()!...-- 显示的div --> <div style="width:180px; z-index:99999999; display:none; background:#FFFFFF; position:

4.1K4 0

使用jQuery的delay()延迟执行show()和hide()不起效的解决方法

今天使用 jQuery 的 delay() 来延迟执行 hide() ，发现延时不起效，查了一些资料，找到了其中的原因。... 和 hide() 却不起效： HTML： test jQuery : $("#test").delay(5000)....同样的 hide() 也如此。看一下 jQuery文档对 delay() 的解释：设置一个延时来推迟执行队列中的项目，它既可以推迟动画队列中函数的执行，也可以用于自定义队列。...也就是说只有 show() 或 hide() 带有参数的时候才能被插入执行队列中。简单的说，其实 show() 和 hide() 在不加参数的情况下是直接对元素的 display 样式设置。...声明：本文由w3h5原创，转载请注明出处：《使用jQuery的delay()延迟执行show()和hide()不起效的解决方法》 https://www.w3h5.com/post/351.html

3.2K1 0

配合JQuery练习

-- jQuery 语法实例 $(this).hide() 演示 jQuery hide() 函数，隐藏当前的 HTML 元素。...$("#test").hide() 演示 jQuery hide() 函数，隐藏 id="test" 的元素。...$("p").hide() 演示 jQuery hide() 函数，隐藏所有元素。...$(".test").hide() 演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。 --> <div id="div2" style="width:80px;height:80px;display:none

8763 0

iframe页面点击页面其它地方隐藏某元素

-- 注意此处的$()不是jquery 是document.getElementById()封装为方法 --> 切换账号 <a style="font-size...: 12px;text-align: center" href="javascript:$('show-or-hide').style.display='none';parent.location.href...").style.display = "none"; showFlag = true; } // iframe页面 content为iframe元素的id $(..."; showFlag = false; } else { $("show-or-hide").style.display = "none

1.9K0 0

JQuery 实现开发常用功能

{ display: none; } hello hello hello<...{ display: none; } <div class...{ display: none; } .current{ background-color: darkgray;...{ display: none; } .models{ position: fixed; top:...","none"); $(".big_box").css("display","none") }); $(".small_box")

5.4K2 0

1、jQuery中隐藏元素的hide方法让页面上的元素不可见，一般可以通过设置css的display为none属性。..., }) }); 2、jQuery中显示元素的show方法 hide是让元素显示到隐藏，show则是相反，让元素从隐藏到显示 - show与hide方法是修改的display属性，通过是visibility...可以设置display:none - 如果提供回调函数参数，callback会在动画完成的时候调用。...，修改元素display 样式属性被设置为none。...例如： - 改变样式display为none - 设置位置高度为0 - 设置透明度为0 都能达到这个目的，并且针对这样的处理jQuery都提供了各自的方法。

3.2K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

.hide()或display:none？jQuery的

相关·内容

js显示隐藏 display visibility以及jquery里的show hide的区别

display:none和visibility:hidden的区别

display:none与visible:hidden的区别

display:none的元素无法获取offsetWidth和offsetHeight

display: none、visibility: hidden和opacity: 0的区别

CSS魔法堂：display:none与visibility:hidden的恩怨情仇

【前端】display:none和visibility:hidden两者的区别

前端面试题-display:none和visibility:hidden的区别

-企业面试题: display:none和visibility:hidden的区别？

「css基础」如何理解Display的属性：None，Block，Inline，Inline-Block

第86节：Java中的JQuery基础

jquery学习

js 自动补全

使用jQuery的delay()延迟执行show()和hide()不起效的解决方法

配合JQuery练习

iframe页面点击页面其它地方隐藏某元素

JQuery 实现开发常用功能

jQuery 遍历 - siblings() 方法应用

jQuery实现元素的鼠标移入移出及点击显示隐藏（微信二维码）

第73天：jQuery基本动画总结

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐