JavaScript基础语法入门与JS事件、Bom对象和Dom对象_javascript 字面量对象 dom对象

JavaScript基础语法

主要内容

JavaScript

简介

​ JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。它的主要目的是，验证发往服务器端的数据、增加 Web 互动、加强用户体验度等。

JavaScript 的组成

​ ECMAScript定义的只是这门语言的基础，与Web浏览器没有依赖关系，而在基础语法上可以构建更完善的脚本语言。JavaScript的运行需要一定的环境，脱离了环境JavaScript代码是不能运行的，JavaScript只能够寄生在某个具体的环境中才能够工作。JavaScript运行环境一般都由宿主环境和执行期环境共同构成，其中宿主环境是由外壳程序生成的，如Web浏览器就是一个外壳程序，它提供了 一个可控制浏览器窗口的宿主环境。执行期环境则由嵌入到外壳程序中的JavaScript引擎（或称为JavaScript解释器）生成，在这个环境中 JavaScript能够生成内置静态对象，初始化执行环境等。

​ Web浏览器自定义的DOM组件，以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。DOM对象，是我们用传统的方法(javascript)获得的对象。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

​ 前面的DOM是为了操作浏览器中的文档，而为了控制浏览器的行为和操作，浏览器还提供了BOM（浏览器对象模型）。

​ ECMAScript(基础语法)

​ JavaScript的核心语法ECMAScript描述了该语言的语法和基本对象

​ DOM(文档对象模型)

​ 文档对象模型（DOM）—— 描述了处理网页内容的方法和接口

​ BOM(浏览器对象模型)

​ 浏览器对象模型（BOM）—— 描述了与浏览器进行交互的方法和接口

开发工具

1. 浏览器：Chrome

2. 开发工具：Hbuilder X

3. 进入浏览器控制台 Console：F12

   控制台的作用:

   ​ console对象代表浏览器的JavaScript控制台，用来运行JavaScript命令，常常用来显示网页运行时候的错误信息。Elements用来调试网页的html和css代码。

基本用法

​ JS需要和HTML一起使用才有效果，我们可以通过直接或间接的方式将JS代码嵌入在HTML页面中。

​ 行内JS : 写在标签内部的js代码

​ 内部JS : 定义在script标签内部的js代码

​ 外部JS : 单独的js文件，在HTML中通过script标签引入

​ 我们可以将JavaScript代码放在html文件中任何位置，但是我们一般放在网页的head或者body部分。由于页面的加载方式是从上往下依次加载的，而这个对我们放置的js代码运行是有影响的。

​ 放在部分，最常用的方式是在页面中head部分放置

​ 放在部分，JavaScript代码在网页读取到该语句的时候就会执行。

行内 JS：

<button onclick="alert('you clicked hered!!!')">click here</button>
1

内部 JS：

<script type="text/javascript" charset="utf-8">
	alert('this is inner js code')
</script>
1
2
3

外部 JS 文件：

hello.js

alert('this is a outter js document');
1

hello.html

<!-- 在需要使用js的html页面中引入 -->
<script src="js/hello.js" type="text/javascript" charset="utf-8"></script>
1
2

JavaScript基础语法

语句和注释

​ JavaScript程序的执行单位为行（line），也就是一行一行地执行。一般情况下，每一行就是一个语句。

​ 语句（statement）是为了完成某种任务而进行的操作，语句以分号结尾，一个分号即表示一个语句结束。多个语句可以写在一行内（不建议这么写代码），但是一行写多条语句时，语句必须以分号结尾。

​ 表达式不需要分号结尾。一旦在表达式后面添加分号，则JavaScript引擎就将表达式视为语句，这样会产生一些没有任何意义的语句。

单行注释：用//起头；
多行注释：放在/* 和 */之间。
兼容html注释方式：<!-- -->
1
2
3

标识符和关键字

​ 标识符就是一个名字，用来给变量和函数进行命名，有特定规则和规范

​ 规则：

由Unicode字母、_、$、数字组成、中文组成
（1）不能以数字开头
（2）不能是关键字和保留字
（3）严格区分大小写
1
2
3
4

​ 规范：

（1）见名知意
（2）驼峰命名或下划线规则
1
2

​ 关键字也称保留字，是被JavaScript征用来有特殊含义的单词

arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield、Infinity、NaN、undefined
1

变量

​ 变量即一个带名字的用来存储数据的内存空间，数据可以存储到变量中，也可以从变量中取出数据。

变量的声明

​ JavaScript是一种弱类型语言，在声明变量时不需要指明数据类型，直接用var修饰符进行声明。

​ 变量声明和赋值：

// 先声明再赋值
var a ;    
a = 10;
// 声明同时赋值
var b = 20;
1
2
3
4
5

变量的注意点

（1）若只声明而没有赋值，则该变量的值为undefined。

var box;
console.log(box);
1
2

（2）变量要有定义才能使用，若变量未声明就使用，JavaScript会报错，告诉你变量未定义。

console.log(box2);
1

（3）可以在同一条var命令中声明多个变量。

var a, b, c = 10;
console.log(a,b,c);
1
2

（4）若使用var重新声明一个已经存在的变量，是无效的。

var box = 10
var box;
1
2

（5）若使用var重新声明一个已经存在的变量且赋值，则会覆盖掉前面的值

var box = 10;
var box = 25;
1
2

（6）JavaScript是一种动态类型、弱类型语言，也就是说，变量的类型没有限制，可以赋予各种类型的值。

var box = 'hello world';
box = 10;
1
2

变量提升

​ JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升。

console.log(msg);
var msg = "so easy";

// 变量提升，相当于下面的代码
var msg;
console.log(msg);
msg = "so easy";

// 说明： 最后的结果是显示undefined，表示变量msg已声明，但还未赋值。
1
2
3
4
5
6
7
8
9

​ 注意：变量提升只对 var 命令声明的变量有效，如果变量不是用 var 命令声明的，就不会发生变量提升。

console.log(msg);
msg = "error";
1
2

数据类型

​ 虽说JS是弱类型语言，变量没有类型，但数据本身是有类型的。针对不同的类型，我们可以进行不同的操作。

​ JavaScript 中有6 种数据类型，其中有五种简单的数据类型：Undefined、Null、布尔、数值和字符串。一种复杂数据类型Object。

数  值（Number）： 整数和小数（比如 1 和 3.14）
字符串（String）： 字符组成的文本（比如"Hello World"）
布尔值（Boolean）：true（真）和 false（假）两个特定值
Undefined：       表示“未定义”或不存在，即此处目前没有任何值
Null：            表示空缺，即此处应该有一个值，但目前为空
对象（object）(引用) ： 各种值组成的集合
    1)、对象（object）{name:”zhangsan”,age:”18”}
    2)、数组（array）[1,2,3]
    3)、函数（function）function test() {}
1
2
3
4
5
6
7
8
9

undefined

​ undefined类型的值是undefined。

​ undefined 是一个表示"无"的原始值，表示值不存在。

​ 出现undefined的常见情况：

​ （1）当声明了一个变量而没有初始化时，这个变量的值就是undefined

var box;
console.log(box); //undefined
1
2

​ （2）调用函数时，该函数有形参，但未提供实参，则该参数为undefined。

function noData(str) { // js函数形参只需要变量名即可
	console.log(str); // undefined
}
noData(); // 调用方法时，未传递参数
1
2
3
4

​ （3）函数没有返回值时，默认返回 undefined。

// 方法没有返回值
function noData() { 
	console.log("Hello"); 
}
var re = noData();// 定义变量接收无返回值的方法
console.log(re);
1
2
3
4
5
6

null

​ null类型是只有一个值的数据类型，即特殊的值null。它表示空值，即该处的值现在为空，它表示一个空对象引用。

​ 使用Null类型值时注意以下几点：

​ 1）使用typeof操作符测试null返回object字符串。

​ 2）undefined派生自null，所以等值比较返回值是true。未初始化的变量和赋值为null的变量相等。

console.log(undefined == null);
var box = null; // 赋值为null的变量
var a; // 未初始化的变量
console.log(a == box);	// 两个的值相等	
1
2
3
4

布尔类型

​ 布尔类型有两个值：true、false。常用来做判断和循环的条件

数值型

​ 数值型包含两种数值：整型和浮点型。

​ 1）所有数字（整型和浮点型）都是以 64 位浮点数形式储存。所以，JS中1 与 1.0 相等，而且 1 加上 1.0 得到的还是一个整数。浮点数最高精度是17位小数，由于浮点数运算时可能不精确，尽量不要使用浮点数做判断。

​ 2）在存储数值型数据时自动将可以转换为整型的浮点数值转为整型。

console.log(1 == 1.0); // true
console.log(1 + 1.0); // 2
var num = 8.0; // 自动将可以转换为整型的浮点数转为整型
console.log(num); // 8
1
2
3
4

字符串

​ 使用 ’ ’ 或 " "引起来，如：‘hello’，“good”。

​ 使用加号 ‘+’ 进行字符串的拼接，如：console.log(‘hello’ + ’ everybody’);

对象

​ 对象是一组数据和功能的集合。

​ 说明：

​ {}：表示使用对象字面量方式定义的对象。空的大括号表示定义包含默认属性和方法的对象。

类型转换

自动类型转换

函数转换（String to Number）

​ JS 提供了 **parseInt()**和 **parseFloat()**两个全局转换函数。前者把值转换成整数，后者把值转换成浮点数。只有对 String 类型调用这些方法，这两个函数才能正确运行；对其他类型返回的都是 NaN(Not a Number)。

parseInt()

​ 在转换之前，首先会分析该字符串，判断位置为0处的字符，判断它是否是个有效数字，如果不是，则直接返回NaN，不再继续，如果是则继续，直到找到非字符

 parseInt("1234blue"); // returns 1234
 parseInt("22.5"); // returns 22
 parseInt("blue"); // returns NaN
1
2
3

parseFloat()

​ 该方法与 parseInt() 方法的处理方式相似，从位置 0 开始查看每个字符，直到找到第一个非有效的字符为止，然后把该字 符之前的字符串转换成数字。不过，对于这个方法来说，第一个出现的小数点是有效字符。如果有两个小数点，第二个小数点将被看作无效的，parseFloat()方法会把这个小数点之前的字符串转换成数字。

parseFloat("1234blue"); // returns 1234.0
parseFloat("22.5"); // returns 22.5
parseFloat("22.34.5"); // returns 22.34
parseFloat("blue"); //returns NaN
1
2
3
4

显示转换

​ 几乎每个数对象都提供了toString()函数将内容转换为字符串形式，其中Number提供的toString()函数可以将数字转换为字符串。

​ Number还提供了**toFixed()**函数将根据小数点后指定位数将数字转为字符串，四舍五入

// 将内容转换为字符串形式
var data = 10
console.log(data.toString())

// 根据小数点后指定位数将数字转为字符串，四舍五入
data = 1.4;
console.log(data.toFixed(0));
data = 1.49;
console.log(data.toFixed(1));

			
// 不能对null和undefined使用
data = null
console.log(data.toString())
data = undefined
console.log(data.toString())
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

​ JS 为 Number、Boolean、String 对象提供了构造方法，用于强制转换其他类型的数据。此时操作的是整个数据，而不是部分。

Number(false)        	0
Number(true)         	1
Number(undefined)  		NaN
Number(null)         	0
Number( "5.5 ")     	5.5
Number( "56 ")      	56
Number( "5.6.7 ")   	NaN
Number(new Object())	NaN
Number(100)         	100

Boolean(""); 			// false – empty string
Boolean("hi"); 			// true – non-empty string
Boolean(100); 			// true – non-zero number
Boolean(null); 			// false - null
Boolean(0); 			// false - zero
Boolean(new Object()); 	// true – object

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

​ 最后一种强制类型转换方法 String() 是最简单的，因为它可把任何值转换成字符串。要执行这种强制类型转换，只需要调用作为参数传递进来的值的 toString() 方法，即把 1 转换成"1 "，把 true转换成 "true "，把 false 转换成 "false "，依此类推。强制转换成字符串和调用 toString() 方法的唯一不同之处在于，对 null 或 undefined 值强制类型转换可以生成字符串而不引发错误：

var s1 = String(null); // "null"
var oNull = null;
var s2 = oNull.toString(); // won’t work, causes anerror
1
2
3

​ 最为简单的一种转换为字符串的方式，直接在任意数据后面 + “” 即可。

运算符

​ 运算符用于执行程序代码运算，会针对一个及其以上操作数来进行运算。

算数运算符

赋值和扩展运算符

比较运算符

逻辑运算符

三目运算符

控制语句

​ 我们写的 JavaScript 代码都是按照从上到下依次执行，很多时候我们希望代码按照我们的意愿去执行，比如有选择性地执行某些代码，或者重复地执行某些代码，这就需要使用到流程控制语句。

​ 流程控制语句一共有三种：

​ 1. 流程执行:从上到下，从左到右

​ 2. 选择执行:分支选择

​ 3. 循环执行:重复执行

选择

单选择

if (条件){
    语句体;
}
1
2
3

​ 首先执行条件

​ 如果结果为true，则执行语句体；

​ 如果结果为false，则结束if语句。

​ 注意：若语句体只有一条语句，可以省略大括号，但不建议省略

双选择

if (条件){
    语句体1;
}else {
    语句体2;
}
1
2
3
4
5

​ 首先执行条件

​ 如果结果为true，则执行语句体1；

​ 如果结果为false，则执行语句体2。

多选择

if(比较表达式1) {
	语句体1;
}else if(比较表达式2){
	语句体2;
}else if(比较表达式3){
	语句体3；
}
	...
[else {
	语句体n+1;
}]
1
2
3
4
5
6
7
8
9
10
11

switch结构

​ 多个 if …else 且值为定值时（即=== 在比较运行结果时，采用的是严格相等运算符（=），而不是相等运算符（），这意味着比较时不会发生类型转换。） ，可以使用 switch 替换：

switch(表达式) {
	case 值1:
		语句体1;
		break;
	case 值2:
		语句体2;
		break;
	...
	default:
		语句体n+1;
		[break;]
}
1
2
3
4
5
6
7
8
9
10
11
12

​ break 防止穿透，如果没有 break,则继续执行后面的代码，直到遇到 break 或全部执行完毕，但是有些时候会利用穿透。

循环

​ 循环结构用于重复执行某个操作 简单理解就是重复执行同类型的代码，它有多种形式。

while

​ 先判断后执行

基本格式
	while(判断条件语句) {
		循环体语句;
	}
			
扩展格式：
	初始化语句;
	while(判断条件语句){
		循环体语句;
		控制条件语句;	//   少了它很容易形成死循环
    }
1
2
3
4
5
6
7
8
9
10
11

do…while

​ 先执行后判断，至少执行一次

基本格式
	do {
		循环体语句;
	}while(判断条件语句);
	
扩展格式：
	初始化语句;
	do {
		循环体语句;
		控制条件语句;
	} while(判断条件语句);
1
2
3
4
5
6
7
8
9
10
11

for

for(初始化语句;判断条件语句;控制条件语句){
	循环体语句;
}
1
2
3

死循环

​ 条件永远成立，永远为 true,则会产生死循环，下面是最简单的死循环

while(true){}
for(;;){}
1
2

break 与 continue

​ break: 停止本层循环

​ continue:暂停本次循环，继续下一次

数组

​ 数组是按次序排列的一组数据，每个值的位置都有编号（从0开始），整个数组用方括号表示。

数组定义

​ JS 中定义数组的三种方式如下（也可先声明再赋值）：

var arr = [值1,值2,值3];  // 隐式创建

var arr = new Array(值1,值2,值3); // 直接实例化

var arr = new Array(size); // 创建数组并指定长度
1
2
3
4
5

基本操作

​ 数组的长度可以通过length属性来获取，并可以任意更改

数组名.length
数组名.length = 新长度 
1
2

​ 数组中的每一个元素都可以被访问和修改，甚至是不存在的元素，无所谓越界

数组名[下标]
数组名[下标] = 新值
1
2

数组遍历

​ 数组的遍历即依次访问数组的每一个元素 ，JS提供三种遍历数组的方式：

普通的for循环遍历

for(var i=0; i<=数组.length-1; i++){
    
}
如：
for(var idx=0;idx<arr.length;idx++){
    console.log(arr[idx]);
}
1
2
3
4
5
6
7

for … in

for(var 下标(名称任意) in 数组名){ 
	数组名[下标]是获取元素
} // 下标(名称任意)
如：
for(var idx in arr){
    console.log(arr[idx]);
}
1
2
3
4
5
6
7

forEach

数组名.forEach(function(element,index){
    // element(名称任意)：元素，index(名称任意)：下标
})    
如：
arr.forEach(function(elem,idx){
    console.log(idx + "-->" + elem);
});
1
2
3
4
5
6
7

了解

数组在使用的时候建议大家规矩来用。在存放数据时，从下标0开始顺序的存放数组元素。
如果下标：
	1.为非负整数(包括整数字符串)：自动从0开始,不存在添加 undefined
	2.为负数、小数、非数字符串：这些内容不计算在长度内，当成"属性"处理，相当于自定义属性。

数组非常灵活，使用数组元素
	1.下标: 非负整数(包括整数字符串)： 
		数组.下标
		数组[下标]
	2.下标：负数、小数、非数字字符串：
    	数组[属性]

* for --> 不遍历属性
* foreach -->不遍历属性和索引中的undefined
* for in -->不遍历索引中的undefined
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

数组提供的操作方法

​ Array对象为我们提供了一些方法，可以很方便地操作数组

push          添加元素到最后 
unshift       添加元素到最前 
pop           删除最后一项 
shift         删除第一项 
reverse       数组翻转 
join          数组转成字符串 
indexOf       数组元素索引 
slice         截取（切片）数组，原数组不发生变化 
splice        剪接数组，原数组变化，可以实现前后删除效果 
concat        数组合并
1
2
3
4
5
6
7
8
9
10

var arr = ['1','a',5,'3'];
console.log(arr);
arr.push(10);
console.log(arr);
arr.unshift('b');
console.log(arr);
arr.pop();
console.log(arr);
arr.shift();
console.log(arr);
arr.reverse();
console.log(arr);
console.log(arr.join('\''));
console.log(arr);
console.log(arr.indexOf('a'));
console.log(arr.slice(2,5));
console.log(arr);
arr.splice(1,1,'一','二');
console.log(arr);
var arr1 = [0,'100'];
console.log(arr.concat(arr1));
console.log(arr);
console.log(arr1);
console.log(arr1.(arr));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

函数

​ 函数，即方法。就是一段预先设置的功能代码块，可以反复调用，根据输入参数的不同，返回不同的值。函数也是对象。

函数的定义

​ 有三种函数定义的方式：函数声明语句、函数定义表达式、Function构造函数

函数声明语句

function 函数名([参数列表]){
    
}
例如：
function foo(){ 
    console.log(1);
} 
foo(); 
1
2
3
4
5
6
7
8

​ 该种方式定义的函数具有声明提升的效果

foo();   
function foo(){ 
        console.log(1);
} 
// 变量声明提升
console.log( a );  
var a = 2;
1
2
3
4
5
6
7

函数定义表达式

​ 以表达式方式定义的函数，函数的名称是可以不需要的

var 变量名 = function ([参数列表]) {
    
}
变量名();
例如：
var fun = function(){
    console.log("Hello");
}
fun();
1
2
3
4
5
6
7
8
9

​ 这种写法将一个匿名函数赋值给变量。这时，这个匿名函数又称函数表达式，因为赋值语句的等号右侧只能放表达式。

Function构造函数

​ Function构造函数接收任意数量的参数，但最后一个参数始终都被看成是函数体，而前面的参数则列举出了新函数的参数。

var add = new Function('x','y','return (x + y)');
// 等同于
function add(x, y) {
    return (x + y);
}
add();
1
2
3
4
5
6

注意：

1. js中的函数没有重载，同名的函数，会被后面的函数覆盖。
2. js中允许有不定数目的参数，后面介绍arguments对象
1
2

函数的参数、调用和return语句

参数

​ 函数运行的时候，有时需要提供外部数据，不同的外部数据会得到不同的结果，这种外部数据就叫参数，定义时的参数称为形参，调用时的参数称为实参

• 实参可以省略，那么对应形参为undefined
• 若函数形参同名（一般不会这么干）：在使用时以最后一个值为准。
• 可以给参数默认值：当参数为特殊值时，可以赋予默认值。
• 参数为值传递，传递副本 ；引用传递时传递地址，操作的是同一个对象。

// 调用函数时，实参可以省略，则对应形参为undefined
function add(a , b) {
	console.log(a + "+" + b + "=" + (a + b));
}
add(3,4,5)//3+4=7
add(1);//1+undefined=NaN
add();//undefined+undefined=NaN

// 若函数形参同名（一般不会这么干）：在使用时以最后一个值为准
function add2(a , a) {
	console.log(a);
}
add2(1,2);

// 给参数默认值
function defaultValue(a){
	a = a || "a";
	return a;
}
console.log(defaultValue());
function f(a){
	//若参数a不为undefined或null，则取本身的值，否则给一个默认值
	(a !== undefined && a !== null) ? a = a : a = 1;
 	return a;
}
console.log(f());

// 值传递
var num = 12;
function change(n) {
	n = 30;
}
change(num);
console.log(num);
// 引用传递
var obj = {name: "tom"};
function paramter(o) {
	o.name = 2;
}
paramter(obj);
console.log(obj.name);
// 给形参o赋予了新的数组
var obj2 = [1, 2, 3];
function paramter2(o){
	o = [2, 3, 4];
	o[1] = 3;
}
paramter2 (obj2);
console.log(obj2)
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
41
42
43
44
45
46
47
48
49

函数的调用

1. 常用调用方式

函数名([实参]);
1

​ 存在返回值可以变量接收，若接收无返回值函数则为undefined。

2. 函数调用模式

function add(a,b){
   return a+b;
} 
var sum = add(1,2) 
console.log(sum); 
1
2
3
4
5

3. 方法调用模式

var o = {
    m: function(){
         console.log(1); 
    } 
};
o.m();  
1
2
3
4
5
6

return

​ 函数的执行可能会有返回值，需要使用return语句将结果返回。return 语句不是必需的，如果没有的话，该函数就不返回任何值，或者说返回 undefined。

​ 作用：

​ 1. 在没有返回值的方法中，用来结束方法。

​ 2. 有返回值的方法中，一个是用来结束方法，一个是将值带给调用者。

函数的作用域

​ 函数作用域：全局 (global variable) 和 局部 (local variable)

1. 全局变量与局部变量同名问题

var box =1; // 全局变量
function display(box){
	var box = 3; // 此处box与全局变量box没有关系，这里的box为传递的参数，相当于新声明的局部变量
	var b = 2; // 局部变量
	console.log("box-->" + box);
}
display();
// b 不能访问
console.log("b-->" + b);
1
2
3
4
5
6
7
8
9

2. 在函数中定义变量时，若没有加var关键字，使用之后自动变为全局变量

function fun(){
	a = 100;
}
fun();
alert(a);
1
2
3
4
5

内置对象

Arguments   只在函数内部定义，保存了函数的实参 
Array             数组对象 
Date              日期对象，用来创建和获取日期 
Math             数学对象 
String             字符串对象，提供对字符串的一系列操作
1
2
3
4
5

String

◦ charAt(idx)	   返回指定位置处的字符
◦ indexOf(Chr)	   返回指定子字符串的位置，从左到右。找不到返回-1
◦ substr(m,n)	   返回给定字符串中从m位置开始，取n个字符，如果参数n省略，则意味着取到字符串末尾。
◦ substring(m,n)   返回给定字符串中从m位置开始，到n位置结束，如果参数n省略，则意味着取到字符串末尾。
◦ toLowerCase()	   将字符串中的字符全部转化成小写。
◦ toUpperCase()	   将字符串中的字符全部转化成大写。
◦ length 		   属性，不是方法，返回字符串的长度。
1
2
3
4
5
6
7

Math

◦ Math.random()	   随机数
◦ Math.ceil() 	   向上取整，大于最大整数
◦ Math.floor() 	   向小取整，小于最小整数String 
1
2
3

Date

// 获取日期
◦ getFullYear()	   年
◦ getMonth()	   月
◦ getDate()		   日
◦ getHours()	   时
◦ getMinutes()	   分
◦ getSeconds()	   秒
// 设置日期
◦ setYear()
◦ setMonth()
◦ setDate()
◦ setHours()
◦ setMinutes()
◦ setSeconds()
◦ toLoacaleString()	转换成本地时间字符串
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

说明：

1. getMonth()：得到的值：0_11（1月12月）

2. setMonth()：设置值时0~11

3. toLocaleString()：可根据本地时间把 Date 对象转换为字符串，并返回结果。

对象

​ 对象（object）是 JavaScript 的核心概念，也是最重要的数据类型。JavaScript 的所有数据都可以被视为对象。JavaScript 提供多个内建对象，比如 String、Date、Array 等等。对象是带有属性和方法的特殊数据类型。

​ 简单说，所谓对象，就是一种无序的数据集合，由若干个“键值对”（key-value）构成。通过JavaScript我们可以创建自己的对象。 JavaScript对象满足的这种”键值对”的格式我们称为JSON格式，以后会见得非常多，即伟大的JSON对象。

​ {键:值, 键2:值2,…}

对象的创建

​ JS 创建自定义对象，主要通过三种方式：字面量形式创建对象、通过new Object对象创建 、通过Object对象的create方法创建对象。

字面量形式创建

var 对象名 = {};//创建一个空的对象
var 对象名 = {键:值,键2:值2,...} 

var obj = {
           'name' : 'hello',
           age : 12,
           sayHello : function () {
           		console.log("我是对象中的方法");
           },
    	   courses : {
           		javase : 4,
                javascript : 3
    	   },
       	   isLike : true,
           members : [
                {name : "小红",age : 20},
                {name : "小绿",age : 22},
                {name : "小蓝",age : 27},
                {name : "小黄"}
           ]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

通过new Object创建

var 对象名 = new Object(); // 创建一个空的对象

var obj = new Object();
obj.name = 'zs';
obj.age = 18;
console.log(obj); 
1
2
3
4
5
6

通过Object对象的create方法创建

var 对象名 = Object.create(null); 
var obj = Object.create(null);
obj.name = 'ls';
obj.gender = true
console.log(obj);
		
var objn = Object.create(obj);
objn.age = 18;
console.log(objn);
console.log(objn.gender)
1
2
3
4
5
6
7
8
9
10

对象的序列化和反序列化

​ 序列化即将JS对象序列化为字符串，反序列化即将字符串反序列化为JS对象。JS中通过调用JSON方法，可以将对象序列化成字符串，也可以将字符串反序列化成对象 。

// 序列化对象，将对象转为字符串
JSON.stringify(object);
1
2

// 反序列化，将一个Json字符串转换为对象。
JSON.parse(jsonStr);
1
2

this

​ this是JavaScript语言的一个关键字。

​ 它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。

​ 随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。

在函数中使用this

​ 在函数中使用this属于全局性调用，代表全局对象，通过window对象来访问。

function test () {
	this.x = 1;
	console.log(this.x);
}
test();
console.log(x); // 相当于定义在全局对象上的属性 

var x = 10;
console.log(x)  // 10
function test (){
    console.log(this.x)  // 10
    this.x = 1;
    console.log(this.x) // 1
    console.log(this)
}

test();
console.log(x); // 1
console.log(this);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在对象中使用this

​ 在对象中的函数使用this，代表当前的上级对象。

var obj = {
	name : '张三',
	age : 20,
	sayHello : function () {
		console.log(this.name)
		console.log(this)
	}
}
obj.sayHello(); 
1
2
3
4
5
6
7
8
9

---

---

typora-root-url: images
typora-copy-images-to: images

---

JS事件、Bom对象和Dom对象

主要内容

事件

​ 事件 (Event) 是 JavaScript 应用跳动的心脏 ，进行交互，使网页动起来。当我们与浏览器中 Web 页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。

​ 通过使用 JavaScript ，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应。

作用

（1）验证用户输入的数据。
（2）增加页面的动感效果。
（3）增强用户的体验度
1
2
3

事件中的几个名词

事件源: 谁触发的事件
事件名: 触发了什么事件
事件监听: 谁管这个事情，谁监视？
事件处理:发生了怎么办
1
2
3
4

例如

闯红灯		事件源:车 ;   事件名: 闯红灯;    监听：摄像头、交警 ;     处理:扣分罚款 
单击按钮   事件源:按钮;   事件名: 单击;     监听:窗口 ;             处理:执行函数
1
2

​ 当我们用户在页面中进行的点击动作，鼠标移动的动作，网页页面加载完成的动作等，都可以称之为事件名称，即：click、mousemove、load 等都是事件名称，具体的执行代码处理，响应某个事件的函数。

<body onload="loadWindow();"></body>
<script>
	function loadWindow(){
     	alert("加载窗体");
	}
</script>
1
2
3
4
5
6

事件类型

​ JavaScript可以处理的事件类型为：鼠标事件、键盘事件、HTML事件。

​ http://www.w3school.com.cn/tags/html_ref_eventattributes.asp 用+查

​ Window 事件属性：针对 window 对象触发的事件（应用到 标签）

​ Form 事件：由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元素中）

​ Keyboard 事件 : 键盘事件

​ Mouse 事件：由鼠标或类似用户动作触发的事件

​ Media 事件：由媒介（比如视频、图像和音频）触发的事件（适用于所有 HTML 元素，但常见于媒介元素中，比如 、、、 以及 ）

​ 几个常用的事件：

​ onclick 、onblur 、onfocus 、onload 、onchange

​ onmouseover、onmouseout、onkeyup、onkeydown

onload：当页面或图像加载完后立即触发

onblur：元素失去焦点

onfocus：元素获得焦点

onclick：鼠标点击某个对象

onchange：用户改变域的内容

onmouseover：鼠标移动到某个元素上

onmouseout：鼠标从某个元素上离开

onkeyup：某个键盘的键被松开

onkeydown：某个键盘的键被按下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

事件流和事件模型

​ 我们的事件最后都有一个特定的事件源，暂且将事件源看做是HTML的某个元素，那么当一个HTML元素产生一个事件时，该事件会在元素节点与根节点之间按特定的顺序传播，路径所经过的节点都会受到该事件，这个传播过程称为DOM事件流。

​ 事件顺序有两种类型：**事件捕获 **和 事件冒泡。

​ 冒泡和捕获其实都是事件流的不同表现，这两者的产生是因为IE和Netscape两个大公司完全不同的事件流概念产生的。（事件流：是指页面接受事件的顺序）IE的事件流是事件冒泡，Netscape的事件流是事件捕获流。

事件冒泡

​ IE的事件流叫做事件冒泡，即事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点（文档）。例如下面的：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JavaScript</title>
	</head>
	<body>
		<div id="myDiv">Click me</div>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10

​ 如果点击了页面中的

​ 1、

​ 2、

​ 3、

​ 4、document

​ 也就是说，click事件首先在div元素上发生，而这个元素就是我们单击的元素。然后，click事件沿DOM树向上传播，在每一级节点上都会发生，直到传播到document对象。

​ 所有现代浏览器都支持事件冒泡，但在具体实现上还是有一些差别。

事件捕获

​ Netscape提出的另一种事件流叫做事件捕获，事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。还以前面的例子为例。那么单击

​ 1、document

​ 2、

​ 3、

​ 4、

​ 在事件捕获过程中，document对象首先接收到click事件，然后沿DOM树依次向下，一直传播到事件的实际目标，即

​ 虽然事件捕获是Netscape唯一支持的事件流模式，但很多主流浏览器目前也都支持这种事件流模型。尽管“DOM2级事件”规范要求事件应该从document对象开始时传播，但这些浏览器都是从window对象开始捕获的。

DOM 事件流

​ “DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获阶段，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。

事件处理程序

​ 事件就是用户或浏览器自身执行的某种动作。例如click、load和mouseover都是事件的名字，而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以“on”开头，因此click事件的事件处理程序就是onclick，为事件指定处理程序的方式有好几种。

HTML 事件处理程序

​ 某个元素支持的每种事件，都可以用一个与相应事件处理程序同名的HTML特性来指定。这个特性的值应该是能够执行的JavaScript代码：

<input type="button" value="Press me" onclick="alert('thanks');" />
1

​ 这样做有一些缺点，例如耦合度过高，还可能存在时差问题（当用户点击按钮时，处理函数还未加载到，此时处理函数是单独写的一段js代码），而且在不同的浏览器上可能会有不同的效果。

DOM0 级事件处理程序

​ 通过JavaScript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。这种方式被所有现代浏览器所支持。这种方式首先必须取得一个要操作的对象的引用，每个元素都有自己的事件处理程序属性，这些属性通常全都小写，例如onclick，然后将这种属性的值设为一个函数，就可以指定事件处理程序了。例如：

<body>
    <button id="myBtn">按钮</button>
    <script type="text/javascript">
        var btn = document.getElementById('myBtn');
        btn.onclick = function(){
            console.log('you click a button');
        }
    </script>
</body>
1
2
3
4
5
6
7
8
9

​ 以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。而且，只能为同一个元素的同一个事件设定一个处理程序（覆盖），也可以通过删除DOM0级方法指定的事件处理程序，只要将属性值设为null即可：

btn.onclick = null;
1

DOM2 级事件处理程序

​ “DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点都包含这两个方法，并且他们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，则表示在捕获阶段调用事件处理程序；如果是false则表示在冒泡阶段调用事件处理程序。

<body>
    <button id="myBtn">按钮</button>
    <script type="text/javascript">
        var btn = document.getElementById('myBtn')
        btn.addEventListener('click',function(){
            alert('you add a eventListener by DOM2')
        },false)

        btn.addEventListener('click',function(){
            alert('you add a eventListener by DOM2 again')
        },false)

        function thread(){
            alert('you add a eventListener by DOM2 第三次')
        }
        btn.addEventListener('click',thread,false)
        btn.removeEventListener('click',thread,false)
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

​ 这种方式可以为同一个元素的同一个事件添加多个处理函数。还可删除事件处理函数，注意，在删除的时候，不能删除匿名处理函数。

本节作业

1. 常用的几种事件
2. 绑定事件的几种方式
1
2

BOM对象

​ BOM的核心对象是window，它表示浏览器的一个实例。window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。这意味着在网页中定义的任何一个对象、变量和函数，都以window作为其Global对象，因此有权访问parseInt()等方法。如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。在frames集合中，可以通过数值索引（从0开始，从左至右，从上到下）或者框架的名称来访问相应的window对象。

Window对象方法

系统对话框

​ 浏览器通过（实际是window对象的方法）alert()、confirm()、prompt()方法可以调用系统对话框向用户显示消息。

（1）消息框:alert， 常用。
    alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。
（2）输入框:prompt，返回提示框中的值。
    prompt() 方法用于显示可提示用户进行输入的对话框。
    参数（可选）：
       第一个参数：要在对话框中显示的纯文本。
 	   第二个参数：默认的输入文本。
（3）确认框:confirm，返回 true/false.
confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。
1
2
3
4
5
6
7
8
9

<style type="text/css">
	#aa{
		border: 1px solid red;
		height: 100px;
	}
</style>
<body>
	<div id="aa">
		This is a div
	</div>
	<button onclick="testAlert();">警告</button>
	<button onclick="testComfirm();">修改</button>
	<button onclick="testPrompt();">输入</button>
	<script type="text/javascript">
		// 1.警告框
		function testAlert(){
			alert('警告框！！！');
		}			
	
        /*
		 2.输入框
		 	返回值：输入的内容
		 * */
		function testPrompt(){
			var item = prompt('请输入年龄'); // item得到输入的值
			// console.log(item)
			// alert(prompt('请输入年龄',18)); // 将输入的值输出
		}
        
		/*
		 3.确认框
		 	返回值：boolean（true|false）
		 * */
		function testComfirm(){
			var result = confirm('真的要改吗？');
			if(result){
				var ele = document.getElementById("aa");
				ele.style.color="red";
				ele.innerHTML="<span>fdsfsd</span>";
			}else{
				alert("没事别瞎点。。。");
			}
		}
	</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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

打开窗口

​ window.open()方法既可以导航到一个特定的URL也可以用来打开一个新的窗口

<script type="text/javascript">
function openBaidu(){
	window.open('http://www.baidu.com','_self'); // _self、_blank等
	// window.open();		//空白窗口
}
</script>
<input type="button" name="open" value="百度" onclick='openBaidu();' />
1
2
3
4
5
6
7

关闭窗口

​ window.close()：关闭窗口。

​ 例：点击按钮关闭当前窗口。

<input type="button" value="关闭窗口" onclick="window.close();" />
1

时间函数

setTimeout()

​ setTimeout() : 在指定的毫秒数后调用函数或计算表达式。返回一个唯一的标识；也可以通过返回的标识cliearTimeout(id)： 来清除指定函数的执行。

var id = setTimeout(function,times);
1

clearTimeout(id);
1

示例：

<script type="text/javascript">
	// 延迟3 秒后出现 alert
	function hello() { 
		  alert("对不起, 要你久候"); 
	}
	setTimeout("hello()", 3000);
    
    // 时间显示器
	var timeout;
    function init(){
		   // 拿到当前时间
		   var date = new Date();
		   var time = date.toLocaleString();
		   // 拿到相应对象
	  	   var h1 = document.getElementById('h1');
		   // 根据需求添加样式
		   if(0==date.getSeconds()){	// 当时间的秒数变成0时，显示红色字体
			   h1.innerHTML = '<span style="color:red">' + time + '</span>';
		   } else {
			   h1.innerHTML = time;
		   }
		   /*
		    * 	定时操作，只执行一次
		 	    第一个参数：执行的方法；第二个参数：定时，单位是毫秒
		    * */
		    setTimeout(init,1000);   // 等多少时间来执行
	}
	// window.setTimeout(init,1000);// 只执行一次		
	// 停止操作
	function stopShow () {
        clearTimeout(timeout);
    }
</script>
<body onload="init();">
	<h1 id="h1"></h1>
    <button onclick="stopShow()">时间停止</button>
</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
31
32
33
34
35
36
37

​ 在times毫秒后执行function指定的方法，执行之前也可以取消

setInteval()

​ setInterval():可按照指定的周期（以毫秒计）来调用函数或计算表达式，也可根据返回的标识用来结束。该方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

var id = setInterval(function,times);
1

clearInterval(id);
1

function test(){
	console.log(".....");
}
// window是一个全局对象，通过全局对象调用setInterval()函数
window.setInterval(test,1000);
1
2
3
4
5

history对象

​ history 对象是历史对象。包含用户（在浏览器窗口中）访问过的 URL。history 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

​ history对象的属性：length，返回浏览器历史列表中的 URL 数量。

​ history对象的方法：

​ back()：加载 history 列表中的前一个 URL。

​ forward()：加载历史列表中的下一个 URL。当页面第一次访问时，还没有下一个url。

​ go(number|URL): URL 参数使用的是要访问的 URL。而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。go(-1)，到上一个页面

013-history.html

<body>
	<a href="013-history-a.html">013-history-a.html</a>
	<h1>我是第一个页面</h1>
    <input type="button"  value="前进" onclick="window.history.forward();" />
    <script>
        console.log(window.history);
    </script>
</body>
1
2
3
4
5
6
7
8

013-history-a.html

<body>
	<a href="013-history-b.html">013-history-b.html</a>
	<h1>我是A页面</h1>
	<input type="button" value="后退"  onclick="window.history.back();"/>
</body>
1
2
3
4
5

013-history-b.html

<body>
	  <h1>我是B页面</h1>
	  <input type="button" value="第一个页面" onclick="window.history.go(-2);"/>
	  <input type="button" value="后退"  onclick="window.history.back();"/>
</body>
1
2
3
4
5

location对象

​ location 对象是window对象之一，提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。也可通过 window.location 属性来访问。

​ location 对象的属性 href：设置或返回完整的 URL

​ location 对象的方法

​ reload()：重新加载当前文档。

​ replace()：用新的文档替换当前文档。

<script type="text/javascript">
	function openBaidu(){
        // 没有历史记录,用新的文档替换当前文档
		// window.location.replace("http://www.baidu.com");
		// console.log(window.location.href); // 获取完整的url
		window.location.href = "http://www.baidu.com";
	}
</script>
<body>
	<input type="text"  value="" />
	<input type="button" value="刷新" onclick="window.location.reload();" />
	<input type="button"  value="百度" onclick="openBaidu();" />
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13

DOM对象

​ DOM：Document Object Model 文档对象模型

​ 要实现页面的动态交互效果，bom 操作远远不够，需要操作 html 才是核心。如何操作 htm，就是 DOM。简单的说，dom 提供了用程序动态控制 html 接口。DOM即文档对象模型描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。dom 处于javascript 的核心地位上。

​ 每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

节点

​ 加载 HTML 页面时，Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将这种树型结构理解为由节点组成，组成一个节点树。对于页面中的元素，可以解析成以下几种类型的节点：

​ html --> 文档节点

​ div --> 元素节点

​ title --> 属性节点

​ 测试 Div --> 文本节点

<html>
    <head>
        <title>树!树!到处都是树!</title>
    </head>
    <body>
      <div title="属性节点">测试 Div</div>
    </body>
</html>
1
2
3
4
5
6
7
8

操作元素的节点

​ 当HTML文档在被解析为一颗DOM树以后，里面的每一个节点都可以看做是一个一个的对象，我们称为DOM对象，对于这些对象，我们可以进行各式各样的操作，查找到某一个或者一类节点对象，可以创建某种节点对象，可以在某个位置添加节点对象，甚至可以动态地删除节点对象，这些操作可以使我们的页面看起来有动态的效果，后期结合事件使用，就能让我们的页面在特定时机、特定的事件下执行特定的变换。

获取节点

​ 在进行增、删、改的操作时，都需要指定到一个位置，或者找到一个目标，此时我们就可以通过Document对象提供的方法，查找、定位某个对象（也就是我们说的节点）。

​ 注意：操作 dom 必须等节点初始化完毕后，才能执行。

​ 处理方式两种:

​ （1）把 script 调用标签移到html末尾即可；

​ （2）使用onload事件来处理JS，等待html 加载完毕再加载 onload 事件里的 JS。

window.onload = function () { //预加载 html 后执行};
1

​ 获取方式如下：

<body>
	<p id="p1" class="para">这是一个段落<span>文本</span></p>
	<p id="p1" class="para">这又是一个段落</p>
	<input type="text" name="txt" />
	<input type="checkbox" name="hobby" value="游泳" />游泳
	<input type="checkbox" name="hobby" value="篮球" />篮球
	<input type="checkbox" name="hobby" value="足球" />足球
	<hr />
	<a href="javascript:void(0)" onclick="testById()">按照id获取</a>
	<a href="javascript:void(0)" onclick="testByName()">按照name获取</a>
	<a href="javascript:void(0)" onclick="testByTagName()">按照标签名获取</a>
	<a href="javascript:void(0);" onclick="testByClass();">按照class获取</a>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13

​ 说明：href=“javascript:void(0)”：伪协议，表示不执行跳转，而执行指定的点击事件。

<script type="text/javascript">
	// 按照id获取元素
	function testById() {
		// 返回单个对象
		var p = document.getElementById("p1");
		console.log(p);
		// 表示获取元素开始标签和结束标签之间的html结构
		console.log(p.innerHTML); 			
		console.log(p.innerText); // 表示获取标签之间的普通文本
	}

	// 按照name获取元素
	function testByName() {
		// 对象数组
		var ho = document.getElementsByName("hobby");
		console.log(ho);
		for(var i = 0; i <= ho.length - 1; i++) {
			console.log(ho[i].value);
		}
	}

	// 按照标签名获取元素
	function testByTagName() {
		// 对象数组
		var inputArr = document.getElementsByTagName("input");
		for(var i = 0; i < inputArr.length; i++) {
			if(inputArr[i].type == "text") {
				console.log("text类型");
			} else if(inputArr[i].type == "checkbox") {
				if(inputArr[i].checked) {
					console.log(inputArr[i].value);
				}
			}
		}
	}

	// 按照class属性获取元素
	function testByClass() {
		// 对象数组
		var ps = document.getElementsByClassName("para");
		console.log(ps[0].innerHTML);
		ps[0].innerHTML += "这是一段新的文本";
	}
</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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

创建节点和插入节点

​ 很多时候我们想要在某个位置插入一个新的节点，此时我们首先需要有一个节点存在，可以通过以下几种方式创建新节点。

创建节点

插入节点

<button onclick="add()">添加段落</button>
<div id="container"></div>
		
<script type="text/javascript">
	function add(){
	    var container = document.getElementById('container')
	    var paragraph = document.createElement('p');
	    var txt = document.createTextNode('hello')
	    paragraph.appendChild(txt)
	    container.appendChild(paragraph)
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12

添加 “段落、图片、文本框、选项”

<body>
	<button onclick="addPara();">添加段落</button>
	<button onclick="addImg();">添加图片</button>
	<button onclick="addTxt();">添加文本框</button>
	<button onclick="addOptions()">添加选项</button> 
	<select name="music">
		<option value="-1">你心内的一首歌</option>
		<option value="0">南山南</option>
		<option value="1">喜欢你</option>
	</select>
	<hr />
	<div id = "container"></div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13

<script type="text/javascript">	
	// 添加p节点
	function addPara(){
		// 获取容器
		var container =document.getElementById("container");
		// 创建段落<p></p>
		var p =document.createElement('p');  	
		// 第一种方式
		// 创建文本节点
		var txt=document.createTextNode("以后的你会感谢现在努力的你");
		// 将txt节点追加到p节点中
		p.appendChild(txt);
		// 将p节点追加到container节点中
		container.appendChild(p);		
		/*
		// 第二种方式
		// 向p节点中添加内容
		p.innerHTML = "以后的你会感谢现在努力的你";
		// 将p节点追加到container节点中
		container.appendChild(p);
		*/	
		/*
		// 第三种方式
		// 将字符串类型的p标签内容添加到container中，不会添加多次
		var str = "<p>以后的你会感谢现在努力的你</p>";
		container.innerHTML = str;
		*/
	}	
    
	// 添加图片
	function addImg(){
		// 创建图片
		var img = document.createElement("img") ;			
		/*
		// 设置属性第一种方式
		// 设置img标签的src属性
		// img.src ="http://www.baidu.com/img/bd_logo1.png";
		*/		
		// 设置属性第二种方式
		// setAttribute() 方法添加指定的属性，并为其赋指定的值。
		// 设置img的src属性
		img.setAttribute('src','http://www.baidu.com/img/bd_logo1.png');
		img.style.width = '300px';		
		img.style.height = '200px';			
		// 获取容器
		var container =document.getElementById("container");
		// 将img节点追加到container中。
		container.appendChild(img);
	}	
    
	// 添加文本框
	function addTxt(){
		// 创建文本框
		var txt =document.createElement("input");	
		/*
		// 设置类型第一种方式
		txt.type = "text"; 
		txt.value = "添加成功";
		*/
		// 设置类型第二种方式
		txt.setAttribute('type', 'text');
		txt.setAttribute('value', '添加成功');
		/*
		 * txt.type = 'password'
		 * txt.value = '123'
		 */
		// 获取容器
		var container =document.getElementById("container");
		// 将txt节点追加到container中。
		container.appendChild(txt);
	}
    
	// 添加下拉框的选项			
	function addOptions(){
		// 第一种方式
		/*
		// 创建下拉项
		var option = document.createElement("option") ;
		option.value = "2" ;
		option.text = "油菜花" ;
		// 获取下拉框
		var sel = document.getElementsByTagName("select")[0];
		// 添加 下拉项 
		sel.appendChild(option);
		*/					
		// 第二种方式:
		var option = document.createElement("option") ;
		option.value = "2" ;
		option.text = "不该" ;
		// 获取下拉框
		var sel = document.getElementsByTagName("select")[0];
		// 添加下拉项
		sel.options.add(option);		
		// 第三种方式: 添加下拉项
		var sel = document.getElementsByTagName("select")[0];
		sel.innerHTML += "<option value = '2'>英雄</option>" ;
	}			
</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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

间接查找节点

删除节点

<script type="text/javascript">
	function delNode(){
		var programmer =document.getElementById("programmer");
		// 从父元素中删除节点，获取要删除对象的父元素，然后从父元素中删除该对象
		programmer.parentNode.removeChild(programmer);
	}
</script>
<body>
	<span id="programmer">程序猿</span>
	<a href="javascript:void(0)" onclick="delNode();">删除</a>
</body>
1
2
3
4
5
6
7
8
9
10
11

表单

​ 表单是我们页面向后台传输数据的一种非常常见的方式，在进行数据发送（请求发出）之前，我们应该现在页面进行一系列数据合法性的验证，节省不必要的错误数据的传输，以及提高用户的体验度。

获取表单

前两种常用

1、document.表单名称
2、document.getElementById(表单 id);
3、document.forms[表单名称]
4、document.forms[索引]; //从 0 开始
1
2
3
4

例如：

<body>
	<form id='myform' name="myform" action="" method="post"></form>
	<form id='myform2' name="myform2" action="" method="post"></form>
</body>
<script>
	//四种方式
	var form =document.getElementById("myform");
	form =document.myform;
	form =document.forms["myform"];
	form =document.forms[0];
	console.log(form);
</script>
1
2
3
4
5
6
7
8
9
10
11
12

获取表单元素

获取input元素

​ 如 text password hidden textarea等，前两种常用。

1)、通过 id 获取：document.getElementById(元素 id);
2)、通过 form.名称形式获取: myform.元素名称;    name属性值
3)、通过 name 获取 :document.getElementsByName(name属性值)[索引] // 从0开始
4)、通过 tagName 数组 :document.getElementsByTagName('input')[索引] // 从0开始
1
2
3
4

<body>
	<form id='myform' name="myform" action="" method="get">		
		姓名:<input type="text" id="uname" name="uname" value="zs"/><br />
		密码:<input type="password" id="upwd" name="upwd" value="1234"/><br />
		<input type="hidden" id="uno" name="uno" value="隐藏域" />
		个人说明:<textarea name="intro"></textarea>
		<button type="button" onclick="getTxt();" >获取元素内容</button>
	</form>
</body>
<script>
	function getTxt(){
		var uno = document.getElementById("uno");
		var uname = myform.uname;
		console.log(uname + "--------");
		var upwd = document.getElementsByTagName('input')[1] ;
		var intro = document.getElementsByName("intro")[0];				
		console.log(uno.value +"，"+ uname.value +"，"+ upwd.value +"，"+ intro.value);
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

获取单选按钮

​ 前提：将一组单选按钮设置相同的name属性值

​ (1)获取单选按钮组：

document.getElementsByName("name属性值");
1

(2)遍历每个单选按钮，并查看单选按钮元素的checked属性
1

​ 若属性值为true表示被选中，否则未被选中

​ 选中状态设定： checked=‘checked’ 或 checked=‘true’ 或 checked

​ 未选中状态设定： 没有checked属性 或 checked=‘false’

<form action="" name="myform">
	<input type="text" name="inputName" value="aaa" />
	<input type="radio" name="rad" value="1" />	1
	<input type="radio" name="rad" value="2"  /> 2
</form>
		
<script type="text/javascript">
	var radios = document.getElementsByName('rad');
	//radios[0].checked = 'checked'
	for(var i = 0; i<radios.length; i++){
	    console.log(radios[i].checked + '---' + radios[i].value)
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

获取多选按钮

​ 操作方式与单选同理，不同之处在于可以多选

var ufav = document.getElementsByName("ufav");
var favstr = "";
    for (i = 0;i < ufav.length; i++){
        if(ufav[i].checked){
            favstr += ufav[i].value+",";
        }
    }
favstr = favstr.substr(0,favstr.length-1);
1
2
3
4
5
6
7
8

获取下拉选项

​ （1）获取 select 对象：

var ufrom = document.getElementById("ufrom");
1

​ （2）获取选中项的索引：

var idx = ufrom.selectedIndex;
1

​ （3）获取选中项 options 的 value属性值：

var val = ufrom.options[idx].value;
1

​ 注意：当通过options获取选中项的value属性值时，

​ 若没有value属性，则取option标签的内容

​ 若存在value属性，则取value属性的值

​ （4）获取选中项 options 的 text：

var txt = ufrom.options[idx].text;
1

​ 选中状态设定：selected=‘selected’、selected=true、selected

​ 未选中状态设定：不设selected属性

<body onload="init()">
	<form id='myform' name="myform" action="" method="">		
		来自:
		<select id="ufrom" name="ufrom">
			<option value="-1" >请选择</option>
			<option value="0" selected="selected">北京</option>
			<option value="1">上海</option>
		</select><br />
		<button type="button" id="sub" name="sub">提交</button>
	</form>
</body>
<script>
	function init () {
		var sub = document.getElementById("sub");
		sub.onclick = function () {
			//获取select对象
			var ufrom = document.getElementById("ufrom");
			console.log("表单对象：" + ufrom);
			//获取选中的索引
			var idx = ufrom.selectedIndex;
			console.log("选中项的索引值：" + idx);
			//获取选中项的value值
			var val = ufrom.options[idx].value;
			console.log("选中项的value属性值：" + val);
			//获取选中项的text
			var txt = ufrom.options[idx].text;
			console.log("选中项的text：" + txt);
		}
	}
</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
29
30

提交表单

​ （1）使用普通button按钮+onclick事件+事件中编写代码:

	获取表单.submit();

（2）使用submit按钮 + onclick="return 函数()" +函数编写代码: 
1
2
3

​ 最后必须返回：return true|false;

（3）使用submit按钮/图片提交按钮 + 表单onsubmit="return 函数();" +函数编写代码: 
1

​ 最后必须返回：return true|false;

<form id='myform1' name="myform2" action="#" method="get" onsubmit="return onsub();">	
	<input  name="test"  id="uname"/><span id="msg"></span><br />
	<!--通过js事件：sub()提交表单-->
	<input type="button" onclick="sub();" value="提交表单1" />
	<input type="submit" onclick="return sub2();" value="提交表单2" />
	<input type="submit" value="提交onsubmit" /><br />
	<input type="image" src="img/u=71331624,2965806045&fm=23&gp=0.jpg" 
                  width="60px" height="40px" />
</form>
<script type="text/javascript">		
	// input的type=button，调用submit()方法提交
	function sub(){
		document.myform2.submit();
	}
	// 进行校验，返回值为true才能提交
	function sub2(){
		var uname = document.getElementById("uname");
		var val  = uname.value;
		if(val.length>0){
			return true; // 提交
		}
		document.getElementById("msg").innerHTML = "不能空着啊！！！";
		document.getElementById("msg").style.color="red";
		return false;  // 不提交
	}
	// onsubmit事件提交
	function onsub () {
		var uname = document.getElementById("uname");
		var val  = uname.value;
		if(val.length>0){
			return true; // 提交
		}
		document.getElementById("msg").innerHTML = "填写点儿东西呗！(ˉ▽￣～) 切~~";
		document.getElementById("msg").style.color="red";
		return false; // 不提交
	}
</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
29
30
31
32
33
34
35
36
37

表单校验

<form id='myform' name="myform">
 姓名:<input type="text" id="uname" name="uname" /><br />
 密码:<input type="password" id="upwd" name="upwd" /><br />
 年龄:<input type="radio" name="uage" value="0" checked="checked"/>小屁孩
      <input type="radio" name="uage" value="1"/>你懂得 <br />
 爱好:<input type="checkbox" name="ufav" value="篮球"/>篮球
      <input type="checkbox" name="ufav" value="爬床"/>爬床
      <input type="checkbox" name="ufav" value="代码"/>代码<br />
 来自:<select id="ufrom" name="ufrom">
          <option value="-1" selected="selected">请选择</option>
          <option value="0">北京</option>
          <option value="1">上海</option>
      </select><br />
      <div id="validate" style="color: red;"></div>
      <button type="submit" onclick="return checkForm();">提交</button>
      <button type="reset" onclick="resetForm();">重置</button>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/**
  要求：
    1、验证用户名
      1)不能为空
      2)长度为 6-12 位
    2、验证密码
      1)不能为空 *
      2)长度为 6-12 位
      3)不能包含用户名
    3、年龄: 必须选择 你懂得
    4、爱好: 必须选择一项
    5、来自: 必须选择一项
    满足以上条件
     	1、弹出所有的内容
     	2、提交表单
    否则
    	1、说明错误原因
    	2、不能提交表单
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// 通过id属性值得到dom对象
function $(id) {
    return document.getElementById(id);
}
// 重置表单所有元素 注意函数不能命名为 clear reset 等
function resetForm(){
    // 获取说明 div
    var validate =$('validate');
    validate.innerHTML ="";
}
// 表单校验
function checkForm () {
    var flag =true;
    // 获取说明 div
    var validate = $('validate');
    validate.innerHTML ="";
    // 1、验证用户名
    // 1)、获取用户名的值
    var uname = $('uname').value;
    // 1)不能为空 -->后期正则处理
    // 2)长度为 6-12 位
    if("" === uname || uname.length == 0 ){
        validate.innerHTML += "*用户名不能为空</br>";
        flag = false;
    }else if(uname.length < 6 || uname.length > 12){
        validate.innerHTML += "*用户名长度在 6-12 位</br>";
        flag = false;
    }
    // 2、验证密码
    var upwd = $('upwd').value;
    // 1)不能为空
    // 2)长度为 6-12 位
    // 3)不能包含用户名
    if("" === upwd || upwd.length == 0 ){
        validate.innerHTML += "*密码不能为空</br>";
        flag = false;
    } else if(upwd.length < 6 ||upwd.length > 12){
        validate.innerHTML += "*密码长度在 6-12 位</br>";
        flag = false;
    } else if(uname.length > 0 && upwd.indexOf(uname) >= 0){
		validate.innerHTML += "*密码中不能出现用户名</br>";
        flag = false;
    }
    // 3、年龄: 必须选择 你懂得
    var ageGroup = document.getElementsByName("uage");
    var age ;
    for (var i = 0; i < ageGroup.length; i++) {
        if(ageGroup[i].checked){
            age = ageGroup[i].value;
        }
    }
    if(age == 0){
        flag = false;
        validate.innerHTML += "*小屁孩，妈妈喊你回家</br>";
    }
    // 4、爱好: 必须选择一项
    var ufav = document.getElementsByName("ufav");
    var favstr = "";
    for (i = 0;i < ufav.length; i++){
        if(ufav[i].checked){
            favstr += ufav[i].value + ",";
        }
    }
    favstr = favstr.substr(0,favstr.length-1);
    if(favstr.length < 1){
        flag = false;
        validate.innerHTML += "*人生真无趣</br>";
    }
    // 5、来自
    var ufrom = $('ufrom');
    var idx = ufrom.selectedIndex ;
    var val = ufrom.options[idx].value;
    var valTxt = ufrom.options[idx].text;
    if(-1 == val){
        flag = false;
        validate.innerHTML += "*你来自火星吗?</br>";
    }
    // 满足以上条件 弹出内容
    if(flag){
        var str = "";
        str += "您的姓名是:" + uname + "\n";
        str += "您的密码是:" + upwd + "\n";
        str += "您的年龄是:" + "可以赢取白富美了" + "\n";
        str += "您的爱好是:" + favstr + "\n";
        str += "您来自于:" + valTxt + "\n";
        alert(str);
        // 设置表单提交的地址
		myform.action="http://www.baidu.com";
        // 提交表单
        myform.submit();
        return false;
	} else {
        return false;
    }
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

---

Bug集

1. MyBatis报错 java.io.IOException: Could not find resource mybatis.xml

1) 可能出错的原因是resources文件夹 ----> 并未标记为源根项目 解决办法鼠标右键选项标记项目为 源根项目
2)  可能是配置文件的路径写错了
1
2

2.Error updating database. Cause: java.sql.SQLException: 要执行的 SQL 语句不得为空白或空值

1) 看SQL语法格式是否正确
2)看sql语句是否确实参数或者语法错误！
1
2

3. Exception in thread “main” org.apache.ibatis.exceptions.PersistenceException: Error querying database. Cause: java.sql.SQLRecoverableException: IO 错误: Undefined Error

1)虚拟机选型没有设置  -Duser.name=user
2) 看Mapper和Mybatis.xml主配置文件是否出现错误
1
2

4.Maven项目出现报错：Error running ‘tomcat7’: Cannot start process, the working directory ‘E:\IDEA_Project\maven_Parent\maven_web’ does not exist

出现错误的原因：
1）可能是在项目中删除了某个子模块或者修改了子模块的名字而导致配置信息没有更新，如：在run--->Edit  Configrations--->working directory选项项目名是否更新
1
2

run—>Editconfigrations

Edit configrations选项设置