HTML

常规

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

1
<font>内容体</font>

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

块标签

1
<span></span>

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

1
<div></div>

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

表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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事件一起用
表单属性

选择框标签

1
< select></ select>

定义一个选择框

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

1
<option>< option> 

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

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

1
2
3
4
5
<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文件
1
<link/>

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

格式:

1
<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代码
格式:

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

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

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

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

示例1:

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

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

1
2
3
<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中,因为不存在编译过程,所以没有类的概念,所处理的引用数据类型都是对象

标准创建方式:

1
2
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

1
2
3
4
5
6
7
8
9
<script>
//直接量方式:眼睛里揉不得沙子
//必须全部字符符合正则,返回true
//有一个字符不符合正则,就会返回false
var reg = /^\s*$/; //0~多个空格

var flag = reg.test(" a ");
alert(flag);
</script>
1
2
3
4
5
6
7
8
9
<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数组的常用属性/方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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)函数

1
2
3
4
5
6
7
8
9
<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
1
2
3
4
5
6
7
8
9
10
11
<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,一个数字类型的标识,表示不是一个正确的数字
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>

自定义函数

函数格式

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

函数使用的注意事项

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

自定义对象

function构造函数

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

  • 无形参格式:
1
2
3
function 对象名(){
函数体
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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对象,这种方式称为“对象直接量”

格式:

1
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(调用方法,毫秒值)
//毫秒值:循环周期

示例:

1
2
3
4
5
6
function run1(){
alert(“我是run1”);
}

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

效果:(每隔一秒就会弹出一次对话框)

1
2
3
4
5
6
7
8
9
10
11
<script>
var id;
// 需要两秒后执行一次run1方法
function run1(){
alert("run1");
// 执行一次run1方法,清除对应的定时器
clearInterval(id);
}

id = setInterval("run1()",2000);
</script>

启动一次性定时器setTimeout()

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

格式:

setTimeout(调用方法,毫秒值)

示例:

1
2
3
4
5
function run1(){
alert(“我是run1”);
}
//执行下句后,会设置一个定时器,定时器执行一次。
setTimeout ("run10", 1000);
1
2
3
4
5
6
7
8
9
10
11
12
<script>
var id;
function run1(){
alert("run1");
}

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

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

location对象

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

常用属性:

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

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

1
2
// 设置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属性获取符合要求的所有元素
           可以获取到元素节点对象数组;如果找不到,返回空数组

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
36
37
38
39
40
<!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>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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属性值。

1
2
3
4
5
6
7
8
9
10
11
<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=属性值  设置元素对象的属性值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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
修改单选/复选的选中与否

1
2
3
4
5
6
7
8
9
10
11
<body>
<input type="checkbox" id="hobby" />
<script>
//false
var c = document.getElementById("hobby");
alert(c.checked);

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

innerHTML

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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事件驱动机制:

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

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

1
2
3
4
5
6
7
8
9
<body>
<!--
事件源:按钮
事件:点击事件 onclick
监听器:run1()方法
注册监听器:onclick = "run1()"
-->
<input type="button" value="点我啊" onclick="run1()" />
</body>

点击事件(onclick)

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

1
2
3
4
5
6
7
8
9
	<script>
function run1(){
alert("弹出");
}
</script>
</head>
<body>
<input type="button" value="点我弹出对话框" onclick="run1()" />
</body>

焦点事件(onfocus/onblur)

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

  1. 获取焦点
1
2
3
4
5
<script>
function run1(){
alert("获取焦点了");
}
</script>
1
<input type="text" onfocus="run1()"/>
  1. 失去焦点
1
2
3
4
5
<script>
function run1(){
alert("失去焦点了");
}
</script>
1
<input type="text" onblur="run1()"/>

域内容改变事件(onchange)

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

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

加载完毕事件(onload)

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

示例:

1
2
3
4
5
<script>
function run1(){
alert("弹出")
}
</script>
1
2
<body onload="run1()">
</body>

表单提交事件(onsubmit)

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

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

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

示例:

1
2
3
4
5
6
<script type="text/javascript">
function run1(){
alert("表单的提交按钮被点击了");
return true;
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
<!--
表单提交按钮被点击-------执行run1

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

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

键位弹起事件(onkeyup)

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

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

鼠标移入/移出事件(onmouseover/onmouseout)

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

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

JS事件的两种绑定方式

元素事件句柄绑定

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

示例:

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
function run1(){
alert("无参函数");
}
function run2(){
alert(str);
}
function run3(){
alert(obj.value);
}
</script>
1
2
3
4
5
6
7
8
9
10
<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的属性方式绑定事件
示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
function run1(){
alert("加载完毕");
}
//以下两种DOM绑定方式,用哪种都可以

//DOM绑定方式 对象.事件属性 一次只能绑定一个函数,不能传递参数
window.onload=run1;
//DOM绑定方式 匿名函数 可以绑定多个函数,可以传递参数
window.onload=function(){
run1();
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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代码完全分离
  缺点: ①不能传递参数。       解决:匿名函数是可以的
       ②一个事件只能绑定一个函数  解决:匿名函数内部是可以绑定多个函数