0、思维导图

首先为大家提供本文所要阐述的知识点的思维导图，帮助大家更好的了解本文要阐述的知识。

1、JavaScript介绍

现在每一个网站都使用了JavaScript。如果你想在网站上创建互动环节，或者建立用户界面等，JavaScript就是我们的首选，他有很多优势，今天就来深度的、详细的学习JavaScript这门语言。

Javascript语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。

特点：

1.交互性（它可以做的就是信息的动态交互）

2.安全性（不允许直接访问本地硬盘）

3.跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关）

JavaScript与Java不同：
1.JS是Netscape公司的产品，前身是LiveScript;为了吸引更多程序员。更名为javascript。而微软看到javaScript如此之火。也自己搞了一个叫JScript的脚本。这时候 w3c ECMA组织看到市面上各种脚本，非常的乱。而且对浏览器兼容有非常严重的问题。自己也高了一个叫 ECMAScript
2.JS是基于对象，Java是面向对象。
3.JS只需解释就可以执行，Java需要先编译成字节码文件，再执行。 JS代码有无，浏览器一般不会提示错误。 4.JS是弱类型，Java是强类型。

2、JavaScript和html代码的结合方式

2.1、第一种方式

只需要在head 标签中，或者在body标签中，使用script 标签可以定义JavaScript代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">// 它是javascript的一个警告框// 它可以接收任意类型的参数，你给它传什么，它就弹 什么alert("hello world!");
</script>
</head>
<body><script type="text/javascript">alert("body hello");</script>
</body>
</html>

2.2、第二种方式

使用Script 标签引入单独的JavaScript代码文件

3、JS中的注释

JavaScript 的注释跟Java一样，有单行，也有多行

单行注释：// 单行注释

多行注释：/* 多行注释 */

4、变量

什么是变量？变量是可以存放某些值的内存的命名。
javaScript的变量类型：

数值类型：number （short int long float double ）

字符串类型：string

对象类型：object

布尔类型：boolean

函数类型：function

javascript里特殊的值：

undedined表示未定义，所有在javascript中没有被赋初值的变量的初始值都是undefined

null表示空值表示赋的是空值。

NAN not a number 表示非数字

JS中的定义变量格式：

var 变量名;

var 变量名 = 值;

5、运算符：

5.1、算术运算

加法： +
减法： -
乘法： *
除法： /
自增：++
自减：--
求余运算： %

var a = 12；
var str = “as”;
var c = a + str;  // c = “12as”;l

5.2、赋值运算

跟java一样：
等于： =
加等于： +=
减等于： -=
乘等于： *=
除等于： /=

求余等于： %=

5.3、关系（比较）运算

大于号：>
小于号： <
等于： ==
全等于： ===
不等于： !=
大于等于： >=
小于等于： <=

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">// 定义两个变量 number类型和string类型var a = 12;var b = "12";// 在javascript中，我们拿number类型和String类型做等于比较的时候// 它只会简单的做字面值的比较，不会去检查两个变量的数据类型//  alert(a == b);// true// 在javascript中，做全等于比较，除了会简单的比较变量的字面值之外 // 还会检查两个变量的数据类型alert( a === b ); // false;
</script>
</head>
<body>
</body>
</html>

5.4、逻辑运算

且运算：&&
或运算： ||
取反运算： !
0 、null、 undefined、””(空串) 都认为是 false；

&& 与运算。
有两种情况：
第一种：当表达式全为真的时候。返回最后一个表达式的值。
第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值

|| 或运算
第一种情况：当表达式全为假时，返回最后一个表达式的值
第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值

并且 && 与运算和 ||或运算有短路。
短路就是说，当这个&&或||运算有结果了之后。后面的表达式不再执行

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="1.js"></script>
<script type="text/javascript" src="2.js"></script>
<script type="text/javascript">// 0 、null、 undefined、””(空串) 都认为是 false；// 当一个变量的值为零时，它的boolean值为false//  var a = 0;//   if (a) {//      alert("a == true");//   } else {//      alert("a == false");//  }//  当一个变量的值为null的时候，它的boolean值为false//  var b = null;//    if (b) {//      alert("b == true");//   } else {//      alert("b == false");//  }// 当一个变量的值为undefined的时候，它的boolean值也为false//     var c = undefined;//   if (c) {//      alert("c == true");//   } else {//      alert("c == false");//  }// 当一个变量的值为空串的时候，它的boolean值为false//     var d = "";//    if (d) {//      alert("d == true");//   } else {//      alert("d == false");//  }/*在javascript中；分号是可选的。但是为了保持良好的代码习惯 我们都要把分号写上。&& 与运算。有两种情况：第一种：当表达式全为真的时候。返回最后一个表达式的值。第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值*///      var a = "abc";//         var b = true;//        var d = false;//       var c = null;// 第一种：当表达式全为真的时候。返回最后一个表达式的值。var t = b && a;//       alert(t); // abc    t = a && b;//      alert(t); // true// 第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值t = d && c;//        alert(t); // false;t = c && d;//       alert(t); // null/*|| 或运算第一种情况：当表达式全为假时，返回最后一个表达式的值第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值并且 && 与运算  和 ||或运算 有短路。短路就是说，当这个&&或||运算有结果了之后 。后面的表达式不再执行*/var a = "abc";var b = true;var d = false;var c = null;//第一种情况：当表达式全为假时，返回最后一个表达式的值var g = d || c;//      alert(g); // nullg = c || d;//         alert(g); // false// 防止变量或函数重复定义g = a || b;//      alert(g); // abc//第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值//         g = a || b;//      alert(g); // abcg = b || a;alert(g); // true//         fun();
</script>
</head>
<body>
</body>
</html>

5.6、三元运算

跟java一样
格式：表达式1 ? 表达式2 ：表达式3
当表达式1为真时，返回表达式2的值，否则返回表达式3的值

// 三元运算
var a = 12;
var b = (a == 12) ? "abc" : false;
alert(b);

6、语句

6.1、if判断结构：

跟java语言一样
1.判断语句有哪3种
第一种：

if (表达式) {

代码1

}

第二种：

if (表达式1) {

代码1

} else {

代码2

}

第三种：

if (表达式1) {

代码1

} else if (表达式2) {

代码2

} else {

代码3

}

6.2、switch分支结构

跟java语言一样
1.switch 语句格式：

switch(变量) {

case 值1：

break;

case 值2：

break;

default:

}

6.3、while和do-while 循环

跟java语言一样
while 语句格式：

while（表达式）{

循环体

}

do-while 语句：

do{

循环体

} while(表达式);

while先判断后执行。先买票后上车
do-while是先执行后判断，do-while至少执行一次。先上车后买票。

6.4、for循环语句

跟java语言一样
for 循环语句：

for ( 语句1；语句2；语句3 ){

循环体

}

语句1，主要用来定义变量
语句2，判断循环条件
语句3，修改循环变量

在javaScript中，定义变量一定要记住是var i = 0; 而不要写成 int i = 0;

for (var i = 0; i < 10; i++) {

循环体;

}

6.5、语句控制

跟java语言一样

Continue; 跳过当次循环。

Break; 跳出当前循环。

7、函数(*****重点)

7.1、函数的三种定义方式

函数的第一种定义方式，是使用function关键字来定义一个函数（用的多，需要掌握）。格式如下：

function 函数名(参数列表) {

函数体；

}

在javascript中，定义一个带有返回值的函数，只需要在function函数体内直接使用return 语句把你要返回的值直接返回即可。

function 函数名(参数列表) {

return 值；

}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">//  格式如下：//  function 函数名(参数列表) {//      函数体；//   }// 定义一个无参的函数function fun() {alert("这是一个无参的函数，萌的不要不要的！");}// 函数的调用 //   fun();// java 定义函数// public void fun2(int a, double d){}// 定义有参的函数// 在定义有参函数的时候，我们不用写上var关键字，只需要写上参数的变量名即可function fun2( a , b ){//       alert("这是两个参数的函数！~");alert(a);alert(b);}// 由于 javascript中变量是任意类型(弱类型),所以我们在调用 javascript函数的时候// 可以传递任意类型的参数值！//     fun2(12,"abc");//定义一个带有返回值的函数// 需要传递两个参数，并且把两个参数相加的和给返回function sum( num1 , num2 ) {var num3 = num1 + num2;return num3;}// 函数的调用 var result = sum(1,249);alert(result);
</script>
</head>
<body>
</body>
</html>

函数的第二种定义方式（了解，用的不多）：
格式如下：

var 函数名 = new Function(“参数列表”,”函数体”);

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">// 函数的第二种定义方式（了解，用的不多）：// 格式如下：// var 函数名 = new Function(“参数列表”,”函数体”);//   定义一个带有两个参数相加并返回值的函数var sum = new Function("num1,num2" , "return num1+num2;");alert( sum(120,130) );
</script>
</head>
<body>
</body>
</html>

函数的第三种定义方式（需要掌握）：
格式如下：

var 函数名 = function(参数列表){

函数体

}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">//  函数的第三种定义方式（需要掌握）：//    格式如下：//  var 函数名 = function(参数列表){//        函数体//   }// 函数的第三种定义var sum = function(num1 , num2){return num1 + num2;}alert( sum(444,555) );
</script>
</head>
<body>
</body>
</html>

注：在Java中函数允许重载。但是在Js中函数的重载会直接覆盖掉上一次的定义

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">//注：在Java中函数允许重载。但是在Js中函数的重载会直接覆盖掉上一次的定义// 定义一个无参函数function fun () {alert("无参函数");}/*上面的函数。相当 于var fun = function(){alert("无参函数");}*/// 定义有两个参数的函数function fun ( a , b ) {alert("有两个参数的函数");}/*第二个函数定义又相当于：fun = function( a ,b ){alert("有两个参数的函数");}*/// 在javascript中函数是不允许 重载的，最后一次的定义会直接复盖掉原来的定义。fun();
</script>
</head>
<body>
</body>
</html>

7.2、函数的 arguments 隐形参数（只在function函数内）

arguments它是一个数组，是一个变量的参数
回忆：java中的变长参数！！！

public void fun( Object ... params  ) {
}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">// 定义有两个参数的函数function fun(a, b) {//         alert(a); // undefined//        alert(b); // undefined// arguments它可以接收全部的参数// arguments的使用可以像数组一样。通过下标访问//         alert(arguments.length);//      alert(arguments[0]);//      alert(arguments[1]);//      alert(arguments[2]);//      alert(arguments[3]);//      alert(arguments[4]);//      for (var i = 0; i < arguments.length; i++) {//            alert("第" + (i+1) + "个参数的值：" + arguments[i]);//      }}// 在javascript中，当我们调用函数的时候，如果没有给函数传递参数值，那么 函数的参数的默认值就是undefined。//   fun();// 当我们调用 javascript函数的时候，函数传递参数值，那么参数值会依次从左到右对参数进行赋值// 没有被赋到值的变量，默认值还是undefined//    fun( "111" );//   fun( "我很帅","我很萌", 12,true,"每天晚上都帅的睡不着觉");// 定义一个没有参数的函数。用于计划传递进来 的多个number类型的参数相加的和并返回。function sum(){var result = 0;// 我们可以通过遍历arguments获取每一个参数的值for (var i = 0; i < arguments.length; i++) {if (typeof(arguments[i]) == "number") {result += arguments[i];}}return result;}alert( sum( 1 , 2 , 200) );
</script>
</head>
<body>
</body>
</html>

8、数组（*****重点）

8.1、数组定义方式

Java 中定义数组：

类型[] 数组名 = new 类型[]; // 定义一个空的数组

类型[] 数组名 = { a,b,c,d}； // 定义一个数组的时候直接初始化

Js 中数组的定义：格式：

var 数组名 = []; // 定义一个空的javascript数组

var 数组名 = [12,”abc”,true]; // 定义一个数组的时候，直接初始化数组的元素

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">//  Js 中 数组的定义：//    格式：//        var 数组名 = [];   // 定义一个空的javascript数组//        var 数组名 = [12,”abc”,true]; // 定义一个数组的时候，直接初始化数组的元素// 定义一个空的数组var arr = [];//alert(arr.length); // 0// 给数组的第一个元素赋值// 当我们通过数组的下标给数组元素赋值的时候，javascript会自动的根据数组的最大下标值// 自动的做扩容的操作。并且赋值arr[0] = 12;//   alert(arr[0]);//    alert(arr.length);// 当我们通过数组下标 2 给数组赋值的时候，数组的最大长度扩容为3 ，并赋值// 扩容后，没有被赋过赋值的下标元素默认值为undefinedarr[2] = "str";//     alert(arr.length); // 3//   alert(arr[1]); // undefined//   for (var i = 0; i < arr.length; i++) {//      alert(arr[i]);//    }// var 数组名 = [12,”abc”,true]; // 定义一个数组的时候，直接初始化数组的var arr2 = ["abc" , "不要不要的！", 20];// alert(arr2.length); // 3arr2[5] = 12;alert(arr2.length);
</script>
</head>
<body>
</body>
</html>

9、JS中的自定义对象（扩展内容）

第一种Object形式的自定义对象,格式：

var 变量名 = new Object(); // 定义一个空的对象

变量名.属性名 = 值; // 给对象添加一个属性

变量名.函数名 = function() {} // 给对象添加一个方法

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">//  第一种Object形式的自定义对象//     格式：//        var 变量名 = new Object(); // 定义一个空的对象//      变量名.属性名 = 值; // 给对象添加一个属性//        变量名.函数名 = function() {} // 给对象添加一个方法// 定义一个人person类var person = new Object();person.age = 18;  // 给对象添加属性person.name = "华仔";  person.fun  = function(){ // 给对象添加方法alert("姓名：" + this.name + ",年龄：" + this.age);}// 对象的访问alert ( person.age ); // 访问对象的属性person.fun();  // 访问对象的方法
</script>
</head>
<body>
</body>
</html>

第二种自定义对象形式：

var obj = {} // 定义一个空的对象

var obj = { // 定义一个对象的添加属性和方法

属性名 : 值 , // 定义一个属性

方法名 : function(){ // 定义一个方法

},

属性名 : 值

};

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">//  第二种自定义对象形式：//        var obj = {} // 定义一个空的对象//         var obj = { // 定义一个对象的添加属性和方法//            属性名 : 值 , // 定义一个属性//           方法名 : function(){ // 定义一个方法//           },//            属性名 : 值//       };// 定义一个person对象var person = {age : 18 , // 添加一个属性name : "李四！",fun : function() {alert("name : " + this.name);}};//访问对象属性alert(person.age);// 访问对象方法person.fun();
</script>
</head>
<body>
</body>
</html>

第三种定义对象的方式，格式：

// 定义一个Person类

function Person() {

this.age = 18;

this.name = “张三”;

this.fun = function() {

alert();

}

}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">//定义一个Person类function Person() { // this.age = 18; // 定义一个属性this.name = "张三"; // 定义一个属性this.fun = function() { // 定义一个方法alert("年龄：" + this.age);}}// 创建一个Person类的实例对象var p1 = new Person();alert(p1.age); // 访问属性p1.fun();
</script>
</head>
<body>
</body>
</html>

10、js中的事件

什么是事件？事件是电脑输入设备与页面交互的响应。我们称之为事件。
常用的事件：

onload加载完成事件在页面被加载完成之后自动执行。

onclick单击事件在我们用鼠标去点击页面上的元素之后触发的事件。

onblur失去焦点事件失去焦点之后，自动触发的事件！

onchange内容发生改变事件在select下拉列表的选中项发生改变的时候会触发。

onsubmit表单提交事件是表单提交事件，在表单提交到服务器的时候，会处动触发的事件。经常用于验证表单的表单项是否合法。

事件的注册又为静态注册和动态注册两种：

静态注册事件：静态注册事件是指，在标签的事件属性上，添加事件要触发的javascript代码，这种方式我们称之为静态注册。

动态注册事件：动态注册事件其实就是通过对象的事件属性赋值为一个function函数的方式。我们称之为动态注册。

动态注册事件分两个步骤实现。

第一步：先获取到标签对象

第二步：通过对象.事件名 = function(){};

onload事件示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="onload.js"></script>
<script type="text/javascript">// 这个语句是在页面被加载完成之前就执行了//    alert(1);// onload动态注册事件//  window.onload = function(){//      alert("页面已经被加载完成！");       //  }</script></head><!-- onload事件是在页面被加载完成之后。自动触发 的事件静态注册事件<body οnlοad="alert('页面被加载完成！');">-->
<body>
</body>
</html>

onclick事件示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">// 定义一个函数//     function onclickFunc() {//      alert("讨厌 ！");//   }window.onload = function() {//    动态注册事件分两个步骤实现。//        getElementById// get 获取 //      Element 元素// by 通过，由。。经// id 标签的id属性值// 通过标签的id属性值获取到标签对象//      第一步：先获取到标签对象var btn01Obj = document.getElementById("btn01");//        alert(btn01Obj);//      第二步：通过对象.事件名 = function(){};btn01Obj.onclick = function() {alert("这是动态注册的onclick事件");}}
</script>
</head>
<body><!-- 静态注册onclick事件，onclick事件是单击元素之后会触发的事件。--><button οnclick="onclickFunc();">有种你就点我！</button><button id="btn01">动态注册单击事件</button>
</body>
</html>

onblur事件示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">//动态注册失去焦点事件//动态注册事件分两个步骤实现。window.onload = function() {//     第一步：先获取到标签对象// 通过password的id属性值查找对应的标签对象，var passwordObj = document.getElementById("password");//  alert(passwordObj);//   第二步：通过对象.事件名 = function(){};passwordObj.onblur = function() {alert("动态添加失去焦点事件");}}
</script>
</head>
<body>    <!-- onblur是失去焦点事件！静态注册失去焦点事件！-->用户名：<input type="text" οnblur="alert('失去焦点事件!');"/><br/>密码：<input id="password" type="password" />
</body>
</html>

onchange事件示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">function onchangeFun(){alert("onchange静态注册！");}window.onload = function() {// 1.先获取标签对象var select01Obj = document.getElementById("select01");//        alert(select01Obj);// 2.通过对象.事件名 = function(){}select01Obj.onchange = function() {alert("动态绑定onchange事件！");}}
</script>
</head>
<body>请选择你心中的女神：<!-- onchange事件是下拉列表选中的内容发生改变的时候，触发--><select οnchange="onchangeFun();"><option>--请选择你心中的女神--</option><option>刘奕菲妈妈</option><option>柳颜</option><option>班花</option></select><br/>请选择你心中的男神：<select id="select01"><option>--请选择你心中的男神--</option><option>东北F4</option><option>王宝强</option><option>王振国</option><option>算了</option></select>
</body>
</html>

onsubmit事件示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">function onsubmitFun() {alert("开始验证所有的表单项……");//  alert("只要有一个表单项，不合法，直接 返回false，阻止 表单提交");//  return false;alert("所有的表单项都合法。return true，让表单继续提交");return true;}// 动态绑定onsubmit事件window.onload = function(){document.getElementById("form01").onsubmit = function() {alert(1);//      return false;return true;}}
</script>
</head>
<body><!-- onsubmit事件是当表单准备提交到服务器的之前触发的事件我们经常用来在提交提交之前验证所有的表单项是否合法。当我们 onsubmit静态事件中返回false的时候，会阻止表单提交到服务器当我们返回true的时候提交表单因为return false;可以阻止表单的默认操作。--><form action="http://127.0.0.1:8080" οnsubmit="return onsubmitFun();">用户名:<input id="username" name="username" type="text" /><br/>密 码：<input id="password" name="password" type="password" /> <br/><input type="submit" value="提 交"/></form><br/><form action="http://127.0.0.1:8080" id="form01">用户名:<input id="username" name="username" type="text" /><br/>密    码：<input id="password" name="password" type="password" /> <br/><input type="submit" value="提 交"/></form>
</body>
</html>

11、DOM 模型

DOM 全称是Document Object Model 文档对象模型
大白话，就是把文档中的标签，属性，文本，转换成为对象来管理。
那么它们是如何实现把标签，属性，文本转换成为对象来管理呢。这就是我们马上要学习的重点。

11.1、Document对象（*****重点）

在dom中html里的内容都被创建成为node对象

一类是标签节点

一类是文本节点

一类是属性节点

Document 对象的理解：

第一点：Document它管理了所有的Html文档内容。

第二点：document它是一种树结构的文档。有层级关系。

第三点：它让我们把所有的标签都对象化

第四点：我们可以通过document访问所有的标签对象。

什么是对象化？？

举例：有一个人有年龄：18岁，性别：女，名字：苍某某,我们要把这个人的信息对象化怎么办！

Class Person{int age; 保存年龄信息String sex；保存性别的信息String name；保存姓名的信息
}

那么 html 标签要 Dom 对象化

<body><div id="div01">div01</div>
</body>

模拟对象化，相当于：

class Dom{private String id;       // id属性private String tagName; //表示标签名private Dom parentNode; //父亲private List<Dom> children; // 孩子结点private String innerHTML; // 起始标签和结束标签中间的内容
}

10.2、Node节点

Document对象中管理的对象。主要有三类节点对象。
节点：Node——构成HTML文档最基本的单元。我们关心的主要是：

元素（标签）节点：HTML文档中的HTML标签

属性节点：标签的属性

文本节点：HTML标签中的文本内容

10.3、节点的常用属性

nodeName表示节点名
nodeType表示节点类型
nodeValue表示节点值
nodeName nodeType nodeValue
元素节点标签名 1 null
属性节点属性名 2 属性值
文本节点 #text 3 文本内容

举例：

<div id="div01">abc我爱你</div>

在上面的这个标签中

<div> 元素节点

id=”div01” 是属性节点

abc我爱你是文本节点

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">window.onload = function() {//通过id属性值查找标签对象var div01Obj = document.getElementById("div01");// 它是一个div标签对象//         alert(div01Obj);// 获取元素的节点名//       alert(div01Obj.nodeName); // div// 获取元素节点的类型//      alert(div01Obj.nodeType); //1 表示元素节点// 元素节点的节点值是null//      alert(div01Obj.nodeValue); // null// 通过对象获取id属性节点var idAttrObj = div01Obj.getAttributeNode("id");// 获取节点名//      alert(idAttrObj.nodeName); //  属性节点的节点名，是属性名// 获取节点类型//      alert(idAttrObj.nodeType); // 2 属性节点的类型是2// 获取节点的值//        alert(idAttrObj.nodeValue); //属性值//获取文本节点对象var textNodeObj = div01Obj.firstChild;// 文本节点的节点名称是#textalert(textNodeObj.nodeName);// #text// 获取文本节点的类型alert(textNodeObj.nodeType); // 文本节点类型为3//获取文本节点的值alert( textNodeObj.nodeValue ); // 文莱节点的值，就是它的文本内容}
</script>
</head>
<body><div id="div01">abc我爱你</div>
</body>
</html>

10.4、Document对象中的方法介绍（*****重点）

document.getElementById(elementId)
通过标签的id属性查找标签dom对象，elementId是标签的id属性值

document.getElementsByName(elementName)
通过标签的name属性查找标签dom对象，elementName标签的name属性值

document.getElementsByTagName(tagname)
通过标签名查找标签dom对象。tagname是标签名

document.createElement(tagName)
通过标签名，创建一个标签dom对象在内存中，tagName是标签名。

document.getElementById方法示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">// document.getElementByid是通过id属性查找标签对象// 但是这个方法一定要在文档被加载完成之后。去执行。否则会找不到对象//    var usernameObj = document.getElementById("username");//     alert(usernameObj);// 页面加载完成之后window.onload = function(){//     var usernameObj = document.getElementById("username");//     alert(usernameObj);}// 这里只是定义了函数function onclickFun(){// 函数是被调用之后才会被执行。// 单击，事件是被按钮 被显示出来之后。// 也就是页面已经加载完成var usernameObj = document.getElementById("username");alert(usernameObj);}
</script>
</head>
<body>用户名：<input id="username" name="username" type="text" value="abc" /> <button οnclick="onclickFun();">验证用户名是否合法</button>
</body>
</html>

document.getElementsByName()示例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">// 页面被加载完成window.onload = function() {//getElementsByName是通过给定的name属性值查找标签对象的集合。// getElementsByName方法查找到的标签对象的的顺序是它们在html文档中从上到下出现的顺序var hobbyObjs = document.getElementsByName("hobby");//    alert(hobbyObjs);// 这个集合的操作，跟数据一样//  alert(hobbyObjs.length);//  alert(hobbyObjs[0]);// 来获取第一个var hobbyObj = hobbyObjs[3];//    alert(hobbyObj.name);//     alert(hobbyObj.checked);hobbyObj.checked = true;}// 全选功能function checkAll() {// 1.先获取所有的input type = checkbox的标签对象集合var hobbyObjs = document.getElementsByName("hobby");// 2.遍历修改每一个标签对象的checked属性为truefor (var i = 0; i < hobbyObjs.length; i++) {//这是获取每一个标签对象var hobbyObj = hobbyObjs[i];// 修改标签对象的选中状态hobbyObj.checked = true;}}// 全不选功能function checkNo() {// 1.先获取所有的input type = checkbox的标签对象集合var hobbyObjs = document.getElementsByName("hobby");// 2.遍历修改每一个标签对象的checked属性为falsefor (var i = 0; i < hobbyObjs.length; i++) {//这是获取每一个标签对象var hobbyObj = hobbyObjs[i];// 修改标签对象的选中状态hobbyObj.checked = false;}}// 反选功能function checkReverse() {// 1.获取所有的标签对象集合var hobbyObjs = document.getElementsByName("hobby");// 2.遍历获取每一个标签对象。判断它的checked属性for (var i = 0; i < hobbyObjs.length; i++) {var hobbyObj = hobbyObjs[i];// 3.如果checked属性值为true修改为false，如果是checked为false，修改为true//       if (hobbyObj.checked == true) {//             hobbyObj.checked = false;//        } else {//          hobbyObj.checked = true;//         }hobbyObj.checked = !hobbyObj.checked;}}</script>
</head>
<body>兴趣爱好：<input name="hobby" type="checkbox" />睡觉<input name="hobby" type="checkbox" />抽烟 <input name="hobby" type="checkbox" />喝酒<input name="hobby" type="checkbox" />烫头 <br/><button οnclick="checkAll()">全选</button><button οnclick="checkNo()">全不选</button><button οnclick="checkReverse()">反选</button>
</body>
</html>

document.getElementsByTagName() 方法示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">// 页面被加载完成之后window.onload = function() {// getElementsByTagName是通过标签名获取标签对象的集合，// 这个集合的操作跟数组是一样的，可以通过下标获取集合中的元素var inputObjs =  document.getElementsByTagName("input");//        alert(inputObjs);//     alert(inputObjs.length);}// function checkAll(){//1.获取所有的标签对象集合var inputObjs =  document.getElementsByTagName("input");//2.遍历修改每一个标签对象的checked属性值为truefor (var i = 0; i < inputObjs.length; i++) {// 修改集合中每一个input type=checkbox标签对象的checked属性为trueinputObjs[i].checked = true;}}
</script>
</head>
<body>兴趣爱好：<input type="checkbox" />睡觉<input type="checkbox" />抽烟 <input type="checkbox" />喝酒<input type="checkbox" />烫头 <br/><button οnclick="checkAll()">全选</button>
</body>
</html>

document.createElement()方法示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">/*现在我希望，我们通过javascript代码手动创建 <div><span>div中的span标签</span></div>并且添加到body标签中*/window.onload = function() {//    alert(document.body);   // 创建div标签对象var divObj = document.createElement("div");// 在内存中创建了<div></div>标签对象//   alert(divObj);//    divObj.innerHTML = "<span>div中的span标签</span>";// 创建span标签对象var spanObj = document.createElement("span"); // 在内存中创建了<span></span>标签对象//    spanObj.innerHTML = "div中的span标签";// 创建文本节点对象var textNodeObj = document.createTextNode("div中的span标签");// 把文本节点对象添加到span标签中spanObj.appendChild(textNodeObj);// 把span标签对象添加到div标签中divObj.appendChild(spanObj);// 把div标签对象添加到body标签中document.body.appendChild(divObj);};
</script>
</head>
<body>
</body>
</html>

10.5、节点的常用属性和方法

方法：通过具体的元素节点调用

getElementsByTagName()

方法，获取当前节点的指定标签名孩子节点

appendChild(oNode)

方法给标签对象添加子节点。oNode是要添加的子节点。

removeChild(oNode) 通过父节点来删除孩子节点

removeChild方法删除子节点。oNode是要删除的孩子节点

cloneNode( [bCloneChildren])

cloneNode方法克隆一个对象。bCloneChildren表示是否需要克隆孩子节点

getAttribute(sAttributeName)

getAttribute方法获取属性值。sAttributeName是要获取的属性名

属性：

childNodes属性，获取当前节点的所有子节点

firstChild属性，获取当前节点的第一个子节点

lastChild属性，获取当前节点的最后一个子节点

parentNode属性，获取当前节点的父节点

nextSibling属性，获取当前节点的下一个节点

previousSibling属性，获取当前节点的上一个节点

className用于获取或设置标签的class属性值

innerHTML 属性，表示获取/设置起始标签和结束标签中的内容

innerText属性，表示获取/设置起始标签结束标签中的文本

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">window.onload = function() {var divObj = document.getElementsByTagName("div")[0];// innerHTML它是w3c的规范所有的浏览器基本都支持// innerHTML它表示起始标签和结束标签里的内容alert(divObj.innerHTML);// innerText 它是起始标签和结束标签里的文本（不包含标签）// innerText有些浏览器会不支持。alert(divObj.innerText);}
</script>
</head>
<body><div><span>div中的span标签</span></div>
</body>
</html>

练习：DOM查询练习

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">window.onload = function(){//1.查找#bj节点document.getElementById("btn01").onclick = function() {var liObj = document.getElementById("bj");alert(liObj.innerHTML);};//2.查找所有li节点var btn02Ele = document.getElementById("btn02");btn02Ele.onclick = function(){//查找所有li节点var liObjs = document.getElementsByTagName("li");alert(liObjs.length);};//3.查找name=gender的所有节点var btn03Ele = document.getElementById("btn03");btn03Ele.onclick = function(){alert( document.getElementsByName("gender").length );};//4.查找#city下所有li节点      var btn04Ele = document.getElementById("btn04");btn04Ele.onclick = function(){//1.先获取city结点var cityObj = document.getElementById("city");//2.通过getElementsByTagName方法获取所有的li子结点alert (cityObj.getElementsByTagName("li").length );};//5.返回#city的所有子节点      childNodesvar btn05Ele = document.getElementById("btn05");btn05Ele.onclick = function(){//1.先获取city结点var cityObj = document.getElementById("city");//2.通过childNodes获取所有的孩子节点//       alert(cityObj.childNodes.length);//         alert( cityObj.firstChild.nodeType );alert( cityObj.childNodes[1].innerHTML );};//6.返回#phone的第一个子节点     firstChildvar btn06Ele = document.getElementById("btn06");btn06Ele.onclick = function(){alert( document.getElementById("phone").firstChild.innerHTML );};//7.返回#bj的父节点        parentNodevar btn07Ele = document.getElementById("btn07");btn07Ele.onclick = function(){//1.先获取bj结点// 2.通过对象.parentNode获取父结点alert( document.getElementById("bj").parentNode.id ) ;};//8.返回#android的前一个兄弟节点        previousSiblingvar btn08Ele = document.getElementById("btn08");btn08Ele.onclick = function(){alert( document.getElementById("android").previousSibling.innerHTML );};//9.读取#username的value属性值var btn09Ele = document.getElementById("btn09");btn09Ele.onclick = function(){alert( document.getElementById("username").value );};//10.设置#username的value属性值var btn10Ele = document.getElementById("btn10");btn10Ele.onclick = function(){document.getElementById("username").value = "王振国老师很帅！";};//11.返回#bj的文本值  innerText var btn11Ele = document.getElementById("btn11");btn11Ele.onclick = function(){alert( document.getElementById("bj").innerText );};};
</script>
</head>
<body><div id="total"><div class="inner"><p>你喜欢哪个城市?</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br /><br /><p>你手机的操作系统是?</p><ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul></div><div class="inner">gender:<input type="radio" name="gender" value="male"/>Male<input type="radio" name="gender" value="female"/>Female<br><br>name:<input type="text" name="name" id="username" value="abcde"/></div></div><div id="btnList"><div><button id="btn01">查找#bj节点</button></div><div><button id="btn02">查找所有li节点</button></div><div><button id="btn03">查找name=gender的所有节点</button></div><div><button id="btn04">查找#city下所有li节点</button></div><div><button id="btn05">返回#city的所有子节点</button></div><div><button id="btn06">返回#phone的第一个子节点</button></div><div><button id="btn07">返回#bj的父节点</button></div><div><button id="btn08">返回#android的前一个兄弟节点</button></div><div><button id="btn09">返回#username的value属性值</button></div><div><button id="btn10">设置#username的value属性值</button></div><div><button id="btn11">返回#bj的文本值</button></div></div>
</body>
</html>

JavaWeb初级学习之 JavaScript相关推荐

【技术培训】招收Jeecg门徒 ---javaweb初级入门班
招收Jeecg门徒[javaweb初级入门班] 最近准备带徒弟,带些人才出来,我带徒弟的理念是实践为王,在实践中掌握原理,积累经验. 我带徒弟的方向是JAVA WEB,掌握各种主流框架.(后期会开展j ...
PHP初级学习(三)
PHP初级学习(三) PHP函数 php函数名以字母或下划线开头. 语法风格类似于javascript. 看一下语法 <?phpfunction functionName(){//函数体} ?& ...
视频教程-javascript原生初级到非凡-JavaScript
javascript原生初级到非凡全栈工程师.2000年建设第一网站项目起,15年行业经验,从早期WAP到APP,从SP.IVR到流媒体,云框架: 项目解决顾问. 姜威 ¥49.00 立即订阅扫码 ...
前端之JavaScript第一天学习(1)-JavaScript 简介
javaScript 是世界上最流行的编程语言. 这门语言可用于 HTML 和 web,更可广泛用于服务器.PC.笔记本电脑.平板电脑和智能手机等设备. JavaScript 是脚本语言 JavaSc ...
JavaScript学习13 JavaScript中的继承
JavaScript学习13 JavaScript中的继承继承第一种方式:对象冒充 <script type="text/javascript">//继承第一种方式: ...
为什么 Web 开发人员需要学习一个 JavaScript 框架？
原文链接可能当我们结束本文时,一个新的 Javascript 框架已经在某处启动了.但这确实不在我们的控制范围内.因此,我们应该简单地继续我们所拥有的.至少,由于免责声明,我们可以确定我们不是在发明 ...
java的编译器怎么出来_怎样掌握ava编译器的使用，教程在这里，如何进行Java初级学习...
原标题:怎样掌握ava编译器的使用,教程在这里,如何进行Java初级学习 Java的学习中,并没有那么的繁琐,只需要我们逐步掌握,就能够发觉java是全世界最好的编程语言之一.那么今天就带领大家进行简 ...
mysql查询数据为0的所有字段6_MySQL8.0 初级学习笔记（六）查询数据
MySQL8.0 初级学习笔记(六)查询数据 MySQL8.0 初级学习笔记(六)查询数据查询有多种方法:单表查询,使用集合函数查询,连接查询,子查询,合并查询结果,为表和字段取别名,使用正则表达式 ...
零基础web前端学习之JavaScript 和css 阻塞
web前端学习之JavaScript 和css 阻塞,JavaScript 是客户端和服务器端的脚本语言,可以插入HTML 页函中, 并且是目前较热门的Web 开发语言.同时, JavaScript ...

JavaWeb初级学习之 JavaScript

0、思维导图

1、JavaScript介绍

2、JavaScript和html代码的结合方式

2.1、第一种方式

2.2、第二种方式

3、JS中的注释

4、变量

5、运算符：

5.1、算术运算

5.2、赋值运算

5.3、关系（比较）运算

5.4、逻辑运算

5.6、三元运算

6、语句

6.1、if判断结构：

6.2、switch分支结构

6.3、while和do-while 循环

6.4、for循环语句

6.5、语句控制

7、函数(*****重点)

7.1、函数的三种定义方式

7.2、函数的 arguments 隐形参数（只在function函数内）

8、数组（*****重点）

8.1、数组定义方式

9、JS中的自定义对象（扩展内容）

10、js中的事件

11、DOM 模型

11.1、Document对象（*****重点）

10.2、Node节点

10.3、节点的常用属性

10.4、Document对象中的方法介绍（*****重点）

10.5、节点的常用属性和方法

练习：DOM查询练习

JavaWeb初级学习之 JavaScript相关推荐

最新文章

热门文章

JavaWeb初级学习 之 JavaScript

0、思维导图

1、JavaScript介绍

2、JavaScript和html代码的结合方式

2.1、第一种方式

2.2、第二种方式

3、JS中的注释

4、变量

5、运算符：

5.1、算术运算

5.2、赋值运算

5.3、关系（比较）运算

5.4、逻辑运算

5.6、三元运算

6、语句

6.1、if判断结构：

6.2、switch分支结构

6.3、while和do-while 循环

6.4、for循环语句

6.5、语句控制

7、函数(*****重点)

7.1、函数的三种定义方式

7.2、函数的 arguments 隐形参数（只在function函数内）

8、数组（*****重点）

8.1、数组定义方式

9、JS中的自定义对象（扩展内容）

10、js中的事件

11、DOM 模型

11.1、Document对象（*****重点）

10.2、Node节点

10.3、节点的常用属性

10.4、Document对象中的方法介绍（*****重点）

10.5、节点的常用属性和方法

练习：DOM查询练习

JavaWeb初级学习 之 JavaScript相关推荐

最新文章

热门文章

JavaWeb初级学习之 JavaScript

JavaWeb初级学习之 JavaScript相关推荐