zoukankan      html  css  js  c++  java
  • 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;
                 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>

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

  • 相关阅读:
    oracle 数据库安全审计
    oracle 共享服务器监控
    oralce MTS
    配置一个Oracle共享服务器进程环境需要哪两项参数
    python3 小技巧(2)
    python3 操作注册表
    PYC文件简介
    常见HTTP状态(304,200等)
    用Python模拟浏览器操作
    python3下的IE自动化模块PAMIE
  • 原文地址:https://www.cnblogs.com/xiaoyaotx/p/12969626.html
Copyright © 2011-2022 走看看