前端知识

最新推荐文章于 2024-05-28 17:56:03 发布

圆角50%

最新推荐文章于 2024-05-28 17:56:03 发布

阅读量145

点赞数

分类专栏：学习笔记 js 文章标签： web js jQuery 元素隐藏与显示 html+css

本文链接：https://blog.csdn.net/JY185445/article/details/84730159

版权

学习笔记同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

JS与JQuery

1.HTML+CSS+js/Jquery
隐藏与显示一个div：
JS：
（注currentStyle只能在IE浏览器里使用）
js控制隐藏方法一：display:none实现隐藏后，页面不占位置
js控制隐藏方法二：visibility：hidden实现隐藏后页面位置还被控件占用，显示空白

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Js与JQuery对比（1）</title>
	<style>

.content1,.content2{	
 width:50%;
 height: 200px;
 border:1px solid #ff00ff;
}
.forhide {
	width:50%;
 height: 100px;
	color:#fff;
	font-size: 20px;
	 border:1px solid #000;
	background: green;
}
p{
	display:none;
}
a{
	background: #f33;
}
</style>
</head>
<body>
	<div class="content1">
	</div>
<div></div>
	<div class="forhide" id="container">
		<p id="box">js与jQuery的对比1：分别用js和jQuery实现将一个隐藏的div显示出来。</p>
	</div>
	<div></div>
	<div class="content2">
			<input type="button" value="点击显示" onclick="show()">
			<input type="button" value="现实与隐藏切换" onclick="sAndH()">
			<a onclick="hide()"><span>vishidden</span></a>
			<a onclick="show2()"><span>visshow</span></a>
	</div>
</body>
</html>
<script>
<!-- js控制隐藏方法一：display:none实现隐藏后，页面不占位置 -->
	<!-- 单显示隐藏的div -->
function show(){
	document.getElementById("box").style.display="inline";
}
// 隐藏与显示切换
function sAndH(){
    var elem=document.getElementById("box");
    // var eStyle=elem.currentStyle["display"];
    //注：上一行currentStyle只能在IE浏览器里使用，
    var eStyle=elem.style.display;
    if("none"==eStyle){
    	elem.style.display="inline";
    }else{
    	elem.style.display="none";
    }
}
<!-- js控制隐藏方法二：visibility：hidden实现隐藏后页面位置还被控件占用，显示空白-->
function hide(){
	document.getElementById("container").style.visibility="hidden";
}
function show2(){
 	document.getElementById("container").style.visibility="visible";
}
</script>

在这里插入图片描述
Jquery：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Js与JQuery对比（1）</title>
	<style>
.content1,.content2{	
 width:50%;
 height: 200px;
 border:1px solid #ff00ff;
}
.forhide {
	width:50%;
 height: 100px;
	color:#fff;
	font-size: 20px;
	 border:1px solid #000;
	background: green;
}
p{
	display:none;
}
a{
	background: #f33;
}
</style>
</head>
<body>
	<div class="content1">
	</div>
<div></div>
	<div class="forhide" id="container">
		<p id="box">js与jQuery的对比1：分别用js和jQuery实现将一个隐藏的div显示出来。</p>
	</div>
	<div></div>
	<div class="content2">
			<input type="button" value="点击显示" id="show">
			<input type="button" value="现实与隐藏切换" id="sAndH">	
	</div>
</body>
</html>
<script src="js/js/jquery-1.8.3.js"></script>
<script>
	<!-- jQuery实现方法一： -->
$("#show").click(function(){
	$("#box").show();//相当于display：block；
 }) 
$("#sAndH").click(function(){
	$("#box").toggle();//切换元素可见状态，如果是可见则切换为不可见，反之亦然。
})
<!-- jQuery实现方法二： -->
$("#show").click(function(){
	$("#box").css('display','none');//隐藏
	$("#box").css('display','block');//显示
})
<!-- jQuery实现方法三： -->
$("#show").click(function(){
	$("#box").css('visibility','hidden');//隐藏
	$("#box").css('visibility','visible');//显示
})
<!-- jQuery实现方法四： -->
$("#show").click(function(){
$("#box").style.display='none';
})
</script>

在这里插入图片描述
两者对比：js相比于jQuery代码占用的空间大些，但逻辑都是一样的，根据id或class获取元素，获取元素属性值，再对其重新赋值以达到改变样式的目的，其他样式便可以此类推。