2022-08-25 第四小组 王星苹 学习笔记

学习心得

HTML里面有很多属性可以自己定义，获取这个属性的值，用的是元素.属性名。但这个只适用于元素原生的属性。

然后setAttribute方法用元素.属性名不行，因为会覆盖。

学习内容

是稍微写一下关于网页脚本的东西，js设定很多属性。DOM还有BOM的一些不同也会对比出来。

掌握情况：还行一小般

学习总结

 

自定义添加属性

所有的HTML元素，我们都可以根据具体需求自定义添加属性

let div = document.querySelector("div");

  获取这个属性的值，为什么name拿不到，id能拿到。

    元素.属性名 的方式只适用于元素原生的属性

console.log(div.getAttribute("haha"));

 设置元素属性，div.className = "mmm";

    用 元素.属性名 的方式行不通

div.setAttribute("hehehe","heiheihei")

重复的设置会覆盖，修改

div.setAttribute("haha","hijklmn");

删除属性

div.removeAttribute("haha");

 

 BOM：Browser Object Model

        BOM核心对象window

        navigator：

        history：

        screen：

        location：

回调函数：

      let callback = function (a) {
                 console.log(a);
             }
             callback(1);
             callback("hello");
             callback({name:"zhangsan"});
             callback([1,2,3]);

 test函数中，入参可以是一个函数

 let test = function(fun){
        console.log("before");
        // 调用了传进来的函数
        fun(1000);
        console.log("after");
      }
      let callback = function(data) {
        console.log("I am callback，" + data);
      }

 传入的参数是一个函数类型时，只需要写函数名，不需要写()小括号

回调函数，一个函数的参数是另一个函数

参数1：函数

参数2：延迟时间

timer叫做一个计时器

   let timer = setTimeout(function(){
        document.write("<h1>5秒钟后可以见到我</h1>")
      },5000);

清除计时函数

参数：要清除哪一个计时器

clearTimeout(timer);

练习：

    定义两个按钮

        点击第一个按钮：x秒后打印输出一句话

        点击第二个按钮：终止这个操作

 <button onclick="show()">3秒后看结果</button>
    <button onclick="stopShow()">不看结果</button>


    <script>
      let timer;
      function show() {
        timer = setTimeout(function() {
          console.log("我就是你要看到的");
        },3000);
      }


      function stopShow() {
        clearTimeout(timer);
      }
    </script

浏览器自带一个小数据库，

还自带一个map集合，存储数据

  // 向Storage中设置键值对
      localStorage.clear();
      window.localStorage.setItem("name","lucy");
      window.localStorage.setItem("age",25);
      // 从Storage中根据建获取值
      console.log(localStorage.getItem("name"));
      // 从Storage中删除对应的键值对
      // localStorage.removeItem("name");
      // 清空Storage所有的键值对

screen

   console.log(screen.width);
   console.log(screen.height);
   console.log(screen.availHeight);
   console.log(screen.availWidth);

 navigator

      获取一些浏览器的参数

console.log(navigator.platform);
console.log(navigator.appVersion);
console.log(navigator.appName);

练习：

倒计时，显示，到0就go！

  <a href="demo01.html">再倒计时</a>


        <button onclick="daojishi()">倒计时</button>


        <div></div>


        <script>
            function daojishi() {
                let div = document.querySelector("div");            
                let i = 5;
                let timer = setInterval(function() {
                    div.innerHTML = `<h1>${i}</h1>`;
                    i--;
                    if(i < 0){
                        // clearInterval(timer);
                        
                        div.innerHTML = "<h1>GO！！！</h1>"
                        return;
                    }
                },900);
                // if(i == 0){
                //     clearInterval(timer);
                // }
                console.log(i);
            }
        </scrip>

事件

获取指定的元素

let div = document.querySelector("div");

        参数1：要添加的事件类型

        参数2：添加的事件要触发的函数

        传说中，这种添加事件的方式有兼容性问题。

    div.addEventListener("click",function(){
        alert("click");
      });

操作元素的属性

       div.onclick = function() {
        alert("onclick");
       }

删除事件的方式一

       div.onclick = null;
       div.onclick = false;
       div.onclick = "";
 

let callback = function() {
    console.log("callback");
}
div.addEventListener("click",callback);
// 删除事件
div.removeEventListener("click",callback);

onsubmit事件注意：

        1、onsubmit是加在form表单上

        2、onsubmit要有return

        3、函数也要返回boolean类型

<form action="aaa" onsubmit="return fun()">
    <input type="text" required>
    <input type="submit" value="提交">
</form>
    <script>
      function fun() {
        return true;
      }
    </script>

阻止事件冒泡

event.stopPropagation();

          1.在子元素的事件触发函数中阻止

          2.借助event对象

          3.调用一个方法

event对象必须通过addEventListener方式添加事件才可以使用

ES6语法

        1、let const

        2、模板字符串

        3、箭头函数

        4、Symbol

        5、Promise函数，处理回调地狱