jQuery与原生JS实现Div显示隐藏的4种方式对比

JavaScript作为Web客户端开发的核心脚本语言，为网页交互提供了基础支持。jQuery则是基于JavaScript构建的快速、简洁的库，它封装了DOM操作和Ajax功能，提供了丰富的函数接口，极大地简化了JavaScript编程的复杂度。借助jQuery，开发者可以更便捷地实现Div元素的显示与隐藏效果。

在原生JavaScript中，控制Div隐藏和显示主要涉及两种核心方式。

第一种方式是通过修改元素style对象中的display属性来实现。

var t = document.getElementById('test');//选取id为test的div元素
t.style.display = 'none';// 隐藏选择的元素
t.style.display = 'block';// 以块级样式显示

第二种方式则是通过设置元素style对象中的visibility属性来控制可见性。

var t = document.getElementById('test');//选取id为test的div元素
t.style.visibility = 'hidden';// 隐藏元素
t.style.visibility = 'visible';// 显示元素

这两种方式的关键区别在于布局影响：当使用display属性隐藏元素时，该元素在文档流中不再占据任何空间；而通过visibility属性隐藏元素后，尽管视觉上不可见，但其原本占用的物理空间仍然被保留。

使用jQuery控制Div的显示与隐藏主要有以下4种方法。

方法一：利用jQuery提供的show()和hide()方法直接控制Div的显示状态。

$("#Div").show();//显示div
$("#Div").hide();//隐藏div

方法二：使用toggle()方法切换元素的可见状态。

$("#id").toggle();

该方法的逻辑是：如果当前元素处于可见状态，执行切换后将其变为隐藏；

反之，如果元素当前是隐藏的，执行切换后则将其变为可见。

方法三：通过jQuery直接操作CSS属性中的display值。

$("#id").css('display','block');//显示
$("#id").css('display','none');//隐藏

或者采用另一种等效写法。

$("#id")[0].style.display='none';

将display属性设置为none，用于控制对象的隐藏。

将display属性设置为block，用于控制对象的显示。

方法四：利用CSS属性visibility进行控制。

$("#id").css('visibility','visible');//元素显示
$("#id").css('visibility','hidden');//元素隐藏

CSS的visibility属性用于规定元素是否可见。其可选值包括：visible（元素可见）、hidden（元素不可见）、collapse（在表格元素中使用时，可删除一行或一列但不影响表格布局，其他元素上表现为hidden）以及inherit（从父元素继承visibility属性值）。

需要特别注意以下几点：

虽然display:none和visible:hidden在视觉效果上都能隐藏网页元素，但在DOM操作层面存在显著差异：

display:none表示不为被隐藏的对象保留物理空间，即该对象在页面上彻底消失，通俗理解即为“看不见也摸不到”。

visible:hidden则表示使对象在网页上不可见，但该对象在页面上所占的空间没有改变，即它仍然保留高度、宽度等属性，通俗理解即为“看不见但摸得到”。

至此，关于jQuery和原生JS显示及隐藏Div的几种方法对比整理完毕。如需了解更多相关内容，建议搜索本站过往文章或继续浏览后续相关文章，感谢大家的支持！