js_BOM&Dom&Ajax

这篇具有很好参考价值的文章主要介绍了js_BOM&Dom&Ajax。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

总结

讲解自定义对象

在ES5中没有像Java中一样专门的class关键字定义类(ES6中可以用class定义类),所以在ES5中创建类其实和创建函数是一样的语法:

function 对象名/类名/方法名(){
}

一种语法代表了多重含义,在JavaScript中若想清楚的区分定义的到底是方法还是类性质的对象,那么建议方法名称小写,建议类或对象名称首字母大写

一种语法代表了多重含义,在JavaScript中若想清楚的区分定义的到底是方法还是类性质的对象,那么建议方法名称小写,建议类或对象名称首字母大写

类中定义方法,有下列形式:

(1) 通过new的实例化对象添加方法(特点:这种方式添加的方法只属于当前实例)
(2) 在对象中使用this关键字(特点:这种方式添加的属性和方法属于所有实例)
(3) 通过prototype添加方法(特点:这种动态添加的属性和方法属于所有实例,而且不会影响以前的功能)
<body>
    <!-- 讲解自定义对象 -->
    <script>
        function Person() { // 函数名大驼峰是一个对象,小驼峰是函数
            // 属性
            var name;
            var age;
            // 方法
            this.getName = function() {
                return this.name;
            }
            this.setName = function(n) {
                this.name = n;
            }

            this.getAge = function() {
                return this.age;
            }
            this.setAge = function(a) {
                this.age = a;
            }
        }
        // 创建对象
        // var person = new Person();
        // person.setAge(18);
        // person.setName("张三")
        // console.log(person.getAge());
        // console.log(person.getName());

        // var person2 = new Person();
        // person2.setAge(20);
        // person2.setName("蘋蘋");
        // console.log(person2.getAge());
        // console.log(person2.getName());

        // 讲解prototype:动态为对象扩展属性和方法
       // 对象名.prototype.属性名
       // 对象名.prototype.函数名 = function() {}
        Person.prototype.gender;
        // var p = new Person();
        // p.name = "张三";
        // p.age = 18;
        // p.gender = "女";
        // console.log(p.name + "," + p.age + "," + p.gender);

        Person.prototype.getGender = function() {
            return this.gender;
        }
        Person.prototype.setGender = function(g) {
            this.gender = g;
        }

        var p2 = new Person();
        p2.setName("老王吧");
        p2.setAge(10000);
        p2.setGender("公");
        console.log(p2.getName() + "," + p2.getAge() + "," + p2.getGender());

    </script>
</body>
  • 扩展对象,加一个方法
<body>
    <!-- 扩展Date对象,加一个方法 -->
    <script>
        Date.prototype.format = function() {
            var y = this.getFullYear();
            var m = this.getMonth() + 1;
            var d = this.getDate();
            var h = this.getHours();
            var mm = this.getMinutes();
            var s = this.getSeconds();
            m = m < 10 ? "0" + m : m;
            d = d < 10 ? "0" + d : d;
            h = h < 10 ? "0" + h : h;
            mm = mm < 10 ? "0" + mm : mm;
            s = s < 10 ? "0" + s : s;

            var rq = y + "-" + m + "-" + d + " " + h + ":" + mm + ":" + s;
            return rq;
        }
        var d = new Date();
        // console.log(d.format());
        console.log(d.toDateString());
        console.log(d.toLocaleDateString());
        console.log(d.toLocaleTimeString());
    </script>
</body>

BOM:操作浏览器的对象

BOM是Browser Object Model的缩写,简称浏览器对象模型,用于操作浏览器对象的:浏览器地址栏,历史记录,浏览器自身信息,浏览器窗口,浏览器文档

(1) 打开一个窗口就是一个window对象
(2) 窗口里面使用location表示地址栏
(3) 窗口的历史记录使用history来表示
(4) 浏览器的信息使用navigator来表示
(5) 窗口里面的内容使用document来表示

BOM是包括DOM,这里重点讲下window对象和location对象

  • window窗口对象

    window对象是BOM中的顶级对象,默认可以省略(即调用其函数时可以省略window.)

    window对象可以获取其他BOM对象

    **注意:**全局函数和window对象的函数不一样。全局函数不属于任何一个内置对象

  • location地址对象

    当前访问的网址的相关信息

    <script>
        // 弹框:1、警告框 alert(); 2、确认框 confirm()
    //    alert("abc");
    //    var temp = confirm("你要删除吗?");
    //    console.log(temp);
       // 打开新窗口
    //    window.open("https://baidu.com");

    // 定时方法
    // setTimeout():一次任务 setInterval():周期任务
    // var i = 0;
    // function fn() {
    //     console.log(i);
    //     i++;
    // }

    // setTimeout("fn()",3000);
    // var val = setInterval(fn,3000);
    // clearInterval(val);

    // function clearVal() {
    //     if(i == 5) 
    //      clearInterval(val);
    // }
    // clearVal();

    // setTimeout(() => {
    //     var d = new Date();
    //     var rq = d.toLocaleDateString() + " " + d.toLocaleTimeString();
    //     console.log(rq);
    // },1000);
    // setInterval(() => {
    //     var d = new Date();
    //     var rq = d.toLocaleDateString() + " " + d.toLocaleTimeString();
    //     console.log(rq);
    // },1000);

    // location:地址栏对象
    // var host = location.host;
    // console.log(host);
    // var hostname = location.hostname;
    // console.log(hostname);
    // console.log(location.port);
    // var addr = location.href; // 获取当前地址栏的地址
    // console.log(addr);
    // location.href = "https://www.baidu.com";

    var v = navigator.appVersion;
    console.log(v);
    </script>
</body>

DOM:文档对象模型(Document Object Model)

  • 简称 DOM,将页面所有的内容表示为可以修改的对象
  • 浏览器将我们编写在HTML中的每一个元素(Element)都变成了一个一个的对象
  • 所有这些对象都可以通过JavaScript来对其进行访问,可以通过JavaScript来操作页面
  • 这个将元素变为对象的过程称之为 文档对象模型(Document Object Model)

DOM树结构:通过DOM,树中的所有节点均可通过JS进行访问,所有的HTML元素均可被修改

  • 文档:一个页面就是一个文档,DOM中使用Document表示

  • 元素:页面中所有标签都是元素,DOM中使用Element表示,元素是对于标签的统称

  • 属性:标签中的所有属性在DOM中使用Attribute表示

  • 文本:标签中的所有文本在DOM中使用Text表示

  • 节点:通过DOM获取到的所有内容,例如:标签、标签属性、标签文本等,在DOM中使用node表示,也就是节点

  • DOM把以上内容都看做是对象

  • 元素操作

  1. 查询元素
    • getElementById():通过标签元素的ID获取到标签对象
    • getElementsByName():通过标签元素的name属性获取到标签对象,返回的是数组
    • getElementsByTagName():通过标签名称获取到标签对象,返回的是数组
    • document.documentElement:获取根节点html
      • clientWidth:获取页面宽度
      • clientHeight:获取页面高度
    • document.body: 获取body节点body
    • parentNode:获取指定元素的父节点,返回Node
<body>
    <!-- 获取标签对象的方式 -->
    <p id="p1" class="p1">123</p>
    <p id="p2" class="p1">abc</p>

    <ul>
        <li><a href="#">腊肉</a></li>
        <li><a href="#">猪蹄</a></li>
        <li><a href="#">香肠</a></li>
        <li><a href="#">腰花</a></li>
        <a>123</a>
        <a>abc</a>
    </ul>

    <input type="text" name="username" value="0" disabled />
    <input type="text" name="username" value="1" disabled />
    <input type="text" name="username" value="2" />
    <input type="text" name="username" value="3" />
    <script>
        // 获取p的方式1:通过id
        var pElement = document.getElementById("p1");
        console.log(pElement);
        // 通过标签名:获取是一个集合
        var pElement2 = document.getElementsByTagName("p");
        console.log(pElement2[0]);
        // 通过class:className来获取,获取数组
        var pElement3 = document.getElementsByClassName("p1");
        console.log(pElement3[0]);

        // 通过name属性获取
        var inputElement = document.getElementsByName("username");
        console.log(inputElement[0]);

        // 通过选择器来获取:class选择器 .名字,id选择器 #名字
        // var pElement4 = document.querySelector(".p1"); // 获取的是单个对象
        // console.log(pElement4);
        var pElement5 = document.querySelector("#p2");
        console.log(pElement5);

        var arrs = document.querySelectorAll(".p1");
        console.log(arrs[1]);

        // 标签名选择器 组合,层次,伪类
        var uElement = document.querySelectorAll("ul,p");
        console.log(uElement);

        var list2 = document.querySelectorAll("input:disabled");
        console.log(list2[0]);
        console.log(list2[1]);
    </script>
</body>
<body>
    <!-- 讲解获取节点的父节点 -->

    <div class="div1">
        <p class="p1">hello,<span>js</span></p>
    </div>
    <script>
        var bd = document.querySelector("body");
        // body专属获取方式
        // var bd2 = document.body;
        // console.log(bd2);
        var spanElement = document.querySelector("span");
        console.log(spanElement);
        // 获取spanElement的父节点
        var parent1 = spanElement.parentNode; // 获取父节点
        console.log(parent1);
        var parent2 = parent1.parentNode;
        console.log(parent2);

        // 获取整个文档
        var dd = document.documentElement;
        console.log(dd);
        // 获取文档的大小()宽度和高度
        var w = dd.clientWidth; // 获取文档的宽度
        var h = dd.clientHeight;
        console.log("width = " + w + ",height = " + h);

    </script>
</body>
  1. 创建和删除标签
    • 创建新的元素:document.createElement(元素名称)

    • 父节点追加子节点:appendChild(元素对象)

    • 父节点删除子节点:父节点对象.removeChild(元素对象):

    • 修改元素:就是先删除再创建

<body>
    <!-- 创建和删除标签 -->
    <p></p>

    <div>
        <a href="#">点击</a>
    </div>
    <script>
        // 1、创建标签
        // for(var i = 0; i < 10; i++) {
        //     // document.createElement("标签名"); // 创建标签
        //     var spanElement = document.createElement("span");
        //     console.log(spanElement);
        //     // 在双标签中放入内容:innerText:文本 innerHTML:标签
        //     spanElement.innerText = "你好"; // 在创建好的标签对象当中放入你好的文本
        //     // 将创建标签放入页面存在节点里面去
        //     var pElement = document.querySelector("p");
        //     pElement.appendChild(spanElement); // 将span 放到p标签里面
        // }

        // 2、删除标签
        // var divElment = document.querySelector("div");
        // var aElement = document.querySelector("a");
        // divElment.removeChild(aElement); // 从父节点中删除子节点

        // 自删
        var aElement = document.querySelector("a");
        aElement.remove();

        // 修改标签
        var pElement = document.createElement("p");
        pElement.innerHTML = "<span>从持续创新</span>";
        var divElement = document.querySelector("div");
        divElement.appendChild(pElement);
        console.log(divElement);
    </script>
</body>
  1. 操作标签对象属性和样式

    • 文本操作

      • innerHTML:设置或者获取双标签中的HTML文本
      • innerText:设置或者获取双标签中的纯文本
        • 区别
          • HTML可以解析标签:如果输入的内容是标签包裹,可以解析
          • Text原样展示输入的内容
      • value:获取value属性值【所有的input,select下拉框,textarea等】
    • 属性操作

      • 方式一:元素对象.setAttribute(属性名称,属性值)
        • 可以修改元素中本身不存在的属性
      • 方式二:元素对象.属性名称 = 属性值
        • 只能修改元素中本身存在的属性

注意:如果要修改元素的class属性,属性名称为 className,因为在JS中class是保留字

<body>
    <!-- 讲解操作标签对象属性和样式 -->
    <input type="text" name="username" /> <br />
    <script>
        var inputElement = document.querySelector("input");
        // 1、用标签对象直接.属性名
        // inputElement.value = "张三"; // 为value赋值
        // var val = inputElement.value; // 获取value的属性值
        // console.log(val);

        // var imgElemet = document.createElement("img");
        // imgElemet.src = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F3e14585e-9746-48f4-9f91-f702e6aebd5b%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1707293255&t=ae6bb342619ba9833f1a257f0acd1743";
        // imgElemet.alt = "樱桃";
        // imgElemet.title = "冕宁樱桃";
        // console.log(imgElemet);
        // imgElemet.style = "width:300px; height:300px;border-radius:150px;";
        // document.body.appendChild(imgElemet);
        // 注意:直接点只能操作标签有的属性

        // 2、setAttribute("属性名称","属性的值"):设置属性, getAttribute("属性名称"):取属性的值
        inputElement.setAttribute("value","隔壁老王的辰辰的亲爱的蘋蘋");
        var val = inputElement.getAttribute("value");
        console.log(val);
        inputElement.setAttribute("nb","老王就是NB");
        console.log(inputElement);
    </script>
</body>
  • onload
    • 因为我们页面是从上至下执行,所以如果JS代码在元素标签前面,那么我们是获取不到元素对象的,因为页面还未执行到元素标签
    • 两种解决方案
      • 第一种:我们可以将JS代码写在标签后面
      • 第二种:使用window.onload方法
        • onload:延迟执行,等页面全都执行完成之后,再执行其中的JS代码
 <!-- 1、放在标签之后 2、放在标签之前 -->
    <!-- <script>
        window.onload = function() {
            console.log(document.querySelector("p").innerText);
        }
    </script>
    <p>hello</p> -->
    <!-- <script>
        console.log(document.querySelector("p"));
    </script> -->
  • 事件注册

    注册事件两种方式

    • 第一种:直接在标签上加入
    • 第二种:在标签对象上绑定
    • addEventListener(“事件名称”,function(){})
    <body>
        <!-- 讲解为标签绑定事件:3种方式 -->
        <!-- 1、直接在标签上加入 -->
        <!-- <input type="text" name="username" οnfοcus="alert('获取焦点事件')" οnblur="alert('失去焦点事件')" /> -->
    
        <!-- <input type="text" name="username" οnfοcus="change()" οnblur="resetColor()" />
        <script>
            function change() {
                var inputElement = document.querySelector("input");
                inputElement.setAttribute("style","color:red");
            }
            function resetColor() {
                var inputElement = document.querySelector("input");
                inputElement.setAttribute("style","color:gray");
            }
        </script> -->
    
        <!-- 2、在标签对象上绑定 -->
        <!-- <p>dsfdslfjdskf</p>
        <script>
            var pElement = document.querySelector("p");
            // 给对象绑定事件
            pElement.onclick = function() {
                this.style.fontSize = "30px";
            }
        </script> -->
        <!-- 3、addEventListener("事件名称",function(){}) -->
        <img src="https://p6-pc-sign.douyinpic.com/tos-cn-i-0813/oAoATCfzAEzUbCAAZhAgt1hxybIdexSANALbbC~tplv-dy-aweme-images:q75.webp?biz_tag=aweme_images&from=3213915784&s=PackSourceEnum_SEO&sc=image&se=false&x-expires=1707274800&x-signature=VBe5aehaVxeecAbL7Pc9dgtevx4%3D" />
    
        <script>
            var imgElement = document.querySelector("img");
            // 注册监听事件
            imgElement.addEventListener('click',function() {
                this.src = "https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2023%2F1227%2F82cfa2c0j00s6akxv001cd000hs00frp.jpg&thumbnail=660x2147483647&quality=80&type=jpg";
            });
    
            
        </script>
    </body>
    

实例:打地鼠

<body>
    <p>分数:<span>0</span>分,还是剩余:<label>20</label></p>
    <script>
        var score = 0;
        var interval = setInterval(() => {
            var dd = document.documentElement;
            var imgElement = document.createElement("img");
            imgElement.src = "./1.png";
            imgElement.style = "width:100px;height:100px;border-radius:50px;position:absolute;";
            imgElement.style.top = Math.random() * (dd.clientHeight - 150)+ "px";
            imgElement.style.left = Math.random() * (dd.clientWidth - 100) + "px";
            imgElement.ondblclick = function() {
                this.remove();
                score += 10;
            }
            document.body.appendChild(imgElement);
            document.querySelector("span").innerText = score;
        },100);
        
         
    </script>
</body>
  • js中常用事件(操作)

    onclick:用户点击对象 - 【常用】

    • ondblclick:用户双击对象 - 【常用】
    • onmouseover:鼠标指针移动到对象上 - 【常用】
    • onmouseout: 鼠标指针移出对象 - 【常用】
    • onkeydown: 按下键盘 - 【常用】
    • onblur: 用户离开对象。失去焦点 - 【常用】
    • onfocus: 用户获得焦点 - 【常用】
    • onchange: 用户改变对象的值 - 【常用】
    • onload: 页面完成加载 - 【常用】

实例:

<body>
    <!-- 常用事件 -->
    <!-- <script>
        document.body.onkeydown = function() {
            // event.keyCode; // 获取按键的键码

            // console.log(event.keyCode);
            if(event.keyCode == 38 || event.keyCode == 40) {
                alert("老王好剑");
            }
        }

    </script> -->
    <div style="width: 200px; height: 200px; background-color: lime;">

    </div>
    <select name="select">
        <option value="翠绿色">翠绿色</option>
        <option value="老王的黄色">老王的黄色</option>
        <option value="辰辰绿">辰辰绿</option>
        <option value="蘋蘋的粉">蘋蘋的粉</option>
    </select>
    <script>
        document.querySelector("select").onchange = function() {
           var val = this.value;
           if(val == "翠绿色") {
            document.querySelector("div").style.backgroundColor = "lime";
           } else if(val == "老王的黄色") {
            document.querySelector("div").style.backgroundColor = "yellow";
           }
           else if(val == "辰辰绿") {
            document.querySelector("div").style.backgroundColor = "green";
           }
           else if(val == "蘋蘋的粉") {
            document.querySelector("div").style.backgroundColor = "pink";
           }
        }
    </script>
</body>

Ajax

  • Ajax概念

    • Ajax:Asynchronous Javascript And XML,即是异步的JavaScript和XML,Ajax其实就是浏览器与服务器之间的一种异步通信方式

    • 异步的JavaScript:它可以异步地向服务器发送请求,在等待响应的过程中,不会阻塞当前页面,在这种情况下,浏览器可以做自己的事情。直到成功获取响应后,浏览器才开始处理响应数据。简单来说Ajax就是在浏览器不重新加载网页的情况下,对页面的某部分进行更新

    • XML:是前后端数据通信时传输数据的一种格式,现在已经多用于编写框架的配置文件,前后端交互数据现在比较常用的是 JSON

  • 为什么使用Ajax

    • 无刷新:不刷新整个页面,只刷新局部
    • 无刷新的好处
      • 只更新部分页面,有效利用带宽
      • 提供连续的用户体验
      • 提供类似C/S的交互效果,操作更方便
    • 互联网百分之99以上的项目都是使用Ajax异步请求
  • Ajax编写步骤

    • 第一步:获取Ajax对象

      注意:Ajax是需要在服务器中运行的,如果直接将HTML拖到浏览器那么Ajax无效

      • 获取Ajax对象:其他浏览器/IE7以上
      const ajax = new XMLHttpRequest();
      
    • 第二步:准备请求

      ajax.open("请求方式","请求地址");
      
    • 设置回调函数()

      • 绑定监听事件

        onreadystatechange需要绑定一个事件处理函数,该函数用来处理readystatechange事件。当AJAX对象的 readyState的值发生了改变时,该事件由系统触发。比如,从1变成了2,就会产生readystatechange事件。在当前不同的处理状态下,可以进行状态的捕获,做些相应处理。每一次的状态变化都会触发onreadystatechange绑定的处理函数,只是大部分时候我们只需要知道从 3变为4,即当前readyState为4时这个状态,此时数据响应已返回,并接收成功,等待下一步的处理

      • 此监听事件是异步的关键

      ajax.onreadystatechange=function(){    //处理返回的数据    //此函数中最需要的目的是为了获取正确的数据(成功接收数据,并且是正确的数据)};
      
    • 状态判断

      • readyState代表请求的状态,使用不同的数字代表一个状态:
      0:还未开始,没有调用send()方法 
      1:已经调用send(),正在发送请求
      2:请求完成 
      3:正在接收数据 
      4:数据接收成功  
      
      • 对于状态的判断书写代码的格式如下:
      ajax.onreadystatechange=function(){
          if(ajax.readyState == 4){//已经接收到服务器响应的内容了
              let result = ajax.responseText;
              //展示数据到页面
          }//这里最后不要写else,因为状态从0-1-2-3都会触发else
      };
      
      • 但是状态并不能保证回来的数据就是我们想要的数据,也可能是发回的错误提示。所以要想保证接受到的数据就是成功响应的数据,还需添加对另一个属性的判断(status)。这个属性代码响应的状态码,200代表成功,404代表没有找到资源,500代表服务器发生了运行异常:
      if(ajax.readyState == 4 && ajax.status == 200){
          //接收服务端响应回来的数据(responseText只接收text文本)
          let result = ajax.responseText;
      }
      

    **注意:**post请求多一步 - 设置请求头

理解实例:文章来源地址https://www.toymoban.com/news/detail-821679.html

<body>
    <input type="text" name="username" onblur="checkUsername()" />
    <script>
        function checkUsername() {
            // 1.创建ajax对象
            const ajax =  new XMLHttpRequest();
            // 2.准备请求
            // ajax.open("get","https://www.fastmock.site/mock/85185e7ffb59a2610bef52502ef45300/ajax/verifyName");
            ajax.open("post", "https://www.fastmock.site/mock/85185e7ffb59a2610bef52502ef45300/ajax/register");
            // 3.监听
            ajax.onreadystatechange = function() {
                console.log("我是监听。。。。")
                // 状态的判断
                if(ajax.readyState == 4 && ajax.status == 200) {
                    console.log(ajax.responseText);
                }
            }
            ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
            // 4.发送
            ajax.send();

            console.log("我是异步的后续代码。。。。")
        }
    </script>
</body>

到了这里,关于js_BOM&Dom&Ajax的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(七)

    实操: server.js utils/lib/index.js utils/package.json 从别处(网上、其他人手中)拿到写好的项目,一般不携带node_modules文件夹(所占存储空间大) 但有package.json文件,里面记载了当前项目下载过的包 还有package-lock.json文件,固定软件包的版本 导入模块/包,除了自己创建的模块、包

    2024年01月22日
    浏览(67)
  • 前端学习记录~2023.8.10~JavaScript重难点实例精讲~第6章 Ajax

    本章是第六章Ajax相关的内容。 Ajax是一种流行的前后端数据交互的方式,通过异步请求就可以在不需要刷新页面的情况下,达到局部刷新的效果。 Ajax并非是一种全新的技术,而是由以下技术组合而成: 使用CSS和XHTML做页面呈现 使用DOM进行交互和动态显示 使用XMLHttpRequest对象

    2024年02月11日
    浏览(40)
  • 前端BOM、DOM

    JavaScript分为 ECMAScript,DOM,BOM BOM(Browser Object Model)是指浏览器对象模型,它使JavaScript有能力与浏览器进行对话 DOM(Document Object Model)是指文档对象模型,通过它,可以访问HTML文档的所有元素。 window对象 window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的

    2024年02月06日
    浏览(39)
  • JavaScript 入门指南(三)BOM 对象和 DOM 对象

    BOM(browser Object Model)即浏览器对象模型 BOM 由一系列对象组成,是访问、控制、修改浏览器的属性的方法 BOM 没有统一的标准(每种客户端都可以自定标准)。 BOM 的顶层是 window 对象 window 对象表示浏览器中打开的窗口。 使用 window 对象中的属性和方法,可以省略对象名,直

    2024年04月09日
    浏览(43)
  • javascript常见100问|前端基础知识|问ajax-fetch-axios-区别请用 XMLHttpRequestfetch 实现 ajax节流和防抖px em rem vw/箭头函数的缺点

    HTML CSS JS HTTP 等基础知识是前端面试的第一步,基础知识不过关将直接被拒。本章将通过多个面试题,讲解前端常考的基础知识面试题,同时复习一些重要的知识点。 扎实的前端基础知识,是作为前端工程师的根本。基础知识能保证最基本的使用,即招聘进来能干活,能产出

    2024年04月27日
    浏览(51)
  • JavaScript的三大组成部分是什么?JavaScript的核心组成部分解析:语法、BOM和DOM

    🌷🍁 博主猫头虎 带您 Go to New World.✨🍁 🦄 博客首页——猫头虎的博客🎐 🐳《面试题大全专栏》 文章图文并茂🦕生动形象🦖简单易学!欢迎大家来踩踩~🌺 🌊 《IDEA开发秘籍专栏》学会IDEA常用操作,工作效率翻倍~💐 🌊 《100天精通Golang(基础入门篇)》学会Golang语言

    2024年02月10日
    浏览(46)
  • 〖大前端 - 基础入门三大核心之JS篇㉟〗- JavaScript 的DOM简介

    说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费 , 如需要项目实战或者是体系化资源,文末名片加V! 作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。 荣誉: 2022年度博客之星Top4、2023年度超

    2024年02月04日
    浏览(54)
  • 内置对象和方法、前端基础之BOM和DOM

    RegExp对象 Math对象 BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行“对话” DOM (Document Object Model)是指文档对象模型,通过它,可以访问HTML文档的所有元素。 一些常用的Window方法: window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器

    2024年02月06日
    浏览(35)
  • 什么是AJAX?如何使用原生JavaScript进行AJAX请求?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月07日
    浏览(41)
  • 什么是AJAX?如何使用原生JavaScript搭建AJAX请求?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月11日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包