web实训知识点_0416_jQuery尺寸控制，以及slide（滑动复习）

上节课的回顾：二级菜单的jQuery实现方法

使用show()和hide()实现二级菜单效果：

	
		
		
		
		
		
	
	
		

			
一级菜单
			
一级菜单
			

				
二级菜单
				
二级菜单
			
			
			
一级菜单
			

				
二级菜单
				
二级菜单
				
二级菜单
				
二级菜单
			
			
			
一级菜单
			
一级菜单
		
	

新方法：

children()，获取当前元素的子元素，参数是要填入的元素类型 

this，指当前选取的元素

例子：

$(".turnUp").mouseover(function(){
					$(this).children("ul").show();
				})

这一部分的this就是指代.turnUp这个元素

 

jQuery尺寸：

获取 或 改变 元素的尺寸

元素[ 内容 ]的宽高获取：
width()
height()

内边距（padding）的宽高获取：
innerWidth()
innerHeight()

边框的宽高获取：
outWidth()
outHeight()

外边距（margin）的宽高获取：
outerWidth(true)
outerHeight(true)

注意：当未被设置内/外边距时，上面的方法们会输出元素的宽高

效果图： 

末尾的复习作业：jQuery实现div框的显示与隐藏，以及切换显示/隐藏状态

实现方法：实际上为了实现划入的效果，这里没有直接使用show与hide，而是在执行方法前先使用sildeUp将元素移动到上方。显示就是移动下来（slideDown），隐藏就是移动上去（slideUp）。切换就是slideToggle

 

	
		
		
		
		
		
		
	
	
		

			出现
		
		

			隐藏
		
		

			toggle
		
		

			hello world！
		
	

效果图：