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

🚩前言

🌻今天继续学习Javascript

目录

✏️Javascript

✒️属性获取

    <div haha="abc" id="xyz"></div>
    <script>
        let div = document.querySelector("div");
        // 获取这个属性的值
        // 为什么name拿不到，id能拿到
        // 元素.属性名的方式只适用于元素原生的属性
        // console.log(div.haha);
        console.log(div.getAttribute("haha"));

        // 设置元素的属性
        // div.className="mmm";
        // 用元素.属性名的方式行不通
        // div.setAttribute("class","nnn");
        div.setAttribute("hehehe","heihiehie");
        // 重复的设置会覆盖，修改
        div.setAttribute("haha","hijklmn");

        // 删除属性
        // div.removeAttribute("haha");

    </script>

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

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

✒️BOM

            BOM：Browser Object Model
            BOM核心对象window
            navigator：
            history：
            screen：
            location：

 回调函数

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() {}
    </script>

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

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

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()}