本文通过完整示例代码，对比演示了使用JavaScript原生DOM操作与jQuery库实现元素隐藏与显示的两种方案。重点解析了通过切换className控制CSS visibility属性的原生写法，以及利用jQuery的toggleClass方法简化DOM状态管理的技巧，帮助开发者理解两种技术栈在UI交互实现上的异同。
JavaScript与jQuery实现元素隐藏与显示的两种方法
示例代码结构清晰，直接展示核心实现，无需过多解释。
具体代码实现如下：
<html>
<head>
<title>denotoggle</title>
<style>
#box {
width: 100px;
height: 100PX;
background-color: #ddd
}
.show {
visibility: hidden;
}
</style>
<script src="jquery/1.8.2/jquery.min.js"></script>
<!-- //java script方法 -->
<script type="text/javascript">
window.onload = function() {
function toglemain() {
var obj = document.getElementById("box");
if (obj.className == "") {
obj.className = "show";
} else {
obj.className = "";
}
}
var clickbutton = document.getElementById("toggle");
clickbutton.onclick = toglemain; //OnClick方法与Click事件 点击一下Button，实际上是先执行OnClick方法，但是问什么，同时还出发了Click事件呢？这是因为，OnClick方法内部触发了Click事件。
}
</script>
<!-- //jQuery Toggle方法 -->
<script type="text/javascript">
$(document).ready(function() {
$(".btn1").click(function() {
/* $("p#box").toggle(); */
$("#box").toggleClass("show");
});
});
</script>
</head>
<body>
<div id="box"></div>
<button id="toggle">javascript toggle</button>
<button class="btn1">jQuery Toggle</button>
</body>
</html>通过上述对比，读者应能清晰掌握JavaScript原生方法与jQuery方法在控制元素显示与隐藏时的具体实现差异，可根据实际需求选择合适方案。