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>
<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把以上内容都看做是对象
-
元素操作
- 查询元素
- getElementById()：通过标签元素的ID获取到标签对象
- getElementsByName()：通过标签元素的name属性获取到标签对象，返回的是数组
- getElementsByTagName()：通过标签名称获取到标签对象，返回的是数组
- document.documentElement:获取根节点html
- clientWidth：获取页面宽度
- clientHeight：获取页面高度
- document.body: 获取body节点body
- parentNode：获取指定元素的父节点，返回Node
<body>
<p id="p1" class="p1">123p>
<p id="p2" class="p1">abcp>
<ul>
<li><a href="#">腊肉a>li>
<li><a href="#">猪蹄a>li>
<li><a href="#">香肠a>li>
<li><a href="#">腰花a>li>
<a>123a>
<a>abca>
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>jsspan>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>
- 创建和删除标签
-
创建新的元素：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 = "从持续创新";
var divElement = document.querySelector("div");
divElement.appendChild(pElement);
console.log(divElement);
script>
body>
-
操作标签对象属性和样式
-
文本操作
- innerHTML：设置或者获取双标签中的HTML文本
- innerText：设置或者获取双标签中的纯文本
- 区别
- HTML可以解析标签：如果输入的内容是标签包裹，可以解析
- Text原样展示输入的内容
- 区别
- value：获取value属性值【所有的input，select下拉框，textarea等】
-
属性操作
- 方式一：元素对象.setAttribute(属性名称,属性值)
- 可以修改元素中本身不存在的属性
- 方式二：元素对象.属性名称 = 属性值
- 只能修改元素中本身存在的属性
- 方式一：元素对象.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> <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>0span>分,还是剩余:<label>20label>秒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>
<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>