2019.04.16网页实训总结_html和jquery实训总结-CSDN博客

本文链接：https://blog.csdn.net/qiangang_666666/article/details/89337982

任务：利用JQuery写尺寸

学号：1722230119 姓名：李林治

1.知识要点总结：

（一）jQuery 提供多个处理尺寸的重要方法：

width()

height()

innerWidth()

innerHeight()

outerWidth()

outerHeight()

动画效果类型方式：slideup() slidedown() show() hide() animate() slideToggle()

slidewidow（）

（二）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() 方法返回元素的高度（包括内边距）。

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

1.下面的例子返回指定的 <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尺寸练习：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.8.3.min.js"></script>
    <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>';
           $("#div1").html(txt)

       })
    })
    </script>
</head>
<body>
<div id="div1"style="height:500px;width:500px;padding:10px;border:1px solid red;margin:1px;"></div>
<button>显示div元素的尺寸</button>
</body>
</html>

实现效果步骤：

第一步：