【笔记】Java Web的部分知识点回顾

最新推荐文章于 2024-08-14 09:51:48 发布
最新推荐文章于 2024-08-14 09:51:48 发布
阅读量176 收藏
点赞数
分类专栏： 笔记 Java ee 文章标签： js css html javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47211461/article/details/108877583
版权

目录

HTML

常规

HTML的拓展名为html和htm，htm是老的命名规范。
HTML文件直接由浏览器解析执行，无需编译，直接由上而下以此解析执行。

<font>内容体</font>

没有内容体的标签叫空标签，仅由一个标签组成，例如：
自关闭。
HTML标签是有属性的，格式为：属性名=”属性值”属性值用引号引起，引号包含单引号和双引号。

块标签

<span></span>

行级的块标签，有多少内容就会占用多大空间。不会自动换行，使用户少量数据展示。

<div></div>

块级的块标签，默认占满一行，会自动换行，适用于大量数据展示。

表单

<body>
  <!-- 
      表单点击提交按钮，提交数据时。
      ?参数列表
      参数列表格式：
          参数1=参数值1&参数2=参数值2&参数3=参数值3
      
      on表示选中
      ?sex=on

      单选框，用户只能选择，不能输入，指定value属性。否则提交的都是on
      文本框，用户可以自由输入。不一定指定value属性。
  -->
  <form>
    用户名：<input type="text" name="username" /><br>
    密码：<input type="password" name="password" value="123456"><br>
    性别：<input type="radio" name="sex" value="man">男
          <input type="radio" name="sex" value="woman">女
    <br>
    <input type="submit" />
  </form>
</body>

<input/>标签
表单输入项标签之一，用户在该标签上通过填写和选择进行数据的输入。类似于java的Scanner类。
type：设置该标签的种类
text：文本框，默认
password：密码框，内容为非明文
radio：单选框，在同一组内有单选效果
checkbox：复选框，在同一组内有复选效果
submit：提交按钮，用户控制表单提交数据
reset：重置按钮，用于将表单输入项恢复到默认状态
file：附件框，用于文件上传
hidden：隐藏域，一般用作提交服务器需要拿到，但用户不需要看到的数据，如id
button：普通按钮，需要和js事件一起用
表单属性

选择框标签

< select></ select>

定义一个选择框

name:设置该标签对应的参数名
multiple:设置该标签选项全部显示,并且可以进行多选提交。默认为单选。

<option>< option>

选项标签，用于为一个选择框添加一个选项
value:设置需要提交的参数值。
selected:设置选项的默认选中状态

注意事项：
Option的内容体一般是用来进行展示
参数值应该是 option的value属性值

    <select name="aihao" id="1" >
        <option value="游泳">游泳</option>
        <option value="下棋">下棋</option>
        <option value="魔术">魔术</option>
    </select>

文本域和文本框的区别
  ①文本框不能换行，文本域可以
  ②文本框参数值是value属性，文本域参数值是标签的内容体

from的两个属性：

  • action:将数据提交到何处
       默认提交到本页。
       本机内网路径:
          相对路径
          绝对路径
       互联网路径
          http://www.baidu.com/xxx
  • method:将数据以何种方式提交
       默认为:get
       提交方式可定义:get或者post
       
       Get提交方式特点:把数据拼接到地址栏上
       Post提交方式特点：没有把提交数据拼接到地址栏上，请求体

Get和post提交方式区别:
① get提交的参数列表拼接到了地址栏后面
  post方式不会拼接地址栏

② get方式提交的数据敏感信息不安全
  Post方式提交的数据相对安全

③ get方式提交的数据量有限的
  Post方式从理论上提交的数据量无限大

URL编码的表现形式&本质
  ①你好，进行普通的编码,编码成字节数组【使用的是页面规定的字符集,例如utf-8】
  ②字节数组中的每一个元素,都会从10进制，转为16进制3把已经转为16进制的字节数组，以%进行拼接拼接出的字符串,就是URL编码后的结果

例如:你好,用UTF8编码，编码的字节数组为:
  [-28,-67,-96,-27,-91,-67]

URL编码后:
  %E4BD%%A5%BD

CSS

css(Cascading Style Sheets):层叠样式表
层叠:一层一层叠加
样式表:存储样式的地方,多个样式

设置边框的样式
格式:宽度样式颜色
例如: border:1 px solid red ，1像素粗的实线红色边框。
线条样式: solid实线,none无边, double双线

width：用于设置标签的宽度
height：用于设置标签的高度

float

通常默认的排版方式,将页面中的元素从上到下一一罗列，而实际开发中，需要左右方式进行排版，就需要使用浮动属性

格式:
选择器{float:属性值;}
常用属性值:
  none:元素不浮动(默认值)
  left:元素向左浮动
  right:元素向右浮动

注意:因为元素设置浮动属性后，会脱离原有文档流(会脱离原有的板式)，从而会影响其他元素的样式，所以设置浮动以后，页面样式需要重新调整

转换

display属性可以使得元素在行内元素和块元素之间相互转换。

  格式:
  选择器{display:属性值}
  常用的属性值:
    block:此元素将显为块元素(块元素默认的display属性值)
    inline:此元素将显示为行内元素(行内元素默认的 display属性值)
    none:此元素将被隐藏,不显示,也不占用页面空间。

内外边距（盒子模型）

内外边距

外部链接CSS文件

<link/>

又称为链入式，是将所有的样式放在一个或多个以css为扩展名的外部样式表文件中，通过link标签将样式连接到HML文档中

格式:

<link rel=”stylesheet" type=”text/css” href=”css文件路径"/>

rel=”stylesheet” , 固定值,表示样式表
type=”text/css" , 固定值,表示css类型
href , 表示css文件位置

JavaScript

JavaScript是WEB上强大的脚本语言。

脚本语言: 无法独立执行。必须嵌入到其他语言中,结合使用。直接被浏览器解析执行。

Java编程语言: 独立写程序,独立运行。编译–执行作用:控制页面特效展示。

例如:
  JS可以对HTML元素进行动态控制
  JS可以对表单项进行校验
  JS可以控制CSS的样式

注意：

  • JavaScript没有访问系统文件的权限（安全）
  • 由于JavaScript无需编译，是由上到下依次解释执行，所以在保证可读性的情况下，允许使用链式编程
  • JavaScript和java没有任何直接关系

JavaScript的组成

JavaScript的组成

  • ECMAScript(核心)：规定了S的语法和基本对象
  • DOM文档对象模型：处理网页内容的方法和接口
    标记型文档。HTML
  • BOM浏览器对象模型：与浏览器交互的方法和接口

JavaScript书写规范

在当前页面内部写 script标签，script内部即可书写 JavaScript代码
格式:

 <script type="text/javascript"> 
	JavaScript的代码
 </script>

注: script标签理论上可以书写在HTML文件的任意位置

外部引入：
在HTML文档中,通过<script src="">标签引入js文件
格式:

<script type=”text/javascript”src=”javascript文件路径”></script>

示例1:

<script type="text/javascript" src="demo.js"></script>

注：外部引用时 script标签内不能有 script代码，即使写了也不会执行
示例2：

<script type="text/javascript" src="demo. js">
	//这部分代码不会被执行,因为被引入的demo.js代码覆盖 
</script>

script标签的放置位置：
开发规范规定，script标签的放置位置为：Body结束标签前。

变量

变量：标示内存中的一块空间，用于存储数据，且数据是可变的。
变量的声明：
var 变量名; 变量赋子默认值,默认值为 undefined(未定义的)

变量的声明和赋值：
var 变量名=值; 变量赋予对应的值

在声明 JavaScript变量时，需要遵循以下命名规范:

  • 必须以字母或下划线开头，中间可以是数字、字符或下划线
  • 变量名不能包含空格等符号
  • 不能使用JavaScript关键字作为变量名，如：function
  • JavaScript严格区分大小写

数据类型

类似于java中的基本数据类型

  • string   字符串类型。””和’’都是字符串。 JavaScript中没有单个字符
  • Boolean   布尔类型。固定值为true和 false
  • number  数字类型。任意数字
  • null    空,一个占位符。
  • undefined 未定义类型,该类型只有一个固定值，即undefined，表示变量声明却未定义具体的值。

注：因为 undefined是从null中派生出来的，所以 undefined==null

JavaScript区别于java，是弱类型语言，变量的使用不用严格遵循规范，所以一个变量声明好之后，是可以赋予任意类型的值。

通过 typeof运算符可以分辨变量值属于哪种基本数据类型。
对变重或值调用 typeof运算符将返回下列值之一：

  • undefined - 如果变量是 Undefined类型的
  • Boolean - 如果变量是 Boolean类型的
  • number - 如果变量是Number类型的
  • string - 如果变量是String类型的
  • object - 如果变量是一种引用类型或Null类型的

引用数据类型

引用类型通常叫做类(class)，但在 JavaScript中，因为不存在编译过程,所以没有类的概念，所处理的引用数据类型都是对象

标准创建方式：

var str= new String();		    //和java相同
var str= new String;			//js独有的方式

比较运算符

与java基本类似，唯一不同，多了全等符：===

==  逻辑等。仅仅对比值
===  全等。对比值并且对比类型
   如果值和类型都相同，则为true；值和类型有一个不同，则为false

逻辑运算符

运算符描述例子
&&and(x<10&&y>1)为true
||or(x==5||y==5)为false
！not!(x==y)为true

注：JavaScript逻辑运算符没有&和|

RegExp对象

RegExp对象的创建方式

  • var reg=new RegExp(“表达式");  (开发中基本不用)
  • var reg=/^表达式S/  直接量(开发中常用)
    直接量中存在边界，^即代表开始，$代表结束
    直接量方式的正则是对象，不是字符串，别用引号

test方法

正则对象.test(string);  用来校验字符是否匹配正则。
全部字符匹配返回true；有字符不匹配返回 false

  <script>
    //直接量方式：眼睛里揉不得沙子
    //必须全部字符符合正则，返回true
    //有一个字符不符合正则，就会返回false
    var reg = /^\s*$/;  //0~多个空格

    var flag = reg.test("   a   ");
    alert(flag);
  </script>

  <script>
    // 普通方式
    // 普通方式。除非全部字符不符合正则，返回false
    // 只要有一个字符符合正则就返回true
    var reg = /\s+/;  //1~多个空格

    var flag = reg.test("aaa");
    alert(flag);
  </script>

正则对象使用注意事项

/^表达式$/ 只要有无法成立正则的字符存在，即为 false
      全部符合为true
      (检查严格,眼睛不揉沙子)
      适用于表单校验

/表达式/ 只要有成立正则的字符存在，即为true
     全部不符合为 false
     (检查不严格,懒人思想)
     适用于字符串查找、替换

JS数组对象

JS数组的特性

js数组可以看做Java中的 ArrayList集合。

  • 数组中的每一个成员没有类型限制，及可以存放任意类型
  • 数组的长度可以自动修改

JS数组的四种创建方式

  1. var arr=[1,2,3,”a”,true]; 常用的JS数组。长度5
  2. var arr new Array(); 创建一个数组对象,数组长度默认为0
  3. var arr= new Array(4); 数组长度是4，相当于开辟了长度为4的空间，每个元素是 undefined(仅在显示数组时进行处理，undefined为了方便显示变成了空字符串形式，其值本质仍然是 undefined)
  4. var arr= new Array(1,2); 数组元素是1，2

JS数组的常用属性/方法

JS数组的常用属性/方法

  <script>
    // join(string) 可以将数组每个元素根据分隔符进行拼接，最后返回一个字符串
    // var arr = ['a','b','c','d'];
    // var result = arr.join("+");
    // alert(result);
    // alert(arr.length);//4

    // reverse()     可以将数组进行物理翻转
    // 该方法的返回值    就是翻转成功的新数组
    // 会对当前的数组进行操作，翻转操作
    var arr = ['a','b','c','d'];
    var arr2 = arr.reverse();
    alert(arr2);
    alert(arr);
  </script>

  <script>
    // pop()      删除并且返回数组的最后一个元素

    var arr = ['a','b','c','d'];
    alert(arr.length);
    var temp = arr.pop();
    alert(temp);
    alert(arr.length);

    // push(需要追加的元素)     向数组的末尾追加一个或者多个元素，返回数组的新长度

    var arr = ['a','b','c','d'];
    // 追加一个元素
    var len = arr.push('e');
    alert(len);
    alert(arr);

    // 追加多个元素
    var len = arr.push('e','f','g');
    alert(len);
    alert(arr);
  </script>

eval(String)函数

  <script>
    // eval(string)      可以把传入的字符串，作为JavaScript代码
    // 可以扩展程序功能
    // 注意事项：只能传递基本数据类型的字符串，而不能传入字符串对象
    var x = 10;
    eval("var x = 10;");
    eval(new String("var x = 10;"));
    alert(x);
  </script>

作用：用于增强程序的扩展性
注：只可以传递原始数据类型string，传递String对象无作用

编码和解码

URL编码：中文及特殊符号 %16进制
作用：保证数据传递的完整性

代码解释
encodeURI()把字符串编码为URI
decodeURI()解码某个编码的URI
  <script>
    //javascript
    //encodeURI(string)     就会对字符串进行URI编码，返回值就是编码后的结果
    var msg = "http://www.rainying.com/index.html?username=张三&password=123"
    // alert(msg);
    var temp = encodeURI(msg);
    // alert(temp);

    // decodeURI(string)    就会对字符串进行URI解码，返回值就是解码后的结果
    alert(decodeURI(temp));
  </script>

URI和URL的区别
URI是统一资源标识符。 标识资源详细名称
URL是统一资源定位器。 定位资源的网络位置

资源:可以通过浏览器访问的信息统统称为资源(图片、文本、HTML、CS等等….)

URI标识资源的详细名称，包含资源名。

URL定位资源的网络位置，包含 URLhttp://

例如:

http://www.rainying.com/     是URL

/a.html             是URl

http: //www.rainying.com/a.html  即是URL，也是URI

字符串转数字

代码解释
parselnt()解析个字符串并返回一个整数
parseFloat()解析一个字符串并返回一个浮点数

parselnt(string);string按照字面值转换为整数类型,小数点后面部分不关注。

parseFloat(string);string按照字面值转换为小数类型。

注:

  • 如果字符串的某个字符从字面值上无法转为数字，那么从该字符开始停止转换,仅返回前面正确的转换值。(例如：11.5a55，parseInt结果11，parseFloat结果11.5)
  • 如果字符串的第一个字符就无法从字面值上转为数字,那么停止转换,返回NaN( Not A Number，一个数字类型的标识，表示不是一个正确的数字
  <script>
    var str = "10.55";
    var str = "10.55a";
    var str = "10.5a5";
    var str = "1a0.55";
    var str = "a10.55";
    // NaN    (Not A Number)    不是一个数字
    // 是一个数字类型的标识，专门标识当前的值  不是数字
    var num1 = parseInt(str);
    var num2 = parseFloat(str);

    alert(typeof(num1)+":"+num1);
    alert(typeof(num2)+":"+num2);
  </script>

自定义函数

函数格式

function 方法名(参数列表){
		函数体
}
  • JavaScript函数定义必须用小写的 function；
  • JavaScript函数无需定义返回值类型,直接在 function后面书写方法名；
  • 参数的定义无需使用yar关键字,否则报错；
  • JavaScript函数体中，return可以不写，也可以return具体值,或者仅仅写return;

函数使用的注意事项

  JavaScript函数调用执行完毕一定有返回值，值及类型根据return决定，如果未 return具体值，返回值为 undefined
  JavaScript函数若同名，则不存在方法重载，只有方法相互覆盖，最后定义的函数覆盖之前的定义;
  因为JavaScript不存在函数重载，所以JavaScript仅根据方法名来调用函数，即使实参与函数的形参不匹配，也不会影响正常调用。
  如果形参未赋值，就是用默认值undefined。

自定义对象

function构造函数

我们知道，JavaScript中的引用数据类型都是对象，而对象在 JavaScript中可以用函数来表示。
相当于java中创建某个 class类

  • 无形参格式:
function 对象名(){
	函数体
}

  <script>
    // 定义/声明了一个Person对象
    // 定义对象的属性
    // name     age
    // this   ————> 当前的Person对象
    function Person(){
      this.name = "小张"；
      this.age = "18";
    }

    // 创建了一个Person对象，p
    var p = new Person();
    alert(p.name);
    alert(p.age);
  </script>

  <script>
    // 为属性赋值
    // 1、构造参数赋值
    // 2、创建对象后，调用属性进行赋值
    function Person(n,a){
      this.name = n;
      this.age = a;
    }

    // 创建了一个Person对象，p
    var p = new Person("小王","20");
    alert(p.name);
    alert(p.age);
    p.name = "小李";
    alert(p.name);
  </script>

  <script>
    // 属性定义方式
    // 1、this关键字，在对象声明定义阶段，定义一个属性
    // 2、创建对象后，使用  对象.属性  方式动态定义属性
    function Person(n,a){
      this.name = n;
      this.age = a;
    }

    //创建了一个Person对象，p
    var p = new Person("小王","20");
    p.sex = "男";   //为Person对象  声明并赋值成功
    alert(p.sex);
  </script>

对象直接量

开发中可以用一种简单的方式直接创建自定义的JavaScript对象，这种方式称为“对象直接量”

格式：

var 对象名={属性名1:”属性值1”, 属性名2:”属性值2”, 属性名3:”属性值3”……};

注:该方式直接创建出实例对象，无需构建函数，无需再new创建实例对象直接使用即可

BOM对象

BOM对象简述

BOM(Browser Object Model)浏览器对象模型
浏览器：IE、火狐、谷歌等
作用：用来执行浏览器的相关操作。(例如:浏览器的地址、弹出消息等)

一般情况下， window代表了BOM对象。
window对象是 JavaScript的内置对象，使用 window对象调用方法时可以省略 window不写。

消息框

  1. alert()
    警告框：用来弹出警告消息。

  示例：

alert(“你好”);

  注：不同浏览器显示的组件样式不同，无需关注。

  1. confirm()
     确认框，用于告知用户信息并收集用户的选择
     示例1：

confirm(“确定 或者 取消”);

   效果：
示例1

   该方法有返回值，用户通过选择“确定”或者“取消”，方法结束会返回boolean类型的值。

循环定时器的设置和取消

启动循环定时器- setInterval()

循环定时器，调用一次就会创建并循环执行一个定时器。

格式：

setInterval(调用方法,毫秒值)
//毫秒值：循环周期

示例：

function run1(){
	alert(“我是run1”);
}

//执行下句后,每隔1秒就会调用一次run1方法 
setInterval (“run1()”,1000);

效果：（每隔一秒就会弹出一次对话框）

  <script>
    var id;
    // 需要两秒后执行一次run1方法
    function run1(){
      alert("run1");
      // 执行一次run1方法，清除对应的定时器
      clearInterval(id);
    }

    id = setInterval("run1()",2000);
  </script>
启动一次性定时器setTimeout()

一次性定时器,调用一次就会创建并执行一个定时器一次。

格式：

setTimeout(调用方法,毫秒值)

示例：

function run1(){
	alert(“我是run1”);
}
//执行下句后,会设置一个定时器,定时器执行一次。 
setTimeout ("run10", 1000);

  <script>
    var id;
    function run1(){
      alert("run1");
    }

    // 希望两秒执行一次run1方法
    var id = setInterval("run1()",2000);

    // 取消一次性定时器
    clearInterval(id);
  </script>

location对象

location对象包含浏览器 地址栏 的信息。

常用属性：

属性解释
href设置或返回完整的URL

设置href属性，浏览器就会跳转到对应的路径

	// 设置URL地址
	location.href = "demo.html";

DOM对象

DOM对象的简述

DOM (Document Object Model)文档对象模型
文档：标记型文档(HTML等)

DOM是将标记型文档中所有内容(标签、文本、属性)都封装成对象,
通过操作对象的属性或者方法，来达到操作或者改变HTML展示效果的目的。

DOM树

DOM树

其中:

  • 每个标签会被加载成DOM树上的一个元素节点对象。
  • 每个标签的属性会被加载成DOM树上的一个属性节点对象
  • 每个标签的内容体会被加载成DOM树上的一个文本节点对象
  • 整个DOM树，是一个文档节点对象,即DOM对象。
  • 一个HTML文档加载到内存中就会形成一个DOM对像

DOM树的特点:

  • 必定会有一个根节点
  • 每个节点都是节点对象
  • 常见的节点关系：父子节点关系
  • 文本节点对象没有子节点—叶子节点
  • 每个节点都有一个父节点，零到多个子节点
  • 只有根节点没有父节点

获取元素对象的四种方式

在 Java Script中，我们可以通过DOM对象的4种方式获取对应的元素对象：

  • getElementByld：  通过元素ID获取对应元素对象
           可以通过ID获取对应的元素对象，如果找不到，返回null

  • getElementsByName：  通过元素的name属性获取符合要求的所有元素

  • getElementsByTagName:   通过元素的元素名属性获取符合要求的所有元素

  • getElementsByClassName：  通过元素的class属性获取符合要求的所有元素
           可以获取到元素节点对象数组；如果找不到，返回空数组

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <input type="text" id="t1" />

  <input type="checkbox" name="hobby" value="read" />
  <input type="checkbox" name="hobby" value="code" />
  <input type="checkbox" name="hobby" value="run" />

  <ul>
    <li>javaee</li>
    <li>android</li>
    <li>ios</li>
    <li>php</li>
  </ul>

  <script>
    var t1 = document.getElementById("t1");
    alert(t1);
    alert(document.getElementById("t2"));

    // 通过name属性，获取所有需要的元素
    // 返回是一个元素节点对象   数组
    var arr = document.getElementsByName("hobby");
    alert(arr.length);

    // 通过标签名，获取所有需要的元素
    var arr = document.getElementsByTagName("li");
    alert(arr.length);

    // 通过class属性值，获取所有需要的元素
    var arr = document.getElementsByClassName("h1");
    alert(arr.length);
  </script>
</body>
</html>

注：获取某个/某些元素节点对象，必须保证元素节点对象被先加载到内存中：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script>
    //文本框  元素节点对象还没有被加载
    // var t1 = document.getElementById("t1");
    // alert(t1);
  </script>
</head>
<body>
  <input type="text" id="t1" />
  <script>
    var t1 = document.getElementById("t1");
    alert(t1);
  </script>
</body>
</html>

元素对象常见属性

value

元素对象.value  获取元素对象的 value属性值
元素对象.value=属性值  设置元素对象的 value属性值。

<body>
  <input type="text" id="t1" value="你好" />
  <script>
    //需要把t1元素value属性值，拿出来
    var t1 = document.getElementById("t1");
    alert(t1.value);

    //需要修改value属性值     你好么
    t1.value = "你好么";
  </script>
</body>
className

元素对象.className  获取元素对象的 class属性值。
元素对象.className=属性值  设置元素对象的属性值。

<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    .ys1{
      color: red;
    }
    .ys2{
      color: blue;
    }
  </style>
</head>
<body>
  <span id="s1" class="ys1">今天天气好晴朗</span>
  <script>
    //需要把s1元素的value属性值，拿出来
    var s1 = document.getElementById("s1");
    alert(s1.className);

    s1.className = "ys2";
  </script>
</body>
checked

元素对象.checked  获取元素对象的 checked属性值。
元素对象.checked=属性值  设置元素对象的 checked属性值。

注：HTML中 checked="checked”，JavaScript中返回 true false
修改单选/复选的选中与否

<body>
  <input type="checkbox" id="hobby" />
  <script>
    //false
    var c = document.getElementById("hobby");
    alert(c.checked);

    //想让复选框默认选中
    c.checked = true;
  </script>
</body>
innerHTML

元素对象.innerHTML  获取元素对象的内容体
元素对象.innerHTML=值   设置元素对象的内容体

<body>
  <span id="s1">今天天气好晴朗</span>
  <script>
    //想要获取span的标签的内容体
    var s1 = document.getElementById("s1");
    alert(s1.innerHTML);

    //设置span便签的内容体    今天好像要下雪
    s1.innerHTML="今天好像要下雪";

    //向span标签    追加内容体信息    ，今天0度
    s1.innerHTML += "，今天0度"
  </script>
</body>

JS事件

JS事件驱动机制简述

页面上的特效，我们可以理解在JS事件驱动机制下进行。
JS事件驱动机制：

  • 事件源
  • 事件
  • 监听器
  • 注册/绑定监听器

事件源：专门产生事件的组件
事件：由事件源所产生的动作或者事情。
监听器：专门处理事件源所产生的事件。
注册/绑定监听器：让监听器时刻监听事件源是否有指定事件产生，如果事件源产生指定事件，则调用监听器处理。

<body>
  <!--
      事件源：按钮
      事件：点击事件    onclick
      监听器：run1()方法
      注册监听器：onclick = "run1()" 
  -->
  <input type="button" value="点我啊" onclick="run1()" />
</body>

点击事件（onclick）

点击事件：由鼠标或热键点击元素组件时触发
示例：

	<script>
		function run1(){
			alert("弹出");
		}
	</script>
</head>
<body>
	<input type="button" value="点我弹出对话框" onclick="run1()" />
</body>

焦点事件（onfocus/onblur）

焦点事件：由鼠标的焦点的有无触发
示例：

  1. 获取焦点
<script>
	function run1(){
		alert("获取焦点了");
		}
</script>

<input type="text" onfocus="run1()"/>
  1. 失去焦点
<script>
	function run1(){
		alert("失去焦点了");
		}
</script>

<input type="text" onblur="run1()"/>

域内容改变事件（onchange）

域内容改变事件：元素组件的值发生改变时触发
示例：

<select onchange="run1()">
	<option value="bj">北京</option>
	<option value="sh">上海</option>
	<option value="gz">广州</option>
</select>

加载完毕事件（onload）

加载完毕事件：元素组件加载完毕时触发。
获取元素对象，保证元素对象先加载，建议是把获取元素对象放在最后

示例：

	<script>
		function run1(){
			alert("弹出")
		}
	</script>

<body onload="run1()">
</body>

表单提交事件(onsubmit)

表单提交事件：表单的提交按钮被点击时触发

注意：该事件需要返回 boolean类型的值来执行 提交/阻止 表单数据的操作。

  • 事件得到true，提交表单数据
  • 事件得到 false，阻止表单数据提交

示例:

  <script type="text/javascript">
    function run1(){
      alert("表单的提交按钮被点击了");
      return true;
    }
  </script>

<body>
  <!-- 
      表单提交按钮被点击-------执行run1

      onsubmit  用于表单的校验
      该事件也能够控制表单的提交

      true    允许表单提交
      false   阻止表单提交
  -->
  <form onsubmit="return run1()">
    <input type="text" name="uname" /></br>
    <input type="submit" value="提交" />
  </form>
</body>

键位弹起事件（onkeyup）

键位弹起事件：在组件中输入某些内容时，键盘键位弹起时触发该事件
示例：

<input type="text" onkeyup="run1()"/>

鼠标移入/移出事件（onmouseover/onmouseout）

鼠标移入事件：鼠标移入/移出某个元素组件时触发
示例：

  1. 鼠标移入文本框
<input type="text" onmouseover="run1()" />
  1. 鼠标移出文本框
<input type="text" onmouseout="run1()" />

JS事件的两种绑定方式

元素事件句柄绑定

将事件以元素属性的方式写到标签内部，进而绑定对应函数。

示例：

  <script type="text/javascript">
    function run1(){
      alert("无参函数");
    }
    function run2(){
      alert(str);
    }
    function run3(){
      alert(obj.value);
    }
  </script>

<body>
  <!-- 绑定一个无参函数 -->
  <input type="text" value="1111" onclick="run1()" /></br>
  <!-- 绑定一个有参函数，参数就是一个字符串 -->
  <input type="text" value="2222" onclick="run2('传入字符串')" /></br>
  <!-- 绑定一个有参函数，参数是一个元素对象 -->
  <input type="text" value="3333" onclick="run3(this)" /></br>
  <!-- 绑定多个函数 -->
  <input type="text" value="4444" onclick="run1(),run2('传入字符串'),run3(this)" /></br>
</body>

事件句柄绑定方式
  优点： ①开发快捷
      ②传参方便
      ③可以绑定多个函数
  缺点： JS和HTML代码高度糅合在一起，不利于多部门的项目开发维护

DOM绑定方式

使用DOM的属性方式绑定事件
示例：

<script>
	function run1(){
		alert("加载完毕");
	}
	//以下两种DOM绑定方式，用哪种都可以
	
	//DOM绑定方式	对象.事件属性	一次只能绑定一个函数，不能传递参数
	window.onload=run1;
	//DOM绑定方式	匿名函数		可以绑定多个函数，可以传递参数
	window.onload=function(){
		run1();
	};
</script>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript">
    function run1(obj){
      alert(t1.value);
    }
    //待窗口全部加载完后，方可用getElementById找到控件
    //进而对控件进行设置点击事件
    window.onload = function(){
      var t1 = document.getElementById("t1");
      t1.onclick = function(t1){
        run1(t1);
      }
    }
  </script>
</head>
<body>
  <input type="text" id="t1" value="1111" />
</body>
</html>

DOM绑定方式
  优点： 使得HTML代码和JS代码完全分离
  缺点： ①不能传递参数。       解决:匿名函数是可以的
      ②一个事件只能绑定一个函数  解决:匿名函数内部是可以绑定多个函数

不二D荧林仕
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java web部分知识
ivolcano的博客
03-02 313
1.get和post的区别？ get方法用于获取由Request-URI所标识的资源的信息，常见形式是：GET Request-URI HTTP/1.1 GET/test/LoginServlet?username=hello&password=world HTTP/1.1 post方法用于向服务器发送请求，要求服务器接受附在请求后面的数据。post方法在表单提交的时候用的最多。 POST
如何实现网页左边点击网页右边出现表单_实现点击左边菜单，然后右边弹出网页内容...
weixin_39593523的博客
01-14 391
www.lanrentuku.combody{font-size:12px;}ul,li,h2{margin:0;padding:0;}ul{list-style:none;}#top{width:900px;height:40px;margin:0 auto;background-color:#CCCC00}#top h2{width:150px;height:40px;background-c...
JavaWeb(重点)学习笔记（精华版）
清峰的博客
09-17 1920
JavaWeb学习笔记 一、Servlet介绍 概念： Servlet是运行在Java服务器端的程序，用于接收和响应来自客户端基于HTTP协议的请求。 实现： 如果想要实现Servlet的功能，可以通过实现Servlet接口或者继承他的实现类。 核心方法： service()，任何客户端的请求都会经过该方法。 二、.请求对象 1.请求对象常用的方法 返回值 方法名 说明 String getContexPath() 获取虚拟目录名称 String getServletPath()
【javaweb】左边选择右边展现的tld
junjun56的专栏
06-17 1321
在做web的时候，有时候可能要用到选择器，一般是在权限什么的，如图 为了做出这种效果，我们首先需要一个tld，tld的格式什么的就不解释了，一搜一大把，我们直接上代码 tld selectTag com.cniia.ny.web.util.SelectTag empty arl false tru
Java基础知识点总结归纳，超级全面！（2021版）
热门推荐
Java笔记
05-03 9万+
凯哥今天看了网上好多关于Java基础知识点汇总的博客，but，感觉都不尽如人意，要么不全面，要么不准确，要么排版太乱了！ 所以今天花了一天时间整理了一份Java基础知识点总结归纳，超级全面！希望对大家有帮助哈~ 由于本文篇幅过长，博主为了方便大家阅读和收藏，特意将本文转成了一份PDF版的文档。 需要PDF版的朋友可以关注微信公众号：Java团长，发送“基础知识”即可获取哈~ 一、Java概述 1、何为编程 编程就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程..
Spring知识点笔记
FX_xxxxxxx
01-11 198
博主是跟着视频来学习的Spring框架，用这篇文章来记录一下所学习的知识点，以便以后回顾，也是梳理一下知识。 1. 启动Spring容器 获取对象 ApplicationContext context = new ClassPathXmlApplicationContext("applicationContext.xml"); context.getBean("BeanID");...
Javaopp面向对象部分核心知识梳理
2303_77543831的博客
02-21 915
此文章为Javaopp面向对象部分核心知识点梳理，不包括代码演示部分，如果需要代码演示来更好的了解面向对象，可回顾Javaopp面向对象01至04构造方法名字与类名相同，且没有返回值，且不需要void修饰static修饰后的成员，随着类的加载而加载先于对象而存在static修饰的成员变量在内存中只有一份，适合将所有实例都相同的属性设计为静态（中国人类 国籍都是人类）静态的成员可以使用类名/对象名调用，一般建议使用类名访问static修饰方法静态方法只能访问静态的变量，不能访问非静态的变量。
狂神说java java基础篇 学习笔记
weixin_45975667的博客
03-29 1685
狂神说java java基础篇学习笔记，包括了狂神基础视频的所有内容
Mybatis知识点讲解 【笔记】
小何同学~
07-31 874
mybatis 狂神说笔记
Javaweb-html
JQ210245253的博客
11-05 1156
1. html: 超文本标签语言     html:作用:展示 2.超文本:超越了一般文本,描述文本的字体 颜色 图片   标签:也叫标记(人家定义好的东西，除了普通文本，    用&lt;&gt;包起来的那  个东西就叫标签。 3. html书写规则:     3.1. 文件的后缀名  .html(建议) 或者 .htm     3.2. 标签必须用 &lt;&gt; 引起来 已经定...
css实现水滴效果图
yinge0508的博客
08-12 1050
【代码】css实现水滴效果图。
前端JS/CSS静态资源公共库免费CDN加速汇总
最新发布
Soujer的博客
08-14 148
晓杰开发前端经常用到的静态资源，特意收集了一些免费的静态资源公共库给服务器减少压力！加速网站加载速度！
css实现磨砂效果（filter 与 backdrop-filter 的对比分析）
Zing_ing的博客
08-10 465
在 CSS 中实现磨砂效果（类似于 iOS 的磨砂玻璃效果）通常结合使用 backdrop-filter 属性和半透明的背景色。</</</
css写一个按钮流光动画效果
weixin_45132984的博客
08-10 528
【代码】css写一个按钮流光动画效果。
【vue】scss引用图片写法
weixin_47351913的博客
08-12 329
在SCSS（Sass）中，获取图片的方式与普通的CSS非常相似，但SCSS提供了更多的灵活性，比如变量和混合等内容。这里的 'images/example.jpg' 是一个相对路径，它从当前SCSS文件所在目录开始查找 images 文件夹下的 example.jpg 文件。如果你使用的是 Sass 的某个版本，可能需要借助于一些工具函数来处理路径。Sass 提供了一些内置函数，可以帮助处理路径问题。你可以在SCSS中定义变量来存储路径，这样可以更容易地维护和更改路径。5. 使用Sass的内置函数。
CSS 伪类和伪元素
weixin_44152104的博客
08-12 1046
伪类是选择器的一种，它用于选择处于特定状态的元素。比如当它们是这一类型的第一个元素时（:first-child），或者是当鼠标指针悬浮在元素上面的时候（:hover）。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。伪类是以开头为冒号的关键字：:first-child。
CSS 基础
jht_520的博客
08-10 316
比如，增加内边距可以使元素内部的内容与边框之间有更多的空间，而调整外边距可以控制元素与周围元素的距离。通过使用媒体查询，我们可以针对不同的屏幕宽度设置不同的 CSS 规则。例如，在小屏幕设备上，可以隐藏一些不必要的元素，或者改变导航栏的样式，以提供更好的用户体验。它可以决定网页中文字的字体、大小、颜色，还能设置元素的背景颜色、边框样式等。比如，通过 CSS 我们可以将网页的标题设置为醒目的大字号、独特的字体和鲜艳的颜色，使其更加吸引用户的注意力。CSS，即层叠样式表，是网页设计中不可或缺的一部分。
对于::after为元素的样式调整
fury的博客
08-13 429
【代码】对于::after为元素的样式调整。
Sass/Scss基础
若末lan的博客
08-07 317
是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。Sass 生成良好格式化的 CSS 代码，易于组织和维护。定义变量用@），Sass 变量可以存储的类型有。Sass 完全兼容所有版本的 CSS。Sass 扩展了 CSS3，增加了。一款css预处理语言，
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值