通过jQuery获取元素的宽高:
<div id="div1" style="height: 200px;width: 400px;padding: 10px;border: 10px solid red;margin: 1px"></div>
<button>显示div元素的尺寸<tton>
<script>
$(document).ready(function(){
$('button').click(function(){
var txt=" "
txt +="div的宽度是:"+$("#div1").width()+"px"+"<br>"
txt +="div的长度是:"+$("#div1").height()+"px"+"<br>"
txt +="div的宽度,包括内边距"+$("#div1").innerWidth()+"px"+"<br>"
txt +="div的长度,包括内边距"+$("#div1").innerHeight()+"px"+"<br>"
txt +="div的宽度,包括内边距和边框"+$("#div1").outerWidth()+"px"+"<br>"
txt +="div的长度,包括内边距和边框"+$("#div1").outerHeight()+"px"+"<br>"
txt +="div的宽度,包括内边距和外边距"+$("#div1").outerWidth(true)+"px"+"<br>"
txt +="div的长度,包括内边距和外边距"+$("#div1").outerHeight(true)+"px"+"<br>"
$("#div1").html(txt)
})
})
</script>
jQuery动画总结:
show(),hide(),toggle(),slideUp(),slideDown(),slideToggle(),animate()
jQuery的淡出淡入
<div>
<ul>
<li><a href="#">首页</a><>
<li class="navmenu"><a href="#">课程大厅</a>
<ul>
<li><a href="#">web网页实战</a><>
<li><a href="#">服务端技术</a><>
<li><a href="#">Python开发</a><>
</ul>
<>
<li class="navmenu"><a href="#">学习中心</a>
<ul>
<li><a href="#">视频学习</a><>
<li><a href="#">交流学习</a><>
</ul>
<>
<li><a href="#">经典案例</a><>
<li><a href="#">关于我们</a><>
</ul>
</div>
<script type="text/javascript">
$(function(){
$(".navmenu").mouseover(function(){
$(this).children("ul").show();
//$(this).children("ul").css({display:'block'})
})
})
$(function(){
$(".navmenu").mouseover(function(){
$(this).children("ul").hide();
//$(this).children("ul").css({display:'none'})
})
})
</script>
jQuery尺寸:
px em (css盒子模型)
width():设置或返回元素的宽度(不包括内边距,边框,外边距)
height():设置或返回元素的宽度(不包括内边距,边框,外边距)