DAY7 JS应用

来陪可莉炸鱼吧
已于 2023-01-14 17:31:41 修改
阅读量69
点赞数
分类专栏：前端文章标签： javascript 开发语言 ecmascript
于 2023-01-12 23:41:15 首次发布
本文链接：https://blog.csdn.net/Sheldon_2020/article/details/128647234
版权
前端专栏收录该内容
6 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <header>
        <h1 id="myTitle">San 框架</h1>
        <img src="https://baidu.github.io/san/img/logo-colorful.svg" alt="san logo">
        <h3>111</h3>
        <p class="detail">San: 一个快速、轻量、灵活的JS框架</p>
    </header>
    <main>
        <ul class="detail">
            <li data-index="1">数据驱动</li>
            <li data-index="2">HTML模板</li>
            <li>组件化</li>
            <li id="detail-performance">高性能视图</li>
            <li>组件反解</li>
        </ul>
        <p>
            教程是入门的捷径，请从 <a id="clickLink" href="https://baidu.github.io/san/">这里</a>开始了解san
        </p>
    </main>
    <script>
        //一、DOM基础操作
        let domResult;
        // 查
        // 1.通过执行document上成员函数获取DOM节点
        // 1）通过id查找
        // 如果页面id存在重名的情况，只会返回第一个节点的DOM对象
        // domResult=document.getElementById("myTitle");
        //2)通过标签名查找，返回的是NodeList
        //NodeList通常是一个实时集合，文档节点发生变化随之变化
        // NodeList不是一个数组，是一个类似数组的对象
        // domResult=document.getElementsByTagName("li");
        // 3)通过class属性查找，返回的是NodeList
        // domResult=document.getElementsByClassName("detail");

        // 2.根据传入的CSS选择器，查找匹配的DOM节点
        // 1） querySetector 只返回第一个匹配到的DOM节点
        // 2） querySetectorAll 返回所有DOM节点
        // 查找第一个 标签名为 p 的节点
        // domResult=document.querySelector('p');
        // 查找所有 标签名为 p 的节点
        // domResult=document.querySelectorAll('p');
        // 查找所有class 属性的值为detail的元素
        // domResult=document.querySelectorAll('detail');
        //匹配直接嵌套在<ul>元素内所有的<li>元素
        // domResult=document.querySelectorAll("ul > li")
        // 匹配main中的xxx
        // domResult=document.querySelectorAll("main > *");
        // 匹配main中所有子孙元素
        // domResult=document.querySelectorAll("main *");
        //匹配main中的的a元素
        // domResult=document.querySelectorAll("main a");
        //匹配img后面的h3元素
        // domResult=document.querySelectorAll("img + h3");
        // domResult=document.querySelectorAll("[data-index]");
        // domResult=document.querySelectorAll('[data-index="1"]');
        // console.log(domResult)

        //3.根据当前已经获取的节点，获取与该DOM节点相关的父、子、兄弟节点
        // 1）根据获取到的节点，直接获取该节点的子节点
        let ulDomResult =document.getElementsByTagName("ul")[0];
        // console.log(ulDomResult.children);
        // 2) 当前节点父元素节点
        // console.log(ulDomResult.parentNode);
        // 紧跟在后面的兄弟节点，如果已经是最后一个返回null
        // console.log(ulDomResult.nextElementSibling);

        let titleDom =document.getElementById("detail-performance");
        // 1.修改innerHTML,内容中的标签将会被识别为HTML格式
        // titleDom.innerHTML="<strong>渲染速度很快</strong>";
        // 2.修改textContent，新的内容完整呈现在页面上，不会有css
        // titleDom.textContent="<strong>渲染速度很快</strong>"
        // 3.修改style属性值
        // titleDom.style="color:blue";
        //4.修改指定属性值，注意属性名中，所有大写字母都会被转为小写
        titleDom.setAttribute("some-attribute","666");
        // console.log(titleDom.getAttribute("some-attribute"));

        //增
        function  getCurrentTimeStr(){
            const date =new Date();
            const hour =date.getHours();
            const minutes=date.getMinutes();
            const second=date.getSeconds();
            return [hour,minutes,second].join(":");
        }
        let newDom=document.createElement("p");
        newDom.textContent ="页面加载时间为"+getCurrentTimeStr();
        document.body.appendChild(newDom);

        //删除
        //remove函数
        // let liToRemove =document.getElementsByTagName("li")[0];
        // console.log(liToRemove);
        // liToRemove.remove();
        //
        // //二、DOM事件
        // //1. 通过给DOM对象的onclick成员赋值为函数，来监听DOM事件
        // let liDom=document.getElementById("detail-performance");
        // liDom.onclick=function (event){
        //     alert("li 响应事件");
        //     console.log("li响应click事件");
        // }
        //
        // // 结合上个小例子，尝试事件的冒泡
        // let ul = document.getElementsByTagName("ul")[0];
        // ul.onclick=function (event){
        //     console.log("ul响应click事件");
        // }
        //
        // document.body.onclick = function (e){
        //     console.log("body响应click事件");
        // }
        //
        // // 2.通过addEventListener 方式监听事件，可以处理多个处理函数
        // let imgDom = document.getElementsByTagName("img")[0];
        // imgDom.addEventListener("click",function (event){
        //     console.log("通过addEventListener绑定的事件触发，1");
        // })
        // imgDom.addEventListener("click",function (event){
        //     console.log("通过addEventListener绑定的事件触发，2");
        // })
        // imgDom.addEventListener("click",function (event){
        //     console.log("通过addEventListener绑定的事件触发，3");
        // })
        //
        // //通过给onclick 数值函数，只能绑定一个事件处理函数,并且会覆盖
        // imgDom.onclick=(e)=>{
        //     console.log("通过onclick绑定事件：1");
        // };
        // imgDom.onclick =(e)=>{
        //     console.log("通过onclick绑定事件：2");
        // }

        //三、简单的BOM操作

        //window 以及下面的navigator,history,location,localstorage,cookieStore,setTimeOut,setInterval等等
        // 每一个对象都有较多属性

        //alert 弹出提示框
        // window.alert("welcome");
        // let proptResult=window.prompt("请输入你的名字","张三");
        // console.log(proptResult)

        //navigator相关
        let info=window.navigator.userAgent;
        let infoDom =document.createElement("footer");
        infoDom.textContent="您好！\n您的浏览器信息为"+info;
        document.body.appendChild(infoDom);


        // navigator.getBattery().then((battery)=>{
        //     console.log("是否在充电"+(battery.charging?"是":"否"));
        //     console.log("电池电量"+battery.level*100+"%");
        // })

        // let confirmResult = window.confirm("是否要跳转到百度");
        // if(confirmResult){
        //     window.location.href="http://www.baidu.com";
        // }

        //location的更多属性
        console.log("当前完整url为:",location.href);
        console.log("协议头",location.protocol);
        console.log("域名",location.host);
        console.log("路径",location.pathname);
        console.log("参数",location.search);
        console.log("哈希值",location.hash);

        //四、AJAX
        //1.使用XHR方式
        //使用XMLHttpRequest 对象与服务器通信
        // let httpRequest =new XMLHttpRequest();
        //
        // if(!httpRequest){
        //     alert("浏览器不支持 XMLHttpRequest");
        // }else {
        //     httpRequest.onreadystatechange = function (){
        //         if(httpRequest.readyState === httpRequest.DONE){
        //             if(httpRequest.status === 200){
        //                 console.log(httpRequest.responseText);
        //             }else {
        //                 console.log("There was a problem with request.")
        //             }
        //         }else {
        //             console.log("readyStat change: ",httpRequest.readyState)
        //         }
        //     }
        //     httpRequest.open(
        //         "GET",
        //         " https://mock.presstime.cn/mock/63bff4986c1337005665cebd/example/query"
        //     );
        //     httpRequest.send();
        // }

        //第二种方法fetch
        fetch(" https://mock.presstime.cn/mock/63bff4986c1337005665cebd/example/query")
            .then(function (response){
            return response.json();
        })
            .then(function (myJson){
            console.log(myJson);
        });

    </script>
</body>
</html>