0416

最新推荐文章于 2023-05-07 10:00:33 发布

野峥

最新推荐文章于 2023-05-07 10:00:33 发布

阅读量127

点赞数

本文链接：https://blog.csdn.net/ZZertong/article/details/94877535

版权

width（）：设置或返回元素的宽度（不包括内边距，边框，外边距）
height（）：设置或返回元素的宽度（不包括内边距，边框，外边距）
通过jQuery获取元素的宽高：

show（）（打开），hide（）（关闭），toggle（）（打开再关闭交替进行），

slideUp（），slideDown（），slideToggle（），animate（），slide Window（滑动窗口）
代码

<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（）：设置或返回元素的宽度（不包括内边距，边框，外边距）

$(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;
    }

总结：

二级菜单淡入淡出
知识点：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()
代码实现：