JavaScript(ES5) 入门

01-简介

1)JavaScript 发展史

    [1] 1995年,navigator(导航者),netscape(网景);用户体验性特别好
    [2] 表单验证难题,表单验证都是在后台处理.当时处在网速特别慢的时代,发送一个请求,接收响应
          需要5分钟左右的时候提高表单验证的速度,想开发一种语言在前端进行表单验证.
    [3] 1995年java大行其道, write once , run anywhere; 网景就想开发一种语言像极了java,但是
          比java简单.叫做LiveScript
    [4] 招了"布兰登-艾奇",不懂java;入职之后让它开发liveScript像极了java,但是比java简单; 赶工
          +怄气花费了10天时间开发LiveScript 雏形.
    [5] 96年,sun公司想进入js市场,就和网景公司合作; 为了市场推广将 LiveScript 改名
          为 JavaScript
    [6] 96年,Microsoft 进入js市场,收购一家开发浏览器的公司(望远镜),就是现在的ie; 开发了
          jScript
    [7] 将JavaScript 交给一个组织 ECMA(欧洲计算机联盟); 出台一个标准: ECMAScript 语法标准
    [8] 开始了长度8年的浏览器大战,直到2004年网景公司破产而结束
    ECMAScript 和 JavaScript 区别?
        ECMAScript (简称es) 是语法标准,相当于使用说明书
        JavaScript 是实现了 ECMAScript的编程语言

 2)JavaScript 特点

  • 解释性语言:JavaScript代码可以直接在浏览器中运行,无需编译。
  • 动态类型:变量可以随时更改其数据类型。
  • 面向对象:支持对象和继承。
  • 事件驱动:响应用户操作,如点击、输入等事件。
  • 跨平台:可以在不同的操作系统和设备上运行。

 3)JavaScript 应用场景

  • 网页交互:如表单验证、动态内容更新、动画效果等。
  • 服务器端开发:如Node.js。
  • 移动应用开发:如React Native、Ionic。
  • 桌面应用开发:如Electron。

02-js第一个程序 

1)什么是JavaScript?

    JavaScript 是嵌入在HTML中,基于对象和事件驱动的脚本语言
    [1] 在前端, JavaScript 不能单独运行,必须要依赖于HTML
    [2] 基于对象: javascript 是面向对象的语言
    [3] 事件驱动: 当通过输入设备(鼠标,键盘)对html页面的元素进行操作时,都可以实现一些功能效
          果. window 操作系统就是基于事件驱动的系统
    [4] 脚本语言: 无需编译直接运行的语言

2)第一个程序

    [1] 在网页中添加 script 标签
    [2] 在script标签中编写js代码
<script type="text/javascript">
       alert("你好,JavaScript");
</script>

3)细节

    [1] script 标签是JavaScript代码容器,负责执行js代码
    [2] script 标签可以有多个,并且可以写在网页的任何地方; 建议写在head中或者body的最后
    [3] 属性
        type : 可以不加,代码类型
        src : js文件的资源路径, 可以定义单独的js文件(后缀为js),通过这个属性引入到HTML中,好处
                就是可以做到js代码和html代码分离
<!-- 将test.js文件中的内容,引入到html中并执行 -->
<script type="text/javascript" src="test.js"></script>
        注意: 使用src属性,那么在script中就不能写任何js代码
   [4] alert(字符串) 警示框

4)常用方法

    alert("字符串") : 警示框
    confirm("字符串") : 确认框
        
    prompt("字符串") : 用户提示输入框, 类似于 Scanner
        
    console.log(字符串) : 往控制台打印内容
        F12或 Fn+F12 ----> console 
        
    document.write("html代码"); 往网页中输出内容

03-js语法基础

主要学习和java不同的语法

1)变量

1.什么是变量?
    在程序运行中,值可以不断改变的量; 变量在程序中存储数据的容器.
2.定义变量
    关键字: var (variable 缩写)
    var 变量名称;
    比如:
        var a; // 定义变量a
注意:变量只定义没有赋值,那么默认值:undefined
3.给变量赋值
    赋值运算 : = , 将=右边的值赋值左边的变量 , 将变量看做一个容器,那么就是将值放入容器中
    变量名称 = 值;
4.变量定义并赋值
    var 变量名称 = 值;
var c=999;
var b=888;
//在js中可以重复定义
//后边定义的变量可以替换前边定义的变量
5.变量特点
    JavaScript 是弱类型语言,变量的数据类型由所赋值决定,并不由变量本身决定
    java 是强类型语言,变量的数据类型由变量本身决定
    验证:
        typeof 变量名称 ; 获取变量的数据类型
var aa=1;
console.log(typeof aa);

2)关键字和保留字

    关键字: 在程序中具有特殊含义的单词,一般就是系统提供好的单词
    保留字: 在程序中具有特殊含义的单词,只是还没有在程序中使用, 以后可能会变成关键字
        店/公司: 储备干部, 储备店长

3)标识符命名规范

    [1] 标识符由字母,数字,下划线和$构成 
    [2] 首字母不能为数字,可以为$
    [3] 不能是关键字和保留字
        注意: 变量名name,尽量不要用
    [4] 严格区分大小写 : A, a 2个不同的变量
    [5] 见名知意,驼峰式命名,下划线命名,中划线命名
        驼峰式命名 : java 命名
        下划线命名: 数据库, c / c++
        中划线命名: html,css
    

4)数据类型

    数据类型:
        Number : 数字类型, 整数和小数都是Number类型
        Boolean : 布尔类型, 布尔类型只有2个值 true / false
        String : 字符串类型
        Undefined : 未定义类型
        Arr : 数组
        Object : 对象
        Null : 空值
let num = 100;                // 数字
let str = "Hello";            // 字符串
let isTrue = true;           // 布尔值
let arr = [1, 2, 3];           // 数组
let obj = {a: 1, b: 2};     // 对象
let undef;                      // 未定义
let nul = null;                // 空值
注意:字符串类型,用单引号或双引号括起的数据。
var s='字符串';
var f="字符串";
var d='""';
var d="''";
//单双引号嵌套:外部使用单引号,内部使用双引号;外部使用双引号,内部使用单引号。
         
    特殊值:
        "" : 空字符串,占据内存空间,只是空间没值
        null : 空对象,没有内存空间
        NaN : Not a Number , 是数字中的特殊值, 运算结果无法转换为数字时,结果就是NaN

5)数据类型转换

    数字字符串: 由数字构成的字符串
    字符串转换为数字:
    [1] 隐式类型转换
        系统内部自动转换: 数字字符串 和 数字做算术运算(除了+),可以自动将其转换为数字
var s="123";
console.log("s="+s+"; type="+typeof s);
//将字符串转换为数字
s=s-0;
s=s*1;
s=s/1;
console.log("s="+s+"; type="+typeof s);//结果为123 类型是number
    [2] 显式类型转换
        parseInt(x) : 若x无法转换为数字,返回值NaN
            1.将字符串x转换为整数
            2.若x为小数,那么可以做取整运算
var ss="444";
//将字符串转换为数字
ss=parseInt(ss);
console.log("ss="+ss+"; type="+typeof ss);//结果为444 类型是number
var x=2.343123;
//取整
x=parseInt(x);
console.log("x="+x);//结果为2 类型是number
        parseFloat(x): 将字符串转换为小数
var ss="12.3212";
//将字符串转换为小数
ss=parseFloat(ss);
console.log("ss="+ss+"; type="+typeof ss);//结果为12.3212 类型是number
        若x无法转换为数字,返回值NaN
var ss="dsad";
//将字符串转换为小数
ss=parseFloat(ss);
console.log("ss="+ss+"; type="+typeof ss);//结果为NaN 
    数字转字符串
    [1] 隐式类型转换
        字符串和任何其他类型做拼接运算,结果都是字符串
        2 + "";
var n=2;
//数字转换为字符串
n=n+"";
console.log("n="+n+"; type="+typeof n);//结果为2 类型是String
    [2] 显式类型转换
        调用数字的toString方法
var n=2;
//数字转换为字符串
n=n.toString();
console.log("n="+n+"; type="+typeof n);//结果为2 类型是String
//在js里面所有的东西都是对象,包括这个数字也是对象

6)运算符

    算术运算: + - * / %
    拼接运算: + 
    赋值运算: =
    关系运算: > >= < <= != 
        == : 相等,只比较大小,不比较类型
        === :  恒相等,既比较大小也比较类型  
        !== : 不恒等于
    逻辑运算:
       A && B && C && D: 逻辑与,有假则为假, 又称为短路与
       A || B || C || D: 逻辑或,有真则为真, 又称为短路或
       ! : 逻辑非 
    复合型运算:
        ++ : 自增1运算, (b=a++,b=++a区别)
        -- : 自减1运算, (b=a--,b=--a区别)
        a += b ==> a = a + b;
        a -= b ==> a = a - b;
        a *= b ==> a = a * b;
        a /= b ==> a = a / b;
        a %= b ==> a = a % b;
     三目运算符(三元运算符,问号表达式)
            表达式1 ? 表达式2 : 表达式3 
            若表达式1为true,那么返回表达式2的结果
            若表达式1为false,那么返回表达式3的结果
            比如 : a , b , c 最大值
            var max = a > b ? a : b;
            max = max > c ? max : c; 

04-流程控制

1)流程控制的分类

    [1] 顺序执行结构
    [2] 选择执行结构
    [3] 循环执行结构

2)顺序执行结构

    所有的程序首先是一个顺序执行结构,所有的程序都是从程序入口开始逐行执行

3)选择执行结构

    根据不同的情况,执行不同的代码

    1.if结构

        [1] 单分支结构
            if(条件) {
                // 代码块
            }
            若满足条件,那么执行if中的代码块
        [2] 双分支
            if(条件) {
                // if 代码块
            } else {
                // else 代码块
            }
            若满足条件,那么执行if代码块;否则执行else代码块
        [3] 多分支
            if(条件1) { // 代码块1 }
            else if(条件2) { //代码块2 }
            else if(条件3) { //代码块3 }
            ...
            else if(条件n) { //代码块n }
            else {}
            注意: else 可以省略
            结论: 多分支结构中只要有一个分支满足条件执行,那么就退出多分支结构

    2.switch结构

        适合于有限情况的等值判断
        switch(变量) {
            case 情况:
            break;
            case 情况:
            break;
            case 情况:
            break;
            ...
            default:
            break;
        }
        break : 退出switch结构
        若没有break,会出现case穿透现象
<script type="text/javascript">var day = 1;
switch (day) {
    case 0 :
        document.write('星期日');
        break;
    case 1 :
        document.write('星期一');
        break;
    case 2 :
        document.write('星期二');
        break;
    case 3 :
        document.write('星期三');
        break;
    case 4 :
        document.write('星期四');
        break;
    case 5 :
        document.write('星期五');
        break;
    case 6 :
        document.write('星期六');
        break;
    default:
        document.write('数字不满足要求');
}</script>

4)循环结构

1.for循环

    适合for循环情况: 适合有步长的循环
    for(循环变量初始化 1;循环条件 2 ;循环变量改变 3) {
        循环体 4
    }
    执行顺序:
    

2.while循环

    适合于非步长循环
    循环变量初始化 1;
    while(循环条件 2) {
        循环体 3
        循环变量改变 4
    }
    执行顺序:
        
<script type="text/javascript">
    //求1--100的和
    var sum = 0;
    var i = 1;
    while (i <= 100) {
        sum += i;
        i++;
    }
    document.write("1--100的和是" + sum + "
    ");
    document.write("i是" + i);
</script>

3.do-while循环

    循环变量初始化;
    do {
        循环体;
        循环变量的改变;
    } while(循环条件); 
    do-while 循环和while循环区别?
        do - while 先执行再判断,至少执行一次
        while 先判断再执行  
<script type="text/javascript">
    //求1--100的和
    var sum = 0;
    var i = 1;
    do {
        sum += i;
        i++;
    } while (i <= 100)
    document.write("1--100的和是" + sum + "
    ");
    document.write("i是" + i);
</script>

4.退出循环结构

    break; 退出整个循环
    continue : 退出本次循环,继续下一次循环

05-错误处理

1)错误分类
    [1] 语法性错误
    [2] 业务性错误
2)语法性错误
    打开控制台查看错误信息
    
    建议: 只要写js代码,将控制台打开
3)业务性错误 - 使用debug调试
    [1] 打开source窗口
        
    [2] 点击行号,添加断点
        
    [3] 刷新页面,程序停止在断点的位置
    [4] 通过按钮控制程序的执行
        
    [5] 查看变量值,分析逻辑中的错误
        

06-函数和数组 

1)函数

1.什么是函数?
    函数是一个存储代码的容器,可以将代码保存在函数中,也可以从容器获取代码来执行; 函数这个容器存放代码都是一些通用性特别强的代码,只需要在调用位置获取这些代码即可,能提高程序的可用性.
2.定义函数
    function 关键字, 含义: 功能  , 一个函数就是一个功能.
    语法:
        function 函数名称(参数1,参数2,...,参数n) {
            // 函数体
            return 值;
        }  
3.定义无参无返回值
       // 定义无参无返回值的函数 add
       // 定义: 在堆空间开辟了一块内存,存储相关的代码
       // 注意: function 和 函数名称之间没有任何关键字
       function add() {
           // 求1-100的和
           var s = 0;
           for (var i = 1; i <= 100; i++) {
               s = s + i;
           }
           console.log(s);
       }
    
       //调用: 将堆中的代码获取出来,放到栈空间中执行
       // 函数名称(); () : 含义就是调用
       add();
4.定义有参函数
       // 定义有参函数
       // 注意: 参数直接写参数名,不需要任何关键字修饰
       // 形式参数: 简称形参,只有含义没有值
       // a 和 b 就是形参,代表加法开始和结束
       function add2( a, b) {
           var s = 0;
           for (var i = a; i <= b; i++) {
               s = s + i;
           }
           console.log("s = " + s);
       }
       
       // 调用函数: 函数名称(值,值,...,值);
       // 实参: 实际参数
       // 参数传递: 调用时会将实参的值传递给形参,然后形参就有实际的值,然后开始执行函数中代码
       add2(1,50);
5.返回值
    return 关键字
    [1] 将函数内部的结果返回给外部的调用者
    [2] 函数结束
       // 定义有返回值的函数
       function add3(a , b) {
           var s = 0;
           // 代表程序的结束; 可以用在函数执行的规则性验证
           // a 和 b 必须都是数字
           if(typeof a != "number" || typeof  b != "number") {
               return ; // 程序结束,默认返回  undefined
           }
           // a 一定比 b 小
           if(a > b) {
               return ;// 程序结束,默认返回  undefined
           }
           for (var i = a; i <= b; i++) {
               s = s + i;
           }
           return s;// 将s的值返回给调用者
       }
       
       // 调用函数: var 变量 = 函数名称(值,值,...,值);
       var ret = add3(1,2);
       alert("ret = " + ret);

2)全局变量和局部变量

    局部变量 : 在函数内部定义的变量
    全局变量 : 在函数外部定义的变量
    
建议: 开发时遵循java对全局变量和局部变量的定义方式, 遵循块级作用域的方式,在哪个块级作用域中定义,在这个作用域中使用
块级作用域: {} 作用开始以及结束范围
if , switch , class , static , for , while 块级作用域

3)数组

1.什么是数组?
    数组为了解决存储多个数据的位置, 数组由一块连续的内存空间构成, 可以在这个内存空间中存储多个数据.
2.数组的语法
    [1] var 数组名称 = new Array(值,值,值,...,值);
    [2] var 数组名称 = [值,值,值,...,值];
var arr =new Array(12,23,123,2,3);
console.log(arr);
var arr=[12,23,123,2,3];
console.log(arr);
var arr=[];//空数组
3.使用下标给数组中的元素赋值和取值
    数组名称[index] = 值;
// 数组的长度可变
arr[0]=111;
arr[1]=12;
//通过下标取值
var r=arr[10];
console.log("r="+r);
4.数组长度
    数组名称.length
        // 获取数组长度
       console.log("数组长度 = " + arr.length);
       // 数组遍历: 使用索引从0开始,到数组长度-1结束
       for (var i = 0; i < arr.length; i++) {
           console.log(arr[i]);
       }
 
5.特点
    [1] 长度可变
    [2] 类型任意
    [3] 数组就是对象
  在 js 中,数组也称为集合
6.方法
    push(e) : 将元素e添加到数组末尾
    indexOf(e) : 查找元素e在数组中首次出现的位置,若不存在返回-1
    lastIndexOf(e) : 查找元素e在数组中最后次出现的位置,若不存在返回-1
    join(s) : 通过字符串s,将数组中的元素拼接为字符串

07-对象 

1)string对象

    length : 获取字符串的长度
    charAt(index) : 获取指定位置的字符
    indexOf(s) : 查找字串s首次出现的位置,若不存在那么返回-1
    lastIndexOf(s) : 查找字串s最后一次出现的位置,若不存在那么返回-1
    split(s) : 将字符串切割为数组
    substring(start) : 截取从start开始截到最后的字符串
    substring(start,end) : 截取从start开始到end结束的字符串
<script type="text/javascript">
       var s="hello javascript";
       //长度
       console.log(s.length);
       //获取指定位置的字符
       console.log(s.charAt(6));
       //查询字符
       console.log(s.indexOf("a"));
       //查询字符串a最后出现的位置
       console.log(s.lastIndexOf("a"));
       //切割字符串
       console.log(s.split(" "));
       //截取
       console.log(s.substring(6));
       console.log(s.substring(6,9));
</script>

2)Math 对象

    Math.floor(x) : 向下取整
    Math.ceil(x) : 向上取整
    Math.random() : 产生[0-1)的随机小数
    Math.round(x) : 四舍五入 
          随机数

3)Date 对象

    日期对象根据JDK1.1来实现的,JDK1.1 中的方法都是可以使用
    [1] 创建对象
        var date = new Date() : 当前时间
        var date = new Date(毫秒数) : 通过毫秒数(自1970-1-1 00:00:00 到指定时间)创建日期
    [2] 方法说明
        getFullYear() : 获取四位数的年
        getMonth() : 获取月 , 从0-11
        getDate() : 获取日
        getHours() : 获取小时
        getMinutes() : 获取分钟
        getSeconds() : 获取秒
        getDay() : 获取周, 0-6
<script type="text/javascript">
    var d = new Date(); //系统当前时间
    console.log(d);
    console.log(d.getYear()+1900); //120+1900=2020
    console.log(d.getFullYear());//2020
    console.log(d.getMonth()+1);//2 +1 ===>3
    //年-月-日 时:分:秒
    var d2 = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate()+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
    console.log(d2);
    //1970----现在d时间 总毫秒数
    var longTime = d.getTime();
    var d3 = new Date("2000-01-01 10:10:10");
    console.log(d3);
</script>

4)自定义对象

    js 是面向对象的语言,所以js也提供了创建对象的方法
    [1] 构造函数 - 创建对象
        // 参数作用: 初始化属性
        // this : 当前对象,指将要创建的对象
        function 构造函数名称(参数1,参数2,...,参数n) {
            // 添加属性
            this.属性名称 = 参数;
            this.属性名称 = 参数;
            ...
            // 添加方法
            this.方法名称 = function(参数列表) {
            }
            this.方法名称 = function(参数列表) {
            }
            ...
        }
        对象 = new 构造函数(值,值,...,值);
         注意:js的对象可以动态增加属性
    [2] 简单对象方式
        对象 = {}; // 空对象
        // 添加属性
        对象.属性 = 值;
        // 添加方法
        对象.方法 = function(参数列表) {}
        创建有属性有方法的对象:
        对象 = {
            // 添加属性
            属性名称:属性值,
            属性名称:属性值,
            ...,
            属性名称:属性值,
            方法名称:function(参数列表) {},
            方法名称:function(参数列表) {},
            ...
            方法名称:function(参数列表) {}
        }
<script type="text/javascript">
       /* 定义构造函数: 可以理解为一类事物 */
       function Person(name,age,sex) {
           // 添加属性
           this.personName = name;
           this.age = age;
           this.sex = sex;
           // 添加方法
           this.eat = function(e) {
               alert(this.personName + "正在吃" + e);
           }
           this.play = function(p) {
               alert(this.personName + "正在玩" + p);
           }
       }
       // 通过构造函数创建对象
       var p1 = new Person("张三",23,"男");
       console.log(p1);
       // 使用属性: 对象.属性
       p1.personName = "张飒";// 设置属性
       console.log(p1.personName);// 获取属性
       // 使用方法: 对象.方法
       p1.eat("麻辣烫");
       
</script>

08-BOM

1)什么是BOM?

    BOM : Browser Object Model 浏览器对象模型
    提供了操作浏览器的对象以及方法
    
    window : 浏览器窗口对象
    history : 历史对象
    document : 文档对象,操作网页
    location : 地址对象

2)window对象

    alert , confirm , prompt 都是window对象中的方法
    全局变量 和 全局函数 都是window对象中的方法
    window 对象中的方法和属性,使用的时候可以省略window
    方法:
        setTimeout(fn,time) : 过time毫秒执行函数fn, 返回定时器的唯一性标识
        clearTimeout(定时器唯一性标识) : 关闭定时器
        setInterval(fn,time) : 每过time毫秒执行函数fn, 返回定时器唯一标识
        clearInterval(定时器唯一性标识) : 关闭定时器
    
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>
<body>
<h1>window.setTimeout,clearTimeout函数</h1>
<script type="text/javascript">
    var c=10;
    var t;
    function timedCount()
    {
        console.log("倒计时开始:"+c);
        t=setTimeout("timedCount()",1000);
        c--;
        if(c<1){
            console.log("倒计时结束");
            window.clearTimeout(t);
        }
    }
    //调用函数
    timedCount();
</script>
</body>
</html>

3)点击事件

    点击事件: 当通过鼠标左键点击页面的元素中,可以调用一个函数来实现功能.
    <标签 οnclick="函数名称(参数值,参数值,...)"></标签>
   
<!-- 网页中任何一个元素都可以添加事件 -->
    <!-- 当点击此按钮时,执行clickMe函数 -->
    <!-- 事件触发: 当这个事件执行的时候,叫做事件触发 -->
    <p οnclick="clickMe()">点我~~</p>
    <button οnclick="clickMe2()">点我~~</button>
    <script type="text/javascript">
       function clickMe() {
           alert("点我干嘛~~");
       }
       
       function clickMe2() {
           alert("就点你了~~");
       }
    </script>

4)location 地址对象

    location.href = "地址" , 跳转页面
    location.reload() : 刷新页面

5)history 历史对象

    history.back();返回上一个历史记录
    history.forward();跳转到下一个历史记录

09-DOM

1)什么是DOM?

    DOM: Document Object Model 文档对象模型, 用来操作网页中的元素
    查找元素, 修改元素, 删除元素, 添加元素
    当网页加载到内存之后, 会在内存中根据标签的层级结构形成一棵倒立的树. (使用 tree 数据结构来存储)
    
    DOM 树, 树上所有的元素都称为DOM节点, DOM对象; 就是标签对象
    节点分类:
        [1] 元素节点: 标签元素
        [2] 属性节点: 标签中的属性
        [3] 文本节点: 标签中的文本

2)查找元素(DOM对象, 标签元素)

    document.getElementById(id值): 通过id属性查找元素, 返回一个DOM对象
    document.getElementsByTagName(tag名称); 通过标签名称获取元素, 返回DOM对象的集合    
    document.getElementsByClassName(class属性): 通过class属性来获取元素, 返回DOM对象的集合
    document.getElementsByName(name属性): 通过name属性来获取元素, 返回DOM对象的集合  
    e.parentNode : 获取DOM对象e的父元素
    e.childNodes : 获取DOM对象e的子节点集合
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>
<body>
<h1>DOM编程2</h1>
<div>
    <a id="a1" name="a1" class="c1" href="#">百度</a>
    <a id="a2" name="a1" class="c1" href="#">新浪</a>
    <a id="a3" name="a1" class="c1" href="#">京东</a>
    <a id="a4" name="a2" class="c2" href="#">淘宝</a>
</div>3)DOM对象的修改, 修改DOM对象中的属性
[1] innerHTML : 操作标签内部的HTML代码
DOM对象.innerHTML = html代码; 设置标签内部的HTML代码
var 变量 = DOM对象.innerHTML; 获取标签内部的HTML代码
[2] value : 操作表单元素(input,select)的value属性
<script type="text/javascript">
    //获取id="a1" 的元素 ----唯一查询 (一个页面中,不允许重复的id元素)
    var a1 = document.getElementById("a1");
    console.log(a1);
    //根据标签名 获取元素----返回多个-----HTMLCollection(4)
    var a2 = document.getElementsByTagName("a"); //获取本网页所有a标签
    console.log(a2);
    //根据name获取元素 ------>NodeList 节点对象集合
    var a3 = document.getElementsByName("a1");
    console.log(a3);
    //根据classname 样式名称 获取元素------》所有样式名称为c1的元素节点
    var a4 = document.getElementsByClassName("c1");
    console.log(a4);
    //a1的父节点 div
    var p = a1.parentNode;
    console.log(p);
    //获得元素的子节点
    var pChildren = p.childNodes;
    console.log(pChildren);
</script>
</body>
</html>

3)DOM对象的修改, 修改DOM对象中的属性

[1] innerHTML : 操作标签内部的HTML代码
    DOM对象.innerHTML = html代码; 设置标签内部的HTML代码
    var 变量 = DOM对象.innerHTML; 获取标签内部的HTML代码
<script type="text/javascript">
//获取 第2个h1的内部内容
var h1 = document.getElementsByTagName("h1");
console.log(h1[1].innerHTML);
//修改p段落 内容
var p1 = document.getElementsByTagName("p")[0];
//修改内容
p1.innerHTML="p段落修改后的新内容";
</script>
[2] value : 操作表单元素(input,select,textarea)的value属性
    DOM对象.value = 值; // 设置value属性值
    var 变量 = DOM.value;// 获取value属性值
//获取name="name"的输入框的内容
var input1 = document.getElementsByName("name")[0];
console.log(input1.value); //获取value
//修改value
input1.value="张三";
[3] checked : 选中radio/checkbox | 获取radio/checkbox的选中状态
    DOM对象.checked = true ; 选中 DOM对象.checked = false; 取消选中
    var 变量 = DOM对象.checked; // 获取选中状态
//单选按钮 男选择
var sexes = document.getElementsByName("sex");
console.log(sexes[0].checked);
sexes[0].checked=true; //设置为选中
//复选框
var ck =document.getElementById("rememberMe");
ck.checked = true;//复选框选中
[4] style : 操作样式, 类型: 样式对象
    DOM对象.style.样式属性 = 值; // 改变样式
    var 变量 = DOM对象.style.样式属性; // 获取样式
<body>
<h1>DOM编程4</h1>
<div id="div1" style="width:200px;height:100px;background-color: red;
display:block ">
</div>
<input type="button" οnclick="fun()" value="隐藏">
<script type="text/javascript">
    //隐藏/显示 div id="div1"
    function fun(){
        //获取div1
        var div1 = document.getElementById("div1");
        //获取input button
        var bt = document.getElementsByTagName("input")[0];
        if(bt.value=='隐藏'){
            //div隐藏
            div1.style.display = "none";
            //将按钮的value值设置为显示
            bt.value ="显示";
        }else{
            //显示工作
            //div显示
            div1.style.display = "block";
            //将按钮的value值设置为 隐藏
            bt.value ="隐藏";
        }
    }
</script>
</body>

4)事件处理

事件: 当通过输入设备对网页中的元素做操作时, 都可以执行函数来实现功能. 
点击事件: 当通过鼠标左键点击元素时, 执行一个函数实现功能.
常用事件:

1)、点击事件

    onclick:单击事件
    ondblclick:双击事件

2)、焦点事件

    onfocus:获取焦点事件
    onblur:失去焦点事件

3)、加载事件

    onload:一张页面或一幅图像完成加载

4)、鼠标事件

    onmousedown:鼠标按钮被按下
    onmouseup:鼠标按键被松开
    onmousemove:鼠标被移动
    onmouseover:鼠标移到某元素之上
    onmouseout:鼠标从某元素移开

5)、键盘事件

    onkeydown:某个键盘按键被按下
    onkeyup:某个键盘按键松开
    onkeypress:某个键盘按键被按下并松开

6)、选择和改变事件

    onchange:内容改变事件
    onselect:文本被选中

7)、表单事件

    onsubmit:表单提交事件
    onreset:重置按钮被点击
事件添加方式:
    [1] 嵌入方式: 使用标签属性添加事件
        <标签名称 事件属性="函数(参数列表)"></标签名称>
        
        优点: 简单好理解
    [2] 脚本方式: 在script标签中使用js代码添加事件
        DOM对象.事件属性 = function() { // 事件处理函数
        }
        优点: 便于代码的管理和维护
        缺点: 难度比嵌入方式大
事件处理函数的this:
    嵌入方式:
        
 <input type="text" onfocus="testFocus(this)" name="username">     
    脚本方式:
        事件处理函数都有一个this对象, 代表元素本身    
        var input = document.getElementsByName("username")[0];
        input.onblur = function() {
            console.log(this); // 代表元素本身
            console.log("失去焦点事件执行")
        }
<form action="productDeletesServlet" method="post">
       <table border="1">
             <tr>
                    <th><input type="checkbox" name="ids"  οnclick="font(this)">
                        全选/全不选
                    </th>
                    <th>序号</th>
                    <th>商品名称</th>
                    <th>商品单价</th>
                    <th>折扣</th>
                    <th>折扣价格</th>
                    <th>商品类型</th>
                    <th>操作</th>
             </tr>
             <c:forEach items="${list }" var="product" varStatus="p">
                    <tr>
                           <td><input type="checkbox"
                                name="ids"  value="${product.product_id }"></td>
                           <td>${p.count}</td>
                           <td>${product.product_name }</td>
                           <td>${product.price }</td>
                           <td>${product.zhekou }</td>
                           <td>${product.zhekou_price }</td>
                           <td>${product.product_type_name }</td>
                           <td>
                                <a  href="productUpdateServlet?id=${product.product_id }">
                                        修改
                                </a>
                          </td>
                    </tr>
             </c:forEach>
       </table>
       <input type="submit" value="批量删除">
       </form>
       <a href="typeServlet">添加</a>
       <script type="text/javascript">
             var idsName=document.getElementsByName("ids");
             function font(e){
                    for(var i=0;i<idsName.length;i++){
                           idsName[i].checked=e.checked;
                    }
             }
       </script>

5)文档处理

    添加元素, 创建元素, 删除元素
    [1] 创建元素
        document.createElement("标签名称") : 创建DOM对象
    [2] 添加子元素
        parent.appendChild(c): 在parent元素的末尾添加元素c
            parent 和 c 都是DOM对象,parent是父元素
    [3] 删除元素
        parent.removeChild(c): 通过父元素parent删除子元素c
            parent 和 c 都是DOM对象
了解更多查看菜鸟教程:JavaScript 教程 | 菜鸟教程

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/17471.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java高级——String字符串探索(在jvm底层中如何实现,常量池中怎么查看)

java高级——String字符串探索&#xff08;在jvm底层中如何实现&#xff0c;常量池中怎么查看&#xff09; 文章介绍提前了解的知识点1. 常量池2. Jvm虚拟机3. 字节码 String类详解1. String对象在申明后将不可修改&#xff0c;是不可变类2. String进行相加相减等操作时一定会创…

【ARM+Codesys案例】树莓派+Codesys软PLC方案在包装行业灌装旋盖机的应用

ARM系列支持&#xff1a;全志T3、RK3568、树莓派 机型定义&#xff1a;双工位旋盖机 旋盖机主要适用于不同规格的材质及不同规格的盖、旋&#xff08;轧&#xff09;盖。适用螺旋盖、防盗盖、防撞盖、压入盖等。压力可方便调整&#xff0c;根据瓶盖大小设置取盖位。结构紧凑、…

Linux--进程间通信(2)(有名管道)

目录 1.原理 2.创建命名管道 3.使用命名通道实现简单的通信 4.使用创建的命名管道 1.原理 匿名管道没有名称&#xff0c;它们是通过句柄在父进程和子进程之间传递的。这意味着匿名管道只能用于具有父子关系的进程之间。 但如果程序之间没关系&#xff0c;那么这时候就要用…

2024 年“泰迪杯”A 题:生产线的故障自动识别与人员配置--第四题(用遗传算法解决生产线排班问题--matlab代码)

问题背景&#xff1a; 问题四&#xff1a;根据实际情况&#xff0c;现需要扩大生产规模&#xff0c;将生产线每天的运行时间从 8 小时增加 到 24 小时不间断生产&#xff0c;考虑生产线与操作人员的搭配&#xff0c;制定最佳的操作人员排班方案&#xff0c;要求满足以下条件&am…

RedHat9网络配置设计

目录 一、实验目的 二、实验过程 1、配置新网络接口 2、多网卡配置网络 3、网络接口的绑定&#xff0c;进行远程访问 4、配置网络接口的组合 一、实验目的 本次实验的目的是使用nmcli命令工具配置网络&#xff0c;ens160配置多个网卡&#xff0c;进行网络接口的绑定与组合…

Redis 主从搭建简单教程

安装单机 首先拿到安装包 wget https://download.redis.io/releases/redis-7.0.15.tar.gz然后进行解压 tar -zxvf redis-7.0.15.tar.gz 然后创建一个文件夹myredis将原始配置文件进行备份 mkdir /myrediscp redis.conf /myredis/redis7.conf 将配置文件复制进去 最后使用vim编…

室内也可以用北斗定位?还能用RTK?

室内卫星顾名思义&#xff0c;就是在室内有遮挡环境中的卫星定位技术&#xff0c;众所周知&#xff0c;目前全球几大GNSS定位系统已经很完善&#xff0c;但是GNSS有个致命的弱点&#xff0c;就是地面如果有遮挡就没有信号&#xff0c;在这样的条件下&#xff0c;在室内定位场景…

RT_Thread内核源码分析(一)——CM3内核和上下文切换

目录 一、程序存储分析 1.1 CM3内核寻址空间映射 1.2 程序静态存储和动态执行 二、CM3内核相关知识 2.1 操作模式和特权极别 2.2 环境相关寄存器 2.2.1 通用寄存器组&#xff0c; 2.2.2 状态寄存器组 2.2.3 模式切换环境自动保存 2.2.4 函数调用形参位置 2.3 …

信息安全基础(补充)

&#xff09;的内容主要有数据备份、数据修复、系统恢复等。响应&#xff08;Respons&#xff09;的内容主要有应急策略、应急机制、应急手段、入侵过程分析及安全状态评估等。 面向数据挖掘的隐私保护技术主要解决高层应用中的隐私保护问题&#xff0c;致力于研究如何根据不同…

android studio 导入github里的项目后提示:Add Configuration

原文链接&#xff1a;https://blog.csdn.net/weixin_45677723/article/details/125940912 从github上面clone项目&#xff0c;出现下图问题&#xff1a; 解决问题&#xff1a; 我这个的情况是因为多文件嵌套了&#xff0c;我用Android Studio打开的是A文件&#xff0c;而B项…

移除重复节点

题目链接 移除重复节点 题目描述 注意点 链表未排序链表长度在[0, 20000]范围内链表元素在[0, 20000]范围内 解答思路 使用Set存储访问过的链表中出现的节点值&#xff0c;当遍历到链表的某个节点在Set中出现过&#xff0c;则需要将该节点的前一个节点next指针指向该节点的…

InternLM2-Math-Plus全面升级,全尺寸最强的开源数学模型

总览 数学能力是大语言模型推理水平的重要体现。上海人工智能实验室在推出领先的开源数学模型InternLM2-Math的三个月之后对其进行了升级&#xff0c;发布了全新的 InternLM2-Math-Plus。升级后的 InternLM2-Math-Plus 在预训练和微调数据方面进行了全面的优化&#xff0c;显著…

【二叉树】非递归实现前中后序遍历

目录 前言 算法思想 非递归实现前序遍历 过程分析 代码 非递归实现中序遍历 过程分析 代码 非递归实现后序遍历 过程分析 代码 前言 1&#xff09;前序&#xff1a;根 左子树 右子树 2&#xff09;中序&#xff1a;左子树 根 右子树 3&#xff09;后序&#xff1…

邮箱调用接口的服务有哪些?怎么配置接口?

邮箱调用接口安全性如何保障&#xff1f;使用邮箱服务器的方法&#xff1f; 邮箱调用接口为各种应用和系统提供了便捷的电子邮件发送与接收功能。选择合适的邮箱调用接口服务可以大大提升工作效率和用户体验。本AokSend将探讨一些主要的邮箱调用接口服务。 邮箱调用接口&…

MySQL(进阶)--索引

目录 一.存储引擎 1.MySQL体系结构​编辑 2.存储引擎简介 3.存储引擎特点 (1.InnoDB (2.MyISAM (3.Memory 4.存储引擎选择 二.索引 1.索引概述 2.索引结构 3.索引分类 4.索引语法 (1.创建索引 (2.查看索引 (3.删除索引 5.SQL性能分析 (1.SQL执行频率 (2.慢查…

【Sql Server】随机查询一条表记录,并重重温回顾下自定义函数的封装和使用

大家好&#xff0c;我是全栈小5&#xff0c;欢迎来到《小5讲堂》。 这是《Sql Server》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解。 温馨提示&#xff1a;博主能力有限&#xff0c;理解水平有限&#xff0c;若有不对之处望指正&#xff01; 目录 前言随机查询语…

Android 中资源文件夹RES/RAW和ASSETS的使用区别

文章目录 1、res/raw 文件夹1.1、特点1.2、使用方法1.3、示例&#xff1a; 2. assets 文件夹2.1、特点2.2、使用方法2.3、示例&#xff1a; 3、使用场景3.1、res/raw 使用场景3.2、assets 使用场景 4、比较与选择5、文件夹选择的建议6、 示例代码总结6.1、res/raw 示例6.2、ass…

电瓶车进电梯识别报警摄像机

随着电动车的普及&#xff0c;越来越多的人选择电动车作为出行工具。在诸多场景中&#xff0c;电梯作为一种常见的交通工具&#xff0c;也受到了电动车用户的青睐。然而&#xff0c;电动车进入电梯时存在一些安全隐患&#xff0c;为了提高电动车进电梯的安全性&#xff0c;可以…

小程序自动化辅助渗透脚本(2024)

简介 1.还在一个个反编译小程序吗&#xff1f; 2.还在自己一个个注入hook吗&#xff1f; 3.还在一个个查看找接口、查找泄露吗&#xff1f; 现在有自动化辅助渗透脚本了&#xff0c;自动化辅助反编译、自动化注入hook、自动化查看泄露 注&#xff1a;本工具仅用于学习交流&…

Java中的JSON神器,如何轻松玩转复杂数据结构

哈喽&#xff0c;大家好&#xff0c;我是木头左&#xff01; 一、揭秘JSON世界的基石 在Java的世界中&#xff0c;JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;它基于文本&#xff0c;易于阅读和编写&#xff0c;同时也易于…