<html>
<head>
<script src="jquery/jquery-1.7.1.min.js"></src>
<script type="text/javascript">
$ function(){
$(".navmenu").mouseover(function(){
$(this).children("ul").show();
//$(this).children("ul").css({display:'block'});显示的两种方法 this = navmenu,将this换成navmenu效果一样
})
$(".navmenu").mouseover(function(){
$(this).children("ul").hide();
//$(this).children("ul").css({display:'none'});隐藏的两种方法 this = navmenu,将this换成navmenu效果一样
})
}
</script>
</head>
<body>
<div class="navmenu">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
二级菜单 淡入淡出
知识点:jquery的动画、SlideUP(jquery实现)
SlideDown(),SlideToggle()。
2.jquery的尺寸
<html>
<head>
<title>通过JQUERY获取元素的宽高</title>
<script src="jquery/jquery-1.8.1.min.js">
<script>
$(document).ready(function(){
$("button").click(function(){
//var w = $('#div1').width()
//alert($('#div1').width())
var txt = ""
txt +='div的宽度shi:'+$('#div1').width()+'px'+'<br>';//重点
txt +='div的高度shi:'+$('#div1').height()+'px'+'<br>';//重点
txt +='div的宽度包括内边距shi'+$('#div1').innerwidth()+'px'+'<br>';
txt +='div的高度包括内边距shi'+$('#div1').innerheight()+'px'+'<br>';//跟内容重复,padding为0,padding结果为200,200
txt +='div的宽度包括内边距和边框shi'+$('#div1').outwidth()+'px'+'<br>';
txt +='div的宽度包括内边距和边框shi'+$('#div1').outheight()+'px'+'<br>';
txt +='div的宽度包括内边距和边框和外边距shi'+$('#div1').outwidth(true)+'px'+'<br>';
txt +='div的宽度包括内边距和边框和外边距shi'+$('#div1').outheight(true)+'px'+'<br>';
$("#div").html(txt)
})
})
</script>
</head>
<body>
<div id="div1" style="height:200px ;width:200px;padding: 10px;border:1px solid red;margin:1px"></div>
<button>显示元素的尺寸</button>
</body>
</html>
内容获取-height()+width()
padding获取-innerheight()+innerwidth()
border获取-outwidth()+outheight()
margin获取-outwidth(true)+outheight(true)。
假如获取一张图片用?-内容获取-height()+width()
width()返回元素的宽度(不包括内边距、边框、或外边距)
height()返回元素的高度(不包括内边距、边框、或外边距)
3通过JQUERY获取元素的宽高
补充:
滑动窗口-Slide windows
slideToggle=SlideUp+SlideDown的效果
animate:V 方法用于创建自定义的动画,
animation:N
jquery动画效果终结
show、hide,toggle,slideup,slideDown,slidetoggle,animate().
w