JavaScript
JavaScript介绍JavaScript 和 html 代码的结合方式方式一方式二
变量关系（比较）运算逻辑运算
数组函数函数的第一种定义方式函数的第二种定义方式函数的 arguments 隐形参数（只在 function 函数内）
JS 中的自定义对象Object 形式的自定义对象{} 大括号形式的自定义对象
JS 中的事件onload 加载完成事件onclick 单击事件onblur 失去焦点事件onchange 内容发生改变事件onsubmit 表单提交事件
DOM 模型Document 对象Document 对象中的方法介绍getElementById 方法示例代码getElementsByName 方法示例代码getElementsByTagName 方法示例代码：creatElement 方法示例代码节点的常用属性和方法方法属性
JavaScript介绍
JavaScript语言诞生主要是完成页面的数据验证，因此它运行在客户端，需要运行浏览器来解析执行 JavaScript 代码。
JS 是弱类型，Java是强类型。 特点：
交互性（它可以做的就是信息的动态交互）安全性（不允许直接访问本地硬盘）跨平台性（只要是可以接受JS的浏览器都可以执行，和平台无关）
JavaScript 和 html 代码的结合方式
方式一
只需要在 head 标签中，或者在 body 标签中，使用 script 标签来书写 JavaScript 代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<script type="text/javascript">
alert("警告警告警告！");
</script>
</head>
<body>
</body>
</html>
方式二
使用 script 标签引入单独的 JavaScript 代码文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<script type="text/javascript" src="1.js"></script>
<script type="text/javascript">
alert("逗你玩的哦");
</script>
</head>
<body>
</body>
</html>
变量
变量是可以存放某些值的内存的命名。
JavaScript 的变量类型：
数值类型： number
字符串类型 string
对象类型 object
布尔类型 boolean
函数类型 function
JavaScript 里特殊的值：
undefined 未定义，所有 js 变量为赋予初始值的时候，默认值都是 undefined.
null 空值
NAN 全称：Not a Number 非数字，非数值
js 中定义变量格式：
var 变量名;
var 变量名 = 值;
typeof 是 JavaScript 语言提供的一个函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<script type="text/javascript">
var i;
i = 20;
alert(i);
alert( typeof(i));
</script>
</head>
<body>
</body>
</html>
关系（比较）运算
等于： == 简单的做字面值的比较 全等于： === 除了做字面值得比较之外，还会比较两个变量的数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<script type="text/javascript">
var a = "12";
var b = 12;
alert(a == b);
alert(a === b);
</script>
</head>
<body>
</body>
</html>
逻辑运算
在 JavaScript 语言中，所有的变量，都可以作为一个 boolean 类型的变量其使用。 0、null、undefined、""（空串） 都认为是 false
&& 且运算 当表达式全为真的时候，返回最后一个表达式的值。 当表达式中有一个为假时，就会返回第一个为假的表达式的值。
|| 或运算 当表达式全为假时，返回最后一个表达式的值。 只要有一个表达式为真，就返回第一个为真的表达式的值
&& 运算 与 || 运算有短路特性。当这个 && 或 || 运算有了结果以后，后面的表达式就不再执行。
数组
JS 中数组的定义： 格式： var 数组名 = []; //空数组 var 数组名 = []; //定义数组同时赋值元素
JavaScript 语言中的数组可以通过数组下标直接赋值。如果下标超过数组最大长度则会自动给数组扩容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<script type="text/javascript">
var arr = [];
arr[0] = 1;
arr[2] = 3;
alert(arr.length);
alert(arr[1]);
for (var i = 0;i < arr.length;i++){
alert(arr[i]);
}
</script>
</head>
<body>
</body>
</html>
函数
函数的第一种定义方式
使用 function 关键字来定义函数
格式： function 函数名（形参列表）{ 函数体 } 在 JavaScript 语言中，只需要在函数体内直接使用 return 语句返回值就可以定义带有返回值的函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<script type="text/javascript">
function fun(){
alert("无参函数 fun() 被调用了");
}
function fun2(a,b){
alert("有参函数 fun2() 被调用了 a = " + a + ",b = " + b);
}
function sum(num1,num2){
var result = num1 + num2;
return result;
}
alert( sum(100,50));
</script>
</head>
<body>
</body>
</html>
函数的第二种定义方式
格式; var 函数名 = function（形参列表）{ 函数体 }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<script type="text/javascript">
var fun = function() {
alert("无参函数");
}
var fun1 = function(a,b) {
alert("有参函数 a =" + a + ",b =" + b);
}
var fun2 = function(num1,num2) {
return num1 + num2;
}
alert(fun2(100,200));
</script>
</head>
<body>
</body>
</html>
在 Java 中函数允许重载，但是在 JS 中函数的重载会直接覆盖掉上一次的定义。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<script type="text/javascript">
function fun(){
alert("无参函数");
}
function fun(a,b) {
alert("有参函数");
}
fun();
</script>
</head>
<body>
</body>
</html>
函数的 arguments 隐形参数（只在 function 函数内）
arguments 在function 函数中不需要定义，但是可以直接用来获取所有参数的变量。我们叫它隐形参数，类似于Java中的可变参数。 public void fun(Object…args); 可变参数实际上是一个数组，JS中的隐形参数也和可变参数一样，操作类似数组。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<script type="text/javascript">
function fun(a){
alert( arguments.length);
alert( arguments[0]);
alert( arguments[1]);
alert( arguments[2]);
for(var i = 0;i < arguments.length;i++){
alert( arguments[i]);
}
}
function sum(num1,num2){
var result = 0;
for(var i = 0;i < arguments.length;i++){
if (typeof(arguments[i]) == "number"){
result += arguments[i];
}
}
return result;
}
alert(sum(1,2,3,4,5,"abc"));
</script>
</head>
<body>
</body>
</html>
JS 中的自定义对象
Object 形式的自定义对象
对象的定义： var 变量名 = new Object(); //对象实例（空对象） 变量名.属性名 = 值; // 定义一个属性 变量名.函数型 = function(){} // 定义一个函数 对象的访问： 变量名.属性(); 变量名.函数名();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<script type="text/javascript">
var obj = new Object();
obj.name = "小白马";
obj.age = "2";
obj.fun = function () {
alert("姓名：" + this.name + "，年龄：" + this.age);
}
obj.fun();
</script>
</head>
<body>
</body>
</html>
{} 大括号形式的自定义对象
对象的定义： var 变量名 = { 属性名 : 值， //定义一个属性 属性名 : 值， //定义一个属性 函数名 : function(){} //定义一个函数 } 对象的访问： 变量名.属性(); 变量名.函数名();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<script type="text/javascript">
var obj = {
name:"小白马",
age:2,
fun:function () {
alert("姓名：" + this.name + "，年龄：" + this.age );
}
}
obj.fun();
</script>
</head>
<body>
</body>
</html>
JS 中的事件
事件就是电脑输入设备与页面进行交互的相应。
onload 加载完成事件
onload 事件是浏览器解析完页面之后就会自动触发的事件。
静态注册：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<script type="text/javascript">
function onloadFun() {
alert("静态注册 onload 事件")
}
</script>
</head>
<body onload="onloadFun()">
</body>
</html>
动态注册：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<script type="text/javascript">
window.onload = function() {
alert("动态注册的 onload 事件");
}
</script>
</head>
<body>
</body>
</html>
onclick 单击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<script type="text/javascript">
function onclickFun() {
alert("静态注册onclick事件");
}
window.onload = function() {
var btnObj = document.getElementById("btn01");
btnObj.onclick = function () {
alert("动态注册的onclick事件");
}
}
</script>
</head>
<body>
<button onclick="onclickFun();">按钮1
</button>
<button id="btn01">按钮2
</button>
</body>
</html>
onblur 失去焦点事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<script type="text/javascript">
function onblurFun() {
console.log("静态注册失去焦点事件");
window.onload = function() {}
var passwordObj = document.getElementById("password");
passwordObj.onblur = function() {
console.log("动态注册失去焦点事件");
}
}
</script>
</head>
<body>
用户名：
<input type="text" onblur="onblurFun();"><br/>
密码：
<input id="password" type="text"><br/>
</body>
</html>
onchange 内容发生改变事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<script type="text/javascript">
function onchangeFun() {
alert("编程语言已经改变了");
}
window.onload = function () {
var selObj = document.getElementById("sel01");
selObj.onchange = function() {
alert("学科已经改变了")
}
}
</script>
</head>
<body>
请选择编程语言：
<select onchange="onchangeFun();">
<option>--语言--
</option>
<option>java
</option>
<option>javaScript
</option>
<option>python
</option>
</select>
请选择学科：
<select id="sel01">
<option>--学科--
</option>
<option>高数
</option>
<option>线代
</option>
<option>概率统计
</option>
</select>
</body>
</html>
onsubmit 表单提交事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<script type="text/javascript">
function onsubmitFun() {
alert("静态注册表单提交事件----发现不合法");
return false;
}
window.onload = function () {
var formObj = document.getElementById("form01");
formObj.onsubmit = function () {
alert("动态表单提交事件----发现不合法");
return false;
}
}
</script>
</head>
<body>
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
<input type="submit" value="静态注册"/>
</form>
<form action="http://localhost:8080" id="form01">
<input type="submit" value="动态注册"/>
</form>
</body>
</html>
DOM 模型
DOM 全称是 Document Object Model 文档对象模型，把文档中的标签、属性、文本转化为对象来管理。
Document 对象
Document 对象的理解： 第一点：Document 它管理了所有的 HTML 文档内容。 第二点：document 它是一种树结构的文档，有层级关系。 第三点：它把所有的标签都对象化。 第四点：可以通过 document 访问所有的标签对象。
Document 对象中的方法介绍
document.getElementById(elementId)：通过标签的id属性查找标签 dom 对象，elementId 是标签的 id 属性值。document.getElementsByName(elementName)：通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值document.getElementsByTagName(tagname)：通过标签名查找标签 dom 对象。tagname 是标签名。document.creatElement(tagName)：通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名。
注：document 对象的三个查询方法，如果有 id 属性，优先使用 getElementById 方法来进行查询。如果没有 id 属性，则优先使用 getElementsByName 方法来进行查询。如果 id 属性和 name 属性都没有再按标签名查 getElementsByTagName。
以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。
getElementById 方法示例代码
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<title
>Title
</title
>
<script
type="text/javascript">
/*
* 需求：当用户点击了校验按钮，要获取输出框中的内容。然后验证其是否合法。
* 验证的规则：必须由字母、数字、下划线组成，并且长度是
5到
12位。
* */
function onclickFun
() {
//1.当要操作一个标签的时候，一定要先获取这个标签对象。
var usernameObj
= document
.getElementById
("username");
var usernameText
= usernameObj
.value
;
//如何验证字符串，符合某个规则，需要使用正则表达式技术
var patt
= /^\w
{5,12}$
/;
/*
* test
() 方法用于测试某个字符串是否符合规则
* 符合就返回true，不符合就返回false
* */
var usernameSpanObj
= document
.getElementById
("usernameSpan");
// innerHTML 表示起始标签和结束标签中的内容
// innerHTML 这个属性可读、可写
if (patt
.test
(usernameText
)){
usernameSpanObj
.innerHTML
= "<img src='right.png' width='18' height='18'>";
} else {
usernameSpanObj
.innerHTML
= "<img src='wrong.png' width='18' height='18'>";
}
}
</script
>
</head
>
<body
>
用户名：
<input type="text" id="username" value
=""/>
<span
id="usernameSpan" style
="color:red;">
</span
>
<button onclick
="onclickFun()">校验
</button
>
</body
>
</html
>
getElementsByName 方法示例代码
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<title
>Title
</title
>
<script
type="text/javascript">
function checkAll
() {
//让所有复选框都选中
//document
.getElementsByName
();是根据指定的name属性查询返回多个标签对象集合
//这个集合的操作和数组一样，集合中的每个元素都是dom对象
//这个集合的元素顺序是他们在 html 页面中从上到下的顺序
var hobbies
= document
.getElementsByName
("hobby");
//checked 表示复选框的选中状态。如果选中为true，未选中为false
//checked 这个属性可读可写
for(var i
= 0;i
< hobbies
.length
;i
++){
hobbies
[i
].checked
= true
;
}
}
//全不选
function checkNo
() {
var hobbies
= document
.getElementsByName
("hobby");
for(var i
= 0;i
< hobbies
.length
;i
++){
hobbies
[i
].checked
= false
;
}
}
//反选
function checkReverse
() {
var hobbies
= document
.getElementsByName
("hobby");
for(var i
= 0;i
< hobbies
.length
;i
++){
hobbies
[i
].checked
= !hobbies
[i
].checked
;
}
}
</script
>
</head
>
<body
>
兴趣爱好：
<input type="checkbox" name
="hobby" balue
="cpp">C
++
<input type="checkbox" name
="hobby" balue
="java">java
<input type="checkbox" name
="hobby" balue
="js">JavaScript
<br
/>
<button onclick
="checkAll()">全选
</button
>
<button onclick
="checkNo()">全不选
</button
>
<button onclick
="checkReverse()">反选
</button
>
</body
>
</html
>
getElementsByTagName 方法示例代码：
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<title
>Title
</title
>
<script
type="text/javascript">
function checkAll
() {
//document
.getElementsByTagName
("input");
//按照指定表亲啊明来进行查询并返回集合
//这个集合的操作和数组一样，集合中都是dom对象
//集合中元素顺序是他们在html页面中从上到下的顺序
var inputs
= document
.getElementsByTagName
("input");
for(var i
= 0;i
< inputs
.length
;i
++){
inputs
[i
].checked
= true
;
}
}
</script
>
</head
>
<body
>
兴趣爱好：
<input type="checkbox" name
="hobby" balue
="cpp">C
++
<input type="checkbox" name
="hobby" balue
="java">java
<input type="checkbox" name
="hobby" balue
="js">JavaScript
<br
/>
<button onclick
="checkAll()">全选
</button
>
</body
>
</html
>
creatElement 方法示例代码
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<title
>Title
</title
>
<script
type="text/javascript">
window
.onload
= function
() {
//现在需要我们使用js代码来创建html标签，并显示在页面上
var divObj
= document
.createElement
("div");
divObj
.innerHTML
= "头秃头秃头秃";
document
.body
.appendChild
(divObj
);
var textNodeObj
= document
.createTextNode
("真的要秃了"); //一个文本节点对象
document
.body
.appendChild
(textNodeObj
);
}
</script
>
</head
>
<body
>
</body
>
</html
>
节点的常用属性和方法
节点就是标签对象
方法
getElementsByTagName() ：获取当前节点的指定标签名的子节点appendChild（oChildNode）：添加一个子节点，oChildNode是要添加的子节点
属性
childNodes ：获取当前节点的所有子节点firstChild ：获取当前节点的第一个子节点lastChild ：获取当前节点的最后一个子节点parentNode ：获取当前节点的父节点nextSibling ： 获取当前节点的下一个节点previousSibling ：获取当前节点的上一个节点className ：用于获取或设置标签的class属性值innerHTML ：表示获取 / 设置起始标签和结束标签中的内容innerText ：表示获取 / 设置起始标签和结束标签中的文本
<!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.查找
document
.getElementById
("btn01").onclick
= function
() {
var bjObj
= document
.getElementById
("bj");
alert
(bjObj
.innerHTML
)
}
//2.查找所有li节点
var btn02Ele
= document
.getElementById
("btn02");
btn02Ele
.onclick
= function
(){
var liObj
= document
.getElementsByTagName
("li");
alert
(liObj
.length
)
};
//3.查找name
=gender的所有节点
var btn03Ele
= document
.getElementById
("btn03");
btn03Ele
.onclick
= function
(){
var genders
= document
.getElementsByName
("gender");
alert
(genders
.length
)
};
//4.查找
var btn04Ele
= document
.getElementById
("btn04");
btn04Ele
.onclick
= function
(){
var lis
= document
.getElementById
("city").getElementsByTagName
("li");
alert
(lis
.length
)
};
//5.返回
var btn05Ele
= document
.getElementById
("btn05");
btn05Ele
.onclick
= function
(){
var ctObj
= document
.getElementById
("city");
alert
(ctObj
.childNodes
.length
)
};
//6.返回
var btn06Ele
= document
.getElementById
("btn06");
btn06Ele
.onclick
= function
(){
alert
(document
.getElementById
("phone").firstChild
.innerHTML
);
};
//7.返回
var btn07Ele
= document
.getElementById
("btn07");
btn07Ele
.onclick
= function
(){
//1.查询
id为bj的节点
var bjObj
= document
.getElementById
("bj");
//2.bj节点获取父节点
alert
(bjObj
.parentNode
.innerHTML
)
};
//8.返回
var btn08Ele
= document
.getElementById
("btn08");
btn08Ele
.onclick
= function
(){
//获取android的前一个兄弟节点
//通过android接地那获取前面兄弟节点
alert
(document
.getElementById
("android").previousSibling
.innerHTML
);
};
//9.读取
var btn09Ele
= document
.getElementById
("btn09");
btn09Ele
.onclick
= function
(){
alert
(document
.getElementById
("username").value
)
};
//10.设置
var btn10Ele
= document
.getElementById
("btn10");
btn10Ele
.onclick
= function
(){
document
.getElementById
("username").value
= "这个东西真难理解，头秃";
};
//11.返回
var btn11Ele
= document
.getElementById
("btn11");
btn11Ele
.onclick
= function
(){
alert
(document
.getElementById
("city").innerHTML
);
};
};
</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">查找
<div
><button
id="btn02">查找所有li节点
</button
></div
>
<div
><button
id="btn03">查找name
=gender的所有节点
</button
></div
>
<div
><button
id="btn04">查找
<div
><button
id="btn05">返回
<div
><button
id="btn06">返回
<div
><button
id="btn07">返回
<div
><button
id="btn08">返回
<div
><button
id="btn09">返回
<div
><button
id="btn10">设置
<div
><button
id="btn11">返回
</div
>
</body
>
</html
>
