JavaScript学习笔记
JavaScript
JavaScript的概述
JavaScript ，它包含了三大部分：ECMAScript、DOM、BOM
- ECMAScript：ECMAScript是JavaScript这门语言的核心组成，是这门语言的精髓所在。规定了语法格式
- DOM：文档对象模型(document object model)。我们知道标签的嵌套，就产生了父子关系，而DOM，提供了大量的API，让我们可以轻松操作DOM树。使用DOM，我们能动态修改页面内容，调整样式等等，这也是JS多样化的一个体现。
- BOM：浏览器对象模型(brower object model)。和DOM类似，只不过主体变成了浏览器。浏览器同样提供了大量的API，其中部分对JS开放，为我们提供了操作浏览器窗口的方法。
JavaScript是脚本语言，也就是说js属于编程语言。
JavaScript是一种基于对象的语言。
脚本语言：也就说js是不需要编译就可以直接执行了。js是浏览器解析的，每个浏览器中都有js解析器。
JavaScript书写位置
base.js:
alert("我是外来的");<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript书写位置</title>
<!--当使用的html的版本为H5，则type="text/javascript" 可以省略-->
<!--在script脚本在，通过找到按钮控件，然后添加点击事件，这种写法表示“嵌入式”
理解：通过scriptbi标签 ，完成对页面上某个控件，添加一些事件（样式，赋值）
优点：比较通用，起作用的区域为当前文档
-->
<script type="text/javascript">
// 单行注释
/* 多行注释 */
// 嵌入式
alert("你来了，老弟");
</script>
<!--
通过scrip标签，关联独立的js文件，到当前的html文件中来，在js文件中处理的还是html文件中的控件
注意：外链式，必须使用双标签
优点：解耦，好维护
缺点：可读性变差
外链式是通过script标签的src属性引入的
注意：外链式的script标签中不能再编写js代码
-->
<script src="js/base.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 行内式
理解：直接把事件添加骚button的控件上
优点：简便，快捷，一目了然
缺点：复用性差
单引号和双引号 都是字符串
-->
<p onclick="alert('还真的点啊');">点我</p>
</body>
</html>JavaScript输出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript输出</title>
<script type="text/javascript">
// 控制台输出
//相当于java中的 System.out.println()
// js中字符串可以使用单双引号,推荐使用单引号
console.log("hello,js");
//特殊场合区分颜色
console.info("info");
console.warn("warn");
console.error("error");
console.debug("debug");
// 输出到html页面--> 输出到浏览器上展示
// html页面在js中就是文档对象
// document 内置对象，已经被初始化好了的对象，内置：表示对象在内存，可以直接使用
document.write("<h1>hello,javascript</h1>");
</script>
</head>
<body>
</body>
</html>variable变量
声明变量和初始化
- 变量名必须以字母(包含大小写字母)、下划线(_)、$和数字组成，变量不能以数字开头；
- 不能使用JavaScript中的关键字作为变量名(var、true等)；
- JavaScript变量名是严格区分大小写的； wangErMaZi
- 变量命名使用“小驼峰”命名法则，第一个单词首字母小写，第二个单词起首字母大写，例如userName。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>声明变量和初始化</title>
<script type="text/javascript">
var a; // 声明变量
a = 10;// 变量初始化
var b = 10; // 声明变量的同时初始化
</script>
</head>
<body>
</body>
</html>数据类型
js是弱类型的语言，变量是没有数据类型，变量值才有数据类型。所以变量的数据类型由值决定。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据类型</title>
<script type="text/javascript">
// 变量a的数据类型由值决定
var a = 10;
console.log(a);
console.log(typeof a); // number
a = "zhangsan";
console.log(a);
console.log(typeof a); // string
</script>
</head>
<body>
</body>
</html>JavaScript中的数据类型分为基本数据类型和引用数据类型。
基本数据类型: number、boolean、undefined、null、string
引用数据类型: Object(Array, Function, Object, Date等)，后续再讲。
基本数据类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本数据类型</title>
<script type="text/javascript">
/*
number数值类型：
包含：整数型、浮点型、NaN(not a number)和Infinity（正负无穷大）
*/
var a = 10;
console.log("a= " + a);
console.log(typeof a);
a = 3.14;
console.log("a= " + a);
console.log(typeof a);
a = NaN;
console.log("a= " + a); // NaN
console.log(typeof a);
a = "a" / 3;
console.log("a= " + a); // NaN
console.log(typeof a);
a = 2 / 0;
console.log("a= " + a);
console.log(typeof a);
console.log("--------------------");
// boolean: 布尔类型，布尔类型只有两个值：true 和 false
var b = true;
console.log("b= " + b);
console.log(typeof b);
console.log("--------------------");
// undefined类型只有一个值，就是undefined
var c = undefined;
console.log("c= " + c);
console.log(typeof c);
// 只声明变量不初始化,结果就是undefined
var d;
console.log("d= " + d);
console.log(typeof d); // undefined
console.log("--------------------");
/*
string类型就是字符串，在JavaScript语言中，使用单引号或双引号包裹的内容，我们都称之为字符串。
*/
var s = 'zhangsan';
console.log("s= " + s);
console.log(typeof s); // string
console.log("--------------------");
// null类型
var n = null;
console.log("n= " + n);
console.log(typeof n); // object
</script>
</head>
<body>
</body>
</html>因为null表示的是一个空对象的指针，所以使用typeof操作符检测null会返回object的原因。
本质上这是一个bug，因为当初设计JavaScript这门语言的时候比较仓促，后来发现的时候已经好多开发者在使用了，如果修改这个bug对原有项目的代码改动极大，所以就只能将错就错了。
表达式与运算符
算数运算符
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>运算符01</title> <script type="text/javascript"> // 算术运算符 console.log(1 + 1); // 2 // +遇到字符串就是拼接符 console.log("1" + 1);// 11 console.log(null + 1);// 1,null转换成0 console.log(NaN + 1);// NaN console.log(undefined + 1); // NaN // +号和-号的特殊作用,可以做类型转换 // 在数字类型的字符串前面使用+,就会将字符串转数字 // -号会改变正负,所以一般不会使用 // 注意: +"123"前不能添加其他内容 var s = +"123"; console.log(s); console.log(typeof s); // 其他符号（* / % ++ --）和java一样 </script> </head> <body> </body> </html>赋值运算符
执行结果和java的一样
<script type="text/javascript"> var a = 10; a+=2; console.log(a); </script>条件运算符
<script type="text/javascript"> var a = '123'; var b = 123; // == 只会比较内容,不会判断类型 console.log(a == b); // true // === 不仅仅比较内容,还会比较类型 console.log(a === b); // false // != 只会比较内容,不会判断类型 console.log(a != b);// false // !== 不仅仅比较内容,还会比较类型 console.log(a !== b);// true </script> 区别：“==”表示相等，“====”表示严格相等。“==”运算符会在进行相等比较之前先进行必要值的类型转换；而“===”运算符不会执行类型转换，因此如果两个值类型不同，那么比较时，直接返回false。
逻辑运算符
<script type="text/javascript"> var a = 1; // && 短路与 || 短路或 ! 逻辑非 var b = (a > 2) && (a++ >= 2); console.log(a); console.log(b); </script>三目运算符
<script type="text/javascript"> var a = (3 > 2) ? 3 : 2; console.log(a); </script>
if语句
<script type="text/javascript">
// 接收用户输入的年龄,进行判断
var age = prompt("请输入年龄：");
console.log(age);
console.log(typeof age);
// 数字类型的字符串做比较,会转成数值类型
if(age > 35){
console.log("该淘汰了");
}else if(age > 18){
console.log("该工作了");
}else{
console.log("未成年");
}
</script>swith语句
<script type="text/javascript">
var season = prompt("请输入季节：");
var spring = '春';
switch (season) {
// js中case后面可以使用变量
case spring:
console.log("春眠不觉晓");
break;
case '夏':
console.log("处处蚊子咬");
break;
case '秋':
console.log("打上敌敌畏");
break;
case '冬':
console.log("不知死多少");
break;
default:
console.log("你输啥玩意儿");
break;
}
</script>for循环
<script type="text/javascript">
// 在页面上输出九九乘法表
for(var i = 1;i <= 9;i++){
for(var j = 1; j <= i;j++){
document.write(j + '*' + i +'='+(i*j)+' ');
}
document.write('<br/>');
}
</script>while循环
<script type="text/javascript">
// while循环输出1-10的偶数
var i = 1;
while(i <= 10){
if(i % 2 == 0){
console.log(i);
}
i++;
}
</script>do…while循环
<script type="text/javascript">
// do...while循环输出1-10的偶数
var i = 1;
do{
if(i % 2 == 0){
console.log(i);
}
i++;
}while(i <= 10);
</script>break和continue
break终止整个循环，continue终止本次循环，进入下一次循环
<script type="text/javascript">
for(var i = 0;i < 10;i++){
if(i == 5){
// break;
continue;
}
console.log(i);
}
</script>自定义函数
格式一：
function 函数名([参数列表]){
函数体；
[return [返回值]];
}- 和Java相比，js 中的函数没有返回值类型，该函数，可以返回，也可以不返回参数列表，直接给变量，无需给变量类型。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义函数_格式一</title>
<script type="text/javascript">
// 定义函数
function show(){
console.log("hello,js");
}
console.log(show); // 相当于Syetem.out.println(student);输出对象内容信息
// function是object类型,js是函数式编程
console.log(typeof show);// function
// 调用函数
show();
console.log("---------------------");
// 形参是不能使用var修饰的
function sum(a,b){
console.log("a= " + a +",b= " + b);
return a + b;
}
// 调用函数
// 在js中实参列表和形参列表的数量不一致,是不会报错的
// 没有实参赋值的形参就是undefined
var result = sum(3,2);
console.log(result);
console.log(typeof result);
</script>
</head>
<body>
</body>
</html>格式二：
- 匿名函数的定义规则：
var 变量名 = function([参数列表]){
函数体；
[return [返回值]];
} <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义函数_格式二</title>
<script type="text/javascript">
var f = function(a,b){
return a + b;
}
var res = f(2,3);
//匿名函数主要是用来做参数传递的
console.log(res)
</script>
</head>
<body>
</body>
</html>eg：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>自定义函数_格式二</title> <script> setTimeout(function(){ console.log("定时器"); },1000); window.onload = function(){ console.log("页面加载完毕事件"); } function test(a,b){ a += 1; b(a); } test(3,function(result){ console.log(result); }); </script> </head> <body> </body> </html>
内置函数-数据类型转换函数
- Number(value)——把给定的值转换成数字(可以是整数或浮点数)
- Boolean(value)——把给定的值转换成Boolean型
- String(value)——把给定的值转换成字符串
- parseInt(value) ——把String解析成整数
- parseFloat(value) ——把String解析成number
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内置函数</title>
<script type="text/javascript">
// 将字符串123转成数字
console.log(Number('123') + 1);
console.log(Number('123a') + 1); // NaN
console.log(Number(null) + 1); // 1
console.log(Number(3.14) + 1); // 4.140000000000001
console.log(Number(true) + 1); // 2
console.log(Number(undefined) + 1);// NaN
//在javascript 中，正数，负数就是 true ；0 就是false
console.log("--------------------");
// 没有实际内容的值转成boolean都是false
// 0 "" null NaN undefined转成boolean都是false
console.log(Boolean(-10)); // true
console.log(Boolean("a")); // true
console.log(Boolean("0")); // true
console.log(Boolean(" "));// true
console.log(Boolean(0)); // false
console.log(Boolean(""));// false
console.log(Boolean(null));// false
console.log(Boolean(NaN));// false
console.log(Boolean(undefined));// false
console.log("--------------------");
// String(value)将任意类型的数据转成String;也就是转成'value'
console.log(String(NaN)); // "NaN"
console.log(String(undefined));// 'undefined'
console.log(String(null)); // 'null'
console.log(String(new Object())); // [object Object]
console.log(String(true)); // 'true'
console.log("--------------------");
// parseInt只能提取数字开头的字符串,不是数字开头的就是NaN
console.log(parseInt("123a")); // 123
console.log(parseInt("a123")); // NaN
console.log(parseInt("123.99"));// 123
console.log(parseInt("true"));// NaN
console.log(parseInt("null"));// NaN
console.log(parseInt("undefined"));// NaN
console.log("--------------------");
// parseFloat只能提取数字开头的字符串,不是数字开头的就是NaN
console.log(parseFloat("3.14"));// 3.14
console.log(parseFloat("123"));// 123
console.log(parseFloat("3.14aa"));// 3.14
console.log(parseFloat("a3.14aa")); // NaN
console.log(parseFloat("true"));// NaN
console.log(parseFloat("null"));// NaN
console.log(parseFloat("undefined"));// NaN
</script>
</head>
<body>
</body>
</html>内置函数-编码和解码函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内置函数-编码和解码函数</title>
<script type="text/javascript">
// https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E6%89%8B%E6%9C%BA
var url = "http://www.baidu.com?keyword=手机";
// 编码
var encode = encodeURI(url);
// http://www.baidu.com?keyword=%E6%89%8B%E6%9C%BA
console.log(encode);
// 解码
var decode = decodeURI(encode);
// http://www.baidu.com?keyword=手机
console.log(decode);
</script>
</head>
<body>
</body>
</html>内置函数-isNaN
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内置函数-isNaN</title>
<script type="text/javascript">
var a = 10;
// isNaN() 判断值是不是NaN类型
console.log(isNaN(a)); // false
</script>
</head>
<body>
</body>
</html>弹出框
警告框 alert, 常用。
询问框 prompt返回提示框中的值。
确认框 confirm返回true/false。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>弹出框</title>
<script type="text/javascript">
alert('来了，老弟');
// 返回输入的值
var age = prompt("请输入年龄：");
console.log(age);
// 返回boolean
var b = confirm("确定删除？");
console.log(b);
</script>
</head>
<body>
</body>
</html>自定义对象
方式一:使用{}表示对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义对象_方式一</title>
<script type="text/javascript">
/*
json：javascript对象表示法
所以js中定义对象使用json格式
*/
// var stu = {}
var stu = {
// js中对象的属性可以使用引号,也可以不使用引号
// 属性
'name':'张三',
age:20,
'sex':'男',
// 方法
study:function(){
console.log("好好学习");
}
}
console.log(stu);
console.log(typeof stu);
// 使用对象的属性和方法
// 方式一: 使用点语法
stu.name = '李四';
// console.log(stu.user.name);
console.log(stu.age);
stu.study();
// 方式二: 使用 对象[属性]
// 如果属性名中有特殊符号就可以使用方式二
console.log(stu['name'])
console.log(stu['age'])
//console.log(stu.aa); //undefined
//stu.aa = 'aa'; //说明属性可以动态添加
//console.log(stu.aa); //aa
</script>
</head>
<body>
</body>
</html>方式二：使用new Object()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义对象_方式二</title>
<script type="text/javascript">
// 创建一个空对象,是没有定义属性和方法的
var stu = new Object();
// 随意给空对象定义属性和方法
stu.name = 'zhangsan';
stu.age = 20;
stu.eat = function(){
console.log("吃饭了");
}
console.log(stu);
console.log(stu.name);
stu.eat();
</script>
</head>
<body>
</body>
</html>以上创建对象的两种方式都有一个很大的弊端：属性的值固定了，也就是只能创建一个对象，需要创建多个对象的话，属性和方法需要重复编写。如何解决?使用构造函数创建对象
方式三：使用构造函数创建对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义对象_方式三</title>
<script type="text/javascript">
// 构造函数的规范: 方法名首字母大写
function Student(name,age,sex){
// this不能省略
this.userName = name;
this.age = age;
this.sex = sex;
// 成员方法
this.eat=function(){
console.log("吃啥呢");
}
}
var stu = new Student('张三',20,'男');
console.log(stu.userName);
stu.eat();
</script>
</head>
<body>
</body>
</html>遍历对象
for(var 变量名 in 对象){
// 这里的变量名就是对象的成员名称
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>遍历对象</title>
<script type="text/javascript">
var stu = {
name:'张三',
age:20,
sex:'男'
}
// 遍历对象
for(var prop in stu){
console.log(stu[prop]);
}
</script>
</head>
<body>
</body>
</html>DOM对象-重中之重
DOM: Document Object Model 文档对象模型
HTML DOM 树
在js中将一个html页面当做一个文档对象：document对象
js将html中的标签、属性等也封装成了对应的DOM对象
所以操作DOM对象就是操作HTML页面
获取元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM_获取元素</title>
</head>
<body>
<p id="p1" class="c1" name="a">段落1</p>
<p class="c1">段落2</p>
<p name="a">段落3</p>
<script type="text/javascript">
// 通过id获取元素,返回的是元素的DOM对象
var pELe = document.getElementById("p1");
console.log(pELe);
console.log(typeof pELe); // object
// 操作pEle对象就是操作id是p1的标签
pELe.innerText = 'xyz';
console.log("---------------------");
// 通过类名获取元素,返回的是元素的DOM对象组成的数组
var eles = document.getElementsByClassName("c1");
console.log(eles);
// 通过[索引]获取数组中的元素
console.log(eles[0]);
console.log(typeof eles);
console.log("---------------------");
// 通过标签名称获取元素,返回的是元素的DOM对象组成的数组
var eleList = document.getElementsByTagName("p");
console.log(eleList);
console.log(eleList[0]);
console.log(typeof eleList);
console.log("---------------------");
// 通过name属性获取元素,返回的是元素的DOM对象组成的数组
var elements = document.getElementsByName("a");
console.log(elements);
console.log(elements[0]);
console.log(typeof elements);
</script>
</body>
</html>innerText和innerHTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>innerText和innerHTML</title>
</head>
<body>
<div id="d1">
</div>
<div id="d2">
</div>
<script type="text/javascript">
var divEle01 = document.getElementById("d1");
var divEle02 = document.getElementById("d2");
/*
在js中 dom对象.属性=xxx 就是给属性赋值；
dom对象.属性 就是获取属性的值
*/
// 给元素添加文本内容
// innerText所有内容当成普通字符串,不会识别html标签
divEle01.innerText = '<h1>我爱你，中国</h1>';
// innerHTML 会识别html标签
divEle02.innerHTML = '<h1>我爱你，中国</h1>';
// 获取元素的文本内容
console.log(divEle01.innerText);
console.log(divEle02.innerHTML);
</script>
</body>
</html>注意：
在js中 dom对象.属性=xxx 就是给属性赋值；
dom对象.属性 就是获取属性的值
动态生成表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态生成表格</title>
<style type="text/css">
table{
width: 300px;
/* 折叠边框线 */
border-collapse: collapse;
margin: 0 auto;
}
table,td,th{
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>地址</th>
</tr>
</thead>
<tbody id="content">
</tbody>
<tfoot>
</tfoot>
</table>
<script type="text/javascript">
var students = [
{
name:"张三",
age:20,
sex:'男',
address:"成都"
},
{
name:"李四",
age:21,
sex:'男',
address:"北京"
},
{
name:"韩梅梅",
age:21,
sex:'女',
address:"上海"
},
{
name:"王五",
age:23,
sex:'男',
address:"成都"
}
]
// 获取table
var tbodyEle = document.getElementById("content");
// 数组的长度 = tr的数量
for(var i = 0;i< students.length;i++){
// 创建tr标签
var trEle = document.createElement("tr");
// 将tr标签添加到tbody中
tbodyEle.appendChild(trEle);
// 数组中每个对象的属性数量 = td的数量
var stu = students[i];
for(var prop in stu){
// 创建td标签
var tdEle = document.createElement("td");
// 给td设置文本内容
// td的文本内容 = 对象的属性值
tdEle.innerText = stu[prop];
// 将td标签添加到tr中
trEle.appendChild(tdEle);
}
}
</script>
</body>
</html>DOM事件
事件：就是和元素的交互行为
事件三要素：
事件主体：也就是和哪一个元素交互
事件类型：发生了什么类型的交互，比如说单击、鼠标按下
事件的功能：发生事件后需要完成什么功能
单击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM事件</title>
</head>
<body>
<p id="p1">段落1</p>
<script type="text/javascript">
var pEle = document.getElementById("p1");
/*
pEle 事件主体
onclick 事件类型是click单击事件
onclick是click单击事件的句柄（引用）
onxxx 就是xxx事件的句柄，事件句柄是元素的属性
function() 事件功能
*/
pEle.onclick = function(){
console.log("nihao");
}
</script>
</body>
</html>获取焦点和失去焦点的事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取焦点和失去焦点的事件</title>
<style type="text/css">
#tip{
font-size: 12px;
color: red;
}
.hidden{
display: none;
}
.show(){
display: inline;
}
</style>
</head>
<body>
<form action="#" method="get">
账号：
<input type="text" name="username" id="account" placeholder="请输入5-8位名称"/>
<span id="tip" class="hidden">账号长度不正确</span>
<br>
<br>
密码：
<input type="password" name="password" id="pwd"/>
</form>
<script type="text/javascript">
// 1. 获取账号的input
var nameEle = document.getElementById("account");
var tipEle = document.getElementById("tip");
// 2. 设置失去焦点的事件
nameEle.onblur = function(){
// 失去焦点后获取input的值进行判断
var val = this.value;
if(val.length < 5 || val.length > 8){
// class是js中的关键字,表示类
// className就是标签的class属性
tipEle.className = 'show';
}
}
// 3. 设置获取焦点事件
nameEle.onfocus = function(){
tipEle.className = 'hidden';
}
</script>
</body>
</html>鼠标事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标事件</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="d1">
</div>
<script type="text/javascript">
var div = document.getElementById("d1");
// 鼠标移到某元素之上。
div.onmouseenter = function(){
div.style = "background-color: blue";
}
// 鼠标从某元素移开。
div.onmouseleave = function(){
div.style = "background-color: red";
}
</script>
</body>
</html>事件的另一种写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件的另一种写法</title>
</head>
<body>
<p onclick="show();">段落1</p>
<script type="text/javascript">
function show(){
console.log("hello");
}
</script>
</body>
</html>event事件对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！
注意： 每一个事件中都有event事件对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>event事件对象</title>
</head>
<body>
<p id="p1">段落1</p>
<!-- 这里的实参event名称不能乱写 -->
<p onmousemove="show(event);">段落2</p>
<script type="text/javascript">
var pEle = document.getElementById("p1");
// 这里的event仅仅是一个变量,可以是其他任意的名字
pEle.onclick = function(event){
console.log(event);
// 返回当事件被触发时，鼠标指针的水平和垂直坐标。
console.log(event.clientX +"--" + event.clientY);
}
function show(event){
console.log(event.clientX +"--" + event.clientY);
}
</script>
</body>
</html>阻止事件的默认行为
在html中，有些元素是自带事件的，比如 a标签、submit类型的按钮、reset类型的按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阻止事件的默认行为</title>
</head>
<body>
<!-- 点击超链接标签后控制台输出语句，不跳转页面 -->
<a href="http://www.baidu.com" id="a1">百度一下</a>
<script type="text/javascript">
var aEle = document.getElementById("a1");
// a标签有默认的事件行为（跳转页面）,根据我们的需求需要阻止
aEle.onclick = function(event){
console.log(this.innerText);
// 阻止默认行为
// return false;
// console.log(event.defaultPrevented); // false
// 阻止默认行为
return event.defaultPrevented;
}
</script>
</body>
</html>阻止事件冒泡
父元素和子元素都绑定了事件，此时触发子元素的事件，父元素的事件也被触发，这就是子元素的事件向上
传播给了父元素，造成父元素的事件也被触发了，这叫做事件冒泡。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阻止事件冒泡</title>
<style type="text/css">
#d1 {
width: 200px;
height: 200px;
background-color: red;
}
#d2 {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
</div>
</div>
<script type="text/javascript">
var d1 = document.getElementById("d1");
var d2 = document.getElementById("d2");
d1.onclick = function(){
console.log("fu-----");
}
d2.onclick = function(event){
console.log("zi-----");
// 阻止事件冒泡
event.stopPropagation();
}
</script>
</body>
</html>全选案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全选案例</title>
<style type="text/css">
table{
width: 300px;
margin: 0 auto;
}
table,th,td{
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>
<input type="checkbox" id="all" />
</th>
</tr>
</thead>
<tbody id="content">
<tr>
<td>1001</td>
<td>张三</td>
<td>20</td>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>1002</td>
<td>李四</td>
<td>21</td>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>1003</td>
<td>王五</td>
<td>23</td>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>1004</td>
<td>李磊</td>
<td>22</td>
<td>
<input type="checkbox" />
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var count = 0;// 用来统计每一行被选中的个数
// 全选按钮 联动 每一行的按钮
// 1. 获取全选按钮
var all = document.getElementById("all");
// 获取tbody中的input
var inputList = document.getElementById("content").getElementsByTagName("input");
// 2. 给全选按钮设置单击事件
all.onclick = function(){
// 3. 获取全选按钮的状态
var allState = this.checked;
if(!allState){
count = 0;
}
// 4. 每一行的按钮的状态和全选按钮的状态一致
// 4.1 获取每一行的按钮
for(var i = 0; i < inputList.length;i++){
// 获取每一行的按钮,设置状态和全选按钮的状态一致
inputList[i].checked = allState;
}
}
//每一行的按钮 联动 全选按钮
// 1. 给每一行的按钮添加单击事件
for(var i = 0; i < inputList.length;i++){
// 获取每一行的按钮,添加单击事件
inputList[i].onclick = function(){
if(this.checked){
count++;
}else{
count--;
}
// 判断count和 inputList.length是否相等
// 相等就说明每一行的按钮都选中了
all.checked = (count == inputList.length);
}
}
</script>
</body>
</html>JS常用对象
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用对象</title>
<script type="text/javascript">
var date = new Date();
document.write(date);
document.write("<br/>");
date = new Date(884545786457);
document.write(date);
document.write("<br/>");
date = new Date("2022-10-01");
// document.write(date.toLocaleString());
document.write(date.getFullYear());
document.write("<hr/>");
document.write(Math.round(-3.35)); // -3
document.write("<br/>");
document.write(Math.round(-3.45)); // -3
document.write("<br/>");
document.write(Math.round(-3.55)); // -4
document.write("<hr/>");
document.write(new String("js"));
document.write("<br/>");
document.write("js".concat("java"));
document.write("<hr/>");
// var arr01 = new Array(); // 定义一个长度为0的数组
// var arr01 = new Array(3);// 定义一个长度为3的数组
var arr01 = new Array(1,2,3);// 定义一个初始值为1,2,3的数组
// js中的数组会自动扩容
arr01[0] = 10;
arr01[10] = 100;
// 添加元素
arr01.push(20);
document.write(arr01.pop()); // 删除最后一个元素
document.write("<br/>");
document.write(arr01);
</script>
</head>
<body>
</body>
</html>BOM对象-熟悉
BOM: (Browser Object Model)浏览器对象模型
浏览器在js中对应BOM对象。
BOM包含DOM对象
window对象
window对象代表了整个浏览器窗口
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。 window.alert()/prompt()/confirm()
甚至 HTML DOM 的 document 也是 window 对象的属性之一：
window.document.getElementById(“header”);
与下面的代码相同：
document.getElementById(“header”);
Location对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Location对象</title>
</head>
<body>
<button type="button" onclick="show();">点击</button>
<script type="text/javascript">
function show(){
// http://127.0.0.1:8848/JSDemo/39-Location%E5%AF%B9%E8%B1%A1.html?username=zhangsan&pwd=123456
console.log("protocol=" + window.location.protocol);// http:
console.log("host=" + window.location.host);// 127.0.0.1:8848
console.log("port=" + window.location.port);// 8848
console.log("pathname=" + window.location.pathname);// /JSDemo/39-Location%E5%AF%B9%E8%B1%.html?username=zhangsan&pwd=123456
console.log("search=" + window.location.search);// ?username=zhangsan&pwd=123456
// 跳转到百度
// window.location.href = 'http://www.baidu.com';
// window.location.replace("http://www.bjpowernode.com")
window.location.assign("http://www.bjpowernode.com")
}
</script>
</body>
</html>
History对象
History对象01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>History对象01</title>
</head>
<body>
<a href="40-History对象02.html">History对象02</a>
<button type="button" onclick="next();">前进</button>
<script type="text/javascript">
function next(){
// 调到下一个页面
// history.forward();
history.go(1);
}
</script>
</body>
</html>History对象02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>History对象02</title>
</head>
<body>
<button type="button" onclick="priv();">回退</button>
<script type="text/javascript">
function priv(){
// 返回上一个页面
// history.back();
history.go(-1);
}
</script>
</body>
</html>
定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定时器</title>
<style type="text/css">
.c1 {
width: 200px;
height: 200px;
background-color: red;
}
.c2 {
width: 300px;
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div id="d1" class="c1">
</div>
<script type="text/javascript">
var bool = true;
var div = document.getElementById("d1");
// div -- 2秒后变成蓝色
// var code = setTimeout(function,time) 只会执行一次
// setTimeout(function(){
// div.className='c2';
// },2000);
// setInterval(function,time) 周期性执行一次
var code = setInterval(function() {
if(bool){
div.className = 'c2';
}else{
div.className = 'c1';
}
bool = !bool;
}, 2000);
// clearTimeout()
// 清除定时器
clearInterval(code);
</script>
</body>
</html>eval函数
把JavaScript 字符串参数作为脚本代码来执行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>eval函数</title>
</head>
<body>
<script type="text/javascript">
var json = '{"name":"张三","age":22,"sex":"male"}';
/*
在js中{}除了表示对象外，还是代码块
所以这里直接将json传入eval中，eval函数将{}当做代码块解析
此时需要将 json使用（）括起来表示是一个值，这个值是对象
*/
var obj = eval('('+json+')');
console.log(obj.name);
</script>
</body>
</html>sessionStorage
意为本地会话存储: 值存储进去，如果浏览器关闭，那么这个值就没有了。
sessionStorage存储数据大小最多5M
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sessionStorage</title>
</head>
<body>
<input type="text" id="t1" />
<button type="button" onclick="save();">保存</button>
<button type="button" onclick="get();">获取</button>
<button type="button" onclick="del();">删除</button>
<script type="text/javascript">
var input = document.getElementById("t1");
function save(){
// 存储格式给 kv键值对
sessionStorage.setItem("name",input.value);
}
function get(){
input.value = sessionStorage.getItem("name");
}
function del(){
sessionStorage.removeItem("name");
}
</script>
</body>
</html>localStorage
意为本地存储:值存储进去，如果浏览器不清空或者不调用它本身的删除方法，那么这个值会永久的存在客户端。
localStorage存储数据大小最多10M
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>localStorage</title>
</head>
<body>
<input type="text" id="t1" />
<button type="button" onclick="save();">保存</button>
<button type="button" onclick="get();">获取</button>
<button type="button" onclick="del();">删除</button>
<script type="text/javascript">
var input = document.getElementById("t1");
function save(){
// 存储格式给 kv键值对
localStorage.setItem("name",input.value);
}
function get(){
input.value = localStorage.getItem("name");
}
function del(){
localStorage.removeItem("name");
}
</script>
</body>
</html>
