一、Jquery尺寸
jQuery 提供多个处理尺寸的重要方法 动画效果类型方
jQuery 提供多个处理尺寸的重要方法 | 动画效果类型方式 |
width() | slideup() 、slidedown() |
height() | show() 、hide() |
innerWidth() | animate() |
innerHeight() | slideToggle() 、slidewidow() |
outerWidth() | |
outerHeight() |
CSS盒子模型:
width():设置或返回元素的宽度(不包括内边距,边框,外边距)
height():设置或返回元素的宽度(不包括内边距,边框,外边距)
代码实现:
$(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').innerWidth(true)+'px'+'<br>';
txt +='div的高度,包括内边距和边框,外边距:'+$('#div1').innerHeight(true)+'px'+'<br>';
$("#div1").html(txt)
})
二.jQuery的淡出淡入
show():出现,hide():隐藏,toggle():来回滑动,slideUp(),slideDown(),slideToggle()
代码实现:
#show,#hide,#toggle,#panel{
padding: 5px;
text-align: center;
background-color: #e556bf;
border: solid 1px red;
padding: 20px;
}
#panel{
display: none;
height: 50px;
padding: 100px;
}
<script>
$(document).ready(function(){
$("#show").click(function(){
$ ( "#panel").slideDown(1000)
})
$("#hide").click(function() {
$("#panel").slideUp(1000)
})
$("#toggle").click(function() {
$("#panel").slideToggle(1000)
})
})
</script>
<div id="show">出现</div>
<div id="hide">隐藏</div>
<div id="toggle">toggle</div>
<div id="panel">Hello World</div>