1、JavaScript介绍
javaScript简称叫JS。
Javascript语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。
JS是Netscape网景公司的产品，最早取名为LiveScript;为了吸引更多java程序员。更名为javascript。
JS是弱类型，Java是强类型。
int 变量名 = 值必须是int
var 变量名 = 赋任意类型的值。
var i = 数值
i = 字符串
特点：
1. 交互性（它可以做的就是信息的动态交互）
2. 安全性（不允许直接访问本地硬盘）
3. 跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关）
2、JavaScript和html代码的结合方式
2.1、第一种方式
只需要在head 标签中，或者在body标签中， 使用script 标签 来书写JavaScript代码
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 在script标签中。定义的代码都是js代码。 -->
<script type="text/javascript">
/*
alert是js中的一个警告框函数。
它可以接收任意类型的数据。你给它传什么，它就是弹什么内容。
*/
alert("hello js");
</script>
</head>
2.2、第二种方式
使用Script 标签引入 单独的JavaScript代码文件
4、变量
什么是变量？变量是可以存放某些值的内存的命名。
javaScript的变量类型：
数值类型： number
字符串类型： string
对象类型： Object
布尔类型： boolean
函数类型： function
javascript里特殊的值：
undefined 未定义 在js中，所有变量，未赋初始的情况下，默认值都是undefined
null 空值
NAN 会写 not a number 非数字
JS中的定义变量格式：
var 变量名;
var 变量名 = 值； 直接赋初值
<script type="text/javascript">
var i;
// 默认是undefined
// alert(i);
i = 12;
// typeof 是取变量的类型
// alert( typeof( i ) ); // number
i = "this is a string";
alert( typeof( i ) ); // number
</script>
关系（比较）运算
等于： ==
全等于： ===
<script type="text/javascript">
var i = 12;
var b = "12";
//在js中，等于，只是简单的做字面值的比较。
alert( i == b ); //true
//全等于，除了做字面值的比较之外 。还会比较两个数据的类型
alert( i === b );// false
</script>
7.4、逻辑运算
且运算： &&
或运算： ||
取反运算： ！
0 、null、 undefined、””(空串) 都认为是 false；
/*
&& 与运算。
有两种情况：
第一种：当表达式全为真的时候。返回最后一个表达式的值。
第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值
|| 或运算
第一种情况：当表达式全为假时，返回最后一个表达式的值
第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值
并且 && 与运算 和 ||或运算 有短路。
短路就是说，当这个&&或||运算有结果了之后 。后面的表达式不再执行
*/
<script type="text/javascript">
// 0 、null、 undefined、””(空串) 都认为是 false；
// var a = 0;
// if (a) {
// alert("零为真");
// } else {
// alert("零为假");
// }
// var b = null;
// if (b) {
// alert("null为真");
// } else {
// alert("null为假");
// }
// var c = undefined;
// if (c) {
// alert("undefined为真");
// } else {
// alert("undefined为假");
// }
// var d = "";
// if (d) {
// alert("空串为真");
// } else {
// alert("空串为假");
// }
// && 与运算。
// 有两种情况：
// 第一种：当表达式全为真的时候。返回最后一个表达式的值。
// 第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值
// var a = "abc";
// var b = true;
// var d = false;
// var c = null;
// alert( a && b ); // true
// alert( b && a ); // abc
// alert( d && c ); // false
// alert( c && d ); // null
// || 或运算
// 第一种情况：当表达式全为假时，返回最后一个表达式的值
// 第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值
var a = "abc";
var b = true;
var d = false;
var c = null;
// alert( d || c ); // null
// alert( c || d ); // false
// alert( a || b ); // abc
// alert( b || a ); // true
</script>
7、数组（*****重点）
7.1、数组定义方式
Js 中 数组的定义：
格式：
var 变量名(数组名) = []; // 定义一个空的数组
var 变量名(数组名) = [12,”abc”, true]; // 定义数组同时，初元素初值
<script type="text/javascript">
// var 变量名(数组名) = []; // 定义一个空的数组
var arr = [];
// alert( arr.length ); // 数组长度为
arr[0] = 12;
// alert(arr[0]); // 12
// alert(arr.length); // 1
arr[2] = "abc";
// 当我们通过数组下载给数组元素赋初值的时候。js的数组会自动的根据赋值的最大下标做扩容操作。
// 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 = [12,"abc",true];
// alert(arr2.length);
arr2[5] = 12;
alert(arr2.length);
//二维数组，就是一维数组中，每一个元素都数组
var arr3 = [];
var arr31 = [311,312,313];
arr3[0] = arr31;
var arr32 = [321,322,323];
arr3[1] = arr32;
alert(arr3[0][1]);
</script>
8、函数(*****重点)
8.1、函数的二种定义方式
函数的第一种定义方式：
function 函数名( 参数列表 ) {
函数体
}
定义带有返回值的函数。只需要在函数体内直接使用return 语句返回值即可。
如何调用一个函数：
函数名( 传参 );
<script type="text/javascript">
// 函数的第一种定义方式：
// 无参函数的定义
function fun() {
alert("fun函数被调用了");
}
// 函数的调用
// fun();
// 有参函数
function fun1( a , b ) {
alert("有参函数 a->" + a + ",b->" + b);
}
// fun1(1, 2);
// 带有返回值的函数定义
function fun2( num1, num2 ) {
return num1 + num2;
}
alert( fun2(100, 200) );
</script>
函数的第二种定义方式：
var 函数名 = function( 参数列表 ){
函数体
}
调用
函数名( 传值 );
<script type="text/javascript">
// 函数的第二种定义
var sum = function( num1,num2 ){
var num3 = num1 + num2;
return num3;
}
var result = sum( 200,200 );
alert("结果是：" + result);
</script>
注：在Java中函数允许重载。但是在Js中函数的重载会直接覆盖掉上一次的定义
<script type="text/javascript">
function fun( ) {
alert("无参函数fun被调用");
}
//在js函数中，是不允许重载函数的。最后一次的定义会直接覆盖掉原来的定义。
function fun( num1,num2 ) {
alert("有两个参数的函数fun被调用");
}
fun();
</script>
8.2、函数的 arguments 隐形参数（只在function函数内）
<script type="text/javascript">
function fun(a,b) {
// arguments//它是一个变长的参数。
// 它的使用跟数组一样
// alert( arguments.length );
// 要获取参数的值，可以通过下标arguments[下标]
// alert(arguments[0]);
// alert(arguments[1]);
// alert(arguments[2]);
// alert("-------------华丽分隔线---------");
// alert(a);
// alert(b);
}
// fun(12,"abc",true);
//需求：需要定义一个函数。去计算若干个，传递进来的number类型的值的总和，并返回。
function sum(){
var result = 0;
for (var i = 0; i < arguments.length; i++) {
if (typeof(arguments[i]) == "number") {
result += arguments[i];
}
// result += arguments[i];
}
return result;
}
alert( sum(10,20,"asd",30,40) );
</script>
JS中的自定义对象（扩展内容）
Object形式的自定义对象
var 变量名 = new Object(); //是一个空对象实例
变量名.属性名 = 值； //就给对象实例添加一个属性
变量名.方法名 = function(){} //给对象实例添加一个方法
访问对象内容：
变量名.属性名/方法名();
<script type="text/javascript">
// 定义一个对象
var obj = new Object();
obj.name = "xx";
obj.age = 18;
obj.fun = function(){
alert("年龄：" + this.age + "，姓名：" + this.name);
}
// 访问
alert( obj.name );
obj.fun();
</script>
{}花括号形式的自定义对象
var 变量名 = {
属性名:值, //添加一个属性
属性名:值, //添加一个属性
方法名 : function(){} 添加一个方法
};
对象的访问：
变量名.属性名/方法名();
<script type="text/javascript">
var obj = {
name:"国华",
age:18,
fun:function(){
alert("姓名：" + this.name + ",年龄：" + this.age);
}
};
alert(obj.age);
obj.fun();
</script>
10、js中的事件
什么是事件？事件是电脑输入设备与页面进行交互的响应。我们称之为事件。
常用的事件：
onload加载完成事件 页面加载完成之后
onclick单击事件 单击事件，
onblur失去焦点事件
onchange内容发生改变事件 当下拉列表或者输入框中的内容发生改变的时候，会触发。
onsubmit表单提交事件 常用于form表单提交之前，验证所有表单项是否合法。如果有一个不合法。就阻止表单提交。
事件的注册又分为静态注册和动态注册两种：
静态注册(绑定)事件：
静态注册事件，指的是在标签的事件属性上直接赋于事件触发后需要调用的js代码。这种方式我们称之为静态注册。
动态注册（绑定）事件：
动态注册指的是，动态地获取标签对象。然后通过标签对象.事件名 = function(){} 赋值函数的形式。我们称之为动态注册。
动态注册的步骤：
window.onload = function(){ // 页面加载完成之后
1.获取标签对象
2.通过标签对象.事件名 = 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">
function onloadFun(){
alert("页面加载完成之后。静态注册");
}
//onload的动态注册事件。是固定的语法。
window.onload = function(){
alert("页面加载完成之后！动态注册");
}
</script>
</head>
<!-- 静态注册页面加载完成之后
<body onload="onloadFun()">
-->
<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 onclickFun(){
alert("这是静态注册的单击事件");
}
// 第二个按钮，我们希望使用动态注册
window.onload = function(){
//1.获取标签对象
//get获取
//Element元素（元素即是标签）
//by 通过，由经
//id id属性
// 通过id属性，获取标签对象
var btnObj = document.getElementById("btn02");
//2.通过标签对象.事件名 = function(){}
btnObj.onclick = function(){
alert("这是动态注册的单击事件");
}
}
</script>
</head>
<body>
<!--
静态注册onclick事件
-->
<button onclick="onclickFun()">111</button>
<button id="btn02">222</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">
function onblurFun() {
//console控制台对象
// log方法，可以打印任意内容
console.log("静态注册的 用户名输入框，失去焦点了！");
}
//页面加载完成之后
window.onload = function(){
// 1.先获取标签对象
var passObj = document.getElementById("password");
//2.通过标签对象.事件名 = function(){}
passObj.onblur = function(){
console.log("动态注册密码输入框的失去焦点事件");
}
}
</script>
</head>
<body>
<!--
静态注册事件
-->
用户名:<input onblur="onblurFun()" type="text" /><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("这是静态注册的失去焦点事件！");
}
window.onload = function(){
//1.获取标签对象
var selObj = document.getElementById("sel01");
//2.通过标签对象.事件名=function(){}
selObj.onchange=function(){
alert("这是动态注册的onchange事件");
}
}
</script>
</head>
<body>
请选择你心中的女神：
<select onchange="onchangeFun()">
<option>--选择女神--</option>
<option>xx</option>
<option>xx</option>
<option>xx</option>
</select><br/>
请选择你心中的男神：
<select id="sel01">
<option>--选择男神--</option>
<option>xx</option>
<option>xx</option>
<option>xx</option>
<option>xx</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("表单项中有错误！阻止表单提交");
return false;
}
// 页面加载完成之后
window.onload = function(){
//1.获取标签对象
//2.通过标签对象.事件名=function(){}
document.getElementById("form01").onsubmit = function(){
alert("动态---开始验证表单项……");
alert("动态---表单项中有错误！阻止表单提交");
return false;
};
}
</script>
</head>
<body>
<!--
onsubmit事件常用于在表单提交前。用来验证所有表单项是否合法。
如果有一个不合法。就return false阻止表单提交。
如果都合法，就return true,继续提交
-->
<form action="http://www.baidu.com" onsubmit="return onsubmitFun()">
<input type="submit" />
</form>
<form id="form01" action="http://www.baidu.com">
<input type="submit" />
</form>
</body>
</html>
10、DOM 模型
DOM 全称是Document Object Model 文档对象模型
大白话，就是把文档中的标签，属性，文本，转换成为对象来管理。
那么 它们是如何实现把标签，属性，文本转换成为对象来管理呢。这就是我们马上要学习的重点。
10.1、Document对象（*****重点）
Document 对象的理解：
第一点：Document它管理了所有的Html文档内容。
第二点：document它是一种树结构的文档。有层级关系。
第三点：它让我们把所有的标签 都 对象化
第四点：我们可以通过document访问所有的标签对象。
什么是对象化？？
我们基础班已经学过面向对象。请问什么是对象化？
举例：
有一个人有年龄：18岁，性别：女，名字：张某某
我们要把这个人的信息对象化怎么办！
Class Person {
private int age;
private String sex;
private String name;
}
那么 html 标签 要 对象化 怎么办？
<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.4、Document对象中的方法介绍（*****重点）
document.getElementById(elementId)
通过标签的id属性查找标签dom对象，elementId是标签的id属性值
document.getElementsByName(elementName)
通过标签的name属性查找标签dom对象，elementName标签的name属性值
document.getElementsByTagName(tagname)
通过标签名查找标签dom对象。tagname是标签名
document.createElement( tagName)
方法，通过给定的标签名，创建一个标签对象。tagName是要创建的标签名
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">
//现在我们希望，当用户点击 [验证] 获取用户名输入框的内容。
// 验证 是否属性 字母，数字，下划线。并且长度为5-15位
window.onload = function(){
document.getElementById("username").onblur = function() {
var inputObjTextValue = document.getElementById("username").value;
// alert("失去焦点事件：" + inputObjTextValue);
var patt = /^\w{5,15}$/;
// 获取span标签对象
var spanObj = document.getElementById("usernameSpan");
if (patt.test(inputObjTextValue)) {
spanObj.innerHTML = "<img alt='' width='15' height='15' src='right.png'>";
} else {
spanObj.innerHTML = "<img alt='' width='15' height='15' src='wrong.png'>";
}
}
// 获取[验证]按钮注册单击事件
document.getElementById("btn01").onclick = function(){
//要操作一个操作对象。首先要先获取到标签对象
//1.先通过id属性获取到标签对象
var inputObj = document.getElementById("username");
// value属性可以获取到 输入框中的内容。
var inputObjTextValue = inputObj.value;
// 验证 是否属性 字母，数字，下划线。并且长度为5-15位
// 需要使用正则表达式验证
// \w 表示字母，数字，下划线。
// {5,15} 表示最少5位长度，最大15长度
// ^ 表示以什么开始
// $ 表示以什么结束
// ^$ 表示整个字符串都必须完全匹配
var patt = /^\w{5,15}$/;
// test()可以验证一个字符串，是否匹配正则对象
// 如果匹配，返回，true，如果不匹配，返回false
// 获取span标签对象
var spanObj = document.getElementById("usernameSpan");
// innerHTML 就表起始标签和结束标签中的内容，这个属性，可读，可写
// alert(spanObj.innerHTML);
if (patt.test(inputObjTextValue)) {
// spanObj.innerHTML = "用户名合法";
spanObj.innerHTML = "<img alt='' width='15' height='15' src='right.png'>";
} else {
// spanObj.innerHTML = "用户名不合法";
spanObj.innerHTML = "<img alt='' width='15' height='15' src='wrong.png'>";
}
};
}
</script>
</head>
<body>
用户名:<input type="text" id="username" value="123412"/>
<span id="usernameSpan" style="color:red;"></span>
<button id="btn01">验证</button>
</body>
</html>
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 here1111</title>
<script type="text/javascript">
//我们希望点击完按钮之后。操作一组标签对象。
//都需要先获取你要操作的标签对象。
window.onload = function(){
//全选单击事件
document.getElementById("checkAll").onclick = function(){
// 我们希望点击全选按钮后，所有的复选框都选中
// 通过getElementsByName查找回来的对象是一个集合。
// 这个集合中每个元素都是查找到的标签对象。这个集合的操作，跟数组一样。可以通过下标获取其中的元素。
// 这个集合中元素的顺序 ，就是这些标签在html页面上。从上到下的顺序。
var hobbyObjs = document.getElementsByName("hobby");
// alert(hobbyObjs.length);
// var hobbyItem = hobbyObjs[0];
// 复选框对象有checked属性。这个属性表示复选框的选中状态。
// true表示选中。false表示不选中。
// 这个属性，是可读，可写的
// hobbyItem.checked = true;
// Shirt + Ctrl + C
for (var i = 0; i < hobbyObjs.length; i++) {
hobbyObjs[i].checked = true;
}
};
//全不选单击事件
document.getElementById("checkNo").onclick = function(){
var hobbyObjs = document.getElementsByName("hobby");
for (var i = 0; i < hobbyObjs.length; i++) {
hobbyObjs[i].checked = false;
}
};
// 反选单击事件
document.getElementById("checkReverse").onclick = function(){
//先获取你需要操作的标签对象
var hobbyObjs = document.getElementsByName("hobby");
for(var i = 0; i < hobbyObjs.length; i++) {
//先判断原来的选中状态。如果原来选中，设置为不选中
if (hobbyObjs[i].checked) {
hobbyObjs[i].checked = false;
} else {
hobbyObjs[i].checked = true;
}
}
};
}
</script>
</head>
<body>
兴趣爱好：
<input type="checkbox" name="hobby" />Java
<input type="checkbox" name="hobby" />C++
<input type="checkbox" name="hobby" />js
<br/>
<button id="checkAll" onclick="checkAllFun()">全选</button>
<button id="checkNo">全不选</button>
<button id="checkReverse">反选</button>
</body>
</html>
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 here1111</title>
<script type="text/javascript">
//我们还是希望，点击全选的时候，操作全部的复选框，就可以通过
// 标签名查找
window.onload = function(){
document.getElementById("checkAll").onclick = function(){
//1.先获取标签对象集合。
var inputObjs = document.getElementsByTagName("input");
// getElementsByTagName 返回的是一个集合。
// 集合中每一个元素都是标签对象。这个集合的操作跟数组一样。可以通过下标 获取元素
// 也有length属性
// 这些元素的顺序，就是这些标签在html页面中，从上到下的顺序。
//2.遍历操作每一个元素
for (var i = 0; i < inputObjs.length; i++) {
inputObjs[i].checked = true;
}
};
}
</script>
</head>
<body>
兴趣爱好：
<input type="checkbox" />Java
<input type="checkbox" />C++
<input type="checkbox" />js
<br/>
<button id="checkAll" onclick="checkAllFun()">全选</button>
</body>
</html>
10.5、节点的常用属性和方法（节点就是标签对象）
方法：
通过具体的元素（元素即是标签）节点调用
getElementsByTagName()
方法，获取当前节点的指定标签名孩子节点
appendChild( oChildNode )
方法，可以添加一个子节点，oChildNode是要添加的孩子节点
属性：
childNodes
属性，获取当前节点的所有子节点
firstChild
属性，获取当前节点的第一个子节点
lastChild
属性，获取当前节点的最后一个子节点
parentNode
属性，获取当前节点的父节点
nextSibling
属性，获取当前节点的下一个兄弟节点
previousSibling
属性，获取当前节点的上一个兄弟节点
className
用于获取或设置标签的class属性值
innerHTML
属性，表示获取/设置起始标签和结束标签中的内容
innerText
属性，表示获取/设置起始标签和结束标签中的文本
扫一扫
999
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
