width():设置或返回元素的宽度(不包括内边距,边框,外边距)
height():设置或返回元素的宽度(不包括内边距,边框,外边距)
通过jQuery获取元素的宽高:
我的手机 2019/4/20 21:09:31
show()(打开),hide()(关闭),toggle()(打开再关闭 交替进行),
slideUp(),slideDown(),slideToggle(),animate(),slide Window(滑动窗口)
21:09:21
我的手机 2019/4/20 21:09:21
<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尺寸:
px em (css盒子模型)
在这里插入图片描述
width():设置或返回元素的宽度(不包括内边距,边框,外边距)
height():设置或返回元素的宽度(不包括内边距,边框,外边距)
我的手机 2019/4/20 21:09:27
$(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)
})
})
我的手机 2019/4/20 21:09:29
二.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>
我的手机 2019/4/20 21:09:30
总结:
二级菜单 淡入淡出
知识点:jquery的动画、SlideUP(jquery实现)
SlideDown(),SlideToggle()。
2.jquery的尺寸
内容获取-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
我的手机 2019/4/20 21:09:30
show()(打开),hide()(关闭),toggle()(打开再关闭 交替进行),
slideUp(),slideDown(),slideToggle(),animate(),slide Window(滑动窗口)
代码
$(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)
})
})
width():设置或返回元素的宽度(不包括内边距,边框,外边距)
height():设置或返回元素的宽度(不包括内边距,边框,外边距)
通过jQuery获取元素的宽高
二.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>
总结:
二级菜单 淡入淡出
知识点:jquery的动画、SlideUP(jquery实现)
SlideDown(),SlideToggle()。
2.jquery的尺寸
内容获取-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
520996
最新推荐文章于 2024-04-06 19:21:24 发布