当前位置： 首页 > news >正文

js_BOMDomAjax

news 来源：原创 2024/5/10 13:35:31

总结

讲解自定义对象

在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：通过idvar 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请求多一步 - 设置请求头

理解实例：

<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>

相关文章：

  • 联邦学习中聚合算法可能怎样创新，智慧农业结合什么数学理论或知名理论实现创新并发表文章
  • S7-200SMART实例之冒泡法排序子程序
  • 能赚钱的GPT Store正式上线！如何将自己的 GPT 放到商店中？
  • 红队打靶练习:BREACH: 1
  • 【计算机网络】TCP原理 | 可靠性机制分析（三）
  • PyCharm使用手册
  • vim常用命令总结
  • JSON格式插件-VUE
  • docker一键安装
  • 手写一个starter来理解SpringBoot的自动装配
  • vue配置qiankun及打包上线
  • 【复现】DiffTalk
  • Java面试——框架篇
  • 【MATLAB】快速绘制曲线图的形状，粗细，颜色
  • docker run 命令详解
  • 4. 路由到控制器 - Laravel从零开始教程
  • Android 初级面试者拾遗（前台界面篇）之 Activity 和 Fragment
  • Java IO学习笔记一
  • JS基础之数据类型、对象、原型、原型链、继承
  • orm2 中文文档 3.1 模型属性
  • SpiderData 2019年2月16日 DApp数据排行榜
  • spring security oauth2 password授权模式
  • Synchronized 关键字使用、底层原理、JDK1.6 之后的底层优化以及 和ReenTrantLock 的对比...
  • Terraform入门 - 3. 变更基础设施
  • Transformer-XL: Unleashing the Potential of Attention Models
  • 阿里云前端周刊 - 第 26 期
  • 笨办法学C 练习34：动态数组
  • 基于阿里云移动推送的移动应用推送模式最佳实践
  • 你真的知道 == 和 equals 的区别吗？
  • 实战：基于Spring Boot快速开发RESTful风格API接口
  • 项目管理碎碎念系列之一：干系人管理
  • MiKTeX could not find the script engine ‘perl.exe‘ which is required to execute ‘latexmk‘.
  • JavaScript 新语法详解：Class 的私有属性与私有方法 ...
  • 仓管云——企业云erp功能有哪些？
  • 关于Kubernetes Dashboard漏洞CVE-2018-18264的修复公告
  • 选择阿里云数据库HBase版十大理由
  • ​比特币大跌的 2 个原因
  • ​一、什么是射频识别?二、射频识别系统组成及工作原理三、射频识别系统分类四、RFID与物联网​
  • #{}和${}的区别？
  • $.extend({},旧的,新的)；合并对象，后面的覆盖前面的
  • (1)常见O(n^2)排序算法解析
  • (Matlab)使用竞争神经网络实现数据聚类
  • (Mirage系列之二)VMware Horizon Mirage的经典用户用例及真实案例分析
  • （超详细）语音信号处理之特征提取
  • （带教程）商业版SEO关键词按天计费系统：关键词排名优化、代理服务、手机自适应及搭建教程
  • （附源码）springboot 个人网页的网站 毕业设计031623
  • （附源码）springboot 智能停车场系统 毕业设计065415
  • (附源码)计算机毕业设计ssm本地美食推荐平台
  • （论文阅读30/100）Convolutional Pose Machines
  • (实战)静默dbca安装创建数据库 --参数说明+举例
  • ..thread“main“ com.fasterxml.jackson.databind.JsonMappingException: Jackson version is too old 2.3.1
  • .Net - 类的介绍
  • .net core MVC 通过 Filters 过滤器拦截请求及响应内容
  • .NET大文件上传知识整理
  • .vimrc php,修改home目录下的.vimrc文件，vim配置php高亮显示