学习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() //删除并返回当前节点的指定子节点

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

获取href() 相当于html的标签

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>

js的api地址

https://www.w3school.com.cn/js/index.asp

posted @ 2022-12-27 20:28 牛杂刻师傅阅读(91) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 2022-07-11 第四组周鹏学习笔记

· 2022年7月13日，第四组周鹏 JAVA认识的第一天，附加一个用JS写的计算器代码

· 前端工作笔记（二）

· 2024/11/4日日志关于JavaScript 变量、数据类型、类型转换和流程控制语句以及对象的学习

· JavaScript初识

阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 使用C#创建一个MCP客户端
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列1：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现

公告

昵称：牛杂刻师傅
园龄： 2年8个月
粉丝： 1
关注： 1

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

学习笔记(6)

学习js的一些笔记

学习js的一些笔记

1，对变量的一些认识

js变量演示：

2，流程控制语句Switch

3，一个简单的练习，在页面上输出99乘法表

4，js的常见对象

Function对象(函数对象)

1，创建

2，属性

3，特点

4，调用

Array对象（数组对象）

1，创建

2，方法

3，属性

4，特点

Date对象（时间对象）

1，创建

2 ，方法

Math对象（数学对象）

1，创建

2，方法

3，属性

小练习：1-100间的随即整数：

RegExp对象（正则表达式对象）

1，正则表达式

1，单个字符：[]

2，量词符号：

3，开始结束符号

小练习：输入账号，要求6-12位的字符

2，正则对象

创建

方法

Global对象（全局对象）

1，特点

2，方法

编码方式

5，js DOM

通过id获取页面元素对象

操作Element对象

1，修改属性值

2，修改内容

事件的简单学习

绑定事件

小测试，电灯开关

核心DOM模型

1，Document 文档对象

1，创建

2，方法

Element：元素对象

1，获取

2，方法

Node对象

1，特点

2，方法

综合练习：动态表格

HTML DOM

6，js BOM

概念

组成

1，Window（窗口对象）

1，创建

2，方法

3，属性

4，特点

5，小案例，轮播图

2，Navigator

3，Screen

4，Histiry（历史记录对象）

2，方法

3，属性

5，Location（地址栏对象）

1，创建（获取）

2，方法

小案例，自动跳转

js的api地址

公告

搜索

常用链接