• 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>

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

  • 相关阅读:
    Js 内存泄露追踪
    [导入]关于在ashx页面中使用Session的问题
    [导入]通过SQL语句删除重复记录
    javascript也玩pageLoad
    判断是否首次触发pageLoad 与 PageRequestManager.getInstance()对象的几个事件触发顺序
    ASP.NET Web下基于Forms的验证
    [导入]用程序来还原数据库(一个遗留了两年的问题)
    [导入]自己编写QQ挂机软件基于HTTP的QQ协议之我所见
    iis 中后台调用exe文件
    ORA12154: TNS:could not resolve the connect identifier spec
  • 原文地址:https://www.cnblogs.com/xiaoyaotx/p/12969626.html
Copyright © 2020-2023  润新知