jquery中怎么显示和隐藏元素

本篇内容介绍了“jquery中怎么显示和隐藏元素”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

成都创新互联公司专业为企业提供阜新网站建设、阜新做网站、阜新网站设计、阜新网站制作等企业网站建设、网页设计与制作、阜新企业网站模板建站服务，10余年阜新做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

jquery中显示隐藏元素用的方法：1、show()和hide()；2、toggle()，可切换元素的可见状态；3、slideDown()，能以滑动方式显示和隐藏元素；4、css()，可通过控制元素的“display”属性来显示和隐藏元素。

本教程操作环境：windows7系统、jquery1.10.2版本、Dell G3电脑。

在jquery中显示隐藏p方法方法有很多种，如比较简单的函数show(),hide(),toggle(),slideDown()然后还有css设置p的style属性都可操作，下面我来介绍。

show()和hide() 方法

show()可显示出隐藏的

元素。

$(".btn2").click(function(){
  $("p").show();
});

hide() 可隐藏可见的

元素：

$(".btn1").click(function(){
  $("p").hide();
});

这个函数经常与show一起使用

toggle()方法

toggle() 方法切换元素的可见状态。

如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

$(document).ready(function(){
  $(".btn1").click(function(){
  $("p").toggle(1000);
  });
});



This is a paragraph.
Toggle

slideDown()方法

以滑动方式显示隐藏的

元素：

$(".btn2").click(function(){
  $("p").slideDown();
});

css()方法

css() 方法设置或返回被选元素的一个或多个样式属性。

返回 CSS 属性
如需返回指定的 CSS 属性的值，请使用如下语法：

css("propertyname");
$("p").css("display","none");

看一个实例

	

		
		
		
			$(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(); //窗帘效果展开 

			}
		

	

	 

	

		
div里内容的显示隐藏特效

		

		 

		 

		 

		  

		

			        1.测试例子

			        2.测试例子

			        3.测试例子

			        4.测试例子

			        5.测试例子

			        6.测试例子

			        7.测试例子

			        8.测试例子

			        9.测试例子

			        0.测试例子