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); // null
g = c || d;
// alert(g); // false
// 防止变量或函数重复定义
g = a || b;
// alert(g); // abc
//第二种情况:只要有一个表达式为真。就会把回第一个为真的表达式的值
// g = a || b;
// alert(g); // abc
g = 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>
<!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 ,并赋值
// 扩容后,没有被赋过赋值的下标元素默认值为undefined
arr[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); // 3
arr2[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;
// 文本节点的节点名称是#text
alert(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属性为true
for (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属性为false
for (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属性值为true
for (var i = 0; i < inputObjs.length; i++) {
// 修改集合中每一个input type=checkbox标签对象的checked属性为true
inputObjs[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的所有子节点 childNodes
var 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的第一个子节点 firstChild
var btn06Ele = document.getElementById("btn06");
btn06Ele.onclick = function(){
alert( document.getElementById("phone").firstChild.innerHTML );
};
//7.返回#bj的父节点 parentNode
var btn07Ele = document.getElementById("btn07");
btn07Ele.onclick = function(){
//1.先获取bj结点
// 2.通过对象.parentNode获取父结点
alert( document.getElementById("bj").parentNode.id ) ;
};
//8.返回#android的前一个兄弟节点 previousSibling
var 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>