1. javaScript
1.1 js是什么
1.2 js的语言特征
1.3 js的组成
- ECMAScript（核心）：规定了js的语法和基本对象。
- DOM（文档对象模型）：处理网页内容的方法和接口。
- BOM（浏览器对象模型）：与浏览器交互的方法和接口。
1.4 js的引入
1.4.1 内部引用
script标签理论上可以卸载HTML文件的任意位置！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js引用</title>
<!-- 内部引用 -->
<script type="text/javascript">
alert("IG牛逼");
</script>
</head>
<body>
<!-- 内部引用 -->
<script type="text/javascript">
alert("EDG牛逼");
</script>
</body>
</html>
1.4.2 外部引用
即在script标签后加上 src=“”
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js引用</title>
<!-- 外部引用 -->
<script type="text/javascript" src="../js11/js0.js">
alert("FPX牛逼");
//当有外部标签有SRC后不执行内部js代码，即下面的内部引用不执行
</script>
<!-- 内部引用 -->
<script type="text/javascript">
alert("IG牛逼");
</script>
</head>
<body>
</body>
</html>
//引用的js
alert("EDG牛逼");
1.4.3 script标签规范化
开发时，最好把script标签放置在body结束标签前！
这样做的优势是，可以保证html展示内容优先加载，最后在加载js脚本，增强用户体验。
2. js语法规则
2.1 注释
跟java一样可以。
- 单行注释//
- 多行注释/**/
2.2 变量
2.2.1 变量概述
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js变量</title>
<script>
var a;
alert(a);//显示undefined
//alert(b);//不显示,且运行会在这停止
//区分大小写
var c=10;
var C=20;
alert(c);
alert(C);
</script>
</head>
<body>
</body>
</html>
2.2.2 基本数据类型
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>变量类型</title>
<script>
//string
var str1="aaa";
var str2='bbb';
alert(str1);
alert(str2);
//boolean
var flag1=true;
var flag2=false;
alert(flag1);
alert(flag2);
//number
var num1=10;
var num2=10.14159;
alert(num1);
alert(num2);
//null
var obj=null;
alert(obj);
//undefined
var a;
var b=undefined;
alert(a);
alert(b);
</script>
</head>
<body>
</body>
</html>
2.2.3 引用数据类型
变量转换：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>变量转换</title>
<script>
var a=10;
alert(typeof(a));
a="aaa";
alert(typeof(a));
a=true;
alert(typeof(a));
a=undefined;
alert(typeof(a));
a=null;
alert(typeof(a));
</script>
</head>
<body>
</body>
</html>
2.3 运算符
2.3.1 比较运算符
| == | 逻辑等 | 比较值是否相等 |
| === | 全等 | 比较值与类型是否都相等 |
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
var x=7;
alert(x==7); //true
alert(x===7); //true
alert(x=='7'); //true
alert(x==='7'); //false
</script>
</head>
<body>
</body>
</html>
2.3.2 逻辑运算符
注意 ：js中没有逻辑运算符 & 与 |
2.4 正则
2.4.1 RegExp对象创建
| var reg=new RegExp(“表达式”); | 开发中基本不用 |
| var reg=/^表达式$/ | 直接量方式（开发中常用） |
| var reg=/表达式/ | 普通方式 |
直接量存在边界,^表示开始，$表示结束。
2.4.2 test （校验）
2.4.3 代码演示
- 直接量方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>正则：直接量方式</title>
<script>
//直接量方式必须所有字符符合正则，即全部匹配
var reg1=/^\s*$/;//0到多个空格，/s是空格
var flag11=reg1.test(" ") //true
var flag12=reg1.test("a ") //false
var flag13=reg1.test("") //true
alert(flag11);
alert(flag12);
alert(flag13);
var reg2=/^\s+$/;//1到多个空格，/s是空格
var flag21=reg2.test("") //false
var flag22=reg2.test(" ") //true
alert(flag21);
alert(flag22);
</script>
</head>
<body>
</body>
</html>
- 普通方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>正则：普通方式</title>
<script>
//普通方式是部分匹配
var reg=/\s+/;
var flag1=reg.test("a a"); //true
var flag2=reg.test("aaa"); //false
alert(flag1);
alert(flag2);
</script>
</head>
<body>
</body>
</html>
2.5 数组对象
2.5.1 js数组特性
js数组可以看成java中的ArrayList集合。
- 数组中的每一个成员没有限制，可以存放各种类型。
- 数组长度可以自动修改。
2.5.2 js数组创建方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js数组</title>
<script>
var arr1=['edg',"你",null,2];
alert(arr1.length);
arr1[1]='我';
alert(arr1.length);
arr1[4]=4;
alert(arr1.length);
arr1[10]=10;
alert(arr1.length);
alert(arr1[9]);
</script>
</head>
<body>
</body>
</html>
2.5.3 js数组的常用 属性/方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js数组的部分函数</title>
<script>
//join(string) 用分隔符拼接数组
var arr1=["a",'b','c','d'];
var result1=arr1.join("");//默认用，拼接
/* alert(result1);
alert(result1.length);//4，不改变原数组
//reverse() 翻转数组
var arr2=arr1.reverse();
alert(arr2);
alert(arr1);// 会对原数组发生改变
*/
//pop() 删除并且返回数组最后一个元素
var temp1=arr1.pop();
alert(temp1);
alert(arr1);
//push() 向数组的末尾追加一个或多个元素，返回数组新长度
var len1=arr1.push('e','f');
alert(len1);
alert(arr1);
</script>
</head>
<body>
</body>
</html>
2.6 全局函数
2.6.1 执行
2.6.2 编码和解码
2.6.3 URI和URL的区别
URI是统一资源标识符。标识资源详细名称。
URL是统一资源定位器。定位资源的网络信息。
2.6.4 代码演示
2.6.4.1 全局函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全局函数</title>
<script>
// eval(string) 把传入字符串作为js代码执行
eval("var x=10;")
alert(x);
// URL/URI编码
var str="http://www.baidu.com?EDG牛逼&lpl第一赛区"
alert(str);
var temp1=encodeURI(str);
alert(temp1);
var temp1=decodeURI(str);
alert(temp1);
// 字符串转化
//var msg="3.14";
//var msg="4.14A";
//var msg="5.14A159";
var msg="A6.14";
var num1=parseInt(msg);
var num2=parseFloat(msg);//NaN，not a number#表示不是数值！
alert(typeof(num1)+": "+num1);
alert(typeof(num2)+": "+num2);
</script>
</head>
<body>
</body>
</html>
2.6.4.2 自定义函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义函数</title>
<script>
/* public static int getSum(int a,int b){
return a+b;
} */
function getSum(a,b){
return a+b;
}
var result1=getSum(1,2);
alert(result1);
//js没有重载只有覆盖，且 result1 的也是调用下面覆盖后的函数
function getSum(a,b,c){
return (a+'+'+b+'+'+c);
}
var result2=getSum(1,2,3);
alert(result2);
</script>
</head>
<body>
</body>
</html>
2.6.4.3 自定义对象（类）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义对象（类）</title>
<script>
//定义声明一个Person对象
//1.再对象声明定义阶段，定义属性
//2.创建对象后，使用对象时候 动态 定义属性，
// 同时原来的类属性也随之发生 永久 的改变
function Person(name,age){
this.name=name;
this.age=age;
}
var p=new Person("edg",10);
alert(p.name);
alert(p.age);
p.name="FPX";
p.age=3;
p.win=2019;
alert(p.name);
alert(p.age);
alert(p.win);
var p0=new Person("ig",10);
alert(p0.name);
alert(p0.age);
alert(p0.win);
</script>
</head>
<body>
</body>
</html>
2.6.4.4 直接定义对象类
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>直接定义对象</title>
<script>
//不声明直接实例化对象
var Person={name:"EDG",age: 18};
alert(Person.name);
alert(Person.age);
Person.name="IG";
Person.age=9;
Person.win="元年";
alert(Person.name);
alert(Person.age);
alert(Person.win);
</script>
</head>
<body>
</body>
</html>
3. BOM对象
3.1 BOM对象简述
BOM（Browser Object Model）浏览器对象模型
作用：用来执行浏览器的相关操作。（如：弹出消息）
一般情况下，window代表了BOM对象。
window对象是js内置对象，使用window对象调用方法时可以不写window.*的前置!
3.2 消息框
3.2.1 alert()
警告框，用来弹出警告消息。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>消息框</title>
</head>
<body>
<script>
alert("edg");
</script>
</body>
</html>
3.2.2 confirm()
确认框，用于告知用户信息并收集用户的选择。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>消息框</title>
</head>
<body>
<script>
//有返回值Boolean
var flag=confirm("EDG!");
alert(flag);
</script>
</body>
</html>
3.3 定时器
3.3.1 循环定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>循环定时器</title>
</head>
<body>
<script>
function run1(){
alert("EDG");
}
//每隔3秒执行一次,返回值为定时器ID
var id=setInterval("run1()",3000);
//关闭定时器
clearInterval(id);
//页面等待2秒后，有且仅执行一次run2()
var iid;
function run2(){
alert("RNG");
clearInterval(iid);
}
iid=setInterval("run2()",2000);
</script>
</body>
</html>
3.3.2 一次性定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一次性定时器</title>
</head>
<body>
<script>
function run1(){
alert("嘉文五试 ");
}
var id=setTimeout("run1()",1000);
//关闭一次性定时器
clearTimeout(id);
</script>
</body>
</html>
3.4 location对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>地址栏</title>
</head>
<body>
<script>
//获取本页面地址
var url=location.href;
alert(url);
// location.href="bom01.html";
function run(){
location.href="http://www.baidu.com";
}
setTimeout("run()",3000);
</script>
</body>
</html>
4. DOM 对象
4.1 DOM对象简述
4.1.1 DOM对象是什么
DOM（Document Object Model）文档对象模型
文档：标记型文档（HTML等）
DOM是将标记型文档中所有内容（标签、文本、属性）都封装成对象，通过操作对象的属性或者方法，来达到操作或者改变HTML展示效果的目的。
4.1.2 DOM树介绍
上述HTML文档会被浏览器由上到下依次加载并解析，加载到浏览器的内存。
4.2 获取元素对象方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取元素节点</title>
</head>
<body>
姓名：<input id="t1"><br/><br/>
爱好：<input type="checkbox" name="hobby" value="backetball">篮球
<input type="checkbox" name="hobby" value="football">足球
<input type="checkbox" name="hobby" value="volleyball">排球
<br/><br/>
<ul>
<li>java</li>
<li>c++</li>
<li>python</li>
<li>go</li>
<li>javascript</li>
</ul><br/><br/>
性别：<input type="radio" name="sex" value="man" class="xin">男
<input type="radio" name="sex" value="weman" class="xin">女
<script>
//通过ID获取元素 (Element!)
var t1=document.getElementById("t1");
alert("t1");
alert(document.getElementById("t2")); //返回null
//通过name获取元素 (Element【s】!)
var arr1=document.getElementsByName("hobby");
alert(arr1.length);
alert(document.getElementsByName("hobby2").length);
//通过标签名获取元素 (Element【s】!)
var arr2=document.getElementsByTagName("li");
alert(arr2.length);
//通过类名获取元素 (Element【s】!)
var arr3=document.getElementsByClassName("xin");
alert(arr3.length);
</script>
</body>
</html>
4.3 元素对象常见属性
4.3.1 value
4.3.2 className
4.3.3 checked
4.3.4 innerHTML
4.3.5 代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素对象属性</title>
<style>
.sty2{
color:red;
}
.sty1{
color:blue;
}
</style>
</head>
<body>
姓名：<input id="t1" value="EDG"><br/><br/>
恭喜<span id="lpl" class="sty1">EDG！</span><br/><br/>
lpl<span id="win" class="sty1">共三个冠军！</span><br/><br/>
爱好：<input id="love" type="checkbox" name="hobby" value="backetball">篮球
<input type="checkbox" name="hobby" value="football">足球
<input type="checkbox" name="hobby" value="volleyball">排球
<br/><br/>
<script>
//value
var t1=document.getElementById("t1");
alert(t1.value);
t1.value="7777777";
//classname
var lpl=document.getElementById("lpl");
alert(lpl.className);
lpl.className="sty2";
//checked
var love=document.getElementById("love");
alert("篮球"+love.checked);
love.checked=true;
//innerHTML
var win=document.getElementById("win");
alert("lpl"+win.innerHTML);
win.innerHTML="中IG是英雄,FPX是联盟, "
win.innerHTML+=" 而EDG是青春！"
</script>
</body>
</html>
5. js事件
5.1 js事件是什么
通常鼠标或热键的动作我们称之为事件（Event）
事件：点击、表单提交、值发生改变、鼠标移入、鼠标移出
通过js事件，我们可以完成页面的指定特效。
5.2 js事件驱动机制
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js事件概述</title>
<script>
function run1(){
alert("别点了！")
}
</script>
</head>
<body>
<!--
事件源：按钮
事件： 点击 onclick
监听器： run1()
注册监听器： οnclick="run1()"
-->
<input type="button" value="按钮" onclick="run1()"/>
</body>
</html>
5.3 常见的js事件
5.3.1 点击事件（onclick）
点击事件：鼠标或者热键点击元素组件时触发
5.3.2 焦点事件（onblur,onfoucs)
- 获取焦点事件（onfocus）
- 失去焦点事件（onnblur）
5.3.3 域内事件改变（onchange）
域内容改变事件：元素组件的值发生改变时触发
5.3.4 加载完毕事件（onload）
加载完毕事件：元素组件加载完毕时触发
5.3.5 表单提交事件（onsubmit）
5.3.6 键位弹起事件（onkeyup）
键位弹起事件：再组件中输入某些内容时，键盘键位弹起时触发该事件
5.3.7 常用鼠标事件（onmouseover，onmouseout）
- 鼠标移入事件（onmouseover）
- 鼠标移出事件（onmouseout）
5.3.8 代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常见的js事件</title>
<script>
function run1(){
alert("点击click");
}
function run2(){
alert("获得焦点focus");
}
function run3(){
alert("失去焦点focus");
}
function run4(){
alert("域内容改变");
}
function run5(){
alert("加载完毕");
}
function run6(){
alert("表达提交");
//在这可以进行表单校验
// return true;
return false;
}
function run7(){
alert("键盘按键弹起");
}
function run8(){
alert("鼠标移入");
}
function run9(){
alert("鼠标移出");
}
</script>
</head>
<!-- 加载完毕事件 -->
<body onload="run5()">
<!-- 点击事件 -->
点击事件：<input onclick="run1()"><br/><br/><br/>
<!-- 焦点事件 -->
获得焦点事件：<input onfocus="run2()"><br/><br/><br/>
失去焦点事件：<input onblur="run3()"><br/><br/><br/>
<!-- 域内容事件 -->
<select onchange="run4( )" >
<option value="edg">EDG！</option>
<option value="fpx">FPX！</option>
<option value="ig">IG！</option>
</select><br/><br/><br/>
<!-- 表单提交事件 -->
<!--
用来校验表单
true： 允许表单提交
false：阻止表单提交
-->
<form onsubmit="return run6()">
2021夺冠战队：<input name="EDG" value="edg"><br/>
2020夺冠战队：<input name="DWG" value="dwg"><br/>
2019夺冠战队：<input name="FPX" value="fpx"><br/>
2018夺冠战队：<input name="IG" value="ig"><br/>
你最喜欢的lpl战队：<input name="lpl"><br/>
<input type="submit" value="提交"><br/><br/><br/>
</form>
<!-- 按键弹起事件 -->
按键弹起事件：<input onkeyup="run7()"><br/><br/><br/>
<!-- 鼠标移动事件 -->
鼠标移入事件：<input onmouseover="run8()"><br/><br/><br/>
鼠标移出事件：<input onmouseout="run9()"><br/><br/><br/>
</body>
</html>
5.4 js事件绑定
5.4.1 元素事件句柄绑定
将事件以元素属性的方式写入标签内部，继而进行绑定对应函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件句柄绑定</title>
<script>
function run1(){
alert("run11111");
}
function run2(str){
alert(str);
}
function run3(obj){
alert(obj.value);
}
function run11(){
alert("11111");
}
function run12(){
alert("22222");
}
function run13(){
alert("33333");
}
</script>
</head>
<body>
<!-- 绑定一个无参函数 -->
<input value="1" onclick="run1()"><br/>
<!-- 绑定一个有参函数，参数为字符串 -->
<input value="22" onclick="run2('run22222')"><br/>
<!-- 绑定一个有参函数，参数为元素对象 -->
<input value="333" onclick="run3(this)"><br/>
<!-- 绑定多个函数 -->
<input value="4444" onclick="run11(),run12(),run13()"><br/>
</body>
</html>
5.4.2 DOM绑定
使用DOM的属性方式进行绑定事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件DOM绑定</title>
<script>
function run1(str){
alert(str);
}
function run2(){
alert("加载完毕2");
}
//DOM绑定方式 一次只能绑定一个函数
// window.οnlοad=run1("加载完毕1");
//DOM绑定方式 一次可以绑定多个函数
// window.οnlοad=function(){
// run1("加载完毕1");
// run2();
// }
window.onload=function(){
var t1=document.getElementById("t1");
t1.onclick=function(){
run1(t1.value);
run2();
}
}
</script>
</head>
<body>
2021冠军：<input id="t1" value="EDG">
</body>
</html>
344
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
