• 2022-08-26 第六小组 瞒春 学习笔记


    🚩前言

    🌻今天继续学习Javascript

    ✏️Javascript

    ✒️属性获取

        
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
     let div = document.querySelector("div");
              
    
    • 1
    • 2

    拿到元素的所有的属性
    返回的结果是一个属性节点的映射和集合

    ✒️BOM

                BOM:Browser Object Model
                BOM核心对象window
                navigator:
                history:
                screen:
                location:
    
     回调函数
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    ES6语法

    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);
    }
    test(1);
    传入的参数是一个函数类型时,
    只需要写函数名,不需要写()小括号

            test(callback);
    
            /*
             * 回调函数,一个函数的参数是另一个函数
             * JS数据类型,number,string,boolean,object,array
             * null,undefined,function
             * 
             */
    
            // function fun() {}
        
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    /*
    参数1:函数
    参数2:延迟时间
    */
    // 2000ms后打印123
    // timer叫做一个计时器
    let timer = setTimeout(function(){
    document.write(" 5秒钟后可以见到我")
    },5000);
    清除计时函数
    参数:要清除哪一个计时器
    clearTimeout(timer);

                定义两个按钮
                点击第一个按钮:x秒后打印输出一句话
                点击第二个按钮:终止这个操作
    
    • 1
    • 2
    • 3

    callback(1);
    方法里传方法传参在里面的方法传
    一个的函数参数是另一个函数:回调函数

    ✒️定时函数

    setTimeout(); 两个参数 1.函数 2.延迟时间
    let timer = setTimeout(function(){
    console.log(100);},2000 ) 2000 毫秒之后执行函数

    clearTimeout(timer); 清除计时函数

    ✒️周期性定时器

    setInterval(fuction , 2000)

    ✒️浏览器自带一个小型数据库

    window.localSrorage.setItem(“name”:”lucy”) 设置一个项 存进Application 就是浏览器
    window 可以省略
    删除对应的键值对 removeItem(“name”)
    localStorge.clear();

    session:会话

    alert()
    confirm() 加选项的弹窗
    文本框弹窗 prompt(); 双参 “请输入你的名字”,“例如张三” 第二个可以不写
    但是基本都不用

    ✒️历史

    history.forward();
    history.back(); 退
    history.go(); 传的参数为正 前进 负后退 参数就是步数

    ✒️跳转页面

    function fun(){
    location.href = “”; demo.html 网页 指定跳转位置
    alert(location.href); 取当前页面完整地址
    }

    ✒️屏幕 screen

    console.log(screen.width);

    ✒️事件

    参数1:要添加的事件类型
    参数2:添加事件要触发的函数
    style
    div{}
    div
    script
    let div = document.querySelector(“div”);
    div.addEventListener(“click”,function(){
    alert(“1”);
    })

    ✒️操作元素的属性

    div.onclick = function(){ “onclick”};
    删除事件的方式1
    div.onclick = null/false;

    let callback= function(){
    console.log(“callback”);
    }
    div.addEventListener(“click”,callback); 添加
    div.removeEventListener(“click”,callback); 删除事件

    form action=aaa οnsubmit=”fun()” 表单 用于表单数据提交之前,例如数据校验
    input type= ‘text’ requied
    input type=submit value=”提交”
    script
    function fun(){
    return true;
    }
    onsubmit注意:
    1.加在form表单上
    2.onsubmit 要有return
    3.函数也要返回Boolean类型

    ✒️事件冒泡

    父元素又事件会出发子元素的事件
    ul οnclick=”fun()”
    li ”哈哈哈
    script
    function fun(){
    alert(“111”);
    }
    let li = document.querSelector(“li”)
    li.addEventListener(“click”,fuction(event)){ 自动传方法
    alert”222”
    event.stopPropagation();
    }
    1.事件冒泡要在子元素的事件触发函数中阻止
    2.借助event对象的
    3.调用一个方法

    箭头函数
    let callback= (a) =>{console.log()}

  • 相关阅读:
    HTML期末大学生网页设计作业——奇恩动漫HTML (1页面) HTML CSS JS网页设计期末课程大作业
    2022年最新的西安Java培训机构十大排名榜单
    [论文阅读] 颜色迁移-直方图渐进式颜色迁移
    Apache Spark 的基本概念和在大数据分析中的应用
    MyBatis trim标签起什么作用呢?
    [附源码]Python计算机毕业设计Django基于Java酒店管理系统
    初步上手Git软件及GitHub平台:基本操作方法
    前端技能树,面试复习第 50 天—— Vue3.0 基础 | Vue3 有什么更新 | Composition API
    八股总结(六):Android基础:四大组件与UI控件
    React(2)
  • 原文地址:https://blog.csdn.net/weixin_49405762/article/details/126544965