目录
一、JavaScript介绍
JS语言主要是完成页面的数据验证。因此它运行在客户端，需要浏览器来解析执行JS代码。
JS是弱类型语言，Java是强类型语言。
弱类型：变量类型可变，前面赋值了整型，后面可以赋值为字符串。
var i;
i = 1;
i = "abc";强类型：变量类型不可变，前面确定了整形，就只能是整型。
int i = 1;特点：
- 交互性（信息动态交互）；
- 安全性（不允许直接访问本地资源）；
- 跨平台性（只要是可以解析JS的浏览器都可以执行）。
二、JS与HTML结合使用的方式
1、第一种
在head或者body标签中，使用script标签定义JS代码。
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// alert是JS提供的一个警告框函数，可以接收任意类型的参数，这个参数就是警告内容。
alert("hello JS");
</script>
</head>
<body>
</body>2、第二种
使用script标签引入单独的JS代码文件。
JS文件：
alert("hello JS");HTML文件：
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="./js/test_01.js"></script>
</head>
<body>
</body>注意：上面两种方法二选一，一个标签中不能两种方法都写上。
三、变量
1、变量和数据类型
（1）变量类型
- 数值类型：number
- 字符串类型：string
- 对象类型：object
- 布尔类型：boolean
- 函数类型：function
（2）三种特殊值
- undefined：未定义，变量未赋值时，默认值都是undefined；
- null：空值；
- NAN：Not a Number，非数值类型。
（3）例子
JS文件：
var i;
alert(i); // undefined
i = 12;
alert(typeof(i)); // number
i = "123";
alert(typeof(i)); // string
var a = 10;
var b = "abc";
alert(a * b); // NaN
a = 10;
b = "10";
alert(a * b); // 100
输出情况如注释所示，特别的是：数值与字符串相乘，若字符串是全数字，是可以得到正确答案的。
2、关系与逻辑运算
（1）关系运算
只需要知道与Java不一样的地方即可。
等于：==，会进行简单的字面上的比较
全等于：===，不仅比较字面，还会比较类型看一个例子就能理解：
var a = 12;
var b = "12";
alert(a == b); // true
alert(a === b); // false（2）逻辑运算
且运算：&&
-- 当结果为真，返回最后一个表达式
-- 当结果为假，返回第一个为假的
或运算：||
-- 当结果为真，返回第一个为真的
-- 当结果为假，返回最后一个表达式
非（取反）运算：!在 JS 中，所有变量，都可以作为一个 boolean 类型去使用。其中，0、null、undefined、""（空串）都认为是 false 。
var a = 0;
if (a) {
alert("true");
} else {
alert("false"); // false
}
四、数组
1、定义方式
var 数组名 = []; // 空数组
var 数组名 = [1, 'abc', true]; // 定义的同时赋值2、使用方式
JS中的数组，只要通过数组下标赋值，那么最大的下标值，就会自动的给数组进行扩容。并且中间没有赋值的下标，显然他们的值是undefined。
（注意，只有赋值的时候才会扩容，读操作只会得到undefined）
var a = [];
alert(a.length);
a[0] = 12;
alert(a.length);
a[2] = 13;
alert(a.length)
for (var i = 0; i < a.length; ++ i) { // 注意这里是var，不是int
alert(a[i]);
}
alert(a[10]); // 不会扩容五、函数
1、函数的两种定义方式
（1）使用function关键字定义
function 函数名(argument list) {
statement
}例子：
function func1() {
alert("无参函数");
}
function func2(a, b) {
alert("有参函数不用写类型，a = " + a + "，b = " + b);
}
func1();
func2(1, 2);
function func3(a, b) {
var res = a + b;
return res;
}
alert(func3(1, 2));（2）使用var来定义函数
var 函数名 = function(argument list) {
statement
}例子：
var func1 = function(a, b) {
var res = a + b;
return res;
}
alert(func1(1, 2));需要注意的是：JS是不允许函数重载的，同名函数只有最后一个有效。
2、隐形参数arguments
对于没有参数列表的函数，依旧可以传递参数，这是因为JS提供了隐形参数列表arguments，传递的参数全都放到arguments中。其操作类似数组。
var func1 = function(a, b) {
alert(arguments.length);
var res = 0;
for (var i = 0; i < arguments.length; ++ i) {
if (typeof(arguments[i]) == "number")
res += arguments[i];
}
alert(res);
}
func1(1, 2, 3, 4, 5, "abc");
//输出：6 15六、JS中的自定义对象
1、Object形式的自定义对象
（1）定义
var 变量名 = new Object(); // 对象实例（空对象）
变量名.属性名 = 值; // 定义一个属性
变量名.函数名 = function() { // 定义一个函数
statement
}
（2）调用
变量名.属性名 / 函数名();（3）例子：
var obj = new Object();
obj.name = "www";
obj.age = 18;
obj.func1 = function(a, b) {
alert(a + b);
alert("name is " + this.name + " age is " + this.age);
}
obj.func1(1, 2);2、{}花括号形式的自定义对象
（1）定义
var 变量名 = {
属性名 : 值,
属性名 : 值,
函数名 : function() {
statement
}
};（2）例子：
var obj = {
name:"www",
age:18,
func1:function() {
alert("name is " + this.name + " age is " + this.age);
}
};
obj.func1();七、事件
1、什么是事件？
事件就是电脑设备与页面进行交互的响应。
常用的事件有：
- onload：加载完成事件；浏览器自动执行， 常用于JS代码的初始化
- onclick：单击事件；常用于按钮的点击响应事件
- onblur：失去焦点事件；常用于输入框失去焦点后，验证内容是否合法
- onchange：内容改变事件；常用于下拉列表和输入框内容发生改变后的操作
- onsubmit：表单提交事件；常用于表单提交时，验证所有表单项是否合法
2、事件注册
事件的注册（绑定）就是，告诉浏览器，当事件响应后要执行什么操作。有两种方式：
（1）静态注册：
通过HTML标签的事件属性直接赋予事件响应后的代码。
（2）动态注册：
先通过JS代码得到标签的dom对象，再通过
dom对象.事件名 = function() {}
这种形式赋予事件响应后的代码。
3、onload事件
（1）静态注册
JS文件：
function onloadFun() {
alert("静态注册onload事件");
}HTML文件：
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="./js/test_01.js"></script>
</head>
<body onload="onloadFun()">
</body>（2）动态注册
JS文件：
window.onload = function() {
alert("动态注册onload");
}HTML文件：
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="./js/test_01.js"></script>
</head>
<body>
</body>4、onclick事件
JS文件：
var onclickFunc = function() {
alert("静态注册onclick事件");
}
window.onload = function() {
// 1.获取标签对象
/*
document是JS提供的一个对象（文档），代表的就是HTML这整个页面
*/
var btnObj = document.getElementById("btn02");
// 2.
btnObj.onclick = function() {
alert("动态注册onclick事件");
}
}HTML文件：
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="./js/test_01.js"></script>
</head>
<body>
<button onclick="onclickFunc()">按钮1</button>
<button id="btn02">按钮2</button>
</body>5、onblur事件
JS文件：
var onblurFunc = function() {
// console是控制台对象，是JS提供专门用于向浏览器的控制台打印输出，用于测试。
// log()是打印，相当于print
console.log("静态注册onblur事件");
}
window.onload = function() {
var pwObj = document.getElementById("password");
pwObj.onblur = function() {
console.log("动态注册onblur事件");
}
}HTML文件：
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="./js/test_01.js"></script>
</head>
<body>
用户名：<input type="text" onblur="onblurFunc();"> <br/>
密码：<input type="text" id="password"> <br/>
</body>6、onchange事件
JS文件：
var onchangeFunc = function() {
alert("静态注册onchange事件");
}
window.onload = function() {
var selectObj = document.getElementById("select");
selectObj.onchange = function() {
alert("动态注册onchange事件");
}
}HTML文件：
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="./js/test_01.js"></script>
</head>
<body>
<select onchange="onchangeFunc()">
<option>--语言--</option>
<option>--C/C++--</option>
<option>--Java--</option>
<option>--Python--</option>
</select>
<br/>
<select id="select">
<option>--语言--</option>
<option>--C/C++--</option>
<option>--Java--</option>
<option>--Python--</option>
</select>
</body>7、onsubmit事件
JS文件：
var onsubmitFunc = function() {
// 要验证所有表单项是否合法，如果有一个不合法，则阻止表单提交
alert("静态注册onsubmit事件");
return false;
}
window.onload = function() {
var formObj = document.getElementById("submit");
formObj.onsubmit = function() {
alert("动态注册onsubmit事件");
return false; // 注意要写在function里面
}
}HTML文件：
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="./js/test_01.js"></script>
</head>
<body>
<!-- return false 可以组织表单提交 -->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFunc()">
<input type="submit" value="静态注册"/>
</form> <br/>
<form action="http://localhost:8080" method="get" id="submit">
<input type="submit" value="动态注册"/>
</form>
</body>八、DOM模型
DOM全称是Document Object Model 文档对象模型。它将HTML文档中的标签、属性、文本，转换为对象进行管理。
- Document管理所有的HTML文档内容；
- Document是一种树型结构的文档，有层级关系；
- Document把所有的标签都对象化；
- 可以通过Document访问所有标签；
1、getElementById()
返回对拥有特定id的第一个对象的引用。因此要保证各标签id不同，否则查不到。
例子：实现输入字符串长度在5-12之间。
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script type="text/javascript" src="./js/test_01.js"></script>-->
<script type="text/javascript">
var onclickFunc = function() {
// 当要操作一个标签的时候，一定要先获取这个标签对象
var usernameObj = document.getElementById("01");
// [object HTMLInputElement] 它就是dom对象
var usernameText = usernameObj.value;
// 使用正则表达式验证字符串是否符合规则
var patt = /^\w{5,12}$/; // 长度要在5-12
// test() 用于测试字符串是否符合规则
if (patt.test(usernameText)) {
alert("用户名合法");
} else {
alert("用户名不合法");
}
}
</script>
</head>
<body>
用户名：<input type="text" id="01" value="default"/>
<button onclick="onclickFunc();">验证</button>
</body>对于输入的检测用到了正则表达式，接下来学习一下正则表达式。
2、正则表达式对象
语法
var patt = /正则表达式主体/;
或
var patt = new RegExp("正则表达式主体");正则表达式可以是一个简单的字符，或一个更复杂的模式。
正则表达式可用于所有文本搜索和文本替换的操作。
例子
var patt = /^\w{5,12}$/;- ^s：表示以字符串s开头；
- s$：表示以字符串s结尾；
- \w：表示包含数字、字母或下划线的字符串；
- s{a,b}：表示至少有a个连续的，且最多b个连续的s；
因此，上面的组合意思就是：以长度为5-12的包含数字、字母或下划线的字符串开头，以长度为5-12的数字、字母或下划线的字符串结尾，的字符串。
而如果没有^和$，就仅仅会去匹配最小条件，所以，当需要全局匹配时，必须加上^和$。
3、两种验证的提示方式
本质上就是通过修改标签的innerHTML属性，来替换原本HTML文档中的内容，达到不同的效果。
（1）修改文本
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var onclickFunc = function() {
var usernameObj = document.getElementById("01");
var usernameText = usernameObj.value;
var usernameSpanObj = document.getElementById("02");
/*
innerHTML表示起始标签和结束标签中的内容，这个属性可读可写
*/
var patt = /^\w{5,12}$/;
if (patt.test(usernameText)) {
usernameSpanObj.innerHTML = "输入合法";
} else {
usernameSpanObj.innerHTML = "输入不合法";
}
}
</script>
</head>
<body>
用户名：<input type="text" id="01" value="default"/>
<button onclick="onclickFunc();">验证</button> <br/>
<span id="02" style="color: red">这里是被修改的文本</span>
</body>（2）修改图片
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script type="text/javascript" src="./js/test_01.js"></script>-->
<script type="text/javascript">
var onclickFunc = function() {
var usernameObj = document.getElementById("01");
var usernameText = usernameObj.value;
var usernameSpanObj = document.getElementById("02");
/*
innerHTML表示起始标签和结束标签中的内容，这个属性可读可写
*/
var patt = /^\w{5,12}$/;
if (patt.test(usernameText)) {
usernameSpanObj.innerHTML = "<img src=\"./src/right.jpg\" width=\"18\" height=\"10\"/>";
} else {
usernameSpanObj.innerHTML = "<img src=\"./src/wrong.jpg\" width=\"18\" height=\"10\"/>";
}
}
</script>
</head>
<body>
用户名：<input type="text" id="01" value="default"/>
<button onclick="onclickFunc();">验证</button> <br/>
<span id="02">
<!-- 当检验后，这里将会被<img />替换 -->
</span>
</body>其中需要注意，双引号需要用转义字符，否则会将字符串断开。
4、getElementsByName()
注意到这里的elements是复数，因此返回的是带有指定名称的对象集合。操作与数组一致，元素顺序与HTML文档中从上到下的顺序一致。
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var allSelect = function() {
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; ++ i) {
hobbies[i].checked = true;
}
}
var noneSelect = function() {
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; ++ i) {
hobbies[i].checked = false;
}
}
var reverseSelect = function() {
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; ++ i) {
if (hobbies[i].checked == false) hobbies[i].checked = true;
else hobbies[i].checked = false;
}
}
</script>
</head>
<body>
兴趣爱好：
<input type="checkbox" name="hobby" value="Cpp"/> C++
<input type="checkbox" name="hobby" value="Java"/> Java
<input type="checkbox" name="hobby" value="Python"/> Python
<br/>
<button onclick="allSelect();">全选</button>
<button onclick="noneSelect();">全不选</button>
<button onclick="reverseSelect();">反选</button>
</body>5、getElementsByTagName()
与 getElementsByName() 类似，只不过是通过标签名获取集合。
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var allSelect = function() {
var hobbies = document.getElementsByTagName("input");
for (var i = 0; i < hobbies.length; ++ i) {
hobbies[i].checked = true;
}
}
</script>
</head>
<body>
兴趣爱好：
<input type="checkbox" value="Cpp"/> C++
<input type="checkbox" value="Java"/> Java
<input type="checkbox" value="Python"/> Python
<br/>
<button onclick="allSelect();">全选</button>
</body>6、节点的常用属性和方法
节点就是标签对象。
（1）方法function
- getElementsByTagName()方法，获取当前节点的指定标签名的孩子节点（如上一个例子，就是在<body>下的<input>标签）；
- appendChild( oChildNode )方法，可以添加一个子节点，oChildNode是要添加的子节点；
（2）属性
- childNodes，获取当前节点的所有子节点；
- firstChild，获取当前节点的第一个子节点；
- lastChild，获取当前节点的最后一个子节点；
- parentNode，获取当前节点的父节点；
- nextSibling，获取当前节点的下一个节点；
- previousSibling，获取当前节点的上一个节点；
- className，用于获取或设置标签的 class 属性值；
- innerHTML，用于获取或设置起始标签和结束标签之间的内容；
- innerText，用于获取或设置起始标签和结束标签之间的文本；
（3）例子
JS文件：
window.onload = function() {
// 1.
var btn01Obj = document.getElementById("btn_01");
btn01Obj.onclick = function() {
var beijing = document.getElementById("beijing");
alert(beijing.innerHTML);
}
// 2.
var btn02Obj = document.getElementById("btn_02");
btn02Obj.onclick = function() {
var li_list = document.getElementsByTagName("li");
alert(li_list.length);
}
// 3.
var btn03Obj = document.getElementById("btn_03");
btn03Obj.onclick = function() {
var name_list = document.getElementsByName("gender");
alert(name_list.length);
}
// 4.
var btn04Obj = document.getElementById("btn_04");
btn04Obj.onclick = function() {
var city_list = document.getElementById("city_List");
var li_list = city_list.getElementsByTagName("li");
alert(li_list.length);
}
// 5.
var btn05Obj = document.getElementById("btn_05");
btn05Obj.onclick = function() {
var res = document.getElementById("city_List");
alert(res.childNodes.length); // 结果是9，因为空白字符也算一个节点对象
}
// 6.
var btn06Obj = document.getElementById("btn_06");
btn06Obj.onclick = function() {
alert(document.getElementById("Os_List").firstChild.innerHTML);
// 从这个样例中可以验证“5.”，空白字符也算一个节点对象
alert(document.getElementById("Os_List").childNodes[1].innerHTML);
}
// 7.
var btn07Obj = document.getElementById("btn_07");
btn07Obj.onclick = function() {
alert(document.getElementById("beijing").parentNode.innerHTML);
}
// 8.
var btn08Obj = document.getElementById("btn_08");
btn08Obj.onclick = function() {
alert(document.getElementById("Linux").previousSibling.innerHTML);
}
// 9.
var btn09Obj = document.getElementById("btn_09");
btn09Obj.onclick = function() {
alert(document.getElementById("username").value);
}
// 10.
var btn10Obj = document.getElementById("btn_10");
btn10Obj.onclick = function() {
document.getElementById("username").value = "设置了一个值";
}
// 11.
var btn11Obj = document.getElementById("btn_11");
btn11Obj.onclick = function() {
alert(document.getElementById("beijing").innerText);
}
}CSS文件：
li {
border:1px solid black;
background-color: aquamarine;
display: inline-block;
}
HTML文件：
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="./css/test_04.css"/>
<script type="text/javascript" src="./js/test_04.js"></script>
</head>
<body>
<div>
<div class="option_List">
你喜欢哪个城市？<br/>
<ul id="city_List">
<li id="beijing">北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
</ul>
<br/>你喜欢哪一款游戏？<br/>
<ul id="game_List">
<li>Apex Legend</li>
<li>Warframe</li>
<li>CS:GO</li>
<li>Genshin Impact</li>
</ul>
<br/>你的PC机操作系统是？<br/>
<ul id="Os_List">
<li>Window</li><li id="Linux">Linux</li> <!-- 这里不要换行,测试用 -->
<li>Mac</li>
</ul>
</div>
<div class="userInfo">
gender:
<input type="radio" name="gender" checked="checked"/>Male
<input type="radio" name="gender"/>Female<br/>
username:
<input type="text" name="name" id="username" value="admin"/><br/>
</div>
</div>
<div id="btn_list">
<div><button id="btn_01">查找#beijing节点</button></div>
<div><button id="btn_02">查找所有Li节点个数</button></div>
<div><button id="btn_03">查找name等于gender的所有节点</button></div>
<div><button id="btn_04">查找city下的li节点</button></div>
<div><button id="btn_05">查找city下的所有节点</button></div>
<div><button id="btn_06">查找PC下的第一个子节点</button></div>
<div><button id="btn_07">查找#beijing的父节点的内容</button></div>
<div><button id="btn_08">查找#Linux的前一个兄弟节点</button></div>
<div><button id="btn_09">获取#username的属性值</button></div>
<div><button id="btn_10">设置#username的属性值</button></div>
<div><button id="btn_11">获取#beijing的文本值</button></div>
</div>
</body>7、createElement()
<head>
<meta charset="UTF-8">
<title>Title_02</title>
<script type="text/javascript">
window.onload = function() { // 一定要加载完页面后,再添加节点,否则找不到body
// 创建一个div标签,并且显示到页面上
var divObj = document.createElement("div");
// 添加文本信息
divObj.innerHTML = "这是一个文本信息";
// 再body标签上添加这个div标签
document.body.appendChild(divObj);
//还有另一种写法
/*
var divObj = document.createElement("div");
var textNodeObj = document.createTextNode("这是一个文本信息");
divObj.appendChild(textNodeObj);
document.body.appendChild(divObj);
*/
}
</script>
</head>
<body>
</body>
398
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
