学习js的一些笔记
学习js的一些笔记
1，对变量的一些认识
在学习java的过程中，我对变量的理解，其实就是一个在运行期进行简单储存的数据的内存空间，运行期结束后就会在各个代码的垃圾回收机制中在内存空间中消除。
对于变量，在java中，一个被创建的变量，就只能储存同类型的数据，除了多态有一些简简单单的例外之外（父类变量存储子类对象）
但在学习js的过程中，我发现，一个被定义的变量，并不一定只能储存一个类型的数据！
比如：
var a ="123";
a=123;
这样的代码在java中是绝对不能实现的，一个储存了字符串数据类型的变量，是绝对不可能再储存整型。然而在js中却可以。
现在我们来说一说变量：
变量实际上是在内存中开辟了一个空间，用来存储一个数据！
在java这种强类型的语言中，在创建变量开辟空间的时候，java将这个内存空间所储存的数据类型所固定，使之只能存储固定类型的数据，
而js这种弱类型的语言中，只开辟了空间，并没有固定其所存储的数据类型，所以可以随意的转换！
（所有的强类型语言都会这样，弱类型也是）
js变量演示：
typeof(变量名) 可以返回变量类型
//定义number类型
let a =123;
let b =123.1;
let c =NaN;
document.write(a+"----"+typeof(a)+"<br>");
document.write(b+"----"+typeof(b)+"<br>");
document.write(c+"----"+typeof(c)+"<br>");
//定义String类型
let a1="123";
let b1='123';
let c1="abv";
document.write(a1+"----"+typeof(a1)+"<br>");
document.write(b1+"----"+typeof(b1)+"<br>");
document.write(c1+"----"+typeof(c1)+"<br>");
document.write("<br>");
//定义boolean类型
let a2=false;
let b2=true;
document.write(a2+"----"+typeof(a2)+"<br>");
document.write(b2+"----"+typeof(b2)+"<br>");
document.write("<br>");
//定义null
let a3=null;
let b3=undefined;
let c3;
document.write(a3+"----"+typeof(a3)+"<br>");
document.write(b3+"----"+typeof(b3)+"<br>");
document.write(c3+"----"+typeof(c3));
document.write("<br>");
输出结果：
123----number
123.1----number
NaN----number
123----string
123----string
abv----string
false----boolean
true----boolean
null----object
undefined----undefined
undefined----undefined
js这里有个小问题，用var或者let可以定义变量，但直接不写，也可以定义变量，两者区别在于，let定义的是局部变量，var或不写直接是全局变量！
2，流程控制语句Switch
Switch语句结构：
Switch（变量）：
case 值：
在Java中，Switch能接受的数据类型：byte short int long char 枚举（1.5） 字符串（1.7）
但在js中， Switch能接受任意类型的数据！
3，一个简单的练习，在页面上输出99乘法表
<script>
document.write("<table align='center' >");
for (let i = 1 ; i < 10 ; i++){
document.write("<tr>");
for (let j = 1 ; j <= i ; j++){
document.write("<td>");
document.write(i + "*" + j + "=" + i*j);
document.write("</td>");
}
document.write("</tr>");
// document.write("<br>");
}
document.write("</table>");
</script>
<style>
td{
border: 1px solid;
}
</style>
4，js的常见对象
Function对象(函数对象)
1，创建
三种：
1，基本不用，看个热闹
let fun = new function(形式参数列表,方法体)；
2，这个和java方法挺像的，用的非常多，可记
function 方法名(形式参数列表){
方法体
}
例：
function a(a1,b1){
document.write(a1+b1);
}
3，这个用的也比较多
let 方法名 = function(形参列表){
方法体；
}
例：
let a =function(a1 , b1 ){
document.write(a1+b1);
}
2，属性
length属性：代表形参的个数。
使用方式
对象名.length
3，特点
1，方法定义的时候，形参和返回值的类型不用写，反正都是var或者let，写了也没啥用
2，方法是一个对象，如果重复定义，会覆盖而不会报错。
3，在js中，方法的调用只与方法名有关，与形参列表无关
4，在方法声明中只有一个隐藏的内置对象（数组），arguments，封装所有实际参数
4，调用
对象名/方法名(实际参数列表)
Array对象（数组对象）
1，创建
也是三种：
1，
let 数组名 = new Array(元素列表);
2，
let 数组名 = new Array(默认长度);
3，
let 数组名 = [元素列表];
2，方法
1，jion（参数）：将数组中的元素按照指定的分隔符进行分割，，例：
let a1 = new Array(5);
for (let i = 0 ; i < a1.length ; i++){
a1[i]=i;
}
document.write(a1.join("--")+"<br>");
打印效果：
0--1--2--3--4
2，向数组末尾添加一个或更多元素，并返回新的长度，，例（接上面的代码）：
document.write(a1.push("5",6)+"<br>");
打印效果：
0--1--2--3--4
7
3，属性
length，数组长度
4，特点
1，js中，数组元素的类型是可以变的，可以理解为java的Obj类型数组
2，js中，数组长度可变，不会出现数组下标越界的情况
Date对象（时间对象）
1，创建
var 对象名 = new Date();
2 ，方法
toLocaleString()，返回当前date对象对应的时间本地字符串格式
let a2 =new Date();
document.write(a2+"<br>");
document.write(a2.toLocaleString()+"<br>");
打印结果：
Tue Dec 27 2022 18:36:03 GMT+0800 (中国标准时间)
2022/12/27 18:36:03
getTime()，返回当前毫秒值，，返回当前时间与1970年1月1日0点0分的毫秒值差
document.write(a2.getTime()+"<br>");
打印结果:
1672137363540
Math对象（数学对象）
1，创建
这个对象很特殊，不需要创建，直接使用
使用：Math.方法名()；
Math是没有构造函数的，所以如果你使用new Math() 在浏览器控制台会报错！
2，方法
1，random()，返回一个0.0到1.0之间的伪随机数（含0不含1）
document.write(Math.random()+"<br>");
打印结果：
0.14629435714864747
2，ceil(参数)，对数进行向上舍入
document.write(Math.ceil(Math.PI)+"<br>");
打印结果：
4
3，floor(参数)，对数进行向下舍入
document.write(Math.floor(Math.PI)+"<br>");
打印结果：
3
4，round(x)，把数四舍五入为最近的整数
document.write(Math.round(Math.PI)+"<br>");
打印结果：
3
3，属性
PI 圆周率
document.write(Math.PI+"<br>")
打印结果：
3.141592653589793
小练习：1-100间的随即整数：
<script>
function suiji(){
return Math.ceil(Math.random()*99);
}
for (let i = 0 ; i < 100 ; i ++){
document.write(suiji()+",")
}
</script>
打印结果：
25,78,25,91,84,68,11,10,19,10,31,31,25,2,91,91,86,74,52,10,67,7,7,83,19,68,89,19,75,25,54,52,87,16,47,44,40,72,29,68,55,0,37,39,73,55,44,28,41,84,78,84,24,88,83,68,5,22,84,53,9,70,25,22,6,51,2,37,71,24,66,98,10,48,75,68,82,31,63,94,56,11,81,74,95,98,44,30,37,60,90,29,71,0,90,8,35,51,43,75，
RegExp对象（正则表达式对象）
正则都知道吧？
说一下js里的正则规则：
1，正则表达式
1，单个字符：[]
例：
表示单个a： [a];
表示a或b： [ab];
表示a到z： [a-z];
表示a到z或者A到Z： [a-zA-Z];
表示a到z或者A到Z或者0到9或者下划线： [a-zA-Z0-9_];
特殊的单个字符表示：
/d：单个数字，，也就相当于[0-9]
/w： 单个字符，，相当于[a-zA-z0-9_]
2，量词符号：
?：表示0次或1次
*： 表示0次或多次
+： 表示1次或多次
{m,n}：表示 m <= 数量 <= n
这里如果m没写，就是这样{,n}:表示最多有n个
n没写，{m,} ：表示最少有m个
3，开始结束符号
^： 开始
$： 结束
小练习：输入账号，要求6-12位的字符
/w{6,12}
2，正则对象
创建
1，
let 对象名 = new RegExp("\正则表达式");
2，
let 对象名 = /正则表达式/;
方法
tast(参数) :验证指定字符是否符合正则规则，符合返回true，不符合返回false
Global对象（全局对象）
1，特点
全局对象，这个Global中封装的方法不需要对象就可以直接调用。
方法名();
2，方法
1，encodeURI()： url编码
let gl = encodeURI("鹏哥真帅");
document.write(gl);
打印结果：
%E9%B9%8F%E5%93%A5%E7%9C%9F%E5%B8%85
2，decodeURI()： url解码
document.write(decodeURI(gl));
打印结果：
鹏哥真帅
3，encodeURIComponent()：url 编码
这两个和上面两个的区别就在于参数的范围多一些，上面两个对于冒号这些，不会编码，下面这两个会
4，decodeURIComponent()：url 解码
5，parseInt()：将字符串转数字
逐一判断每一个字符是否是数字，直到不是数字位为止，将前边是数字的部分转为数字并返回
let x3 ="123";
document.write(parseInt(x3)+1);
x3="234x";
document.write(parseInt(x3)+1);
x3="x234x";
document.write(parseInt(x3)+1+"<br>");
打印结果：
124
235
NAN
6，isNaN()：判断一个值是否是NaN
NaN六亲不认，自己都不认，只要是NaN参与的==比较全都是false
x3=NaN;
document.write(NaN==x3);
document.write("<br>");
document.write(isNaN(x3)+"<br>");
x3=12;
document.write(isNaN(x3)+"<br>");
打印结果：
false
true
false
7，eval()：将js字符串，并把它作为脚本代码来执行
x3="鹏哥真帅";
let x4="document.write(x3)";
document.write(x4);
document.write("<br>");
eval(x4);
打印结果：
document.write(x3)
鹏哥真帅
编码方式
这里介绍一下，浏览器的编码方法：
其实不止是浏览器，其他的比如：GBK，UTF-8 这些常见的编码方式，基本都是这样编码的
假设现在有汉字：
鹏哥真帅
现在，我们假设，鹏哥真帅 这四个字的编码用的是acsll码，那么由如下代码可得
char[] a={'鹏','哥','真','帅'};
for (int i = 0; i <a.length ; i++) {
System.out.print((int) a[i]+",");
}
打印结果：
40527,21733,30495,24069,
再把打印结果 40527,21733,30495,24069, 翻译成2进制得：
40527 ： 1001 1110 0100 1111
21733 ： 0101 0100 1110 0101
30495 ： 0111 0111 0001 1111
24069 ： 0101 1110 0000 0101
然后我们把这些二进制数连在一起：
1001 1110 0100 1111 0101 0100 1110 0101 0111 0111 0001 1111 0101 1110 0000 0101
就得到了上面这个数据，然后我们以字节用百分号隔开，（一个字节8位）
% 1001 1110 % 0100 1111 % 0101 0100 % 1110 0101 % 0111 0111 % 0001 1111 % 0101 1110 % 0000 0101
最后，再用16进制编码每一个字节得：
% 1001 1110 % 0100 1111 % 0101 0100 % 1110 0101 % 0111 0111 % 0001 1111 % 0101 1110 % 0000 0101
//16进制编码得：
% 9E % 4F % 54 % E5 % 77 % 1F % 5E % 05
所以最后，我们就得到了一个编码：
%9E%4F%54%E5%77%1F%5E%05
但上面这样的编码方式是我自己现在设想的一个方式，真正的编码方肯定会不一样，甚至还有其他的多重编码的可能，，现在的谷歌浏览器的地址栏是带了反编译系统，所以我们能直接在谷歌浏览器上看到汉字，其他的浏览器知道，但IE在地址栏上是直接写的编码，
用了一下encodeURI()方法，试出来"鹏哥真帅"四个字的编码在IE浏览器上是如下：
%E9%B9%8F%E5%93%A5%E7%9C%9F%E5%B8%85
5，js DOM
概念：Document Object Model 文档对象模型
将标记语言文档的各个组成部分，封装成对象，可以使用这些对象，对标记语言文档进行增删改查的动态操作！
W3C DOM 标准被分为3个不同的部分：
-
核心 DOM - 针对任何结构化文档的标准模型（标记文本）
- Document ： 文档对象（重点）
- Element： 元素对象（重点）
- Attribute： 属性对象
- Text : 文本对象
- Comment： 注释对象
- Node： 节点对象，其他5个的父对象
-
XML DOM - 针对 XML 文档大的标准模型
-
HTML DOM - 针对 HTML 文档的标准模型
下面这两个是对一个的补充
通过id获取页面元素对象
document.getElementById("id");
注意
由于js是解释性语言，所以它是一行一行的解析代码，如果把标签写在元素标签前面，获取的对象会因为元素还没加载，就变成null
例：
<head>
<meta charset="UTF-8">
<title>DOM对象</title>
</head>
<script>
var zhaopian = document.getElementById("zhaopian");
document.write(zhaopian);
</script>
<body>
<img id="zhaopian" src="图片地址">
</body>
打印结果：
null 图片
正确的写法：
<body>
<img id="zhaopian" src="图片地址">
<script>
var zhaopian = document.getElementById("zhaopian");
document.write(zhaopian);
</script>
</body>
打印结果：
图片 [object HTMLImageElement]
操作Element对象
1，修改属性值
-
明确自己拿到的对象是哪一个
-
查看API文档，找到其中有哪些属性值可以设置
js的api地址：JavaScript 教程 (w3school.com.cn)
例：
<img id="zhaopian" src="图片地址"> <script> var zhaopian = document.getElementById("zhaopian"); zhaopian.src="新图片地址"; </script> //通过查询api文档可知，img标签有个src属性，可以设置或者返回图像的url，所以可以在js中设置2，修改内容
属性：innerHTML，修改文件内容
<p id="p">悔创阿里杰克马</p>
打印内容结果：
悔创阿里杰克马
先获取元素对象，再使用innerHTML修改其内容
<p id="p">悔创阿里杰克马</p>
<script>
let p_id = document.getElementById("p");
p_id.innerHTML="内容美好米哈游";
</script>
打印结果：
内容美好米哈游
事件的简单学习
功能：某些组件被执行了某些操作之后，触发某些代码的执行
绑定事件
1，直接在html标签上，指定事件属性（操作），属性值就是js代码
<img id="zhaopian" src="图片链接" onclick="alert('我被点了')">
----------------------
//onclick 单击事件
2，在html标签上，指定事件的函数
<img id="zhaopian2" src="图片链接" onclick="a()">
<script>
function a(){
alert("鹏哥是大帅比");
}
</script>
3，获取标签元素对象，绑定事件
<img id="zhaopian3" src="图片链接" >
<script>
function a(){
alert("鹏哥真的是大帅比");
}
let zp_id = document.getElementById("zhaopian3");
zp_id.onclick=a();
</script>
小测试，电灯开关
<img id="diandeng" src="https://img-qn.51miz.com/Element/00/56/74/91/7b9ed510_E567491_20c725e9.png" >
<script>
let a="https://ts1.cn.mm.bing.net/th/id/R-C.e17dc121725c3a2cee4de4a0798e8544?rik=WZfJvHVu9TPz9w&riu=http%3a%2f%2fpic.616pic.com%2fys_bnew_img%2f00%2f09%2f16%2fitJqzDensO.jpg&ehk=ntgDB8BV9MFZSqAxALhF0uJza1o3g%2fj5dIyQUHZYgf8%3d&risl=&pid=ImgRaw&r=0";
let dd_id = document.getElementById("diandeng");
let a1="https://img-qn.51miz.com/Element/00/56/74/91/7b9ed510_E567491_20c725e9.png";
dd_id.onclick= function(){
//这里我用了一个匿名函数
switch (dd_id.src){
case a1:
dd_id.src=a;
break;
case a:
dd_id.src=a1;
}
}
</script>
核心DOM模型
1，Document 文档对象
1，创建
在 html dom模型中可以使用window对象来获取
1，window.document
2，document
2，方法
1，获取Element对象
getElementById() : 根据id属性获取元素对象。id属性为唯一
getElementsByTagName() ： 根据元素名称获取元素对象们，返回值是一个数组
getElementByClassName() : 根据Class属性值获取元素对象们，返回值也是一个数组
getElementByName() : 根据name属性值获取元素对象们，返回值是一个数组
2，创建其他DOM对象
createAttribute(name)
createComment()
createElement()//创建文本标记
createTextNode()//创建结点
//以上四个都是创建的方法，不过都只需要了解一下就行了，我懒得写了………………
Element：元素对象
1，获取
通过document对象来创建和获取，上面方法那一板块
2，方法
1，
removeAttribute(x) // 删除属性
/*参数：
x 是需要删除的属性名称
*/
2，
setAttribute(x1, x2) // 设置属性
/*参数：
x1 是需要设置的属性名称
x2 是属性的内容
*/
上面两个方法的举例如下：
<a>米忽悠</a>
<input type="button" value="点我可以出现米忽悠的链接">
<input type="button" value="点我可以关闭米忽悠的链接">
<script>
let a_TagName1 = document.getElementsByTagName("a")[0];
//获取链接对象，这里采用的标签名，作为练习，实际操作还是建议用id获取，
let input_TagName1 = document.getElementsByTagName("input")[0];
//获取增加属性的按钮对象
input_TagName1.onclick=function (){
a_TagName1.setAttribute("href","https://www.mihayou.com/");
//增加一个 href属性，并给属性赋值"https://www.mihayou.com/"
}//这一步没看懂的话，移步到上面的 简单事件学习
let input_TagName2 = document.getElementsByTagName("input")[1];
//获取消除属性的按钮对象
input_TagName2.onclick=function (){
a_TagName1.removeAttribute("href");
//消除href属性
}
</script>
Node对象
1，特点
所有dom对象都可以被认为一个节点
2，方法
增删改查 DOM树的方法
1，
appendChild() // 向节点的子节点列表的结尾添加新的节点
2，
removeChild() //删除并返回当前节点的指定子节点
3,
replaceChild() //用一个新的节点替换一个子节点
1和2的举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Node对象</title>
<style>
#div1{
background-color: crimson;
height: 200px;
width: 200px;
}
#div2{
background-color: blue;
height: 100px;
width: 100px;
}
#div3{
background-color: aquamarine;
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<div id="div1" >div1
<div id="div2">div2
</div>
</div>
<a href="javascript:void(0)">点我给div1去掉子节点</a>
<a href="javascript:void(0)">点我给div1添加子节点</a>
<script>
let a_Array = document.getElementsByTagName("a");
let div1_id = document.getElementById("div1");
a_Array[0].onclick=function (){
div1_id.removeChild(document.getElementById("div2"));
}//删除div1的子节点div2
a_Array[1].onclick=function (){
let div3 = document.createElement("div");
//创建一个div属性的结点对象
div3.setAttribute("id","div3");
//给这个新节点添加id属性，并赋值div3
div1_id.append(div3);
//给div1添加div3的子节点
}
</script>
</body>
</html>
<a href="javascript:void(0)"></a>
<--! 将href属性设置成上面这个就行-->
#### 3，属性
parentNode //返回当前节点的一个父节点
综合练习：动态表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>总结练习,动态表格</title>
<style>
td{
border: 1px solid;
}
</style>
</head>
<body>
<input id="id" type="text" placeholder="请输入用户id" >
<input id="name" type="text" placeholder="请输入用户姓名">
<select id="sex">
<option>男</option>
<option>女</option>
<option>?</option>
</select>
<input id="an" type="button" value="添加">
<table id="t" align='center'>
<tr>
<td>编号</td>
<td>姓名</td>
<td>性别</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="javascript:void (0)">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>任盈盈</td>
<td>女</td>
<td><a href="javascript:void (0)">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>岳不群</td>
<td>？</td>
<td><a href="javascript:void (0)" >删除</a></td>
</tr>
</table>
<script>
let an_id = document.getElementById("an");
let table = document.getElementById("t");
let id_sr = document.getElementById("id");
let name_sr = document.getElementById("name");
let sex_sr = document.getElementById("sex");
let tr_Array = document.getElementsByTagName("tr");
//添加
an_id.onclick=function (){
let tr = document.createElement("tr");
table.appendChild(tr);
//添加tr结点
let tr_last = tr_Array[tr_Array.length-1];
//获取刚创建的td对象
let td_id = document.createElement("td");
td_id.innerHTML=id_sr.value;
tr_last.append(td_id);
//添加id属性
let td_name = document.createElement("td");
td_name.innerHTML=name_sr.value;
tr_last.append(td_name);
//添加姓名
let td_sex = document.createElement("td");
td_sex.innerHTML=sex_sr.value;
tr_last.append(td_sex);
//添加性别
let td_caozuo = document.createElement("td");
let a = document.createElement("a");
a.setAttribute("href","javascript:void (0)");
a.innerHTML="删除";
td_caozuo.append(a);
tr_last.append(td_caozuo);
xunhuan();//添加完成后刷新a标签的方法
}
//删除
let a_Array = document.getElementsByTagName("a");
//循环给a标签上方法
function xunhuan(){
for (let i = a_Array.length-1 ; i >= 0 ; i -- ){
a_Array[i].setAttribute("onclick","dianji(a_Array["+i+"])");
}
}
xunhuan();
//a标签的方法内容
function dianji(a){
let a_parentNode = a.parentNode ;
let td_parentNode = a_parentNode.parentNode;
let tr_parentNode = td_parentNode.parentNode;
tr_parentNode.removeChild(td_parentNode);
xunhuan();//使用完成后刷新a标签的方法
}
</script>
</body>
</html>
HTML DOM
1，标签体的设置和获取：innerHTML
<!--将该结点的所有内容，改成a标签-->
<!-- 例：-->
<div>
div
<a href="">我是原来的a标签</a>
</div>
<script>
let div = document.getElementsByTagName("div")[0];
div.innerHTML="<a href='T8.html'>我是新加的链接</a>"
</script>
<!-- 浏览器显示为：
我是新加的链接 -->
<!--在该节点标签后新加<a>标签-->
<!--例：-->
<div>
div
<a href="">我是原来的a标签</a>
</div>
<script>
let div = document.getElementsByTagName("div")[0];
div.innerHTML+="<a href='T8.html'>我是新加的链接</a>"
</script>
<!-- 浏览器显示为：
div 我是原来的a标签 我是新加的链接 -->
<!-- 所以，上面那个练习还有另外的写法：html文档不变！
如下: -->
<script>
let an_id = document.getElementById("an");
//添加
an_id.onclick=function (){
let table = document.getElementById("t");
let id_sr = document.getElementById("id");
let name_sr = document.getElementById("name");
let sex_sr = document.getElementById("sex");
let tr_Array = document.getElementsByTagName("tr");
table.innerHTML+="<tr>\n" +
" <td>"+id_sr.value+"</td>\n" +
" <td>"+name_sr.value+"</td>\n" +
" <td>"+sex_sr.value+"</td>\n" +
" <td><a href=\"javascript:void (0)\" onclick='dianji(this)' >删除</a></td>\n" +
" </tr>";
}
//删除
let a_Array = document.getElementsByTagName("a");
//循环给a标签上方法
function xunhuan(){
for (let i = a_Array.length-1 ; i >= 0 ; i -- ){
a_Array[i].setAttribute("onclick","dianji(this)");
}
}
xunhuan();
//a标签的方法内容
function dianji(a){
let td_parentNode = a.parentNode.parentNode;
let tr_parentNode = td_parentNode.parentNode;
tr_parentNode.removeChild(td_parentNode);
//使用完成后刷新a标签的方法
}
</script>
2，使用html元素对象的属性
3，控制样式
1，通过style属性来设置
<!-- 所有的对象都有一个 style 的属性 返回一个可以控制该对象css样式的新对象 这个新对象有css样式的所有属性直接写就行了
例：
-->
<div>
div
<a href="">我是原来的a标签</a>
</div>
<script>
let div = document.getElementsByTagName("div")[0];
div.style.border="1px solid red";
</script>
2，用过className属性来设置
例：
<style>
.d1{
border:1px solid blue;
}
</style>
<div>
div
<a href="">我是原来的a标签</a>
</div>
<script>
let div = document.getElementsByTagName("div")[0];
div.className="d1";
</script>
不过这样好像只能是 .样式名 才行
6，js BOM
概念
Browser Objct Model 浏览器对象模型
将浏览器的各个组成部分封装成对象
下面我来描述一下
组成
1，Window（窗口对象）
1，创建
不需要创建！
2，方法
1，与弹出框有关的方法；
alert("x") //显示带有一段消息和一个确定按钮的 警告框
confirm("x") //显示带有一段消息以及确定按钮和取消按钮的 对话框
//如果用户点击确定按钮，则方法返回true
//如果用户点击确定按钮，则方法返回false
prompt("x") //显示可提示用户输入的 对话框
//返回值：用户输入的值
2，打开和关闭有关的方法
open("x"); //打开一个新窗口，x代表打开窗口的网址
//返回值：新窗口的window对象
close();//关闭浏览器窗口，但是如果直接写，就默认关闭本窗口！
//如果想要关闭刚打开的窗口，最好是如下代码：
let a = open("网址");
a.close();
3，与定时器有关的方法
setTimeout("fun",x) //在指定的毫秒数后调用函数或计算表达式
//参数：
//第一个参数代表函数或者计算表达式，
//第二个参数代表等待时间
//返回值：
//返回一个对象，这个对象一般由下面的 clearTimeout 调用，用来取消
clearTimeout() //取消由setTimeout()方法设置的timeout
//直接举例吧：
let a = setTimeout("alert('x') ",2000);
clearTimeout(a);
setInterval("fun", x) //按照指定的 周期 （以毫秒计）来调用函数或者计算表达式
//参数：和上面的 setTimeout 是一样的，不过这里是循环调用 fun 的函数或者计算表达式。
//返回值：同样和上面的 setTimeout 一样 返回一个对象用于下面这个clearInterval调用
clearInterval() //取消由setInterval()设置的timeout
//同上的 clearTimeout() ；
3，属性
1，获取其他BOM对象：
history
location
Navigator
Screen
2，获取DOM对象
document
4，特点
-
Window对象不需要创建可以直接使用，
- 直接使用Window.方法名();
-
Window引用可以省略 直接：方法名()；
//比如： alert(); window.alert(); //这两个的效果是一样的
5，小案例，轮播图
<img id="diandeng" src="图片1链接" >
<script>
let a="图片1链接";
let dd_id = document.getElementById("diandeng");
let a1="图片2链接";
setInterval(lunhuan,2000);
function lunhuan(){
switch (dd_id.src){
case a1:
dd_id.src=a;
break;
case a:
dd_id.src=a1;
}
}
</script>
2，Navigator
3，Screen
4，Histiry（历史记录对象）
这里解释一下，所谓历史记录对象，并不是说的浏览器访问过哪些网页，而是当前页面访问过哪些网页
简单的来说就是浏览器的那个前进后退键
##### 1，创建
1，window.history
2，history
2，方法
back() 加载history 列表中前一个url
history.back()
forward() 加载history 列表中的下一个url
history.back()
go(参数) 加载history 列表中的某个具体页面
/*参数：
如果是正数，前进几个历史记录
如果是负数，后退几个历史记录
*/
history.go(1);
这个对象，目前我就觉他适合做分页时候的前进和后退！
3，属性
length 返回该页面浏览过的url数量
history.length
5，Location（地址栏对象）
1，创建（获取）
1，window.location
2，location
2，方法
reload() 重新加载当前文档，，，等于刷新
location.reload();
//其作用效果就是浏览器上面那个刷新键 键盘上的f5
location.href();
//例
<input id="an" type="button" value="米哈游">
<script>
document.getElementById("an").onclick=function (){
location.href="https://www.mihayou.com/";
};
</script>
小案例，自动跳转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM</title>
<style>
p {
background-color: crimson;
text-align: center;
}
</style>
</head>
<body>
<p >
<samp id="shuzi">5</samp>
<samp id="zifu"> 后跳转首页<a href="https://www.mihayou.com/" id="dianji">点击此处提前跳转</a>
</samp>
</p>
<script>
let jishi = window.setInterval(gaibian ,1000);
function tiaozhuan(){
location.href="https://www.mihayou.com/";
};
function gaibian(){
switch (document.getElementById("shuzi").innerHTML) {
case "5":
document.getElementById("shuzi").innerHTML="4";
break;
case "4":
document.getElementById("shuzi").innerHTML="3";
break;
case "3":
document.getElementById("shuzi").innerHTML="2";
break;
case "2":
document.getElementById("shuzi").innerHTML="1";
break;
case "1":
tiaozhuan();
createElem(jishi);
}
}
document.getElementById("dianji").onclick=function (){
createElem(jishi);
}
</script>
</body>
</html>
浙公网安备 33010602011771号