01-07总结
- JavaScript概念
- 变量
- 原始数据类型
- 运算符
- 打印方式
- Date 对象
- 流程控制
- 函数
- JavaScript对象
- BOM
- DOM
- Ajax
JavaScript
概念:JavaScript是一种解释性脚本语言(代码不进行预编译),由浏览器解释执行,用来向页面添加交互行为
组成:
ECMAScript(核心)描述了Js的基本语法:类型、语句、关键字、保留字、运算符和对象等
BOM(浏览器对象模型)浏览器的一种特性,它可以对浏览器窗口进行访问和操作,例如移动、关闭窗口,调整窗口的大小等
DOM(文档对象模型)把整个文档中的所有节点解析成一个一个对象,并且这些对象之间会形成一个层级关系,通过DOM可以对文档中所有节点做CRUD操作
JavaScript三种写法:
- 内联使用
<a href="javascript:alert('这是行内JS');">点我召唤神龙!</a>
alert(参数值):是用来弹出一个提示框,弹框中的提示信息即为传入的参数值
上述代码中,我们将JS代码写在href属性中,这样我们在点击链接的时候,执行的就不是跳转地址,而是其中的JS代码:
也可以用console.log()将信息打印到浏览器的控制台
- 内部使用 写在一组
<script type="text/javascript">
alert("hello,这是内部JS");
</script>
- 外部使用 先单独定义一个JS文件,然后将这个JS文件作用于当前项目,只需引入就好。
<script type="text/javascript" src="JS文件位置"></script>
注意:
引用JS代码的script标签里面不能再写JS代码
变量
命名规范:
变量名规范:跟Java一样
必须:
- 由数字,字母,下划线,$组成,数字不能开头
- 不能使用关键字
- 严格区分大小写
建议:
- 遵循驼峰命名
- 见名知意
- 中文可以使用,但是不建议
在js中声明变量: 他们所有只要在function里面声明,它们的作用域都是 局部的:
var:声明是函数级别(在方法里面声明的是局部变量)允许重复声明,可以进行重新赋值。
// 声明一个变量 var a; // 如果未提前赋值,那么变量的值将为undefined var a = 1; // 声明一个a变量,里面放入整数 var a = 1.5; var a = "abc"; var a = 'd'; console.log(a); // 输出 d // var可以装任何类型的值 允许相同变量重复声明,后面的值会覆盖前面的值 ---------------------------------------------------------------------- // 使用 var 关键字声明的变量不具备块级作用域的特性,它在 {} 外依然能被访问到。 { var x = 2; } // 这里可以使用 x 变量 例子: var i = 5; for (var i = 0; i < 10; i++) { // 一些代码... } // 这里输出 i 为 10 // 在这个实例中,使用了 var 关键字,它声明的变量是全局的,包括循环体内与循环体外。
let:声明是块级级别(在语句中声明变量) 不允许重复声明,重新赋值。
let b = "老王,掉了啥..."; b = 23; console.log(b); // 输出23 let不允许重复声明相同的变量 ---------------------------------------------------------------------- // let 声明的变量只在 let 命令所在的代码块 {} 内有效,在 {} 之外不能访问。 { let x = 2; } // 这里不能使用 x 变量 例子: var i = 5; for (let i = 0; i < 10; i++) { // 一些代码... } // 这里输出 i 为 5 // 在这个实例中,使用 let 关键字, 它声明的变量作用域只在循环体内,循环体外的变量不受影响。
const:用于声明一个或多个常量,声明时必须进行初始化,且初始化后值不可再修改:
const NUM = 10; // 变量名要大写 ---------------------------------------------------------------------- const定义常量与使用let 定义的变量相似: 二者都是块级作用域 都不能和它所在作用域内的其他变量或函数拥有相同的名称 两者还有以下两点区别: const 声明的常量必须初始化,而let声明的变量不用 const 定义常量的值不能通过再赋值修改,也不能再次声明。而 let 定义的变量值可以修改。
JavaScript原始数据类型
JavaScript中的原始数据类型相当于Java的基本数据类型:number,boolean,string,null,undefined
-
number数值类型
1.无穷数
数字是有取值边界的,超出最大数取值为Infinity(正无穷),超出最小数取值为-Infinity(负无穷)
2.非数
非数:不是数字,在JS中采用NAN来表示,同样在JS中采用了isNaN()函数来判定当前字符是否真的不是数字
(1) 与任何值均不相等,包括自己本身
(2) 任何涉及NaN的操作都会返回NaN
typeof 和typeof()判断当前变量属于那种数据类型
var username = "rose";
var sal = 5632.3;
var isGirl = true;
var wifi = null; //空对象 所有的对象都是object
var a = undefined; //未定义
console.log(typeof username); //string
console.log(typeof sal); //number
console.log(typeof isGirl); //boolean
console.log(typeof wifi); //object
console.log(typeof a); //undefined
console.log(typeof(b)); //undefined
- boolean布尔类型 布尔类型和Java一样,采用true和false表示
- string字符串类型 JS语法中不存在char类型,所以由单引号或双引号括起来的字符序列,任何字符串的长度都可以通过访问length属性获得
- null空对象 表示一个不存在的对象,只有一个值null。null被认为是空对象,所有typeof出来的结果是object
- undefined未定义或未初始化 声明之后未赋值,或未申明的都是undefined
JavaScript运算符
JS中同样存在算术运算符、比较运算符、逻辑运算符的操作,这些运算符的操作和JAVA一样
-
赋值运算符
-
算术运算符
-
关系/比较运算符
比较运算符用于判断两个变量大小关系:>、<、、<=、>=、=、!=、!===
(1) == :代表相等(它只比较内容,不比较类型)
var x=10; var y="10"; console.debug(x==y); //true console.debug(x===y); //false console.debug(x!==y); //true
(2) ===:绝对相等(先比较类型,再比较内容)
(3) !==:绝对不等
-
逻辑运算符
&& :逻辑AND运算符,一假遍假
|| :逻辑OR运算符 ,一真遍真
! :逻辑NOT运算符,真为假,假为真
打印方式
- alert():弹出
var a = 1; alert("a = " + a);
- 通过document.write()向页面写入 document.writeln() 可以在输出内容后面加一个空格
let a = false; document.write(a); a = "去百度"; document.write("<a href= 'https://www.baidu.com'>" + a + "</a>");
- 通过浏览器的控制台打印
console.log(a); console.log("dsgfdg");
Date 对象
Date 对象用于处理日期与时间。
创建 Date 对象: new Date()
var d = new Date(); var d = new Date(milliseconds); // 参数为毫秒 var d = new Date(dateString); var d = new Date(year, month, day, hours, minutes, seconds, milliseconds); // milliseconds 参数是一个 Unix 时间戳(Unix Time Stamp),它是一个整数值,表示自 1970 年 1 月 1 日 00:00:00 UTC(the Unix epoch)以来的毫秒数。 // dateString 参数表示日期的字符串值。 // year, month, day, hours, minutes, seconds, milliseconds 分别表示年、月、日、时、分、秒、毫秒。
流程控制
分支:
(1) if语句
(2) switch语句
循环:
(1) while语句
(2) do-while语句
(3) for循环break/continue语句
三目表达式
注意:在js中,所有的变量都可以直接判断真假,只要有内容或定义了的对象(值、对象,0除外)进行判断时就是true(包括{}、[])
没有内容或不存在的,如 0、“”、undefined、NaN (not a number)、null、false(基本数据类型的false)。他们都是false
函数
概念:函数是一组可以随时运行的代码语句,可以理解为方法
函数作用:可以避免载入时执行,可以被多次调用
- 语法:
function 函数名:小驼峰(参数列表...){
JS代码;
[return 返回值;]
}
// JS中函数的定义使用function关键字,这一点是和Java不一样的地方,同时允许函数具备返回值,返回值采用关键字return,如果函数没有定义返回值,接收到的将是一个undefined
例:
function $action(){
console.debug(“函数定义测试”);
}
var x = $action(); //使用函数名完成函数调用,并定义一个变量接收返回值console.debug(“函数定义测试”);
//输出undefined,因为函数中并没有定义返回值
- 全局变量和局部变量
概念:全局变量:函数外面声明,局部变量:函数里面声明的
作用:JavaScript 全局属性和方法可用于创建Javascript对象。
- 匿名函数
概念:就是一个没有定义名称的函数
var 变量名 = function() {
}
匿名函数的调用,声明变量名() :
// 1
var action = function(){
console.debug(“前方高能,请非战斗人员迅速撤离”);
}
action(); // 调用匿名函数
// 2
(function){
})(); // 自己调用自己
JavaScript对象
注意:在ES5中没有类的概念,它的对象就是Java中的类。new出来的可以称为实例
js的对象有三大类,内部对象(本地对象和内置对象)、宿主对象和自定义对象
内部对象包括本地对象和内置对象;
- 本地对象可以new实例,方法或函数式通过实例调用的
- 内置对象不能使用new关键字创建实例,方法调用也不需要通过实例去调用
- 宿主对象指的是BOM和DOM中的所有对象
- 自定义对象就是开发人员自己定义的对象
- 本地对象
本地对象就是 ECMA-262 定义的类(引用类型)
这些引用类型在运行过程中需要通过new来创建所需的实例
包括:Object、Boolean、Number、Date、String、Array等,重点掌握Date和String,其它的到API文档里去找即可
1.1 Date日期
需求:将转换日期的代码封装成方法,重复使用:
//1.创建一个对象
var date = new Date();
//2.给这个对象添加方法
date.dateFormat = function() {
var d = new Date();
var year = d.getFullYear();
//返回的月份是从0开始11结束
var month = d.getMonth() + 1;
//月中的天数是从1到31
var day2 = d.getDate();
//取值范围0到23
var hour = d.getHours();
//取值范围是0到59
var minute = d.getMinutes();
//取值范围是0到59
var second = d.getSeconds();
//yyyy/MM/mm HH:mm:ss
console.debug(year + '/' + month + '/' + day2);
}
1.2. String字符串
split():用于把一个字符串分割成字符串数组
var str ="a.b.c.D.e.F"; console.debug(str.split('.')); console.debug(str.toLowerCase()); console.debug(str.toUpperCase());
toLowerCase():用于把字符串转换为小写
toUpperCase():用于把字符串转换为大写
substring():用于提取字符串中介于两个指定下标之间的字符,不包括结束位置的字符var str="01234567"; //主要是为了能和下标相对应 console.debug(str5.substring(3));//34567 console.debug(str5.substring(3, 2));
charCodeAt(index):返回指定位置的unicode码
var str1 = "abcde"; console.debug(str1.charCodeAt(0));//取到对应索引处的unicode码
fromCharCode():相当于静态方法,用法:String.fromCharCode(65);可接受一个指定的 Unicode 值,然后返回一个字符
console.debug(String.fromCharCode(65));
- 内置对象
概念:内置对象也是 ECMA-262 提供的。这些对象不需要通过new来创建所需的实例
包括:Global全局对象、Math数学对象这两个
Global:全局对象
//parseInt()函数的使用
var b = '123aaa';
//当遇到不能解析的内容的时候,parseInt会直接从该处放弃
console.debug(parseInt(b)); //123
var c='aa123aa';
console.debug(parseInt(c));//NaN
Math:数学计算对象
//1向上舍入 举例:假设数字为5.1 向上舍入的结果为6
//使用场景 分页 假设现在有11组数据,每两条数据分为一个部分,请问会有多少个部分?
console.debug(Math.ceil(5.1)); //6
console.debug(Math.ceil(11/2));//6
//2向下舍入 举例:假设数字为5.6 向下舍入的结果为5
console.debug(Math.floor(5.6)); //5
//3四舍五入 算法为Math.floor(x+0.5),即将原来的数字加上0.5后再向下取整
console.debug(Math.round(5.5));//6
console.debug(Math.round(5.4));//5
面试题:
Math.round(11.5)的结果是多少?;//12
Math.round(-11.5)的结果是多少?;//-11
- 自定义对象
概念:ES5中没有像Java中一样专门的class关键字定义类(ES6中可以用class定义类),所以在ES5中创建类其实和创建函数是一样的语法:
function 对象名/类名/方法名(){ // 方法名称小写,类或对象名称首字母大写
}
类中定义方法,有下列形式:
(1) 通过new的实例化对象添加方法
(2) 在对象中使用this关键字
(3) 通过prototype添加方法
- 通过实例
创建实例,动态的为实例赋值
function Foo(){}
var f1 = new Foo();
f1.name = "张三";
//添加方法
f1.say = function(){
console.log(11);
}
console.log(f1.name);
//调用方法
f1.say();
- 使用this
使用this关键字在对象中定义方法:
function Cat(){
this.name="小花";
this.age=1;
this.run = function(){
alert("run ... run ...")
}
}
function Person(name, age) {
this.name = name;
this.age = age;
this.talk = function(){
console.log(11);
}
}
var p=new Person('zs',21);
p.talk();
特点:这种方式添加的属性和方法属于所有实例
- prototype属性
- prototype对象是实现面向对象的一个重要机制
- 每个函数也是一个对象,它们对应的类就是function,每个函数对象都具有一个子对象prototype。
- Prototype 表示了该函数的原型,prototype表示了一个类的属性的集合。当通过new来生成一个类的对象时,prototype对象的属性就会成为实例化对象的属性
若在后面每次实例化的对象都有say方法,应当怎么添加方法?
Person.prototype.say=function(){ // 为Person类添加say方法
console.log("sayHi...");
}
var f2=new Person(); // 创建对象实例
f2.say(); // 调用say()方法
Person.prototype.gender; // 为Person类添加gender属性
<!-- 扩展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()); // 把 Date 对象的日期部分转换为可读字符串
console.log(d.toLocaleDateString()); // 根据本地时间格式,把 Date 对象的日期部分转换为字符串。
console.log(d.toLocaleTimeString()); // 根据本地时间格式,把 Date 对象的时间部分转换为字符串。
</script>
特点:这种动态添加的属性和方法属于所有实例,而且不会影响以前的功能
BOM: 浏览器对象模型 (Browser Object Model)
所有的BOM和DOM中的对象都称之为宿主对象;这个BOM有如下内容:
(1) 打开一个窗口就是一个window对象
(2) 窗口里面使用location表示地址栏
(3) 窗口的历史记录使用history来表示
(4) 浏览器的信息使用navigator来表示
(5) 窗口里面的内容使用document来表示
注意:BOM是包括DOM的
- window窗口对象
window对象是BOM中的顶级对象,默认可以省略(即调用其函数时可以省略window.)
window.alert("呵呵"); //等价于alert("呵呵");
注意:全局函数和window对象的函数不一样。全局函数不属于任何一个内置对象
1.1. API
- alert() 提示框 confirm() 确认框
//消息框 alert('我是alert'); //确认框 参数:确认框中的提问信息 返回值:boolean var res = confirm('你能做我女朋友吗?'); console.debug(res);
- setTimeout() 定时器 setInterval() 周期性定时器
// setTimeout() 在指定的毫秒数后调用函数或计算表达式 setTimeout('document.getElementById("txt1").value=1', 5000); var res; // 创建了一个未定义的变量res //JS中不能同时使用单引号或者双引号进行嵌套 function start() { res = setInterval("document.getElementById('txt2').value = new Date();", 1000); //设置周期调用函数 } function stop() { clearTimeout(res); // 清除setInterval设置的定时器,这玩意也能取消setTimeout设置的定时器 } <input type="button" id="btn1" value="开始" onclick="start();" /> // 点击后调用start()函数,清除setInterval设置周期调用函数 <input type="text" id="txt1" value="" /> <input type="text" id="txt2" value="" /> <input type="button" id="btn2" value="停止" onclick="stop();" /> // 点击后调用stop()函数,清除setInterval设置周期调用函数
- location地址对象
概念:当前访问的网址的相关信息
2.1. API
var loc = window.location.href;//获取地址栏的url地址
alert(loc);
location.href = "http://www.baidu.com"; //前端js跳转 - 当前窗口跳转
window.open("http://www.baidu.com");//前端js跳转 - 新窗口跳转
DOM:文档对象模型(Document Object Model)
1. DOM概述
概念:DOM就是操作的是硬盘中的标签(对象),叫DOM对象或节点对象
简称 DOM,将页面所有的内容表示为可以修改的对象
浏览器将我们编写在HTML中的每一个元素(Element)都变成了一个一个的对象
所有这些对象都可以通过JavaScript来对其进行访问,可以通过JavaScript来操作页面
这个将元素变为对象的过程称之为 文档对象模型(Document Object Model)
DOM树结构:通过DOM,树中的所有节点均可通过JS进行访问,所有的HTML元素均可被修改,也可以创建或删除节点
- 文档:一个页面就是一个文档,DOM中使用Document表示
- 元素:页面中所有标签都是元素,DOM中使用Element表示,元素是对于标签的统称
- 属性:标签中的所有属性在DOM中使用Attribute表示
- 文本:标签中的所有文本在DOM中使用Text表示
- 节点:通过DOM获取到的所有内容,例如:标签、标签属性、标签文本等,在DOM中使用node表示,也就是节点
DOM把以上内容都看做是对象
2. 元素操作
2.1 查询元素:
- getElementById():通过标签元素的ID获取到标签对象
- getElementsByName():通过标签元素的name属性获取到标签对象,返回的是数组
- getElementsByTagName():通过标签名称获取到标签对象,返回的是数组
- document.documentElement:获取根节点html
- clientWidth:获取页面宽度
- clientHeight:获取页面高度
- document.body: 获取body节点body body专属获取方式
- parentNode:获取指定元素的父节点,返回Node
2.2 创建元素
创建新的元素:document.createElement(元素名称)
父节点追加子节点:appendChild(元素对象)
父节点删除子节点:父节点对象.removeChild(元素对象):
修改元素:就是先删除再创建
2.3 文本操作
- innerHTML:设置或者获取双标签中的HTML文本
- innerText:设置或者获取双标签中的纯文本
- 区别
- HTML可以解析标签:如果输入的内容是标签包裹,可以解析
- Text原样展示输入的内容
- value:获取value属性值【所有的input,select下拉框,textarea等】
// 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);
2.4 属性操作
- 方式一:元素对象.setAttribute(属性名称,属性值)
- 可以修改元素中本身不存在的属性
- 方式二:元素对象.属性名称 = 属性值
- 只能修改元素中本身存在的属性
3. onload
因为我们页面是从上至下执行,所以如果JS代码在元素标签前面,那么我们是获取不到元素对象的,因为页面还未执行到元素标签
两种解决方案
- 第一种:我们可以将JS代码写在标签后面
- 第二种:使用window.onload方法
- onload:延迟执行,等页面全都执行完成之后,再执行其中的JS代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// 页面是从上至下执行的,如果我们的js代码在元素前面,那么我们是获取不到元素对象的,因为还没执行
// 解决办法:通过window下面的load方法,就可以解决
// onload:延迟执行,如果调用了他,那么你的JS代码会在页面全部加载完成之后,去执行
window.onload = function () {
var myDiv = document.getElementById("myDiv");
console.debug(myDiv);
}
</script>
</head>
<body>
<div id="myDiv" style="background: red; width: 200px; height: 200px;"></div>
</body>
</html>
4.事件注册
4.1 注册事件两种方式
- 第一种:元素上直接注册
- 第二种:元素.事件名称
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/* 单击事件第一种方式 */
var say = function () {
alert("这是一个单击事件")
}
/* 单击事件第二种方式 */
window.onload = function name() {
// 通过id值获取标签
var mybut = document.getElementById("mybut");
// 利用标签的onclick方法,给标签动态的添加一个单击事件
mybut.onclick = function () {
alert("这是第二种方式哦!!!")
}
}
</script>
</head>
<body>
<button onclick="say()">点我啊!!!</button>
<button id="mybut">第二种方式!!!</button>
</body>
</html>
4.2 事件部分API
onblur: 用户离开对象。失去焦点 - 【常用】
onfocus: 用户获得焦点 - 【常用】
onclick: 用户点击对象 - 【常用】
ondblclick: 用户双击对象 - 【常用】onkeydown: 按下键盘 - 【常用】
onkeypress: 按压键盘
onkeyup: 松开键盘onmousedown:用户按鼠标按钮
onmouseover:鼠标指针移动到对象上 - 【常用】
onmouseout: 鼠标指针移出对象 - 【常用】
onmouseup: 用户释放鼠标按钮onreset: 用户重置表单
onsubmit: 用户提交表单
onselect: 用户选取页面上的内容
onchange: 用户改变对象的值 - 【常用】
onunload: 用户关闭页面
onabort: 用户终止页面加载
onload: 页面完成加载 - 【常用】
<!-- 讲解为标签绑定事件:3种方式 -->
<!-- 1、直接在标签上加入 -->
<!-- <input type="text" name="username" onfocus="alert('获取焦点事件')" onblur="alert('失去焦点事件')" /> -->
<!-- <input type="text" name="username" onfocus="change()" onblur="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>
--------------------------------------------------------------------------------------------------------------------------------
<!-- 常用事件 -->
<!-- <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>
打地鼠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打地鼠</title>
</head>
<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>
</html>
Ajax
- 概念:Ajax:Asynchronous Javascript And XML,即是异步的JavaScript和XML,Ajax其实就是浏览器与服务器之间的一种异步通信方式
异步的JavaScript:它可以异步地向服务器发送请求,在等待响应的过程中,不会阻塞当前页面,在这种情况下,浏览器可以做自己的事情。直到成功获取响应后,浏览器才开始处理响应数据。简单来说Ajax就是在浏览器不重新加载网页的情况下,对页面的某部分进行更新
XML:是前后端数据通信时传输数据的一种格式,现在已经多用于编写框架的配置文件,前后端交互数据现在比较常用的是 JSON
- 为什么使用Ajax
- 无刷新:不刷新整个页面,只刷新局部
- 无刷新的好处
- 只更新部分页面,有效利用带宽
- 提供连续的用户体验
- 提供类似C/S的交互效果,操作更方便
- 互联网百分之99以上的项目都是使用Ajax异步请求
- 同步与异步请求区别
同步请求: 就是在发送一个请求之后,需要等待服务器响应返回,才能够发送下一个请求,通过浏览器地址栏发送请求,这种方式就是属于同步请求
正常情况下在网页中我们填写完表单后提交表单发起GET/POST请求时浏览器重新向服务器发起整个界面的请求,这就导致会刷新网页整个界面,可是有时候这是不需要的,比如注册账号时严重用户名是否重复,此时就不是要刷新整个页面
缺点:
- 请求必须要等待响应,如果遇到请求阻塞,网络延迟,用户需要等待,这样用户体验效果不好
- 请求时会携带所有的信息:比如说一个form表单,需要填入用户名,密码,手机号,等多个信息,如果其中有一个信息填写错了,请求失败,又要全部重新填写,会很麻烦繁琐,其实只需要修改填错了的就好了,如何解决这个问题?就需要引入异步的概念了
异步请求:和同步请求相对,异步不需要等待响应,随时可以发送下一次请求
如果是同步请求,需要将信息填写完整,再发送请求,服务器响应填写是否正确,再做修改,但是异步请求是局部页面更新,比如上述的手机号、密码,邮箱名,在填写时就会发送一个异步请求,若是格式不正确,会提醒修改,而其它已经填写的正确信息不受影响
4.Ajax的API
5.Ajax发送请求实现步骤
<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"); // 如果前面是post发送请求就要写这个请求头
// 4.发送
ajax.send();
console.log("我是异步的后续代码。。。。")
}
</script>
</body>
mg-9OqPX97L-1704818978834)]
4.Ajax的API
[外链图片转存中…(img-twjcIfUS-1704818978835)]
5.Ajax发送请求实现步骤
<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"); // 如果前面是post发送请求就要写这个请求头
// 4.发送
ajax.send();
console.log("我是异步的后续代码。。。。")
}
</script>
</body>