您的位置: 首页  >  文章  >  Web实训--0416

Web实训--0416

分类: 文章 • 2024-04-03 22:08:40

一、Jquery尺寸

jQuery 提供多个处理尺寸的重要方法 动画效果类型方式
width() slideup() 、slidedown（）
height（） show() 、hide()
innerWidth() animate()
innerHeight() slideToggle() 、slidewidow（）
outerWidth() -------
outerHeight() -------

Web实训--0416

二：JQuery的淡入淡出：

Web实训--0416
代码实现：

<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 width() 和 height() 方法：

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

下面的例子返回指定的

元素的宽度和高度：

$(document).ready(function(){       $('button').click(function(){           var txt ="";           txt +='div的宽度是：'+$('#div1').width()+'px'+'<br>';           txt +='div的高度是：'+$('#div1').height()+'px'+'<br>';                    $("#div1").html(txt)        })    })
j**Query innerWidth() 和 innerHeight() 方法**

innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
下面的例子返回指定的

元素的 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() 方法返回元素的高度（包括内边距和边框）。
下面的例子返回指定的

元素的 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获取元素的宽高：

Web实训--0416
代码实现：

<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)        })    })

相关推荐