JavaWeb笔记Day4------JavaScript

JavaWeb概念

Web概念概述

JavaWeb

使用Java语言开发基于互联网的项目

软件架构

  1. C/S:Client/Server 客户端/服务器端

    • 在用户本地有一个客户端程序,在远程有一个服务器端程序
    • 如:QQ,迅雷。。。
    • 优点:
      1. 用户体验好
    • 缺点:
      1. 开发,安装,部署,维护 麻烦
  2. B/S:Browser/Server 浏览器/服务器端

    • 只需要一个浏览器,用户通过不同的网址(URL),客户访问不同的服务器端程序
    • 优点:
      1. 开发,安装,部署,维护 简单
    • 缺点:
      1. 如果应用过大,用户的体验可能会受到影响
      2. 对硬件要求过高

BS架构详解

image

资源分类

  1. 静态资源

    • 使用静态网页开发技术发布的资源
    • 特点:
      • 所有用户访问,得到的结果是一样的
      • 如:文本,图片,音频,视频。HTML,CSS,JavaScript
      • 如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎。可以展示静态资源
    • 分类:
      • HTML:用于搭建基础网页,展示页面的内容
      • CSS:用于美化页面,布局页面
      • JavaScript:控制页面的元素,让页面有一些动态的效果
  2. 动态资源

    • 使用动态网页及时发布的资源

    • 特点:

      • 所有用户访问,得到的结果可能不一样
      • 如:jsp/servlet,php,asp
      • 如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静态资源,再发送给浏览器
    • 我们要学习动态资源,必须先学习静态资源!

JavaScript

概念

一门客户端脚本语言

  • 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎

  • 脚本语言:不需要编译,直接就可以被浏览器解析执行了

功能

可以来增强用户和HTML页面的交互过程,可以来控制HTML元素,让页面有一些动态的效果,增强用户的体验

发展史(了解就行)

image

ECMAScript

客户端脚本语言的标准

基本语法:

与html结合方式
  1. 内部JS:定义<script>,标签体内容就是js代码

  2. 外部JS:定义<script>,通过src属性引入外部的js文件

  3. 注意:

    1. <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序**
    2. <script>可以定义多个。
注释
  1. 单行注释://注释内容
  2. 多行注释:/*注释内容*/
数据类型:
原始数据类型(基本数据类型):
  1. number:数字。整数/小数/小数/NaN
  2. string:字符串。字符串 "abc" "a" 'abc'
  3. boolean:true和false
  4. null:一个对象为空的占位符
  5. undefined:未定义。如果应该变量没有给初始化值,则会被默认赋值为undefined
引用数据类型:

对象

变量
  • 变量:一小块存储数据的内存空间

  • Java是强类型语言,而JavaScript是弱类型语言

    • 强类型语言:在开辟变量存储空间时,定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
    • 弱类型:在开辟变量存储空间时,不定义空间将来的存储数据类型,可以存放任意类型的数据。
  • 语法:

    • var 变量名=初始化值;

    • typeof运算符:获取变量的类型。

  • 注:null运算后得到的是object

运算符
一元运算符:
  • 只有一个运算数的运算符
    ++,--,+(正号)-(负号)
    • +(-):正负号
    • ++ --:自增(自减)
    • ++(--)在前,先自增(自减),再运算
    • ++(--)在后,先运算,再自增(自减)
  • 注意:在JS中,如果运算数不是运算符所要求的类型,那么js引擎会自动将运算数进行类型转换
  • 其他类型转number:
    • string转number:按照字面值转换。如果字面值不是数字,则转为NaN(不是数字的数字)
    • boolean转number:true转为1,false转为0
算术运算符

+ - * / %

赋值运算符

= += -+.......

比较运算符
  • > < >= <= == ===(全等于)

  • 比较方式:
    1. 类型相同:直接比较
    - 字符串:按照字典顺序比较。按位逐一比较,直到得出大小为止
    2. 类型不同:先进行类型转换,再比较
    - ===:全等于。在比较之前,先判断类型,如果类型不一样,则直接返回false

逻辑运算符
  • &&:与(短路)
  • ||:或(短路)
  • !:非
  • 其他类型转boolean:
    1. number:0或NaN为假,其他为真
    2. string:除了空字符串(""),其他都是true
    3. null&undefined:都是false
    4. 对象:所有对象都为true
三元运算符
  • ? :

  • 语法:

    • 表达式?值1:值2
    • 判断表达式的值,如果是true则取值1,如果是false,则取值2
流程控制语句
  1. if....else...

  2. switch:

    • 在 Java中,switch语句可以接受的数据类型:byte int shor char,枚举(1.5),String(1.7)
    • 在JS中,switch语句可以接受任意的原始数据类型
  3. while

  4. do....while

  5. for

特殊语法
//1.语句以;结尾,如果一行只有一条语句,则;可以省略(不建议)
var a=3
alert(a)
/*
* 2.变量的定义使用var关键字,也可以不使用
* 用:定义的变量是局部变量
* 不用:定义的变量是全局变量(不建议)
*/
s=2;
alert(a)
练习,九九乘法表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>99乘法表</title>
<style type="text/css">
td{
border: 1px solid;
}
</style>
<script type="text/javascript">
document.write("<table align='center'>");
//完成基本的for循环嵌套,展示乘法表
for(var i=1;i<=9;i++){
document.write("<tr>");
for(var j=1;j<=i;j++){
document.write("<td>");
document.write(i+" * "+j+" = "+(i*j)+"&nbsp;&nbsp;&nbsp;");
document.write("</td>");
}
document.write("</tr>");
}
//完成表格的嵌套
document.write("</table>");
</script>
</head>
<body>
</body>
</html>

基本对象

  • Function:函数(方法)对象

    1. 创建:

      var fun=new Function(形式参数列表,方法体);//不推荐
      //掌握
      function 方法名称(形式参数列表){
      //方法体
      }
    2. 方法

    3. 属性:

      length:代表形参的个数

    4. 特点

      1. 方法定义时,形参的类型不用写,返回值类型也不写

      2. 方法是一个对象,如果定义名称相同的方法,会覆盖

      3. 在JavaScript中,方法的调用只与方法的名称有关,和参数列表无关

      4. 在方法声明中有一个隐藏的内置对象(数组),argument,封装所有的实际参数

        //求任意个数的和
        function add(){
        var sum=0;
        for(var i=0;i<arguments.length;i++){
        sum+=arguments[i];
        }
        return sum;
        }
        var sum=add(1,2,3);
        alert(sum);
    5. 调用

      方法名称(实际参数列表);

  • Array:数组对象

    1. 创建:

      var arr=new Array(元素列表);
      var arr=new Array(默认长度);
      var arr=[元素列表];
    2. 方法:

      //常用方法
      join(参数):将数组中的元素按照指定的分隔符拼接为字符串
      push(): 向数组的末尾添加一个或者更多元素,并返回新的长度
      • 注:所有方法

        image

    3. 属性:

      length:数组的长度

    4. 特点:

      1. JavaScript中,数组元素的类型可变的
      2. JavaScript中,数组的长度是可变的
  • Boolean:包装类

  • Data:日期对象

    1. 创建

      var Date=new Date();
    2. 方法:

      toLocaleString():返回当前date对象对应的时间本地字符串格式
      getTime():获取毫秒值.返回当前日期对象描述的时间到1970110点的毫秒值
  • Math:数学对象

    1. 创建:

      //Math对象不用创建,直接使用。
      Math.方法名();
    2. 方法:

      random():返回[0,1)之间的随机数。
      ceil(x):对数进行向上取整
      floor(x):对数进行向下取整
      round(x):把数四舍五入为最接近的整数
    3. 练习:取1~100之间的随机整数

      步骤

      1. Math.random()产生随机数,范围[0,1)的小数

      2. 乘以100--->[0,100)小数

      3. 舍弃小数部分:floor-->[0,99]整数

      4. +1--->[1,100]整数

      代码:

      var num=Math.floor((Math.random()*100))+1;
      document.write(num);
  • Number

  • String

  • RegExp:正则表达式对象

    1. 正则表达式:定义字符串的组成规则

      1. 匹配单个字符:[]

        如:[a],[ab],[a-zA-Z0-9_]

      2. 特殊符号代表特殊含义的单个字符:

        • \d:单个数字字符[0-9]
        • \w:单个单词字符[a-zA-Z0-9_]
    2. 量词符号:

      • ?:表示出现0次或者1次

      • *:表示出现0次或者多次

      • +:出现一次或者多次

      • {m,n}:表示m<=数量<=n

        • m如果缺省:{,n}:最多n次
        • n如果缺省:{m,}:最少m次
      • 开始结束规则:

        • 开始:^
        • 结束:$

        例子:

        //匹配长度为6-12位的单词字符
        ^\w{6-12}$
    3. 在线正则表达式测试网站:在线正则表达式测试 (oschina.net)

    4. 正则对象:

      1. 创建

        var reg=new RegExp("正则表达式");
        var reg=/正则表达式/;
        eg:
        var reg=new RegExp("^\\w{6-12}$");//这里\要转义一下,用\转义,所以是\\
        var reg=/^\w{6-12}$/;
      2. 方法:

        test(参数):验证指定的字符串是否符合正则定义的规范
  • Global

    1. 特点:全局对象,这个Global中封装的方法不需要对象就可以直接调用。

      方法名();
    2. 方法:

      encodeURI():url编码
      decodeURI():url解码
      encodeURIComponent():url编码,编码的字符更多
      decodeURIComponent():url解码
      parseInt():将字符串转为数字(逐一判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为number)
      isNaN():判断一个值是否是NaN(NaN参与的==比较全部为false)
      eval():计算JavaScript字符串,并把它作为脚本代码来执行

BOM

概念

Browser Object Model 浏览器对象模型

  • 将浏览器的各个组成部分封装成对象

组成

  • Windows:窗口对象

  • Navigator:浏览器对象

  • Screen:显示器对象

  • History:历史记录对象

  • Location:地址栏对象

image

Winodow:窗口对象

创建
方法
  1. 与弹出框有关的方法:

    • alert() 显示带有一段消息和一个确认按钮的警告框

    • confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框

      • 如果用户点击确定按钮,则方法返回true
      • 如果用户点击取消按钮,则方法返回false
    • prompt() 显示可提示用户输入的对话框

      • 返回值:获取用户输入的值
  2. 与打开关闭有关的方法

    • close() //关闭浏览器窗口----谁调用我,我关谁
    • open() //打开一个新的浏览器窗口------返回新的Window对象
    //示例
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Windows对象</title>
    </head>
    <body>
    <input type="button" name="" id="openBtn" value="打开窗口">
    <input type="button" name="" id="closeBtn" value="关闭窗口">
    <script type="text/javascript">
    //打开新窗口
    var openBtn=document.getElementById("openBtn");
    var newWindow;
    openBtn.onclick=function(){
    newWindow=open("https://www.bilibili.com");
    }
    //关闭新窗口
    var closeBtn=document.getElementById("closeBtn");
    closeBtn.onclick=function(){
    newWindow.close("https://www.bilibili.com");
    }
    </script>
    </body>
    </html>
  3. 与定时器有关的方法

    • setTimeout() 在指定的毫秒数后调用函数或计算表达式

      • 参数:
        1. js代码或者方法对象
        2. 毫秒值
      • 返回值:唯一标识,用于取消定时器
    • clearTimeout() 取消由setTimeout()方法设置的timeout

    • setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式

    • clearInterval() 取消由setInterval()设置的timeout

    //示例
    //一次性定时器
    var id=setTimeout(fun,3000);
    function fun(){
    alert('boom~~');
    }
    //取消定时器
    clearTimeout(id);
    //循环定时器
    var id01=setInterval(fun,2000);
    //取消定时器
    clearInterval(id01);
  4. 案例:轮播图

    分析:

    1. 在页面上使用img标签展示图片
    2. 定义一个方法,修改图片对象的src属性
    3. 定义一个定时器,每隔3秒调用方法一次
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    </head>
    <body>
    <img src="img/banner_1.jpg" alt="" width="100%" id="img">
    <script type="text/javascript">
    //修改图片属性
    var number=1;
    function fun() {
    number++;
    //判断number是否大于3
    if (number>3) {
    number=1;
    }
    var img=document.getElementById("img");
    img.src="img/banner_"+number+".jpg";
    }
    //2.定义定时器
    setInterval(fun,3000);
    </script>
    </body>
    </html>
属性
  1. 获取其他BOM对象:

    history

    location

    Navigator

    Screen

  2. 获取DOM对象

    document

特点
  • Window对象不需要创建可以直接使用Window使用。Window.方法名();

  • Window引用可以省略。 方法名();

Location:地址栏对象

创建(获取)
  1. window.location
  2. location
方法

reload()---重新加载当前文档

属性

href---设置或返回完整的URL

案例
  1. 分析:

    1. 显示页面效果
    2. 倒计时读秒效果实现
      1. 定义一个方法,获取span标签,修改span标签体内容,时间--
      2. 定义一个定时器,1s执行一次该方法
    3. 在方法中判断时间如果<=0,则跳转到首页
  2. 代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自动跳转</title>
    <style type="text/css">
    p{
    text-align: center;
    }
    span{
    color: red;
    }
    </style>
    </head>
    <body>
    <p>
    <span id="time">5</span>秒之后,自动跳转到首页...
    </p>
    <script type="text/javascript">
    //倒计时读秒效果实现
    var second=5;
    var time=document.getElementById("time");
    function showTime(){
    second--;
    if (second<=0) {
    location.href="https://www.bilibili.com"
    }
    time.innerHTML=second+"";
    }
    //设置定时器,1s执行一次该方法
    setInterval(showTime,1000);
    </script>
    </body>
    </html>

History:历史记录对象

创建(获取)
  1. window.history

  2. history

方法
  • back() 加载history列表中的前一个URL
  • forward() 加载history列表中的下一个URL
  • go(参数) 加载history列表中的某个具体页面
    • 参数:
      • 正数:前进几个历史记录
      • 负数:后退几个历史记录
属性

length 返回当前窗口历史列表中的URL数量

DOM

概念

Document Object Model 文档对象模型

  • 将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言进行CRUD的动态操作

    image

W3C DOM标准被分为3个不同的部分:

  • 核心 DOM - 针对任何结构化文档的标准模型
    • Document:文档对象
    • Element:元素对象
    • Attribute:属性对象
    • Text:文本对象
    • Comment:注释对象
    • Node:节点对象,其他5个的父对象
  • XML DOM - 针对 XML 文档的标准模型
  • HTML DOM - 针对 HTML 文档的标准模型

功能

控制html文档的内容

代码

获取页面标签(元素)对象Element

//通过元素的id获取元素对象
document.getElementById("id值");

操作Element对象

  1. 获取属性值
    1. 明确获取的对象是哪一个
    2. 查看api文档,找其中有哪些属性可以设置
  2. 修改标签体内容

事件

  • 功能:

    某些组件被执行了某些操作后,触发某些代码的执行

  • 绑定方法:

    1. 直接在html标签上,指定事件的属性(操作),属性值就是js代码

      事件:onclick------单击事件

    2. 通过js获取元素对象,指定事件属性,设置一个函数

      //实例
      function fun2(){}
      var light=document.getElementById("light");
      light.onclick()=fun2;
  • 案例:电灯开关

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电灯开关</title>
    </head>
    <body>
    <img src="img/off.gif" alt="" id="light">
    <script type="text/javascript">
    /*
    分析:
    1.获取图片对象
    2.绑定单击事件
    3.每次点击切换图片
    规则:
    如果灯是开的 on->off
    如果灯是关的 off->on
    使用标记flag来完成
    */
    //获取图片对象
    var light=document.getElementById("light");
    var flag=false;
    //绑定单击事件
    light.onclick=function(){
    if (flag==false) {
    light.src="img/on.gif";
    flag=true;
    }else{
    light.src="img/off.gif";
    flag=false;
    }
    }
    </script>
    </body>
    </html>

核心DOM模型

Document:文档对象
  1. 创建(获取):在HTML DOM模型中可以使用window对象来获取
    1. window.document
    2. document
  2. 方法
    1. 获取Element对象:
      1. getElementById():根据id属性值获取元素对象。id属性值一般唯一
      2. getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组
      3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
      4. getElementsByName():根据name属性值获取元素对象们。返回值是一个数组
    2. 创建其他DOM对象:
      • createAttribute(name)
      • createComment()
      • createElement()
      • createTextNode()
  3. 属性
Element:元素对象
  1. 获取/创建:通过document来获取和创建

  2. 方法:

    1. removeAttribute():删除属性
    2. setAttribute():设置属性
  3. 示例

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Element对象</title>
    </head>
    <body>
    <a>点我试一试</a>
    <input type="button" id="btn_set" value="设置属性">
    <input type="button" id="btn_remove" value="删除属性">
    <script>
    //获取btn_set元素
    var btn_set = document.getElementById("btn_set");
    btn_set.onclick = function(){
    //1.获取a标签
    var element_a=document.getElementsByTagName("a")[0];
    element_a.setAttribute("href","http://www.baidu.com");
    }
    //获取btn_remove元素
    var btn_remove = document.getElementById("btn_remove");
    btn_remove.onclick = function(){
    //1.获取a标签
    var element_a=document.getElementsByTagName("a")[0];
    element_a.removeAttribute("href");
    }
    </script>
    </body>
    </html>
Node:节点对象,其他5个的父对象
  • 特点:所有dom对象都可以被认为是一个节点

  • 方法:

    • CRUD dom树:
      • appendChild():向节点的子节点列表的结尾添加新的子节点。
      • removeChild():删除(并返回)当前节点的指定子节点
      • replaceChild():用新节点替换一个子节点
  • 属性:

    • parentNode 返回节点的父节点
  • 案例:动态表格

    • 分析:

      1. 添加
        1. 给添加按钮绑定单击事件
        2. 获取文本框内容
        3. 创建tr,td,设置td的文本为文本框的内容
        4. 创建tr
        5. 将td添加到tr中
        6. 获取table,将tr添加到table中
      2. 删除
        1. 确定点击的是哪一个超链接
        2. 怎么删除
    • 代码

      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <title>动态表格</title>
      <style>
      table{
      border: 1px solid;
      margin: auto;
      width: 500px;
      }
      td,th{
      text-align: center;
      border: 1px solid;
      }
      div{
      text-align: center;
      margin: 50px;
      }
      </style>
      </head>
      <body>
      <div>
      <input type="text" id="id" placeholder="请输入编号">
      <input type="text" id="name" placeholder="请输入姓名">
      <input type="text" id="gender" placeholder="请输入性别">
      <input type="button" value="添加" id="btn_add">
      </div>
      <table>
      <caption>学生信息表</caption>
      <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>性别</th>
      <th>操作</th>
      </tr>
      <tr>
      <td>1</td>
      <td>令狐冲</td>
      <td></td>
      <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
      </tr>
      <tr>
      <td>2</td>
      <td>任我行</td>
      <td></td>
      <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
      </tr>
      <tr>
      <td>3</td>
      <td>岳不群</td>
      <td>?</td>
      <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
      </tr>
      </table>
      <script>
      //1.获取按钮
      document.getElementById("btn_add").onclick = function(){
      //2.获取输入框的内容
      var id = document.getElementById("id").value;
      var name = document.getElementById("name").value;
      var gender = document.getElementById("gender").value;
      //3.创建td,赋值td的标签体
      //id的td
      var td_id=document.createElement("td");
      var text_id = document.createTextNode(id);
      td_id.appendChild(text_id);
      //name的td
      var td_name=document.createElement("td");
      var text_name=document.createTextNode(name);
      td_name.appendChild(text_name);
      //gender的td
      var td_gender=document.createElement("td");
      var text_gender= document.createTextNode(gender)
      td_gender.appendChild(text_gender);
      //a标签的td
      var td_a= document.createElement("td");
      var ele_a=document.createElement("a");
      ele_a.setAttribute("href","javascript:void(0);");
      ele_a.setAttribute("onclick","delTr(this);");
      var text_a=document.createTextNode("删除");
      ele_a.appendChild(text_a);
      td_a.appendChild(ele_a);
      //4.创建tr
      var tr = document.createElement("tr");
      //5.添加td到tr中
      tr.appendChild(td_id);
      tr.appendChild(td_name);
      tr.appendChild(td_gender);
      tr.appendChild(td_a);
      //6.获取table
      var table=document.getElementsByTagName("table")[0];
      table.appendChild(tr);
      }
      //删除方法
      function delTr(obj){
      var table=obj.parentNode.parentNode.parentNode;
      var tr = obj.parentNode.parentNode;
      table.removeChild(tr);
      }
      </script>
      </body>
      </html>

HTML DOM

  • 标签体的设置和获取:innerHTML

    例:上例innerHTML添加

    //使用innerHTML添加
    document.getElementById("btn_add").onclick=function(){
    //2.获取输入框的内容
    var id = document.getElementById("id").value;
    var name = document.getElementById("name").value;
    var gender = document.getElementById("gender").value;
    //获取table
    var table=document.getElementsByTagName("table")[0];
    //追加一行
    table.innerHTML+="<tr>\n"+
    "<td>"+id+"</td>\n"+
    "<td>"+id+"</td>\n"+
    "<td>"+id+"</td>\n"+
    "<td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\">删除</a></td>\n"+
    "</tr>";
    }
  • 使用html元素对象的属性

    例:

    //修改样式方式1
    div1.style.border = "1px solid red";
    div1.style.width = "200px";
    //font-size--> fontSize
    div1.style.fontSize = "20px";
  • 控制样式

    1. 使用元素的style属性来设置样式
    2. 提前定义好类选择器的样式,通过元素的className属性来设置class属性值

事件监听机制

概念:

某些组件被执行了某些操作后,触发某些代码的执行

  • 事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了
  • 事件源:组件。如: 按钮 文本输入框...
  • 监听器:代码。
  • 注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码。
常见的事件
  1. 点击事件:
    1. onclick:单击事件
    2. ondblclick:双击事件
  2. 焦点事件
    1. onblur:失去焦点
    2. onfocus:元素获得焦点。
  3. 加载事件:
    • onload:一张页面或一幅图像完成加载。
  4. 鼠标事件:
    1. onmousedown 鼠标按钮被按下。
    2. onmouseup 鼠标按键被松开。
    3. onmousemove 鼠标被移动。
    4. onmouseover 鼠标移到某元素之上。
    5. onmouseout 鼠标从某元素移开。
  5. 键盘事件:
    1. onkeydown 某个键盘按键被按下。
      2. onkeyup 某个键盘按键被松开
      3. onkeypress 某个键盘按键被按下并松开。
  6. 选择和改变
    1. onchange 域的内容被改变。
    2. onselect 文本被选中。
  7. 表单事件:
    1. onsubmit 确认按钮被点击。
    2. onreset 重置按钮被点击。

本文作者:灰之魔女伊蕾娜

本文链接:https://www.cnblogs.com/daohengdao/p/15922804.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   灰之魔女伊蕾娜  阅读(50)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
展开