• JavaScript基础

    JavaScript基础

    第一章-JS基础

    知识点-JS简介

    1.目标

    • 了解JS的概念和特点

    2.路径

    1. 什么是JS

    2. JS的作用

    3. JS的组成

    3.讲解

    3.1. 什么是JS

    • JS，全称JavaScript，是一种直译式脚本语言，是一种动态类型、弱类型、基于对象的脚本语言，内置支持类型。

    • JS语言和Java语言对比：

    对比JavaJS
    运行环境JVM虚拟机JS引擎，是浏览器的一部分
    是否跨平台运行跨平台跨平台
    语言类型强类型语言弱类型，动态类型语言
    是否需要编译需要编译，是编译型语言不需要编译，是解释型语言
    是否区分大小写区分大小写区分大小写
    3.2 JS的作用

    具体来说，有两部分作用：

    • JS代码可以操作浏览器(BOM)：进行网址跳转、历史记录切换、浏览器弹窗等等

    • JS代码可以操作网页(DOM)：操作HTML的标签、标签的属性、样式、文本等等

      注意：JS的是在浏览器内存中运行时操作，并不会修改网页源码，所以刷新页面后网页会还原

    3.3 JS的组成
    • ECMAScript(核心)：是JS的基本语法规范
    • BOM：Browser Object Model，浏览器对象模型，提供了与浏览器进行交互的方法
    • DOM：Document Object Model，文档对象模型，提供了操作网页的方法

    4. 小结

    1. JS的概念:JS是一门运行在浏览器的，解释型的、基于对象的脚本语言
    2. JS的作用:处理用户和前端页面的交互
      1. 操作浏览器
      2. 操作HTML页面的标签、属性、文本、样式等等
    3. JS的组成部分:
      1. ECMAScript:基本语法
      2. BOM:浏览器对象模型，操作浏览器的代码
      3. DOM:文档对象模型，操作HTML文档的方法

    知识点-JS引入

    1.目标

    • 能够在HTML里引入js

    2. 分析

    1. 内部js(内嵌式)
    2. 外部js(外联式)

    3.讲解

    3.1. 内部JS
    3.1.1语法
    • 在html里增加
      • 1
      • 2
      • 3

      1. 外部脚本

        • 定义一个js文件
        • 通过script标签引入
        

        • 1
        • 2
      4.2注意事项

      • 一个script标签，不能既引入外部js文件，又在标签体内写js代码。

        • 错误演示
        <script src="../js/my.js">
	alert("hello");
script>

        • 1
        • 2
        • 3
        • 正确演示
        <script src="../js/my.js">script>
<script>
	alert("hello");
script>

        • 1
        • 2
        • 3
        • 4

      实操-JS小功能和JS调试

      1. 目标

      • 能够使用浏览器的F12调试js

      2.路径

      1. 小功能
      2. 调试

      3.讲解

      3.1小功能

      • alert(): 弹出警示框

      • console.log(): 向控制台打印日志

      • document.write(); 文档打印. 向页面输出内容.

      3.2.调试

      1. 按F12打开开发者工具

      2. 找到Source窗口，在左边找到页面，如下图

        • 打断点之后，当代码执行到断点时，会暂时执行
        • 在窗口右侧可以查看表达式的值、单步调试、放行等等
          在这里插入图片描述

      3. 如果代码执行中出现异常信息，会在控制台Console窗口显示出来
        在这里插入图片描述

      4. 点击可以定位到异常位置

      在这里插入图片描述

      4.小结

      1. 弹出警告框
      alert();

      • 1
      1. 控制台输出
       console.log();

      • 1
      1. 向页面输出(支持标签的)
      document.write();

      • 1

      知识点-JS基本语法

      1.目标

      • 掌握JS基本语法

      2.路径

      1. 变量
      2. 数据类型
      3. 运算符
      4. 语句

      3.讲解

      3.1 变量
      • JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。 定义变量需要用关键字 ‘var’或者’let’
      int i = 10;   		 var i = 10;        或者 i = 10;
String a = "哈哈";   let str = "哈哈";  或者 str = "哈哈";  或者 str = "哈哈"
...


注意:
	1.var或者可以省略不写,建议保留
	2.最后一个分号可以省略,建议保留
	3.同时定义多个变量可以用","隔开，公用一个‘var’关键字. var c = 45,d='qwe',f='68';

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      3.2 数据类型

      1.五种原始数据类型

      数据类型描述示例
      number数值类型1, 2, 3, 3.14
      boolean布尔类型true, false
      string字符串类型"hello", ‘hello’
      object对象类型new Date(), null
      undefined未定义类型var a;

      2.typeof操作符

      • 作用： 用来判断变量是什么类型

      • 写法：typeof(变量名) 或 typeof 变量名

      • null与undefined的区别：

        ​ null: 对象类型，已经知道了数据类型，但对象为空。
        ​ undefined：未定义的类型，并不知道是什么数据类型。

      3.小练习

      • 定义不同的变量,输出类型,
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    var i = 5;   //整数
    var f = 3.14;  //浮点
    var b = true;  //布尔
    var c = 'a';  //字符串
    var str = "abc";   //字符串
    var d = new Date();  //日期
    var u;   //未定义类型
    var n = null; //空
    document.write("整数：" + typeof(i) + "
      "      );
    document.write("浮点 ：" + typeof(f) + "
      "      );
    document.write("布尔：" + typeof(b) + "
      "      );
    document.write("字符：" + typeof(c) + "
      "      );
    document.write("字符串：" + typeof(str) + "
      "      );
    document.write("日期：" + typeof(d) + "
      "      );
    document.write("未定义的类型：" + typeof(u) + "
      "      );
    document.write("null：" + typeof(n) + "
      "      );
</script>
</body>
</html>


      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28

      字符串转换成数字类型

      • 全局函数(方法)，就是可以在JS中任何的地方直接使用的函数，不用导入对象。不属于任何一个对象
      3.3 运算符
      • 关系运算符:> >= < <=
      • number类型和字符串做-,*,/的时候,字符串自动的进行类型转换,前提字符串里面的数值要满足number类型
      var i = 3;
var j = "6";
alert(j-i);//结果是3, "6" ==> 6  
alert(j*i);//结果是18, 
alert(j/i);//结果是2, 

      • 1
      • 2
      • 3
      • 4
      • 5
      • 除法,保留小数
      var i = 2;
var j = 5; 
alert(j/i);

      • 1
      • 2
      • 3
      • == 比较数值, === 比较数值和类型
      var i = 2;
var j = "2"; 
alert(i==j); // ==比较的仅仅是数值, true
alert(i===j); // ===比较的是数值和类型.false

      • 1
      • 2
      • 3
      • 4
      3.4语句
      • for循环
      <script>
    //将数据装到表格中
    document.write("")for(let j=1;j<=9;j++){//一行
    document.write("")for(let i=1;i<=j;i++){//一个单元格
        document.write("")}
    document.write("")}

document.write("
      

    
      
    
        ")

        //每一个乘法表达式就是td中的内容
        document.write(j+"x"+i+"="+(j*i))

        document.write("
    
      

      "      )
</script>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • if… else
      var a = 6;
if(a==1)
{
    alert('语文');
}
else if(a==2)
{
    alert('数学');
}
else
{
    alert('不补习');
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • switch
      <script>
	var str = "java"; 

	switch (str){
		case "java":
			alert("java");
			break;
		case "C++":
			alert("C++");
			break;

		case "Android":
			alert("Android");
			break;	
       }
</script>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16

      4.小结

      1. 变量通过 var 定义
      2. 数据类型
        • number
        • boolean
        • string
        • object
        • undefined
      3. 运算符
        • 字符串可以和number类型进行-,*,/运算的
        • 除法保留小数
        • == 比较的是值, ===比较的是值和类型
      4. 语句: 基本和java一样

      知识点-函数(重点)

      1. 目标

      • 掌握js函数的定义和调用

      2.路径

      1. 什么是函数
      2. 普通函数
      3. 匿名函数

      3.讲解

      3.1. 什么是函数
      • 函数： 是被设计为执行特定任务的代码块 ，在被调用时会执行
      • 函数类似于Java里的方法，用于封装一些可重复使用的代码块
      3.2. 普通(有名)函数
      3.2.1语法
      • 定义普通函数
      function 函数名(形参列表){
    函数体
    [return 返回值;]
}

      • 1
      • 2
      • 3
      • 4
      • 调用普通函数
      var result = 函数名(实参列表);

      • 1
      3.2.2示例
      • 计算两个数字之和
      <script>
    //js的函数的作用:为了封装代码，在要使用这些代码的地方直接调用函数
    //js的函数的声明方式:1. 普通函数(命名函数)  2.匿名函数
    //普通函数: function 函数名(参数名,参数名...){函数体}，函数没有返回值类型，没有参数类型
    function total(a,b,c) {
        console.log("arguments数组中的数据:"+arguments.length)
        console.log(a+","+b+","+c)
        return a+b+c
    }

    //调用函数
    //var num = total(1,2,3);
    //console.log(num)

    //js的函数还有俩特点:1. 函数声明时候的参数个数和函数调用时候传入的参数个数，可以不一致;因为函数内部有一个arguments数组，用于存放传入的参数
    //2. js的函数是没有重载的，同名函数后面的会覆盖前面的

    function total(a,b) {
        return a+b
    }

    var num = total(1,2,3);
    console.log(num)
script>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      3.3匿名函数

      匿名函数，也叫回调函数，类似于Java里的函数式接口里的方法

      function(形参列表){
    函数体
    [return 返回值;]
}

      • 1
      • 2
      • 3
      • 4

      4.小结

      1. 语法

        • 普通(有名)函数
        function 函数名(参数列表){
	函数体
	[return ...]
}

        • 1
        • 2
        • 3
        • 4
        • 匿名函数
        function(参数列表){
	函数体
	[return ...]
}

        • 1
        • 2
        • 3
        • 4

      2. 特点

        • 参数列表里面直接写参数的变量名, 不写var
        • 函数没有重载的, 后面的直接把前面的覆盖了

      知识点-JS事件(很重点)

      1. 目标

      • 掌握事件的使用

      2.路径

      1. 事件介绍
      2. 常见事件
      3. 事件绑定

      3.讲解

      3.1. 事件介绍
      • HTML 事件是发生在 HTML 元素上的“事情”， 是浏览器或用户做的某些事情
      • 事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。
      3.2 常见事件
      属性此事件发生在何时…
      onclick当用户点击某个对象时调用的事件句柄。
      ondblclick当用户双击某个对象时调用的事件句柄。
      onchange域的内容被改变。
      onblur元素失去焦点。
      onfocus元素获得焦点。
      onload一张页面或一幅图像完成加载。
      onsubmit确认按钮被点击；表单被提交。
      onkeydown某个键盘按键被按下。
      onkeypress某个键盘按键被按住。
      onkeyup某个键盘按键被松开。
      onmousedown鼠标按钮被按下。
      onmouseup鼠标按键被松开。
      onmouseout鼠标从某元素移开。
      omouseover鼠标移到某元素之上。
      onmousemove鼠标被移动。
      3.3. 事件绑定
      3.3.1普通函数方式

      说白了设置标签的属性

      <标签 属性="js代码，调用函数">标签>

      • 1
      3.3.2匿名函数方式
      <script>
    标签对象.事件属性 = function(){
        //执行一段代码
    }
script>

      • 1
      • 2
      • 3
      • 4
      • 5
      3.4事件使用
      3.4.1重要的事件

      • 点击事件

        需求: 没点击一次按钮 弹出hello…

      <input type="button" value="按钮" onclick="fn1()">

    <input type="button" value="另一个按钮" id="btn">
        <script>
        //当点击的时候要调用的函数
        function fn1() {
        alert("我被点击了...")
    }

//给另外一个按钮，绑定点击事件:
//1.先根据id获取标签
let btn = document.getElementById("btn");
//2. 设置btn的onclick属性(绑定事件)
//绑定命名函数
//btn.onclick = fn1

//绑定匿名函数
btn.onclick = function () {
    console.log("点击了另外一个按钮")
}
</script>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21

      • 获得焦点(onfocus)和失去焦点(onblur)

        需求:给输入框设置获得和失去焦点

      var ipt = document.getElementById("ipt");

//绑定获取焦点事件
ipt.onfocus = function () {
    console.log("获取焦点了...")
}

//绑定失去焦点事件
ipt.onblur = function () {
    console.log("失去焦点了...")
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11

      • 内容改变(onchange)

        需求: 给select设置内容改变事件

      <body>
    <!--内容改变(onchange)-->
    <select onchange="changeCity(this)">
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="sz">深圳</option>
    </select>

</body>
<script>
    function changeCity(obj) {
        console.log("城市改变了"+obj.value);
    }
</script>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 等xx加载完成(onload) 可以把script放在body的后面/下面, 就可以不用了
      window.onload = function () {
    //浏览器窗体加载完毕之后要执行的代码写到这里面
}

      • 1
      • 2
      • 3
      3.4.2掌握的事件
      • 键盘相关的, 键盘按下(onkeydown) 键盘抬起(onkeyup)
      //给输入框绑定键盘按键按下和抬起事件
ipt.onkeydown = function () {
    //当按键按下的时候，数据并没有到达输入框
    //输出输入框里面的内容
    //console.log(ipt.value)
}

ipt.onkeyup = function () {
    //输出输入框的内容:当键盘按键抬起的时候，数据已经到达了输入框
    console.log(ipt.value)
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 鼠标相关的, 鼠标在xx之上(onmouseover ), 鼠标按下(onmousedown),鼠标离开(onmouseout)
      //给输入框绑定鼠标移入事件
ipt.onmouseover = function () {
    console.log("鼠标移入了...")
}
//给输入框绑定鼠标移出事件
ipt.onmouseout = function () {
    console.log("鼠标移出了...")
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8

      4.小结

      1. 绑定事件的方式:
  	1. 通过在标签上设置标签的属性，进行绑定，也就是通过命名函数(普通函数)进行绑定
  	2. 通过js代码获取到标签，然后设置标签的属性进行绑定，也就是通过匿名函数绑定事件



2. JS的常见的事件介绍:
  	1. onclick
  	2. ondblclick
  	3. onmouseover
  	4. onmouseout
  	5. onfocus  获取焦点
  	6. onblur   失去焦点

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13

      知识点-正则表达式(了解)

      1. 目标

      • 掌握js正则表达式校验字符串格式的方法

      2.路径

      1. 正则表达式概述
      2. 正则表达式的语法
      3. 使用示例

      3.讲解

      3.1正则表达式概述

      ​ 正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。

      ​ 用我们自己的话来说: 正则表达式用来校验字符串是否满足一定的规则的公式

      3.2 正则表达式的语法
      3.2.1创建对象
      • 对象形式：var reg = new RegExp("正则表达式")当正则表达式中有"/"那么就使用这种
      • 直接量形式：var reg = /正则表达式/一般使用这种声明方式
      3.2.2常用方法
      方法描述参数返回值
      test(string)校验字符串的格式要校验的字符串boolean，校验通过返回true
      3.2.3常见正则表达式规则
      符号作用
      \d数字
      \D非数字
      \w英文字符：a-zA-Z0-9_
      \W非英文字符
      .通配符，匹配任意字符
      {n}匹配n次
      {n,}大于或等于n次
      {n,m}在n次和m次之间
      +1~n次
      *0~n次
      ?0~1次
      ^匹配开头
      $匹配结尾
      [a-zA-Z]英文字母
      [a-zA-Z0-9]英文字母和数字
      [xyz]字符集合, 匹配所包含的任意一个字符
      3.3使用示例

      需求:

      1. 出现任意数字3次
      2. 只能是英文字母的, 出现6~10次之间
      3. 只能由英文字母和数字组成，长度为4～16个字符，并且以英文字母开头
      4. 手机号码: 以1开头, 第二位是3,4,5,6,7,8,9的11位数字

      步骤:

      1. 创建正则表达式
      2. 调用test()方法
      <script>
    //1.出现任意数字3次
    //a. 创建正则表达式
    var reg1  = /^\d{3}$/; //出现任意数字3次
    //b. 校验字符串
    var str1 = "3451";
    var flag1 = reg1.test(str1);
    //alert("flag1="+flag1);

    //2.只能是英文字母的, 出现6~10次之间
    var reg2  =/^[a-zA-Z]{6,10}$/;
    var str2 = "abcdef11g";
    //alert(reg2.test(str2));

    //3 用户名：只能由英文字母和数字组成，长度为4～16个字符，并且以英文字母开头
    var reg3  =/^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
    var str3 = "zs";
   // alert(reg3.test(str3));


    //4. 手机号码: 以1开头, 第二位是3,4,5,6,7,8,9的11位数字
    //var reg4  =/^1[3456789]\d{9}$/i; //忽略大小写的
    var reg4  =/^1[3456789]\d{9}$/; //不忽略大小写的
    var str4 = "188245899";
    alert(reg4.test(str4));


</script>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28

      4.小结

      1. 正则概念: 就是用来校验字符串的规则
      2. 正则使用步骤
        • 创建正则表达式对象
        • 调用test()方法

      知识点-内置对象之Array数组(了解)

      1. 目标

      • 掌握数组Array的使用

      2. 路径

      1. 创建数组对象
      2. 数组的常用方法

      3. 讲解

      3.1 创建数组对象
      3.1.1语法
      • var arr = new Array(size)
      • var arr = new Array(element1, element2, element3, ...)
      • var arr = [element1, element2, element3, ...];一般采用这种方式创建
      3.1.2数组的特点
      • 数组中的每个元素可以是任意类型
      • 数组的长度是可变的，更加类似于Java里的集合List
      3.1.3示例
      • 创建数组，并把数组输出到浏览器控制台上
        • 说明：把数据输出到控制台：console.log(value)
        //1.数组定义方式
    //1.1 方式一  new Array(size);
    var array01 = new Array(4);
    array01[0] = 1;
    array01[1] = 2;
    array01[2] = 3;
    array01[3] = 99;


    //1.2 方式二  new Array(ele,ele...);
    var array02 = new Array(1, 2, 3, 99);

    //1.3 方式三  [ele,ele]
    var array03 = [1, 2, 3, 99];


    //2.数组特点  ①js里面数组可以存放不同类型的数据 ②js里面的数组可变, 没有越界的概念
    var array04 = [1, 2, 3, "哈哈"];

    //console.log(array04[0]); //1
    //console.log(array04[3]); //"哈哈"
    //console.log(array04[5]); //在Java里面是数组越界 js里面是undefined

    console.log(array04.length);  //4
    array04[6] = "你好";  //[1,2,3,"哈哈",undefined,undefined,"你好"]
    console.log(array04.length);  //7

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      3.2数组常见的方法
      3.2.1API介绍
      方法描述
      concat()连接两个或更多的数组，并返回结果。
      join()把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
      reverse()颠倒数组中元素的顺序。
      3.2.2示例
      //3.常用的方法
//3.1 concat() 连接两个或更多的数组，并返回结果。【重点】
var array05 = [1, 2, 3, 4];
var array06 = ["哈哈", "你好", 100, 200];
var array07 = array05.concat(array06);
console.log(array07);

//3.2 join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
var str =   array05.join("**");  
console.log(str);

//3.3 reverse() 颠倒数组中元素的顺序。
array06 =  array06.reverse();
console.log(array06);

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      3.3二维数组
      1. 数组里面再放数组 就是二维数组
      2. 示例
          //4.二维数组
    //方式一:
    var citys = new Array(3);
    citys[0] = ["深圳", "广州", "东莞", "惠州"];
    citys[1] = ["武汉", "黄冈", "黄石", "鄂州", "荆州"];
    citys[2] = ["济南", "青岛", "烟台", "淄博", "聊城"];

    var citys02 = [
        ["深圳", "广州", "东莞", "惠州"],
        ["武汉", "黄冈", "黄石", "鄂州", "荆州"],
        ["济南", "青岛", "烟台", "淄博", "聊城"]
    ];
    for (var i = 0; i < citys02.length; i++) {
        var cityArray = citys02[i];
        
        console.log(cityArray);

        for(var j = 0;j<=cityArray.length;j++){
            console.log(cityArray[j]);
        }
    }


      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22

      4.小结

      1. 数组定义语法
      var array = new Array(size);  		//定义了没有赋值
var array = new Array(ele,ele,ele); //定义了并且赋值了
var array = [ele,ele,ele];          //定义了并且赋值了

      • 1
      • 2
      • 3
      1. 数组的特点
        • js的数组里面可以存放不同类型的数据
        • js的数组的长度可变
      2. 数组常用的方法
        • 数组.concat(数组) 把2个,多个拼接成一个数组
        • 数组.join(分隔符) 把数组里面的元素拼接成一个字符串
        • 数组.reverse() 反转
      3. 二维数组
        • 数组里面的元素也是数组

      内置对象之-Date日期

      3.讲解

      3.1. 创建日期对象
      3.1.1语法

      • 创建当前日期：var date = new Date()

      • 创建指定日期：var date = new Date(年, 月, 日)

        注意：月从0开始，0表示1月

      • 创建指定日期时间：var date = new Date(年, 月, 日, 时, 分, 秒)

        注意：月从0开始，0表示1月

      3.1.2示例
      DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日期title>
head>
<body>

<script>
    //创建当前日期
    var date1 = new Date();
    console.log(date1);

    //创建指定日期: 2019-11-11
    var date2 = new Date(2019, 10, 11);
    console.log(date2);

    //创建指定日期时间：2019-11-11 20:10:10
    var date3 = new Date(2019, 10, 11, 20, 10, 10);
    console.log(date3);
script>
body>
html>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fJVa7Dcs-1663547035201)(img/1571473450137.png)]

      3.2. 日期常用方法
      3.2.1API介绍
      方法描述
      Date()返回当日的日期和时间。
      getDate()从 Date 对象返回一个月中的某一天 (1 ~ 31)。
      getDay()从 Date 对象返回一周中的某一天 (0 ~ 6)。
      getMonth()从 Date 对象返回月份 (0 ~ 11)。
      getFullYear()从 Date 对象以四位数字返回年份。
      getHours()返回 Date 对象的小时 (0 ~ 23)。
      getMinutes()返回 Date 对象的分钟 (0 ~ 59)。
      getSeconds()返回 Date 对象的秒数 (0 ~ 59)。
      getMilliseconds()返回 Date 对象的毫秒(0 ~ 999)。
      getTime()返回 1970 年 1 月 1 日至今的毫秒数（时间戳）。
      parse()返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
      setDate()设置 Date 对象中月的某一天 (1 ~ 31)。
      setMonth()设置 Date 对象中月份 (0 ~ 11)。
      setFullYear()设置 Date 对象中的年份（四位数字）。
      setYear()请使用 setFullYear() 方法代替。
      setHours()设置 Date 对象中的小时 (0 ~ 23)。
      setMinutes()设置 Date 对象中的分钟 (0 ~ 59)。
      setSeconds()设置 Date 对象中的秒钟 (0 ~ 59)。
      setMilliseconds()设置 Date 对象中的毫秒 (0 ~ 999)。
      setTime()以毫秒设置 Date 对象。
      toLocaleString()根据本地时间格式，把 Date 对象转换为字符串。
      3.1.2示例
      <script>
    //1.创建日期对象
    var myDate =  new Date();

    //2.调用方法
    console.log("年:" + myDate.getFullYear());
    console.log("月:" + (myDate.getMonth()+1));
    console.log("日:" + myDate.getDate());
    console.log("时:" + myDate.getHours());
    console.log("分:" + myDate.getMinutes());
    console.log("秒:" + myDate.getSeconds());
    console.log("毫秒:" + myDate.getMilliseconds());

    console.log(myDate.toLocaleString()); //打印本地时间    2019-12-06 12:02:xx
    //console.log(myDate);

	//获取某个时间的时间戳
    var time = myDate.getTime();
    console.log(time)
    
    //需求:计算到11放假还有多少天
    var date5 = new Date(2020,9,1);
    var date6 = new Date(2020,6,9);

    var totalTime = date5.getTime() - date6.getTime();
    var days = totalTime/(1000*60*60*24);
    console.log(days)
</script>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28

      4.小结

      1. 创建Date()对象
      2. 调用 getxxx()

      第二章-JS的BOM

      知识点-JS的BOM

      1.目标

      • 掌握BOM中常用的API

      2.路径

      1. BOM介绍
      2. BOM里面的五个对象

      3.讲解

      3.1概述

      ​ Browser Object Model ,浏览器对象模型. 为了便于对浏览器的操作，JavaScript封装了浏览器中各个对象，使得开发者可以方便的操作浏览器中的各个对象。

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BkJR6H9p-1663547035202)(img/tu_1.bmp)]

      3.2.BOM里面的五个对象
      3.2.1 window: 窗体对象
      方法作用
      alert()显示带有一段消息和一个确认按钮的警告框
      confirm()显示带有一段消息以及确认按钮和取消按钮的对话框
      prompt()弹出输入框
      setInterval(‘函数名()’,time)按照指定的周期（以毫秒计）来调用函数或计算表达式
      setTimeout(‘函数名()’,time)在指定的毫秒数后调用函数或计算表达式
      clearInterval()取消由 setInterval() 设置的 Interval()。
      clearTimeout()取消由 setTimeout() 方法设置的 timeout。
      //1. 警告框
//window.alert("hello")

//2. 确认框
/*let flag = confirm("你确定要删除吗?");
        console.log(flag)*/

//3. 输入框
let age = prompt("请输入你的年龄");

if (parseInt(age) >= 18) {
    alert("可以访问")
}else {
    alert("请大一点了再访问")
}

//定时器的话就是隔一段事件执行一个任务
//1. setTimeout(),只执行一次的定时器,其实也就相当于一个延时器
//第一个参数是要执行的匿名函数，第二个参数是执行时间
/*setTimeout(function () {
            document.write("hello world")
        },3000)*/

//2. setInterval(),循环执行的定时器
//第一个参数是要执行的匿名函数，第二个参数是间隔时间，该方法的返回值是这个定时器id
let i = 0
var id = setInterval(function () {
    i ++
    document.write("你好世界
      "      )

    //我们还有一个方法，clearInterval(定时器的id)清除定时器
    if (i == 5) {
        clearInterval(id)
    }
},2000);

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      3.2.2,navigator:浏览器导航对象【了解】
      属性作用
      appName返回浏览器的名称
      appVersion返回浏览器的平台和版本信息
      3.2.3,screen:屏幕对象【了解】
      方法作用
      width返回显示器屏幕的分辨率宽度
      height返回显示屏幕的分辨率高度
      3.2.4,history:历史对象【了解】
      方法作用
      back()加载 history 列表中的前一个 URL
      forword()加载 history 列表中的下一个 URL
      go()加载 history 列表中的某个具体页面
      3.2.5 location:当前路径信息(最重要)
      属性作用
      host设置或返回主机名和当前 URL 的端口号
      href设置或返回完整的 URL
      port设置或返回当前 URL 的端口号

      location.href; 获得路径

      location.href = “http://www.baidu.com”; 设置路径,跳转到百度页面

      4.小结

      1. BOM: 浏览器对象模型, JS里面封装了五个对象 用来操作浏览器的
      2. window对象
        • alert() 弹出警告框
        • confirm() 弹出确认框
        • prompt() 弹出输入框
        • setInterval(‘函数()’,时间) 周期执行
        • setTimeout('‘函数()’,时间) 延迟执行
      3. location
        • location.href; 获得路径
        • location.href=“”; 设置路径

      第三章-JS的DOM(最重要)

      知识点-DOM介绍

      目标

      • 了解dom相关的概念

      分析

      1. 什么是dom
      2. 什么是dom树

      讲解

      1. 什么是dom
      • DOM：Document Object Model，文档对象模型。是js提供的，用来访问网页里所有内容的(标签,属性,标签的内容)
      2. 什么是dom树
      • 当网页被加载时，浏览器会创建页面的DOM对象。DOM对象模型是一棵树形结构：网页里所有的标签、属性、文本都会转换成节点对象，按照层级结构组织成一棵树形结构。
        • 整个网页封装成的对象叫document
        • 标签封装成的对象叫Element
        • 属性封装成的对象叫Attribute
        • 文本封装成的对象叫Text

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7vJ3od0B-1663547035203)(img\dom树.png)]

      一切皆节点, 一切皆对象

      小结

      1. dom: 文档对象模型, 用来操作网页
      2. dom树: html通过浏览器加载到内存里面形成了一颗dom树, 我们就可以操作dom树节点(获得节点, 添加节点, 删除节点)

      知识点-操作标签

      1. 目标

      • 能够使用dom操作标签

      2. 分析

      1. 获取标签
      2. 操作标签

      3.讲解

      3.1. 获取标签
      方法描述返回值
      document.getElementById(id)根据id获取标签Element对象
      document.getElementsByName(name)根据标签name获取一批标签Element类数组
      document.getElementsByTagName(tagName)根据标签名称获取一批标签Element类数组
      document.getElementsByClassName(className)根据类名获取一批标签Element类数组
      DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>获取标签的方法介绍title>
    head>
    <body>
        <div id="d1" name="n1">hello div1div>
        <div class="c1">hello div2div>
        <span class="c1">hello span1span>
        <span name="n1">hello span2span>
        <script>
            //根据id获取标签
            //console.log(document.getElementById("d1"))

            //根据name获取标签的数组
            //console.log(document.getElementsByName("n1"))

            //根据标签名获取标签
            //console.log(document.getElementsByTagName("div"))

            //根据类名获取标签
            //console.log(document.getElementsByClassName("c1"))

            //扩展俩方法:1. 获取单个标签
            //console.log(document.querySelector("#d1"))

            //2. 获取多个标签
            console.log(document.querySelectorAll("span"))
        script>
    body>
html>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      3.2. 操作标签
      方法描述返回值
      document.createElement(tagName)创建标签Element对象
      parentElement.appendChild(sonElement)插入标签
      element.remove()删除标签
      <body>
    <ul id="city">
        <li>北京li>
        <li id="sh">上海li>
        <li>深圳li>
        <li>广州li>
    ul>
    <input type="button" value="添加" onclick="addCity()">
    <input type="button" value="删除" onclick="removeCity()">
    <script>
        //点击添加按钮，往城市列表的最后面添加"长沙"
        function addCity() {
            //1. 创建一个li标签
            var liElement = document.createElement("li");
            //2. 设置li标签体的文本内容为"长沙"
            liElement.innerText = "长沙"
            //3. 往id为city的ul中添加一个子标签
            //3.1 获取id为city的ul
            var city = document.getElementById("city");
            //3.2 往city里面添加子标签
            city.appendChild(liElement)
        }

        //点击删除按钮，删除上海
        function removeCity() {
            //要删除某一个标签: 那个标签.remove()
            document.getElementById("sh").remove()
        }
    script>
body>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30

      4.小结

      1. 获得标签
        • document.getElementById("id”) 根据id获得
        • document.getElementsByTagName(“标签名”) 根据标签名获得
        • document.getElementsByClassName(“类名”) 根据类名获得
      2. 操作节点(标签,文本)
        • document.createElement(tagName) 创建标签 Element对象
        • document.createTextNode("文本") 创建文本节点
        • parentElement.appendChild(sonElement) 插入标签
        • element.remove() 删除标签

      知识点-操作标签体

      1. 目标

      • 掌握操作标签体内容的方法

      2. 路径

      • 获取/设置标签体内容

      3. 讲解

      3.1语法
      • 获取标签体内容：标签对象.innerHTML
      • 设置标签体内容：标签对象.innerHTML = "新的HTML代码";
        • innerHTML是覆盖式设置，原本的标签体内容会被覆盖掉；
        • 支持标签的 可以插入标签, 设置的html代码会生效
      3.2示例
      DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作标签体title>
head>
<body>
    <div id="city"><h1>北京h1>div>
    <script>
        //获取id为city的那个标签的标签体的内容
        var innerHTML = document.getElementById("city").innerHTML;
        console.log(innerHTML)

        //设置id为city的标签体的内容
        document.getElementById("city").innerHTML = "
      深圳
      "      

          script>
body>
html>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19

      4. 小结

      1. 获得标签的内容 (一并获得标签)
      标签对象.innerHTML;

      • 1
      1. 设置标签的内容(①会把前面的内容覆盖 ②支持标签的)
      标签对象,innerHTML = "html字符串"; 

      • 1

      知识点-操作属性

      1. 目标

      • 能够操作HTML标签的属性

      2.路径

      1. 使用JS操作标签的属性

      3. 讲解

      • 每个标签Element对象提供了操作属性的方法
      方法名描述参数
      getAttribute(attrName)获取属性值属性名称
      setAttribute(attrName, attrValue)设置属性值属性名称, 属性值
      removeAttribute(attrName) 了解即可删除属性属性名称
      <body>
    <input type="password" id="pwd">
    <input type="button" value="显示密码" onmousedown="showPassword()" onmouseup="hidePassword()">
    <script>
        //目标:按住显示密码按钮的时候，就显示密码框中的密码; 按键松开的时候，就隐藏密码
        //1. 给按钮绑定onmousedown事件
        function showPassword() {
            //让密码框的密码显示: 修改密码框的type属性为text
            document.getElementById("pwd").setAttribute("type","text")
        }

        //2. 给按钮绑定onmouseup事件
        function hidePassword() {
            //就是设置密码框的type为password
            document.getElementById("pwd").setAttribute("type","password")

            //getAttribute(属性名)，根据属性名获取属性值
            var type = document.getElementById("pwd").getAttribute("type");
            console.log(type)
        }
    script>
body>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22

      4.小结

      1. getAttribute(attrName) 获取属性值
      2. setAttribute(attrName, attrValue) 设置属性值
      3. removeAttribute(attrName) 删除属性
  • 相关阅读:
    kafka增加磁盘或者分区，topic重分区
    【Vue3】自定义指令
    python-爬虫-urllib3
    君正X2100 使用SPI NOR Flash
    EOCR电机保护器的日常维护与保养技巧
    最全解决docker配置kibana报错 Kibana server is not ready yet
    【测试开发】一文带你了解什么是软件测试
    Java 大厂面试 —— 常见集合篇 List HashMap 红黑树
    （黑马出品_07）SpringCloud+RabbitMQ+Docker+Redis+搜索+分布式
    ssh 免密登陆
  • 原文地址：https://blog.csdn.net/weixin_48351326/article/details/126926383