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中关于宽度问题的定义

　　 Python学习第89天（jQuery的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;
             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;
             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>

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

Python学习第89天（jQuery的css操作）

相关推荐