一:利用JQuery写尺寸
(一)jQuery 提供多个处理尺寸的重要方法:
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
动画效果类型方式:slideup() slidedown() show() hide() animate() slideToggle()
slidewidow()
二:JQuery的淡入淡出:
代码实现:
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li class="navmenu"><a href="#">课程大厅</a>
<ul>
<li><a href="#">web网页实战</a></li>
<li><a href="#">服务端技术</a></li>
<li><a href="#">Python开发</a></li>
</ul>
</li>
<li class="navmenu"><a href="#">学习中心</a>
<ul>
<li><a href="#">视频学习</a></li>
<li><a href="#">交流学习</a></li>
</ul>
</li>
<li><a href="#">经典案例</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
<script type="text/javascript">
$(function(){
$(".navmenu").mouseover(function(){
$(this).children("ul").show();
//$(this).children("ul").css({display:'block'})
})
$(".navmenu").mouseout(function(){
$(this).children("ul").hide();
//$(this).children("ul").css({display:'none'})
})
})
$('*').css({'margin':'0','padding':'0'});
$('#nav').css({"background":"#89c6d5","width":"600px","height":"20px","margin":"0 auto"});
$('ul li').css({"list-style":"none","float":"left","text-align":"center","line-height":"20px","position":"relative"})
$("#").css({"text-decoration": "none", "color": "#d5931b", "padding": "0 10px", "width": "100px"});
$('ul li ul').css({"position":"absolute","top":"20px","left":"0"})
$('ul li ul li').css({"float":"none","width":"100px","background-color":"#a8d584", "margin":"3px 0"})
$('ul li ul li a').css({"padding":"0"})
</script>
JQuery尺寸:
jQuery width() 和 height() 方法:
width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
1下面的例子返回指定的 <div> 元素的宽度和高度:
$(document).ready(function(){
$('button').click(function(){
var txt ="";
txt +='div的宽度是:'+$('#div1').width()+'px'+'<br>';
txt +='div的高度是:'+$('#div1').height()+'px'+'<br>';
$("#div1").html(txt)
})
})
jQuery innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的宽度(包括内边距)。
innerHeight() 方法返回元素的高度(包括内边距)。
下面的例子返回指定的 <div> 元素的 inner-width/height:
$(document).ready(function(){
$('button').click(function(){
var txt ="";
txt +='div的宽度,包括内边距'+$('#div1').innerWidth()+'px'+'<br>';
txt +='div的高度,包括内边距:'+$('#div1').innerHeight()+'px'+'<br>';
$("#div1").html(txt)
})
})
jQuery outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的宽度(包括内边距和边框)。
outerHeight() 方法返回元素的高度(包括内边距和边框)。
下面的例子返回指定的 <div> 元素的 outer-width/height:
$(document).ready(function(){
$('button').click(function(){
var txt ="";
txt +='div的宽度,包括内边距和边框,外边距'+$('#div1').outerWidth()+'px'+'<br>';
txt +='div的高度,包括内边距和边框,外边距'+$('#div1').outerHeight()+'px'+'<br>';
$("#div1").html(txt)
})
})
通过jQuery获取元素的宽高:
代码实现:
<div id="div1" style="height: 200px;width: 400px;padding: 10px;border: 10px solid red;margin: 1px"></div>
<button>显示div元素的尺寸</button>
<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>