常正慧_20200114-常正慧

知识点

定位

静态定位

  • 静态定位指的是将元素放在他的文档布局流中的正常位置上
  • 如果所有的父元素都没有定义position属性,那么所有的父元素都默认position属性都是static

相对定位

  • 相对定位占据在正常的文档流中,除非你修改他的位置或者让他与其他元素重叠
    • 如果单单给元素加上position:relativ;并不会改变元素的位置,即需要使用top,bottom,left,right属性
    • 相对定位是相对于正常位置进行定位

绝对定位


  • position:absolute;
  • 生成绝对定位的元素,是相对于static定位以外的第一个父元素行进定位。

  • 绝对定位的元素不在正常文档布局流中.

  • 固定元素相对于元素或距离其最近的定位祖先

固定定位

  • 固定定位固定元素是相对于浏览器视口本身定位
  • fixed固定定位

z-index

  • z-index是对Z轴的参考
  • 默认情况下z-index是auto
  • 正值将它往上移动,负值向下移动
  • 解决元素重叠问题

position:sticky

  • 相对定位与绝对定位的混合体
  • 允许被定位的元素表现和相对定位一样,知道滚动到某个阈值点(比如说:规定距离顶部100像素,到达改为之后则固定不动了。)

JavaScript

  • JavaScript由三部分构成:ECMAScriptDOMBOM

BOM (浏览器对象模型)

  • bom主要处理浏览器窗口和框架

window

window对象

  • window.document.getElementById("header");
    

    二者相同

  • document.getElementById("header");
    

window 尺寸


  • window.innerHeight - 浏览器窗口的内部高度(包括滚动条)

  • window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
  • 示例


    • var w=window.innerWidth
      var h=window.innerHeight

其他window方法

  • >
    > window.open() - 打开新窗口
    > window.close() - 关闭当前窗口
    > window.moveTo() - 移动当前窗口
    > window.resizeTo() - 调整当前窗口的尺寸
    >

window location

  • window.location对象用于获取当前页面的URL(全球资源定位器(Uniform Resource Locator)),并把浏览器重新定向到新的页面

  • window.location对象在编写时可以不用window前缀,例如


    • location.hostname 返回 web 主机的域名
      location.pathname 返回当前页面的路径和文件名
      location.port 返回 web 主机的端口 (80 或 443)
      location.protocol 返回所使用的 web 协议(http: 或 https:)

location href

  • location.href属性返回当前页面的URL


    • <script>
      document.write(location.href);
      </script>

window history

  • window history对象包含浏览器的历史

  • 可不用window前缀


    • history.back() 与在浏览器中点击后退按钮相同
      history.forword 与在浏览器中点击前进按钮相同
      history.go() 可以实现向前后退功能
    • ```



    
    * ```
    <head>
    <meta charset="utf-8">
    <script>
    function goForward()
    {
    window.history.forward()
    }
    </script>
    </head>
    <body>
    <input type="button" value="Forward" onclick="goForward()">
    </body>
    • ```
      function a(){
      history.go(1); // go() 里面的参数表示跳转页面的个数 例如 history.go(1) 表示前进一个页面
      }

    function b(){
    history.go(-1); // go() 里面的参数表示跳转页面的个数 例如 history.go(-1) 表示后退一个页面
    }

    function a(){
    history.go(0); // go() 里面的参数为0,表示刷新页面
    }

弹窗

  • 在JavaScript中可以创建三种消息框:警告框,确认框,提示框。

警告框


  • window.alert("sometext");
  • window.alert() 方法可以不带上window对象,直接使用alert()方法。

  • 示例

    • ```



确认框


  • window.confirm("sometext");
  • window.confirm(); 方法可以不带上window对象,直接使用confirm()方法。

  • <head>
        <meta charset="UTF-8">
    <title></title>
    <script>
    var r=confirm("按下按钮");
    if (r==true)
    {
    x="你按下了\"确定\"按钮!";
    }
    else
    {
    x="你按下了\"取消\"按钮!";
    }
    </script>
    </head>
    //提示:确认 取消

提示框


  • window.prompt("sometext","defaultvalue");
  • window.prompt() 方法可以不带上window对象,直接使用prompt()方法。

    • ```

    计时事件

    • 设定一个时间间隔后执行代码,由两个关键方法

    setlnterval()方法

    • setInterval() 间隔指定的毫秒数不停地执行指定的代码

    • window.setInterval("javascript function",milliseconds);
      
    • 可以不使用window前缀

    • setlnterval()第一个参数是函数(function),第二个参数是间隔的毫秒数

    • 示例

      • ```
        var myVar=setInterval(function(){myTimer()},1000);

      function myTimer()
      {
      var d=new Date();
      var t=d.toLocaleTimeString();
      document.getElementById("demo").innerHTML=t;
      }

    • 停止执行

    • clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

    • window.clearInterval(intervalVariable)
      
    • 要使用 clearInterval() 方法, 在创建计时方法时必须使用全局变量:

    • myVar=setInterval("javascript function",milliseconds);
      
    • 示例


      • <p id="demo"></p>
        <button onclick="myStopFunction()">停止</button>
        <script>
        var myVar=setInterval(function(){myTimer()},1000);
        function myTimer(){
        var d=new Date();
        var t=d.toLocaleTimeString();
        document.getElementById("demo").innerHTML=t;
        }
        function myStopFunction(){
        clearInterval(myVar);
        }
        </script>

    setTimeout()方法

    • 语法


      • myVar= window.setTimeout("javascript function", milliseconds);
      • setTimeout() 方法会返回某个值。在上面的语句中,值被储存在名为 myVar 的变量中。如果要取消这个 setTimeout(),可以使用这个变量名来指定它

      • setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。对函数的调用

      第二个参数指示从当前起多少毫秒后执行第一个参数。

    • 等待三秒,跳出弹框


      • setTimeout(function(){alert("Hello")},3000);
    • 停止运行

    • clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。

    • 语法


      • window.clearTimeout(timeoutVariable)
    • 要使用clearTimeout() 方法, 必须在创建超时方法中(setTimeout)使用全局变量:


      • myVar=setTimeout("javascript function",milliseconds);
    • 示例

      • ```
        var myVar;

      function myFunction()
      {
      myVar=setTimeout(function(){alert("Hello")},3000);
      }

      function myStopFunction()
      {
      clearTimeout(myVar);
      }

    document

    document.querySelector()

    • document.querySelector 方法接受一个 CSS 选择器作为参数,返回匹配该选择器的元素节点。如果

      有多个节点满足匹配条件,则返回第一个匹配的节点。如果没有发现匹配的节点,则返回 null 。

    document.querySelectorAll(css选择器)

    • 返回一个数组

    document.getElementsByTagName()

    • document.getElementsByTagName 方法搜索 HTML 标签名,返回符合条件的元素。它的返回值是一 个类似数组对象( HTMLCollection 实例),可以实时反映 HTML 文档的变化。如果没有任何匹配的元 素,就返回一个空集。

    document.getElementsByClassName()

    • 通过class属性查找元素,返回一个数组

    document.getElementsByName()

    • document.getElementsByTagName("某个标签的名") 如果是用document调用这个方法,则获取的是所有这个标签名的元素,返回一个HTMLCollection对象

    document.getElementById()

    • document.getElementById("某个id名") 获取该id所对应的标签,如果有多个id,只取第一个,这个方法一般只用document调用

    心得体会

    今天主要学习的是JavaScript的内容。感觉有点难度,但是实现的东西也越来越有趣,理解倒是不难,主要是还没记住那些选择器,以及方法对象,而且不太熟悉,所以在编程的时候就有点小困难,自我检查,还是要多写多练,俗话说熟能生巧,只要写的多了,自然而然也就记住了。

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1