标签：function 25 张鑫 08 value let querySelector div document

实训四十七天元素操作 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
From： https://www.cnblogs.com/zxscj/p/16631327.html

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

实训四十七天元素操作 BOM

1.学习内容

自定义属性

设置元素属性

获取元素属性

定义样式

BOM

回调函数

时间计时器

周期定时器

浏览器

警告弹窗

页面跳转

获取浏览器参数

关闭浏览器

事件

创建事件

删除事件

阻止事件冒泡

ES6

案例1

案例2

案例3——点餐系统

相关文章

赞助商

阅读排行

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

实训四十七天 元素操作 BOM

1.学习内容

自定义属性

设置元素属性

获取元素属性

定义样式

BOM

回调函数

时间计时器

周期定时器

浏览器

警告弹窗

页面跳转

获取浏览器参数

关闭浏览器

事件

创建事件

删除事件

阻止事件冒泡

ES6

案例1

案例2

案例3——点餐系统

相关文章

赞助商

阅读排行

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

实训四十七天元素操作 BOM