今日内容
- JS基本语法---->重点
- JS的BOM对象--->window,location
- JS的DOM对象----->重点
- JS的案例------>必须练习
- 表单校验
- 图片轮播
- 二级联动
第一章-JS基础
1.1 JS简介
什么是JS
- JavaScript 是一种客户端脚本语言。运行在客户端浏览器中,每一个浏览器都具备解析 JavaScript 的引擎。
- 脚本语言:不需要编译(直译),就可以被浏览器直接解析执行了。
- JS语言和Java语言对比:
对比 | Java | JS |
---|---|---|
运行环境 | JVM虚拟机 | JS引擎,是浏览器的一部分 |
是否跨平台运行 | 跨平台 | 跨平台 |
语言类型 | 强类型语言 | 弱类型,动态类型语言 |
是否需要编译 | 需要编译,是编译型语言 | 不需要编译,是解释型语言 |
是否区分大小写 | 区分大小写 | 区分大小写 |
JS的作用
具体来说,有两部分作用:
-
JS代码可以操作浏览器:进行网址跳转、历史记录切换、浏览器弹窗等等
-
JS代码可以操作网页标签:操作HTML的标签、标签的属性、样式等等
注意:JS的是在浏览器内存中运行时操作,并不会修改网页源码,所以刷新页面后网页会还原
JS的组成
- ECMAScript(核心):是JS的基本语法规范
- BOM:Browser Object Model,浏览器对象模型,提供了与浏览器进行交互的方法
- DOM:Document Object Model,文档对象模型,提供了操作网页的方法
1.2 JS引入
内部JS
语法
- 在html里增加
<script>
标签,把js代码写在标签体里
<script>
//在这里写js代码
</script>
示例
- 创建html页面,编写js代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js引入方式-内部js</title>
<script>
//操作浏览器弹窗
alert("hello, world");
</script>
</head>
<body>
</body>
</html>
- 打开页面,浏览器会弹窗
外部JS
语法
- 把js代码写在单独的js文件中,js文件后缀名是
.js
- 在HTML里使用
<script>
标签的src属性引入外部js文件
<script src="js文件的路径"></script>
示例
-
创建一个
my.js
文件,编写js代码- 第1步:创建js文件
- 第2步:设置js文件名称
- 第3步:编写js代码
alert("hello, world! 来自my.js");
- 创建一个html,引入
my.js
文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js引入方式-外部js</title>
<!--引入外部的my.js文件-->
<script src="../js/my.js"></script>
</head>
<body>
</body>
</html>
- 打开页面,浏览器会弹窗
注意事项
-
一个
script
标签,不能既引入外部js文件,又在标签体内写js代码。- 错误演示
<script src="../js/my.js"> alert("hello"); </script>
- 正确演示
<script src="../js/my.js"></script> <script> alert("hello"); </script>
1.3 JS小功能和JS调试
小功能
- alert(): 弹出警示框
- console.log(): 向控制台打印日志
- document.write(); 文档打印. 向页面输出内容.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
+ alert(): 弹出警示框
+ console.log(): 向控制台打印日志
+ document.write(); 文档打印. 向页面输出内容.
*/
// alert作用: 1.提示 2.调试代码
// alert("警告");
// console.log(): 1.提示 2.调试代码
// console.log("向控制台输出日志信息....");
// document.write(): 1.可以输出文本 2.可以输出html标签
document.write("Hello,World");
document.write("<h1>标题</h1>");
</script>
</head>
<body>
</body>
</html>
调试
- 按
F12
打开开发者工具 - 找到
Source
窗口,在左边找到页面,如下图- 打断点之后,当代码执行到断点时,会暂停执行
- 在窗口右侧可以查看表达式的值、单步调试、放行等等
- 如果代码执行中出现异常信息,会在控制台
Console
窗口显示出来
- 点击可以定位到异常位置
1.4 JS基本语法
变量
-
JavaScript 是一种弱类型语言,javascript的变量类型由它的值来决定。 定义变量需要用关键字 'var'
-
格式:
var 变量名 = 值;
-
举例:
var num1 = 10; ----->相当于java中的int num1 = 10; var str = "itheima";----->相当于java中的String str = "itheima"; var flag = true; -------->相当于java中boolean flag = true; var date = new Date();--->相当于java中的Date date = new Date(); var num1 = 10,num2 = 20,num3 = 30;---->相当于java中的int num1=10,num2=20,num3=30; 注意: var可以省略不写,建议保留 num1 = 10; str = "itheima"; flag = true; date = new Date();
-
注意:
- var可以省略不写,建议保留
- 最后一个分号可以省略,建议保留
- 定义多个变量可以用","隔开,公用一个‘var’关键字
数据类型
1.五种原始数据类型
数据类型 | 描述 | 示例 |
---|---|---|
number |
数值类型 | 1 , 2 , 3 , 3.14 |
boolean |
布尔类型 | true , false |
string |
字符串类型 | "hello" , 'hello' |
object |
对象类型 | new Date() , null |
undefined |
未定义类型 | var a; |
2.typeof操作符
-
作用: 用来判断变量是什么类型
-
写法:typeof(变量名) 或 typeof 变量名
-
null与undefined的区别:
null: 对象类型,已经知道了数据类型,但对象为空。
undefined:未定义的类型,并不知道是什么数据类型。
3.小练习
- 定义不同的变量,输出类型,
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 需求:定义不同的变量,输出类型
// 定义number类型的变量
var num1 = 10;
var num2 = 3.14;
console.log(typeof num1);// number
console.log(typeof num2);// number
// 定义boolean类型的变量
var flag = true;
console.log(typeof flag);// boolean
// 定义string类型的变量
var str = "itheima";
console.log(typeof str);// string
// 定义object类型的变量
var obj1 = new Date();
var obj2 = null;
console.log(typeof obj1);// object
console.log(typeof obj2);// object
// 定义undefined类型的变量
var v;
console.log(typeof v);// undefined
</script>
</head>
<body>
</body>
</html>
字符串转换成数字类型
- 全局函数(方法),就是可以在JS中任何的地方直接使用的函数,不用导入对象。不属于任何一个对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 字符串--->整数
console.log(parseInt("123"));// 123
console.log(typeof parseInt("123"));// number
// 字符串--->小数
console.log(parseFloat("3.14"));// 3.14
console.log(typeof parseFloat("3.14"));// number
// isNaN:判断是否是一个非数字,如果是非数字就返回true,否则就返回false
console.log(isNaN(10));// false
console.log(isNaN("10"));// false
console.log(isNaN("10A"));// true
console.log(isNaN("abc"));// true
console.log("------------");
// 注意:
console.log(parseInt("123a"));// 123
console.log(typeof parseInt("123a"));// number
console.log(parseInt("12a3"));// 12
console.log(typeof parseInt("12a3"));// number
console.log(parseInt("a123"));// NaN
console.log(parseFloat("3.14A"));// 3.14
console.log(typeof parseFloat("3.14A"));// number
console.log(parseFloat("3.1A4A"));// 3.1
console.log(typeof parseFloat("3.1A4A"));// number
console.log(parseFloat("A3.1A4A"));// NaN
</script>
</head>
<body>
</body>
</html>
运算符
- 关系运算符:> >= < <=,,!=, **=**
- 算术运算符: +,-,*,/,%
- 自增自减: ++,--
- 逻辑运算符: && , || , !
- 赋值运算符: =, +=,-=,*=,/=,%=
- 三元运算符:
- 注意:
- number类型和字符串做-,*,/,%的时候,字符串自动的进行类型转换,前提字符串里面的数值要满足number类型
// -,*,/,%
var num1 = 10;
var str = "20";
console.log(num1 - str);// -10
console.log(num1 * str);// 200
console.log(num1 / str);// 0.5
console.log(num1 % str);// 10
- 除法,保留小数
var i = 2;
var j = 5;
alert(j/i);//2.5
==
比较数值,===
比较数值和类型
var i = 2;
var j = "2";
alert(i==j); // ==比较的仅仅是数值, true
alert(i===j); // ===比较的是数值和类型.false
流程语句
- for\while\do...while循环
for (var i = 0; i < 5; i++) {
document.write("for循环..." + i);
document.write("<br/>");
}
var j = 0;
while (j < 5) {
document.write("while循环..." + j);
document.write("<br/>");
j++;
}
var k = 0;
do {
document.write("do...while循环..." + k);
document.write("<br/>");
k++;
} while (k < 5);
- if... else
var num = 10;
if (num == 10) {
document.write("num=10");
document.write("<br/>");
} else {
document.write("num!=10");
document.write("<br/>");
}
- switch
var str = "java";
switch (str) {
case "php":
document.write("php...");
document.write("<br/>");
break
case "java":
document.write("java...");
document.write("<br/>");
break
case "c++":
document.write("c++...");
document.write("<br/>");
break
default:
document.write("default...");
document.write("<br/>");
break
}
1.5 函数
什么是函数
- 函数: 是被设计为执行特定任务的代码块 ,在被调用时会执行
- 函数类似于Java里的方法,用于封装一些可重复使用的代码块
普通(有名)函数
语法
- 定义普通函数
function 函数名(形参名,形参名,...){
函数体(代码块)
[return 返回值;]
}
注意:
1.小括号中的形参是没有形参类型的,也就是不要写var(写了会报错),只需要直接写形参名即可
2.js中的行数没有重载,如果函数一样,后面的函数会覆盖前面的函数
- 调用普通函数
var result = 函数名(实参列表);
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 定义函数
function f1() {
document.write("无参数无返回值的函数");
document.write("<br/>");
}
function f2(num, str) {
document.write("有参数无返回值的函数,参数1:" + num + ",参数2:" + str);
document.write("<br/>");
}
function f3() {
document.write("无参数有返回值的函数");
document.write("<br/>");
return 10;
}
function f4(num, str) {
document.write("有参数有返回值的函数,参数1:" + num + ",参数2:" + str);
document.write("<br/>");
return "java";
}
// 调用函数
f1();
f2(100, "itheima");
var res1 = f3();
console.log("返回值:" + res1);
var res2 = f4(200, "itcast");
console.log("返回值:" + res2);
// 注意: js函数没有重载,如果函数一样,后面的函数会覆盖前面的函数
function f1(num) {
document.write("无参数无返回值的函数-----后定义,num:"+num);
document.write("<br/>");
}
</script>
</head>
<body>
</body>
</html>
匿名函数
匿名函数,也叫回调函数,类似于Java里的函数式接口里的方法
function (形参列表){
函数体
[return 返回值;]
}
1.6 JS事件
事件介绍
- HTML 事件是发生在 HTML 元素上的“事情”, 是浏览器或用户做的某些事情
- 事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行。
常见事件
属性 | 此事件发生在何时... |
---|---|
onclick | 当用户点击某个对象时调用的事件句柄。 |
ondblclick | 当用户双击某个对象时调用的事件句柄。 |
onchange | 域的内容被改变。 |
onblur | 元素失去焦点。 |
onfocus | 元素获得焦点。 |
onload | 一张页面或一幅图像完成加载。 |
onsubmit | 确认按钮被点击;表单被提交。 |
onkeydown | 某个键盘按键被按下。 |
onkeypress | 某个键盘按键被按住。 |
onkeyup | 某个键盘按键被松开。 |
onmousedown | 鼠标按钮被按下。 |
onmouseup | 鼠标按键被松开。 |
onmouseout | 鼠标从某元素移开。 |
omouseover | 鼠标移到某元素之上。 |
onmousemove | 鼠标被移动。 |
事件绑定
普通函数方式
说白了设置标签的属性
<标签 事件属性="调用js函数"></标签>
属性: 根事件名一致
属性值: 调用js函数代码
匿名函数方式
<script>
标签对象.事件属性 = function(){
//执行一段代码
}
</script>
事件使用
重要的事件
-
点击事件
需求: 每点击一次按钮 弹出hello...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--需求: 每点击一次按钮 弹出hello...-->
<!--普通函数方式绑定事件---通过标签的事件属性-->
<input type="button" value="点击事件1" onclick="f1()"><br/>
<!--匿名函数方式绑定事件-->
<input id="btn" type="button" value="点击事件2"><br/>
</body>
<script>
function f1() {
alert("hello...")
}
// 获得按钮标签
document.getElementById("btn").onclick = function () {
alert("hello,world...")
}
</script>
</html>
-
获得焦点(onfocus)和失去焦点(onblur)
需求:给输入框设置获得和失去焦点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--需求:给输入框设置获得和失去焦点-->
<input type="text" onfocus="f1()" onblur="f2(this)">
</body>
<script>
function f1() {
console.log("获得焦点");
}
function f2(obj) {
console.log("失去焦点,用户输入的数据是:"+obj.value);
}
</script>
</html>
-
内容改变(onchange)
需求: 给select设置内容改变事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--需求: 给select设置内容改变事件-->
<select onchange="f1(this)">
<option value="sz">深圳</option>
<option value="gz">广州</option>
<option value="hz">惠州</option>
<option value="dg">东莞</option>
</select>
</body>
<script>
function f1(obj) {
console.log("下拉框选择的值:"+obj.value);
}
</script>
</html>
- 等xx加载完成(onload) 可以把script放在body的后面/下面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body onload="f1()">
<h1>标题</h1>
</body>
<script>
function f1() {
alert("页面加载完毕....");
}
</script>
</html>
掌握的事件
- 键盘相关的, 键盘按下(onkeydown) 键盘抬起(onkeyup)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--键盘相关的, 键盘按下(onkeydown) 键盘抬起(onkeyup)-->
<input type="text" onkeydown="f1()" onkeypress="f2()" onkeyup="f3()">
</body>
<script>
function f1() {
console.log("键盘按下...");
}
function f2() {
console.log("键盘按住...");
}
function f3() {
console.log("键盘抬起...");
}
</script>
</html>
- 鼠标相关的, 鼠标在xx之上(onmouseover ), 鼠标按下(onmousedown),鼠标离开(onmouseout)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--鼠标相关的, 鼠标在xx之上(onmouseover ), 鼠标按下(onmousedown),鼠标离开(onmouseout)-->
<input type="button" value="按钮" onmouseover="f1()" onmousemove="f2()" onmousedown="f3()" onmouseout="f4()">
</body>
<script>
function f1() {
console.log("鼠标在按钮之上...");
}
function f2() {
console.log("鼠标在按钮之上移动...");
}
function f3() {
console.log("鼠标按下...");
}
function f4() {
console.log("鼠标离开...");
}
</script>
</html>
1.7 正则表达式
正则表达式概述
正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符、及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑。
用我们自己的话来说: 正则表达式用来校验字符串是否满足一定的规则的公式
正则表达式的语法
创建对象
- 对象形式:
var reg = new RegExp("正则表达式")
- 直接量形式:
var reg = /^正则表达式$/;
常用函数
方法 | 描述 | 参数 | 返回值 |
---|---|---|---|
boolean test(string) |
校验字符串的格式 | 要校验的字符串 | boolean,校验通过返回true |
常见正则表达式规则
符号 | 作用 |
---|---|
\d | 数字 |
\D | 非数字 |
\w | 单词:a-zA-Z0-9_ |
\W | 非单词 |
. | 通配符,匹配任意字符 |
匹配n次 | |
大于或等于n次 | |
在n次和m次之间 | |
+ | 1~n次 |
* | 0~n次 |
? | 0~1次 |
^ | 匹配开头 |
$ | 匹配结尾 |
[a-zA-Z] | 英文字母 |
[a-zA-Z0-9] | 英文字母和数字 |
[xyz] | 字符集合, 匹配所包含的任意一个字符 |
使用示例
需求:
- 出现任意数字3次
- 只能是英文字母的, 出现6~10次之间
- 只能由英文字母和数字组成,长度为4~16个字符,并且以英文字母开头
- 手机号码: 以1开头, 第二位是3,4,5,6,7,8,9的11位数字
步骤:
- 创建正则表达式
- 调用test()方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 1. 出现任意数字3次
var reg = /^\d{3}$/;
console.log(reg.test("123"));// true
console.log(reg.test("12a"));// false
console.log(reg.test("1234"));// false
console.log("----------");
// 2. 只能是英文字母的, 出现6~10次之间
var reg1 = /^[a-zA-Z]{6,10}$/;
console.log(reg1.test("abcdefg"));// true
console.log(reg1.test("abc1defg"));// false
console.log("----------");
// 3. 只能由英文字母和数字组成,长度为4~16个字符,并且以英文字母开头
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
console.log(reg2.test("abcdefg"));// true
console.log(reg2.test("1abc1defg"));// false
console.log("----------");
// 4. 手机号码: 以1开头, 第二位是3,4,5,6,7,8,9的11位数字
var reg3 = /^1[3456789]\d{9}$/;
console.log(reg3.test("13566668888"));// true
console.log(reg3.test("135666688889"));// false
console.log(reg3.test("1356666888"));// false
console.log(reg3.test("135666688a8"));// false
console.log(reg3.test("2356666888"));// false
console.log("----------");
</script>
</head>
<body>
</body>
</html>
1.8 内置对象之Array数组【重点】
创建数组对象
语法
var arr = new Array(size)
var arr = new Array(element1, element2, element3, ...)
var arr = [element1, element2, element3, ...];
数组的特点
- 数组中的每个元素可以是任意类型
- 数组的长度是可变的,更加类似于Java里的集合
List
示例
- 创建数组,并把数组输出到浏览器控制台上
- 说明:把数据输出到控制台:
console.log(value)
- 说明:把数据输出到控制台:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//* `var arr = new Array(size)`
// * `var arr = new Array(element1, element2, element3, ...)`
// * `var arr = [element1, element2, element3, ...];`
// 创建一个长度为3的数组
var arr1 = new Array(3);
arr1[0] = "php";
arr1[1] = "java";
arr1[2] = "c++";
arr1[3] = "go";
for (var i = 0; i < arr1.length; i++) {
console.log(arr1[i]);
}
console.log("------------");
// 创建数组的同时赋值
var arr2 = new Array("110","120","119");
for (var i = 0; i < arr2.length; i++) {
console.log(arr2[i]);
}
console.log("------------");
// 直接创建数组并赋值
var arr3 = ["深圳","广州","惠州","东莞"];
for (var i = 0; i < arr3.length; i++) {
console.log(arr3[i]);
}
</script>
</head>
<body>
</body>
</html>
数组常见的函数
API介绍
concat(arr) 连接两个或更多的数组,并返回结果。
join(str) 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
reverse() 颠倒数组中元素的顺序。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// concat(arr) 连接两个或更多的数组,并返回结果。
// join(str) 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
// reverse() 颠倒数组中元素的顺序。
var arr1 = new Array(3);
arr1[0] = "php";
arr1[1] = "java";
arr1[2] = "c++";
var arr2 = ["深圳","广州","惠州","东莞"];
// 数组拼接
var arr = arr1.concat(arr2);
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
// 数组元素拼接
var s = arr1.join("-");
console.log(s);
// 数组元素反转
var arr3 = arr1.reverse();
for (var i = 0; i < arr3.length; i++) {
console.log(arr3[i]);// c++,java,php
}
console.log("----------");
for (var i = 0; i < arr1.length; i++) {
console.log(arr1[i]);// c++,java,php
}
</script>
</head>
<body>
</body>
</html>
二维数组
- 数组里面再放数组 就是二维数组
- 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 创建二维数组
// 方式1:
var arr1 = new Array(3);
arr1[0] = ["深圳","广州","惠州","东莞"];
arr1[1] = ["长沙","郴州","张家界","衡阳"];
arr1[2] = ["瑞金","井冈山","南昌","九江"];
// 方式2:
var arr2 = new Array( ["深圳","广州","惠州","东莞"],["长沙","郴州","张家界","衡阳"], ["瑞金","井冈山","南昌","九江"]);
// 方式3:
var arr3 = [["深圳","广州","惠州","东莞"],["长沙","郴州","张家界","衡阳"], ["瑞金","井冈山","南昌","九江"]];
// 遍历
for (var i = 0; i < arr1.length; i++) {
var arr = arr1[i];
for (var j = 0; j < arr.length; j++) {
console.log(arr[j]);
}
console.log("-----");
}
console.log("--------------------------");
for (var i = 0; i < arr2.length; i++) {
var arr = arr2[i];
for (var j = 0; j < arr.length; j++) {
console.log(arr[j]);
}
console.log("-----");
}
console.log("--------------------------");
for (var i = 0; i < arr3.length; i++) {
var arr = arr3[i];
for (var j = 0; j < arr.length; j++) {
console.log(arr[j]);
}
console.log("-----");
}
console.log("--------------------------");
</script>
</head>
<body>
</body>
</html>
1.9 内置对象之-Date日期
创建日期对象
语法
-
创建当前日期:
var date = new Date()
-
创建指定日期:
var date = new Date(年, 月, 日)
注意:月从0开始,0表示1月
-
创建指定日期时间:
var date = new Date(年, 月, 日, 时, 分, 秒)
注意:月从0开始,0表示1月
日期常用方法
API介绍
方法 | 描述 |
---|---|
Date() | 返回当日的日期和时间。 |
getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 |
getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6)。 |
getMonth() | 从 Date 对象返回月份 (0 ~ 11)。 |
getFullYear() | 从 Date 对象以四位数字返回年份。 |
getHours() | 返回 Date 对象的小时 (0 ~ 23)。 |
getMinutes() | 返回 Date 对象的分钟 (0 ~ 59)。 |
getSeconds() | 返回 Date 对象的秒数 (0 ~ 59)。 |
getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999)。 |
getTime() | 返回 1970 年 1 月 1 日至今的毫秒数。 |
parse() | 返回1970年1月1日午夜到指定日期(字符串)的毫秒数。 |
setDate() | 设置 Date 对象中月的某一天 (1 ~ 31)。 |
setMonth() | 设置 Date 对象中月份 (0 ~ 11)。 |
setFullYear() | 设置 Date 对象中的年份(四位数字)。 |
setYear() | 请使用 setFullYear() 方法代替。 |
setHours() | 设置 Date 对象中的小时 (0 ~ 23)。 |
setMinutes() | 设置 Date 对象中的分钟 (0 ~ 59)。 |
setSeconds() | 设置 Date 对象中的秒钟 (0 ~ 59)。 |
setMilliseconds() | 设置 Date 对象中的毫秒 (0 ~ 999)。 |
setTime() | 以毫秒设置 Date 对象。 |
toLocaleString() | 根据本地时间格式,把 Date 对象转换为字符串。 |
3.1.2示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 创建当前日期对象
var date1 = new Date();
console.log("当前的日期对象:" + date1);
// 创建1999-10-11日期对象
var date2 = new Date(1999,9,11);
console.log("1999-10-11的日期对象:" + date2);
// 创建1999-10-11 10:11:12日期对象
var date3 = new Date(1999,9,11,10,11,12);
console.log("1999-10-11 10:11:12的日期对象:" + date3);
console.log("----------------");
console.log("当前的年:" + date1.getFullYear());
console.log("当前的月:" + date1.getMonth());
console.log("当前的日:" + date1.getDate());
console.log("当前的时:" + date1.getHours());
console.log("当前的分:" + date1.getMinutes());
console.log("当前的秒:" + date1.getSeconds());
console.log("当前的毫秒:" + date1.getMilliseconds());
console.log("当前日期对应的字符串:" + date1.toLocaleString());
console.log("当前日期对应的字符串:" + date1.toLocaleDateString());
console.log("当前日期对应的字符串:" + date1.toLocaleTimeString());
document.write(date1.toLocaleString());
</script>
</head>
<body>
</body>
</html>
第二章-JS的BOM
2.1 JS的BOM
概述
Browser Object Model ,浏览器对象模型. 为了便于对浏览器的操作,JavaScript封装了对浏览器中各个对象,使得开发者可以方便的操作浏览器中的各个对象。
BOM里面的五个对象
window: 窗体对象
alert() 显示带有一段消息和一个确认按钮的警告框
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框,返回选择的结果,确定(true),取消(false)
setInterval('函数名()',time) 按照指定的周期(以毫秒计)来调用函数或计算表达式
setTimeout('函数名()',time) 在指定的毫秒数后调用函数或计算表达式
clearInterval() 取消由 setInterval() 设置的 Interval()。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// alert() 显示带有一段消息和一个确认按钮的警告框
// window.alert("弹出警告框");
// alert("弹出警告框");
// confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框,返回选择的结果,确定(true),取消(false)
/*var flag = confirm("您确定要删除吗?");
if (flag){
document.write("确定删除")
} else{
document.write("取消删除!")
}*/
// setInterval('函数名()',time) 按照指定的周期(以毫秒计)来调用函数或计算表达式
/*setInterval("f1()",200);
function f1() {
console.log("hello world");
}*/
// setTimeout('函数名()',time) 在指定的毫秒数后调用函数或计算表达式
/*setTimeout("f2()",2000);
function f2() {
console.log("f2一次性定时器");
}*/
// clearInterval() 取消由 setInterval() 设置的 Interval()。
// clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
</script>
</head>
<body>
<input type="button" value="启动循环定时器" onclick="start()">
<input type="button" value="关闭循环定时器" onclick="end()">
</body>
<script>
var interval;
function start() {
interval = setInterval("f1()",1000);
}
function f1() {
console.log("hello world");
}
function end() {
clearInterval(interval);
}
</script>
</html
navigator:浏览器导航对象【了解】
属性 | 作用 |
---|---|
appName | 返回浏览器的名称 |
appVersion | 返回浏览器的平台和版本信息 |
screen:屏幕对象【了解】
方法 | 作用 |
---|---|
width | 返回显示器屏幕的分辨率宽度 |
height | 返回显示屏幕的分辨率高度 |
history:历史对象【了解】
方法 | 作用 |
---|---|
back() | 加载 history 列表中的前一个 URL |
forword() | 加载 history 列表中的下一个 URL |
go() | 加载 history 列表中的某个具体页面,(-1上一个页面,1前进一个页面) |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="04_历史对象b页面.html">从a页面前进到b页面</a>
<input type="button" value="前进到下一个页面" onclick="f1()">
</body>
<script>
function f1() {
// history.forward();
history.go(1);
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
</script>
</head>
<body>
<a href="04_历史对象a页面.html">从b页面回退到a页面</a>
<input type="button" value="回退到上一个页面" onclick="f2()">
</body>
<script>
function f2() {
// history.back();
history.go(-1);
}
</script>
</html>
location:当前路径信息
属性 | 作用 |
---|---|
host | 设置或返回主机名和当前 URL 的端口号 |
href | 设置或返回完整的 URL |
port | 设置或返回当前 URL 的端口号 |
location.href; 获得路径
location.href = "http://www.baidu.com"; 设置路径,跳转到百度页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
console.log("ip地址和端口号:"+location.host);
console.log("url路径:"+location.href);
console.log("端口号:"+location.port);
location.href = "http://www.itheima.com";
</script>
</head>
<body>
</body>
</html>
第三章-JS的DOM
3.1 DOM介绍
1. 什么是dom
- DOM:Document Object Model,文档对象模型。是js提供的,用来访问网页里所有内容的(标签,属性,标签的内容)
2. 什么是dom树
- 当网页被加载时,浏览器会创建页面的DOM对象。DOM对象模型是一棵树形结构:网页里所有的标签、属性、文本都会转换成节点对象,按照层级结构组织成一棵树形结构。
- 整个网页封装成的对象叫
document
- 标签封装成的对象叫
Element
- 属性封装成的对象叫
Attribute
- 文本封装成的对象叫
Text
- 整个网页封装成的对象叫
一切皆节点, 一切皆对象
3.2 操作标签
获取标签
document.getElementById(id) 根据id获取标签 返回值:Element对象
document.getElementsByTagName(tagName) 根据标签名称获取一批标签 返回值:Element类数组
document.getElementsByClassName(className) 根据class属性值获取一批标签 返回值:Element类数组
document.getElementsByName(name) 根据标签name属性值获取一批标签 返回值:Element类数组
<body>
<input id="inputId1" type="text" value="admin"><br/>
<input id="inputId2" type="password" value="123456"><br/>
<input type="text" class="c1"><br/>
<input type="text" class="c1"><br/>
<input type="text" class="c1"><br/>
<input type="text" class="c1"><br/>
<input type="checkbox" name="hobby"> 篮球<br/>
<input type="checkbox" name="hobby"> 足球<br/>
<input type="checkbox" name="hobby"> 敲代码<br/>
</body>
<script>
// 获取第一个文本输入框
var inputE = document.getElementById("inputId1");
console.log("值:"+inputE.value);
// 获取所有的input标签
var inputArr1 = document.getElementsByTagName("input");
console.log(inputArr1.length);// 9
// 获取class属性值为c1的input标签
var inputArr2 = document.getElementsByClassName("c1");
console.log(inputArr2.length);// 4
// 获取name属性值为hobby的input标签
var inputArr3 = document.getElementsByName("hobby");
console.log(inputArr3.length);// 3
</script>
操作标签
方法 | 描述 | 返回值 |
---|---|---|
document.createElement(tagName) |
创建标签 | Element 对象 |
parentElement.appendChild(sonElement) |
插入标签 | |
element.remove() |
删除标签 | |
document.createTextNode() |
创建文本 |
<body>
<p id="pId">段落标签</p>
<input type="button" value="添加font标签到p标签中" onclick="addElement()">
<input type="button" value="删除p标签" onclick="removeElement()">
</body>
<script>
// 获取p标签对象
var pE = document.getElementById("pId");
function addElement() {
// 创建font标签
var fontE = document.createElement("font");// <font></font>
// 创建文本对象
var text = document.createTextNode("字体标签");// 字体标签
// 把文本对象添加到font标签中
fontE.appendChild(text);// <font>字体标签</font>
// 把font标签对象添加到p标签中
pE.appendChild(fontE);
}
function removeElement() {
// 删除p标签
pE.remove();
}
</script>
3.4 操作标签体[重点]
语法
- 获取标签体内容:
标签对象.innerHTML
- 设置标签体内容:
innerHTML
是覆盖式设置,原本的标签体内容会被覆盖掉;标签对象.innerHTML = "新的HTML代码";
- 支持标签的 可以插入标签, 设置的html代码会生效;
标签对象.innerHTML += "新的HTML代码";
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="pId">段落标签</p>
<input type="button" value="获取p标签中的内容" onclick="get()">
<input type="button" value="添加font标签到p标签中" onclick="addElement()">
</body>
<script>
function get() {
// 1.获取p标签对象
var pElement = document.getElementById("pId");
// 2.获取p标签中的内容
console.log(pElement.innerHTML);
}
function addElement() {
// 1.获取p标签对象
var pElement = document.getElementById("pId");
// 2.添加font标签到p标签中
// pElement.innerHTML = "<font>字体标签</font>";
pElement.innerHTML += "<font color='red'>字体标签</font>";
}
</script>
</html>
3.5 操作属性
- 每个标签
Element
对象提供了操作属性的方法
方法名 | 描述 | 参数 |
---|---|---|
getAttribute(attrName) |
获取属性值 | 属性名称 |
setAttribute(attrName, attrValue) |
设置属性值 | 属性名称, 属性值 |
removeAttribute(attrName) |
删除属性 | 属性名称 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="../img/a.gif" id="imgId">
<input type="button" value="获取img标签src属性的值" onclick="f1()">
<input type="button" value="修改img标签src属性的值" onclick="f2()">
<input type="button" value="删除img标签src属性" onclick="f3()">
</body>
<script>
// 获取img标签对象
var imgE = document.getElementById("imgId");
function f1() {
console.log("img标签src属性的值:"+imgE.getAttribute("src"));
}
function f2() {
imgE.setAttribute("src","../img/b.jpg");
}
function f3() {
imgE.removeAttribute("src");
}
</script>
</html>
第四章-JS案例
案例-使用JS完成表单的校验
1. 案例需求
- 课堂完成: 用户名校验
- 课后完成: 手机号码,电子邮箱校验
2.思路分析
1.为用户名输入框绑定获取焦点和失去焦点事件
2.获取焦点事件的函数实现:
2.1 获取span标签对象
2.2 往span标签对象中设置提示信息
3.失去焦点事件的函数实现:
3.1 获得用户输入的用户名
3.2 创建校验用户名的正则表达式
3.3 调用test函数进行校验
3.4 根据校验结果,显示提示信息到span标签中
3.代码实现
1.为username文本输入框绑定获取焦点和失去焦点事件
2.js代码
<script>
// 获取span标签对象
var spanE = document.getElementById("usernamespan");
// 获取焦点事件
function showTips() {
// 往span标签对象中设置提示信息
spanE.innerHTML = "以字母开头,由数字和英文字母组成,4-16位";
}
function checkUsername(obj) {
//3.1 获得用户输入的用户名
var username = obj.value;
//3.2 创建校验用户名的正则表达式
var reg = /^[a-zA-Z][A-Za-z0-9]{3,15}$/;
//3.3 调用test函数进行校验
var flag = reg.test(username);
//3.4 根据校验结果,显示提示信息到span标签中
if (flag){
spanE.innerHTML = "<img src='img/gou.png' width='10px' height='10px'>";
} else{
spanE.innerHTML = "<font color='red'>用户名输入格式不对</font>";
}
}
</script>
做一下验证手机号码,email格式 var reg = /^([a-zA-Z]|[0-9])(\w|-)+@[a-zA-Z0-9]+.([a-zA-Z]{2,4})$/;
4,小结
- 事件,函数,正则表达式...
案例-使用JS完成图片轮播效果
1.需求分析
- 实现每过3秒中切换一张图片的效果,一共3张图片,当显示到最后1张的时候,再次显示第1张。
2.思路分析
1.设置一个循环定时器(每隔3s调用一个函数changeImg)
2.在changeImg函数中,获得img标签,然后修改img标签的src属性
3.代码实现
<script>
// 设置一个循环定时器,每隔3秒调用changeImg函数
setInterval("changeImg()",3000);
var i = 1;
function changeImg() {
// 改变i的值
i++;
if (i > 3){
i=1;
}
// 1.获取img标签对象
var imgE = document.getElementById("imgId");
// 2.修改img标签对象的src属性值
imgE.setAttribute("src","../img/banner_"+i+".jpg");
}
</script>
4.小结
- 定时任务
setInterval("函数名()", time);
- 操作属性
setAttribute("属性名","属性值")
案例-JS控制二级联动
1.需求分析
- 在注册页面添加籍贯,左边是省份的下拉列表,右边是城市的下拉列表.右边的select根据左边的改变而更新数据
2.思路分析
1.创建页面,含有2个下拉框,分别表示省份和城市
2.为省份下拉框绑定一个内容改变事件
3.内容改变事件函数的实现:
3.1 获得选择的省份
3.2 获得城市下拉框对象
3.3 根据选择的省份获取对应的城市信息
3.4 循环遍历城市信息
3.5 把遍历出来的城市添加到城市下拉框中
3.代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
籍贯: <select onchange="changeCity(this)">
<option value="-1">-请选择-</option>
<option value="0">广东</option>
<option value="1">湖南</option>
<option value="2">江西</option>
</select>
<select id="cityId">
<option>-请选择-</option>
</select>
</body>
<script>
var arr1 = new Array(3);
arr1[0] = ["深圳", "广州", "惠州", "东莞"];
arr1[1] = ["长沙", "郴州", "张家界", "衡阳"];
arr1[2] = ["瑞金", "井冈山", "南昌", "九江"];
function changeCity(obj) {
// 3.1 获得选择的省份
var province = obj.value;
// 3.2 获得城市下拉框对象
var cityE = document.getElementById("cityId");
// 清空城市下拉框中的选项
// cityE.innerHTML = "";
cityE.innerHTML = "<option>-请选择-</option>";
if (province > -1){
// 3.3 根据选择的省份获取对应的城市信息
var citysArr = arr1[province];
// 3.4 循环遍历城市信息
for (var i = 0; i < citysArr.length; i++) {
// 3.5 把遍历出来的城市添加到城市下拉框中
// 3.5.1 创建option标签对象
var optionE = document.createElement("option");
// 3.5.2 创建城市名称的文本对象
var text = document.createTextNode(citysArr[i]);
// 3.5.3 把城市名称添加到option标签中
optionE.appendChild(text);
// 3.5.4 把option标签添加到城市下拉框中
cityE.appendChild(optionE);
}
}
}
</script>
</html>
4.小结
- 内容改变事件
<select onchange="函数()"></select>
- 二维数组
- innerHTML
- 会把前面的内容覆盖掉
- 支持标签的插入
- dom
- 父节点.appendChild(子节点)
- document.createElement()
- document.createTextNode()
总结
必须练习:
1.课堂上三个js案例独立完成
- 了解js的作用
- JS代码可以操作浏览器:进行网址跳转、历史记录切换、浏览器弹窗等等
- JS代码可以操作网页:操作HTML的标签、标签的属性、样式等等
注意:JS的是在浏览器内存中运行时操作,并不会修改网页源码,所以刷新页面后网页会还原
- 能够在HTML里引入js
内联方式:在html里增加<script>标签,把js代码写在标签体里
外联方式:把js代码写在单独的js文件中,js文件后缀名是.js
在HTML里使用<script>标签引入外部js文件
- 能够使用浏览器开发者工具调试js代码
F12
- 掌握js的基本语法
变量:var 变量名 = 值;
数据类型: 数值类型,布尔类型,字符串类型,对象类型,未定义类型
运算符:
/ 会取小数;
数值和字符串可以-,*,/,%操作,字符串会自动转换为数值;
== 比较值是否相等
=== 比较值和类型都是否相等
循环\控制语句
循环语句,条件判断语句(if,switch)
- 能够定义和调用函数
普通函数:
function 函数名(形参列表){
函数体
[return 返回值;]
}
注意:形参不要写var
匿名函数:
function (形参列表){
函数体
[return 返回值;]
}
- 能够使用js的内置对象
Date日期对象,Array数组对象,常用函数
- 能够绑定js事件
方式一: <标签 属性="js代码,调用函数"></标签>
方式二: <script>
标签对象.事件属性 = function(){
//执行一段代码
}
</script>
- 能够使用正则表达式校验字符串格式
var reg = /^表达式$/;
test(str);
- 能够使用js的bom操作浏览器
windows,navigator,screen,history,location
- 能够使用js的dom操作网页
获取标签
document.getElementById(id) 根据id获取标签 返回值:Element对象
document.getElementsByName(name) 根据标签name获取一批标签 返回值:Element类数组
document.getElementsByTagName(tagName) 根据标签名称获取一批标签 返回值:Element类数组
document.getElementsByClassName(className) 根据类名获取一批标签 返回值:Element类数组
操作标签
document.createElement(tagName) 创建标签 Element对象
parentElement.appendChild(sonElement) 插入标签
element.remove() 删除标签
document.createTextNode()创建文本
操作标签体
- 获取标签体内容:标签对象.innerHTML
- 设置标签体内容:标签对象.innerHTML = "新的HTML代码";
操作属性
1. getAttribute(attrName) 获取属性值
2. setAttribute(attrName, attrValue) 设置属性值
3. removeAttribute(attrName) 删除属性