本文介绍了“如何在jquery中显示和隐藏元素”的知识。很多人在实际案例的操作中会遇到这样的困难。接下来，让边肖带领大家学习如何应对这些情况！希望大家认真阅读，学点东西！
jquery中隐藏元素的显示方法：1、show()和hide()；2.toggle()，可以切换元素的可见状态；3.slideDown()，可以滑动显示和隐藏元素；4.css()，它可以通过控制元素的“显示”属性来显示和隐藏元素。
本教程操作环境：windows7系统，jQuery 1 . 10 . 2版，戴尔G3电脑。
jquery中隐藏p方法的显示方式有很多，比如简单函数show()，hide()，toggle()，slidedown()，然后css设置p的style属性，都可以操作。下面我来介绍一下。
show()和hide() 方法
Show()可以显示隐藏的p元素。
$('.btn2 ')。单击(函数(){ 0
$('p ')。show()；
});Hide()可以隐藏可见的p元素：
$(. BTN 1 ')。单击(函数(){ 0
$('p ')。hide()；
});这个函数经常和show一起使用。
toggle()方法
toggle()方法切换元素的可见状态。
如果所选元素可见，则隐藏它们；如果它们被隐藏，就会显示出来。
超文本标记语言
头
script src=' js/jquery-1 . 10 . 2 . min . js '/脚本
scripttype='text/javascript '
$(文档)。就绪(函数(){ 0
$(. BTN 1 ')。单击(函数(){ 0
$('p ')。切换(1000)；
});
});
/script
/head
身体
pThisisaparagraph。/p
buttonclass='btn1 '切换/按钮
/body
/htmlslideDown()方法
在滑动模式下显示隐藏的p元素：
$('.btn2 ')。单击(函数(){ 0
$('p ')。slide down()；
});css()方法
css()方法设置或返回选定元素的一个或多个样式属性。
返回CSS属性
要返回指定CSS属性的值，请使用以下语法：
CSS(' property name ')；
$('p ')。css('display '，' none ')；看一个例子
！DOCTYPEhtml
超文本标记语言
头
metachartset=' utf-8 '
script src=' js/jquery-1 . 10 . 2 . min . js '/脚本
scripttype='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>
<h4>div里内容的显示隐藏特效</h4>
<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>
“jquery中怎么显示和隐藏元素”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/95835.html