Python学习第89天(jQuery的css操作)

今天完成了一件非常重要的事情,在我的pycharm即将到期的前半个小时,我如愿的搞到破解插件,让我获得了pycharm的70年使用权,大致就是我买的房子到年限了,我的pycharm都没有到使用年限,嗯,我估计也是很难用完所有的免费期了

  CSS的固定格式:

    $(" ").css(name|pro|[,val|fn])    固定书写模式
  位置

    $(" ").offset([coordinates])    不添加参数的时候获得该标签距离浏览器视口的边框距离,添加参数则为设定距离

    $(" ").position()          参数情况和上面相同,获取的是距离已定位的父集边框距离

    $(" ").scrollTop([val])      滚动条效果,需要开通监测

    $(" ").scrollLeft([val])

  尺寸

    $(" ").height([val|fn])    设定高度,仅包含内容高度

    $(" ").width([val|fn])     设定宽度,仅包含内容宽度

    $(" ").innerHeight()     设定高度,包含内容高度和podding

    $(" ").innerWidth()     宽度

    $(" ").outerHeight([soptions])    设定高度,包含内容、padding、border

    $(" ").outerWidth([options])

    如果需要包含margin的宽度,需要在括号内增加参数true

说到几个宽度的问题,就需要复习一下之前css中关于宽度问题的定义

  

 

 

 下面是习题实现返回顶部:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-2.2.3.js"></script>
    <script>


          window.onscroll=function(){

              var current=$(window).scrollTop();
              console.log(current)
              if (current>100){

                  $(".returnTop").removeClass("hide")
              }
              else {
              $(".returnTop").addClass("hide")
          }
          }


           function returnTop(){
//               $(".div1").scrollTop(0);

               $(window).scrollTop(0)
           }




    </script>
    <style>
        body{
            margin: 0px;
        }
        .returnTop{
            height: 60px;
            width: 100px;
            background-color: darkgray;
            position: fixed;
            right: 0;
            bottom: 0;
            color: greenyellow;
            line-height: 60px;
            text-align: center;
        }
        .div1{
            background-color: orchid;
            font-size: 5px;
            overflow: auto;
            width: 500px;
        }
        .div2{
            background-color: darkcyan;
        }
        .div3{
            background-color: aqua;
        }
        .div{
            height: 300px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
     <div class="div1 div">
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>

     </div>
     <div class="div2 div"></div>
     <div class="div3 div"></div>
     <div class="returnTop hide" onclick="returnTop();">返回顶部</div>
</body>
</html>

  最近学习进度有点慢,比较懈怠,前面忘的太快了,所以最近要加进度,尽快结束前端学习。

posted @ 2020-05-26 23:42  崆峒山肖大侠  阅读(147)  评论(0编辑  收藏  举报