如何通过jquery隐藏和显示元素
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何通过jquery隐藏和显示元素相关的知识，希望对你有一定的参考价值。
1.JQ中显隐有以下几种方式show(),hide(),toggle(),slideDown()然后还有css设置div的style属性都可操作
2.show()方法
显示出隐藏的 <p> 元素。
$(".btn2").click(function()
$("p").show();
);
3.toggle()方法
toggle() 方法切换元素的可见状态。
如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
$(".btn1").click(function()
$("p").toggle(1000);
);
);
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Toggle</button>
</body>
</html>
3.slideDown()方法
以滑动方式显示隐藏的 <p> 元素：
$(".btn2").click(function()
$("p").slideDown();
);
4.hide() 方法
隐藏可见的 <p> 元素：
$(".btn1").click(function()
$("p").hide();
);
这个函数经常与show一起使用
5.css()方法
css() 方法设置或返回被选元素的一个或多个样式属性。
返回 CSS 属性
如需返回指定的 CSS 属性的值，请使用如下语法：
css("propertyname");
$("p").css("display","none");
实例：
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
$(document).ready( function());
function hiden()
$("#divObj").hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(2000)以2000毫秒的速度隐藏,还可以带slow,fast
function slideToggle()
$("#divObj").slideToggle(2000);//窗帘效果的切换,点一下收,点一下开,参数可以无,参数说明同上
function show()
$("#divObj").show();//显示,参数说明同上
function toggle()
$("#divObj").toggle(2000);//显示隐藏切换,参数可以无,参数说明同上
function slide()
$("#divObj").slideDown();//窗帘效果展开
</script>
</head>
<body>
<h3>div里内容的显示隐藏特效</h3>
<input type="button" value="隐藏" onclick="hiden()"/>
<input type="button" value="显示" onclick="show()"/>
<input type="button" value="窗帘效果显示2" onclick="slide()"/>
<input type="button" value="窗帘效果的切换" onclick="slideToggle()"/>
<input type="button" value="隐藏显示效果切换" onclick="toggle()"/>
<div id="divObj" style="display:none">
1.测试例子<br/>
2.测试例子<br/>
3.测试例子<br/>
4.测试例子<br/>
5.测试例子<br/>
6.测试例子<br/>
7.测试例子<br/>
8.测试例子<br/>
9.测试例子<br/>
0.测试例子<br/>
</div>
</body>
</html> 参考技术A
jquery显示隐藏元素方法：
通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素
具体实现代码：
$("#id").show()表示display:block,
$("#id").hide()表示display:none;
$("#id").toggle()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
1、$("div").show(option).hide(option)，括号里面的option可以填数字(400/200/700)，或者字符串('slow'/'fast')。
2、$("div").css('display','none').css('display','block')，在隐藏元素的时候将元素的位置也消除。
3、$("div").css('visibillity',ture).css('visibillity',false)，在隐藏元素的时候保留元素的位置。
4、$("div").css('opacity',0).css('opacity',100),将元素的变透明，让其看起来被隐藏了。 参考技术C
利用jquery可以做很多的前端操作，针对您的问题如下解决：
1、给元素标签设置一个id值
2、通过jquery，进行如下操作：
$("#id").attr("display", true); // 隐藏$("#id").attr("display", false); // 显示
3、通过该语句，可以达到元素的隐藏和显示，一般来说，都会对该元素的display状态进行一个判断，如果是隐藏的，则交互时候进行显示；如果是显示的，则交互时间进行隐藏。
参考技术D 使用jquery的toggle()方法就可以了代码:
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
$("button").click(function()
$("p").toggle();
);
);
</script>
</head>
<body>
<button type="button">切换</button>
<p>我是一个元素</p>
</body>
</html>
动画基础隐藏和显示 (jQuery)
1jQuery中隐藏元素的hide方法
让页面上的元素不可见，一般可以通过设置css的display为none属性。但是通过css直接修改是静态的布局，如果在代码执行的时候，一般是通过js控制元素的style属性，这里jQuery提供了一个快捷的方法.hide()来达到这个效果
$elem.hide()
提供参数：
.hide( options )
当提供hide方法一个参数时，.hide()就会成为一个动画方法。.hide()方法将会匹配元素的宽度，高度，以及不透明度，同时进行动画操作
快捷参数：
.hide("fast / slow")
这是一个动画设置的快捷方式，‘fast‘ 和 ‘slow‘ 分别代表200和600毫秒的延时，就是元素会执行200/600毫秒的动画后再隐藏
注意：
jQuery在做hide操作的时候，是会保存本身的元素的原始属性值，再之后通过对应的方法还原的时候还是初始值。比如一个元素的display属性值为inline，那么隐藏再显示时，这个元素将再次显示inline。一旦透明度 达到0，display样式属性将被设置为none，这个元素将不再在页面中影响布局
2jQuery中显示元素的show方法
css中有display:none属性，同时也有display:block，所以jQuery同样提供了与hide相反的show方法
方法的使用几乎与hide是一致的，hide是让元素显示到隐藏，show则是相反，让元素从隐藏到显示
看一段代码：使用上一致，结果相反
$(‘elem‘).hide(3000).show(3000)
让元素执行3秒的隐藏动画，然后执行3秒的显示动画。
show与hide方法是非常常用的，但是一般很少会基于这2个属性执行动画，大多情况下还是直接操作元素的显示与隐藏为主
注意事项：
- show与hide方法是修改的display属性，通过是visibility属性布局需要通过css方法单独设置
- 如果使用!important在你的样式中，比如display: none !important，如果你希望.show()方法正常工作，必须使用.css(‘display‘, ‘block !important‘)重写样式
- 如果让show与hide成为一个动画，那么默认执行动画会改变元素的高度，高度，透明度
3jQuery中显示与隐藏切换toggle方法
show与hide是一对互斥的方法。需要对元素进行显示隐藏的互斥切换，通常情况是需要先判断元素的display状态，然后调用其对应的处理方法。比如显示的元素，那么就要调用hide，反之亦然。 对于这样的操作行为，jQuery提供了一个便捷方法toggle用于切换显示或隐藏匹配元素
基本的操作：toggle();
这是最基本的操作，处理元素显示或者隐藏，因为不带参数，所以没有动画。通过改变CSS的display属性，匹配的元素将被立即显示或隐藏，没有动画。
- 如果元素是最初显示，它会被隐藏
- 如果隐藏的，它会显示出来
display属性将被储存并且需要的时候可以恢复。如果一个元素的display值为inline，然后是隐藏和显示，这个元素将再次显示inline
提供参数：.toggle( [duration ] [, complete ] )
同样的提供了时间、还有动画结束的回调。在参数对应的时间内，元素会发生显示/隐藏的改变，在改变的过程中会把元素的高、宽、不透明度进行一系列动画效果。这个元素其实就是show与hide的方法
直接定位：.toggle(display)
直接提供一个参数，指定要改变的元素的最终效果
其实就是确定是使用show还是hide方法
if ( display === true ) {
$( "elem" ).show();
} else if ( display === false ) {
$( "elem" ).hide();
}
toggle方法就是show与hide的相互切换的一个快捷方法
以上是关于如何通过jquery隐藏和显示元素的主要内容，如果未能解决你的问题，请参考以下文章