其他分享
首页 > 其他分享> > 2022-08-25 第二小组 张鑫 学习笔记

2022-08-25 第二小组 张鑫 学习笔记

作者:互联网

实训四十七天 元素操作 BOM

1.学习内容

自定义属性

设置元素属性
<div haha="abc" id="xyz"></div>
<script>
    let div = document.querySelector("div");
    
    //获取属性值
    //元素.属性名 的方式只能适用于元素原生的属性
    
    console.log(div.getAttribute("haha"));
    
    //设置元素的属性
    div.className="mmm";
    
    //用元素,属性名的方式行不通
    div.setAttribute("class","nnn");
    div.setAttribute("hehehe","hiehiehie");
    
    //重复赋值会覆盖
    div.setAttribute("hahaha","hijklmn");
    
    //删除属性
    div.removeAttribute("haha");
</script>
获取元素属性
<div haha="abc" id="xyz"></div>
    <script>
        let div = document.querySelector("div");
        //拿到元素的所有屬性
        //返回的结果是一个属性节点的映射和集合
        console.log(div.attributes);

        console.log(div.attributes[1]);
        console.log(div.attributes[1].name);
        console.log(div.attributes[1].value);
        div.attributes[1].value='xxx';

    </script>
定义样式
<div>112233</div>
    <script>
        let div = document.querySelector("div");
        div.id="aaa";
        div.title = "bbb";
        //样式特殊 className
        div.className ="fontStyle";
        //行内样式
        div.style="color:yellow;display:inline";
    </script>

BOM

BOM:Browser Obje Model
BOM核心对象 window

回调函数
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 calllback = function(data){
    console.log("I am calllback."+data);
}
/*
    传入的参数是一个函数类型时
    只需要写函数名,不需要写小括号
*/ 
test(calllback);
/*
    回调函数,一个函数的参数是另一个函数
*/ 
//function fun(){}
时间计时器
<body>
    <button onclick="btimer">开始</button>   
    <button onclick="etimer">终止</button>
    <script>
        /*
            参数1:函数
            参数2:延迟时间
        */ 
       //5000毫秒后打印
       //timer 叫一个计时器
        let timer = setTimeout(function () {
            document.write("<h1>5s中后可以见到我</h>")
        },5000);

        //清除计时函数
        //参数:要清除哪一个计时器
        clearTimeout(timer);

        /*
            定义两个按钮
            点击第一个按钮,几秒钟后打印输出一句话
            点击第二个按钮,终止这个操作
        */
        let btimer = setTimeout(function () {
            document.write("<h1>2s中后可以见到我</h>");   
        },2000);

        //清除计时函数
        //参数:要清除哪一个计时器
        let etimer = clearTimeout(btimer);      
    </script>
    
</body>
周期定时器
<script>
    let timer = setInterval(function () {
        console.log("123");
    }, 2000);
    clearInterval(timer);
    /*
    倒计时
    */
    let i = 5;
    let goTime = setInterval(function () {
        if (i >= 1) {
            document.write(i);
            i--;
        }
        else
            document.write("go")
    }, 2000)
    clearInterval(timer);
</script>
浏览器
<script>
    /*
        浏览器自带小型数据库
        浏览器自带的一个map集合,永久保存
    */
   //向Storage中设置键值对
   window.localStorage.setItem("name","lucy");
   //从Storage中根据键获取值
   console.log(localStorage.getItem("name"));
   //从Storage中删除对应的键值对
   localStorage.removeItem("name");
   //清空Storage中所有的键值对
   localStorage.clear();
    /*
        session:会话--一问一答
    */
   sessionStorage.setItem("name","jack");
</script>
警告弹窗
<script>
     //警告弹窗
     alert(1);
     //带有确认和取消的弹窗
     //点击确定返回true,点击取消,返回false
     let flag =confirm("你是小黑子吧?");
     alert(flag);
     //带有文本框的弹窗
     let name = prompt("请输入你的名字:","例如:ikun");
     alert(name);
     //开发基本不用
 </script>
页面跳转
<a href="demo02.html"></a>
<script>
    /*
        localStorage 
        sessionStorage
        history 
    */ 
   function fun(){
    //前进
    history.forward();
    //退退退
    history.back();
    //既可以前进也可以后退
    //传入参数为正,前进;传入参数为负,后退
    history.go();
   }
</script>
<button onclick="fun()">按钮</button>
<script>
    //location
    function fun(){
        //值是要跳转页面的路径
        //可以是相对路径,也可以是绝对
        location.href ="demo02.html";
        //取值
        alert(location.href);
    }
</script>
获取浏览器参数
 <script>
     //navigator
     //获取一些浏览器的参数
     console.log(navigator.platform);
     console.log(navigator.appVersion);
     console.log(navigator.appName);
     
 </script>
关闭浏览器
 <button onclick="fun()">关闭</button>
 <script>
     function fun() {
         window.close();
         window.open("demo01.html");
         window.print();
     }
 </script>

事件

创建事件
<script>

   //获取指定元素
   let div =document.querySelector("div");
   /*
        参数1:要添加的事件类型
        参数2:添加事件要触发的函数
   */
   div.addEventListener("click",function(){
    alert("click");
   });
   //操作元素的属性
   div.onclick=function(){
    alert("onclick");
   };
</script>
删除事件
<script>
    let div = document.querySelector("div");
    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);
</script>
<form action="aaa" onsubmit="return fun()">
    <input type="text" required>
    <input type="submit" value="提交">
</form>
<script>
    /*
        onsubmit注意事项
        1.onsubmit加在form表单上
        2.onsubmit要有return
        3.函数也要返回Boolean类型
    */
    function fun(){
        return true;
    }
</script>
阻止事件冒泡
<script>
    function fun(){
        alert("111");
    }
    let li =document.querySelector("li");
    li.addEventListener("click",function(event){
        alert("222");
        //阻止事件冒泡
        event.stopPropagation();
    })
        //阻止事件冒泡
        /*
            1.在子元素的事件触发函数中阻止
            2.借助event对象
            3.调用一个方法
            event必须用add添加才能使用
        */
</script>
ES6
<script>
    /*
        ES6语法
        1.let const
        2.模板字符串
        3.箭头函数
        4.Symbol
        5.Promise 函数,处理回调地狱
    */
    setInterval(() => {
        setInterval(() => {
            setInterval(() => {
            }, 4000)
        }, 3000)
    }, 2000);
    let a = Symbol("hello");
    let b = Symbol("hello");
    console.log(a == b);
    let callback = (a, b) => { a };
    setInterval(() => { }, 2000)
    let sql = `select * from student left join teacher on st sadf
   asf
   dasdfa 
   asfa
   sa
   asf
   asfda
   ffasd fasdfsdfas
   fasdfsad 
   false`;
</script>

案例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <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>
</body>
</html>

案例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="goTime()">倒计时</button>
    <div>

    </div>
    <script>
        function goTime(){
            let div = document.querySelector("div");
            let i=5;
            let timer =setInterval(function(){
                div.innerHTML=`<h1>${i}</h>`;
                i--;
                if(i<0){
                    // clearInterval(timer);
                    div.innerHTML="<h1>GO!!</h1>"
                    return;
                }
            },1000)
        }
    </script>
</body>
</html>

案例3——点餐系统

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网上点餐</title>
    <style>
        
    </style>
</head>

<body>

    <h1>欢迎来到本小店</h1>

    <p>
        辣子鸡----------------------¥45
        <button id="but1down">-</button>
        <input type="text" size="2" value="0" id="numlzj"> 
        <button id="but1up">+</button>
        <button id="but1add">添加</button>
    </p>

    <p>
        木须柿子--------------------¥25
        <button id="but2down">-</button>
        <input type="text" size="2" value="0" id="nummxsz">
        <button id="but2up">+</button>
        <button id="but2add">添加</button>
    </p>

    <p>
        可口可乐--------------------¥ 4
        <button id="but3down">-</button>
        <input type="text" size="2" value="0" id="numkl">
        <button id="but3up">+</button>
        <button id="but3add">添加</button>
    </p>

    <p>
        米饭二两--------------------¥ 2
        <button id="but4down">-</button>
        <input type="text" size="2" value="0" id="nummf">
        <button id="but4up">+</button>
        <button id="but4add">添加</button>
    </p>

    <button id="order">查看订单</button>
    <button id="empty">清空订单</button>
    <button id="check">结账</button>

    <script>
        let laziji = "";       
        let n1 = document.querySelector("#numlzj");
        let p1 = document.querySelector("#numlzj").value;
        let but1down = document.querySelector("#but1down");
        let but1up = document.querySelector("#but1up");
        let but1add = document.querySelector("#but1add");

        but1down.onclick = function () {
            let n1 = document.querySelector("#numlzj");
            let p1 = document.querySelector("#numlzj").value;
            if(p1 != 0){
                p1--;
                laziji = "辣子鸡----------------------¥45*" + p1;

                n1.value = p1;
            }
            
        }

        but1up.onclick = function () {
            let n1 = document.querySelector("#numlzj");
            let p1 = document.querySelector("#numlzj").value;
            p1++;
            laziji = "辣子鸡----------------------¥45*" + p1;

            n1.value = p1;
        }
        but1add.onclick = function () {
            let p1= document.querySelector("#numlzj").value;
            
            laziji = "辣子鸡----------------------¥45*" + p1;
            n1.value = p1;
        }

        let muxushizi = "";
        let n2 = document.querySelector("#nummxsz");
        let p2 = document.querySelector("#numlzj").value;
        let but2down = document.querySelector("#but2down");
        let but2up = document.querySelector("#but2up");
        let but2add = document.querySelector("#but2add");

        but2down.onclick = function () {
            let n2 = document.querySelector("#nummxsz");
            let p2 = document.querySelector("#nummxsz").value;
            if(p2 != 0){
                p2--;
                muxushizi = "木须柿子----------------------¥25*" + p2;

                n2.value = p2;
            }
        }

        but2up.onclick = function () {
            let n2 = document.querySelector("#nummxsz");
            let p2 = document.querySelector("#nummxsz").value;
            p2++;
            muxushizi = "木须柿子----------------------¥25*" + p2;

            n2.value = p2;
        }
        but2add.onclick = function () {
            let n2 = document.querySelector("#nummxsz");
            let p2 = document.querySelector("#nummxsz").value;
            muxushizi = "木须柿子----------------------¥25*" + p2;
            n2.value = p2;
        }


        let kele = "";
        let n3 = document.querySelector("#numkl");
        let p3 = document.querySelector("#numkl").value;
        let but3down = document.querySelector("#but3down");
        let but3up = document.querySelector("#but3up");
        let but3add = document.querySelector("#but3add");

        but3down.onclick = function () {
            let n3 = document.querySelector("#numkl");
            let p3 = document.querySelector("#numkl").value;
            if(p3 != 0){
                p3--;
                kele = "可口可乐--------------------¥ 4*" + p3;

                n3.value = p3;
            }

        }

        but3up.onclick = function () {
            let n3 = document.querySelector("#numkl");
            let p3 = document.querySelector("#numkl").value;
            p3++;
            kele = "可口可乐--------------------¥ 4*" + p3;

            n3.value = p3;
        }
        but3add.onclick = function () {
            let n3 = document.querySelector("#numkl");
            let p3 = document.querySelector("#numkl").value;
            kele = "可口可乐--------------------¥ 4*" + p3;
            n3.value = p3;
        }
        let mifan = "";
        let n4 = document.querySelector("#nummf");
        let p4 = document.querySelector("#nummf").value;
        let but4down = document.querySelector("#but4down");
        let but4up = document.querySelector("#but4up");
        let but4add = document.querySelector("#but4add");

        but4down.onclick = function () {
            let n4 = document.querySelector("#nummf");
            let p4 = document.querySelector("#nummf").value;
            if(p4 != 0){
                p4--;
                mifan = "米饭二两----------------------¥2*" + p4;

                n4.value = p4;
            }
        }

        but4up.onclick = function () {
            let n4 = document.querySelector("#nummf");
            let p4 = document.querySelector("#nummf").value;
            
            p4++;
            mifan = "米饭二两----------------------¥2*" + p4;

            n4.value = p4;
        }
        but4add.onclick = function () {
            let n4 = document.querySelector("#nummf");
            let p4 = document.querySelector("#nummf").value;
            mifan = "米饭二两----------------------¥2*" + p4;
            n4.value = p4;
        }

        order.onclick = function () {
            let n1 = document.querySelector("#numlzj");
            let n2 = document.querySelector("#nummxsz");
            let n3 = document.querySelector("#numkl");
            let n4 = document.querySelector("#nummf");
            let p1 = document.querySelector("#numlzj").value;
            let p2 = document.querySelector("#nummxsz").value;
            let p3 = document.querySelector("#numkl").value;
            let p4 = document.querySelector("#nummf").value;
            alert(laziji + "\n" + muxushizi + "\n" + kele + "\n" + mifan + "\n" + "总价:" + (45 * p1 + 25 * p2 + 4 * p3 + 2 * p4));
        }
        empty.onclick = function () {
            let n1 = document.querySelector("#numlzj");
            let n2 = document.querySelector("#nummxsz");
            let n3 = document.querySelector("#numkl");
            let n4 = document.querySelector("#nummf");
            laziji = "";
            muxushizi = "";
            kele = "";
            mifan = "";
            n1.value = 0;
            n2.value = 0;
            n3.value = 0;
            n4.value = 0;
            }
    
        check.onclick = function () {
            let n1 = document.querySelector("#numlzj");
            let n2 = document.querySelector("#nummxsz");
            let n3 = document.querySelector("#numkl");
            let n4 = document.querySelector("#nummf");
            let p1 = document.querySelector("#numlzj").value;
            let p2 = document.querySelector("#nummxsz").value;
            let p3 = document.querySelector("#numkl").value;
            let p4 = document.querySelector("#nummf").value;
            let flag = confirm("共消费" + (45 * p1 + 25 * p2 + 4 * p3 + 2 * p4) + "是否结账?");
            if (flag == true) {
                laziji = "";
                muxushizi = "";
                kele = "";
                mifan = "";
                n1.value = 0;
            n2.value = 0;
            n3.value = 0;
            n4.value = 0;
                alert("消费成功");
            }
        } 
    </script>
</body>

</html>

标签:function,25,张鑫,08,value,let,querySelector,div,document
来源: https://www.cnblogs.com/zxscj/p/16631327.html