平武建站

jquery如何让id元素显示隐藏

这篇“jquery如何让id元素显示隐藏”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“jquery如何让id元素显示隐藏”文章吧。

创新互联为企业级客户提高一站式互联网+设计服务，主要包括成都网站设计、网站建设、app软件开发公司、小程序制作、宣传片制作、LOGO设计等，帮助客户快速提升营销能力和企业形象，创新互联各部门都有经验丰富的经验，可以确保每一个作品的质量和创作周期，同时每年都有很多新员工加入，为我们带来大量新的创意。 

显示隐藏的实现方法：1、使用“$("id值")”语句通过id属性值获取指定元素，返回元素对象；2、使用toggle()、slideToggle()或fadeToggle()来显示或隐藏获取的元素对象，例如“id元素对象.toggle()”。

jquery如何让id元素显示隐藏

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

jquery让id元素显示隐藏的方法

1、通过id属性值获取指定元素

$("id值")

会返回一个包含指定元素的对象

2、显示隐藏被选元素

jquery可以利用以下3种内置方法来隐藏和显示元素

  • toggle() 方法

  • slideToggle() 方法

  • fadeToggle() 方法

这三种方法都会检查id元素的可见状态，若是显示状态则隐藏，若是隐藏状态则显示。

1、toggle() 方法

toggle() 方法在被选元素上进行 hide() 和 show() 之间的切换。

该方法检查被选元素的可见状态。如果一个元素是隐藏的，则运行 show()，如果一个元素是可见的，则运行 hide() - 这会造成一种隐藏和显示状态切换的效果。

示例1：使用toggle() 方法




	
		
		
		
		
	
	

		
			
    ul (父节点)
				
  • li (兄弟节点)
    • 
				
  • li (类名为"start"的li节点的上一个兄弟节点)
    • 
				li (id值为"start"的li节点)
				
  • li (兄弟节点)
    • 
				
  • li (兄弟节点)
    •

jquery如何让id元素显示隐藏

2、slideToggle() 方法

slideToggle() 方法在被选元素上进行 slideUp() 和 slideDown() 之间的切换。

该方法检查被选元素的可见状态。如果一个元素是隐藏的，则运行 slideDown()，如果一个元素是可见的，则运行 slideUp() - 这会造成一种隐藏和显示状态切换的效果。

示例2：

$("button").click(function() {
	$("#start").slideToggle()
});

jquery如何让id元素显示隐藏

3、fadeToggle() 方法

fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。

  • 如果元素是淡出显示的，fadeToggle() 会使用淡入效果显示它们。

  • 如果元素是淡入显示的，fadeToggle() 会使用淡出效果显示它们。

示例3：

$("button").click(function() {
	$("#start").fadeToggle()
});

jquery如何让id元素显示隐藏

以上就是关于“jquery如何让id元素显示隐藏”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注创新互联行业资讯频道。


网页标题：jquery如何让id元素显示隐藏
文章起源：http://pwwzsj.com/article/psedjo.html

其他资讯