javaScript
一、 JavaScript 概述
1. 什么是JavaScript
1) JS 介绍
简称JS,是一种浏览器解释型语言,嵌套在HTML文件中交给浏览器解释执行。主要用来实现网页的动态效果,用户交互及前后端的数据传输等。
2) JS 组成
核心语法 -ECMAScript 规范了JS的基本语法
浏览器对象模型 -BOM
Browser Object Model,提供了一系列操作浏览器的方法
文档对象模型 -DOM
Document Object Model ,提供了一系列操作的文档的方法
2. 使用方式
元素绑定事件
事件 :指用户的行为(单击,双击等)或元素的状态(输入框的焦点状态等)
事件处理:元素监听某种事件并在事件发生后自动执行事件处理函数。
常用事件:onclick (单击事件)
语法 :将事件名称以标签属性的方式绑定到元素上,自定义事件处理。 html
<!--实现点击按钮在控制台输出-->
<button onclick="console.log('Hello World');">点击</button>
文档内嵌。使用标签书写 JS 代码
语法 : html
<script type="text/javascript">
alert("网页警告框");
</script>
注意 :标签可以书写在文档的任意位置,书写多次,一旦加载到script标签就会立即执行内部的JS代码,因此不同的位置会影响代码最终的执行效果
外部链接
创建外部的JS文件 XX.js,在HTML文档中使用引入 html
<script src="index.js"></script>
注意 :既可以实现内嵌 JS 代码,也可以实现引入外部的 JS 文件,但是只能二选一。
JS 输入语句
alert(""); 普通的网页弹框
prompt(""); 接收用户输入的弹框,返回用户输入的内容
console.log(); 控制台输出,多用于代码调试
document.write("Hello");实现在动态在网页中写入内容。
在使用事件方式写入时,会重写网页内容
可以识别HTML标签,脚本代码可以在文档任何地方书写,如果是普通写入(不涉及事件),区分代码的书写位置,在当前位置中插入,如果是在head中嵌入,内容会作为body的首行内容显示
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> console.log("hello world"); document.write("<h1>动态添加</h1>"); </script> <!--使用src属性引入外部的JS文件--> <script src="index.js"> console.log("哈哈哈"); </script> </head> <body> <!--元素绑定事件 网页弹框: alert("")网页警告框 --> <h1 onclick="document.write('<h1>哈哈</h1>');">点击</h1> <!--通过script标签书写JS语句--> <script> //单行注释 /* 多行注释 */ console.log("控制台输出"); //带有输入框的弹框 //prompt("请输入姓名"); document.write("<h1>动态添加</h1>"); </script> </body> </html>
二、基础语法
1. 语法规范
JS是由语句组成,语句由关键字,变量,常量,运算符,方法组成.分号可以作为语句结束的标志,也可以省略
JS严格区分大小写
注释语法
单行注释使用 //
多行注释使用 /* */
2. JS的变量与常量
1) 变量
作用 : 用于存储程序运行过程中可动态修改的数据
语法 : 使用关键var声明,自定义变量名 javascript
var a; //变量声明
a = 100; //变量赋值
var b = 200; //声明并赋值
var m,n,k; //同时声明多个变量
var j = 10,c = 20; //同时声明并赋值多个变量
命名规范 :
变量名,常量名,函数名,方法名自定义,可以由数字,字母,下划线,$组成,禁止以数字开头
禁止与关键字冲突(var const function if else for while do break case switch return class)
变量名严格区分大小写
变量名尽量见名知意,多个单词组成采用小驼峰,例如:"userName"
使用注意 :
变量如果省略var关键字,并且未赋值,直接访问会报错
变量使用var关键字声明但未赋值,变量初始值为undefined
变量省略var关键字声明,已被赋值,可正常使用.影响变量作用域
2) 常量
作用 : 存储一经定义就无法修改的数据
语法 : 必须声明的同时赋值
javascript
const PI = 3.14;
注意 :
常量一经定义,不能修改,强制修改会报错
命名规范同变量,为了区分变量,常量名采用全大写字母
操作小数位
toFixed(n); 保留小数点后 n 位
使用 :
javascript
var num = 3.1415926;
//保留当前变量小数点后两位
var res = num.toFixed(2);
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> //1.变量 var a = 100; var b; b = 10.5; var c = 1,d = 2,e = "hi"; var uname,age; uname = "王老板"; age = 30; console.log(a,b,c); console.log(uname); var gender; /*变量声明未赋值时,默认为undefined*/ console.log(gender); /*访问未声明,未赋值的变量,会报错*/ //console.log(m); /*省略var关键字定义变量,一律是全局变量*/ n = 1000; console.log(n); //2.常量,一经定义就不能修改 const PI = 3.14; //PI = 3.14; //自定义半径,结合常量PI,计算圆的周长和面积 var r = 10; var c1 = PI * r * 2; var s = PI * r * r; //保留n位小数 toFixed(n) c1 = c1.toFixed(2); console.log(c1); console.log(s); </script> </head> <body> </body> </html>
3. 数据类型
1) 基本数据类型(简单数据类型)
number 数值类型
整数
十进制表示 javascript
var a = 100;
八进制表示
以0为前缀 javascript
var b = 021; //结果为十进制的 17
十六进制
以0x为前缀 javascript
var c = 0x35;//结果为十进制的 53
使用 : 整数可以采用不同进制表示,在控制台输出时一律会按照十进制输出
小数
小数点表示 javascript
var m = 1.2345;
科学计数法
例 : 1.5e3
e表示10为底,e后面的数值表示10的次方数
1.5e3 等价于 1.5 * 10(3)
string 字符串类型
字符串 : 由一个或多个字符组成,使用""或''表示,每一位字符都有对应的Unicode编码
var s = "100";
var s1 = "张三";
boolean 布尔类型
只有真和假两个值,布尔值与number值可以互相转换。true 为 1,false 为 0
javascript
var isSave = true;
var isChecked = false;
undefined
特殊值,变量声明未赋值时显示undefined javascript
var a;
console.log(a);//undefined
null 空类型
解除对象引用时使用null,表示对象为空
2) 引用数据类型
主要指对象,函数等
3) 检测数据类型
typeof 变量或表达式
typeof (变量或表达式)
var n = "asda";
console.log(typeof n);//string
console.log(typeof(n));//string
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> //1.number var a = 100; //八进制表示整数,以0为前缀 var b = 063; console.log(b); //十六进制表示整数,以0x为前缀 var c = 0x63; console.log(c); var m = 1.5; /*科学计数法,以10为低,3表示次方数*/ var n = 1.5e3;//1.5*10(3) console.log(n,typeof n); //2.string var s1 = "阿泽"; var s2 = "32"; console.log(s1,s2); //3.Boolean var flag = false; var flag2 = "false"; console.log(flag,typeof flag, flag2,typeof flag2); //4.特殊值 undefined var k; console.log(k,typeof k); //5.特殊值 null var obj = null; console.log(obj,typeof obj); //typeof运算符,用于检测变量的数据类型 </script> </head> <body> </body> </html>
4. 数据类型转换
不同类型的数据参与运算时,需要转换类型
1) 强制类型转换
转换字符串类型
方法 : toString()
返回转换后的字符串 javascript
var a = 100;
a = a.toString(); //"100"
var b = true;
b = b.toString(); //"true"
转换number类型
Number(param)
参数为要进行数据类型转换的变量或值,返回转换后的结果:
如果转换成功,返回number值
如果转换失败,返回NaN,(Not a Number),只要数据中存在非number字符,一律转换失败,返回 NaN
parseInt(param)
参数为要解析的数据
作用 : 从数据中解析整数值
过程 :
1. 如果参数为非字符串类型,会自动转成字符串
2. 从左向右依次对每一位字符转number,转换失败则停止向后解析,返回结果
parseFloat(param)
作用 : 提取number值,包含整数和小数部分
2) 隐式类型转换(自动转换)
当字符串与其他数据类型进行"+"运算时,表示字符串的拼接,不再是数学运算
转换规则 :将非字符串类型的数据转换成字符串之后进行拼接,最终结果为字符串
其他情况下,一律将操作数转number进行数学运算
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> //1.强制类型转换 //1)转字符串 var a = 100; var b = true; var a1 = a.toString(); var b1 = b.toString(); console.log(a1,typeof a1); console.log(b1,typeof b1); //2)转number /*整体转number,使用Number()*/ var s1 = "101"; var s2 = "101a"; var s3 = true; var s4 = "true"; var s5 = null; var s6; console.log(Number(s1),s1); console.log(Number(s2),s2); console.log(Number(s3),s3); console.log(Number(s4),s4); console.log(Number(s5),s5); console.log(Number(s6),s6); /*提取字符串中的number部分: parseInt(n) parseFloat(n) */ console.log(parseInt(35.5)); console.log(parseInt("35.5")); console.log(parseInt("35a")); console.log(parseInt("a35.5")); console.log(parseInt(true)); console.log(parseInt("true")); console.log(parseFloat("35.5.6")); //3)转Boolean /*除"零"值以外,其他数据都为真,只有"零"值为假*/ console.log(Boolean(1)); console.log(Boolean("1")); console.log(Boolean(" ")); console.log(Boolean("0")); /*以下为"零"值*/ console.log(Boolean(0)); console.log(Boolean(0.0)); console.log(Boolean("")); console.log(Boolean(null)); console.log(Boolean(undefined)); console.log(Boolean(NaN)); //2.自动类型转换(以数学运算为例:+ - * / %) var r1 = "小泽" + "Maria"; var r2 = "小泽" + 31;//"小泽31" var r3 = "小泽" + true;//"小泽true" var r4 = "小泽" + null; var r5 = "小泽" + undefined; var r6 = "小泽" + NaN; console.log(r4,r5,r6) var r7 = "小泽" + 5 + 10;// var r8 = 10 + 5 + "小泽";//"15小泽" //其他情况 /* "100" + "5" "100" - 5 "100" - "5" "100" - true "100a" - 5 "100a" - true "100" - "true" "100" + "true" true + 100 true + true 100 + null 100 + undefined 100 + NaN */ </script> </head> <body> </body> </html>
5. 运算符
1) 赋值运算符
= 将右边的值赋给左边变量
2) 算数运算符
+ - * / % 加 减 乘 除 取余
3) 符合运算符
+= -= *= /= %=
4) 自增或自减运算符
++ -- 变量的自增和自减指的是在自身基础上进行 +1或-1 的操作
注意:
+ 自增或自减运算符在单独与变量结合时,放前和放后没有区别
+ 如果自增或自减运算符与其他运算符结合使用,要区分前缀和后缀,做前缀,那就先++/--,再进行赋值或其他运算,如果做后缀,就先结合其他运算符,再进行++ / --
5) 关系运算符/比较运算符
> <
>= <=
==(相等) !=(相等)
===(全等) !==(不全等)
1. 关系运算符用来判断表达式之间的关系,结果永远是布尔值 true/false
2. 使用
+ 字符串与字符串之间的比较
依次比较每位字符的Unicode码,只要某位字符比较出结果,就返回最终结果
+ 其他情况
一律将操作数转换为number进行数值比较,如果某一操作数无法转换number,则变成NaN参与比较运算,结果永远是false
3. 相等与全等
+ 相等 : 不考虑数据类型,只做值的比较(包含自动类型转换)
+ 全等 : 不会进行数据类型转换,要求数据类型一致并且值相等才判断全等
6) 逻辑运算符
&& 逻辑与
表达式同时成立,最终结果才为true;全1则1
|| 逻辑或
表达式中只要有一个成立,最终结果即为true; 有1则1
! 逻辑非
对已有表达式的结果取反
注意 : 除零值以外,所有值都为真
7) 三目运算符
语法 :
表达式1 ? 表达式2 : 表达式3;
过程 :
判断表达式1是否成立,返回布尔值
如果表达式1成立,执行表达式2;
如果表达式1不成立,执行表达式3;
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src=""></script> <script> var a = 100; var r1 = a + 10; a *= 5;// a = a * 5; //1.自增和自减 ++ -- var b = 10; //单独与变量结合,前缀和后缀没有区别 b++; ++b; console.log(b);//12 //与其他运算符结合使用 var r2 = b++; console.log(r2,b); var r3 = ++b; console.log(r3,b); var c = 10; var r4 = --c;//r4=9,c=9 var r5 = c--;//r5=9,c=8 //自增和自减运算的结果永远number值 var s = true; s++; console.log(s,typeof s); //思考 r? n? var n = 5; var r = n++ + ++n + n++ + ++n + n; console.log(r,n); /* r = r1 + r2 + r3 + r4 + r5; r1 = n++; //5 6 r2 = ++n; //7 7 r3 = n++; //7 8 r4 = ++n; //9 9 r5 = n; //9 */ //2.关系运算 var res1 = 10 > 2; var res2 = "210" > "2";//'1' > (null) console.log(res1,res2); var res3 = "小泽" > "超哥哥"; var s1 = "小"; var s2 = "超"; //获取字符的Unicode编码charCodeAt(index) console.log(s1.charCodeAt(),s2.charCodeAt(),res3); var res4 = "10" > 2;//10 > 2 var res5 = "10" > true;//10 > 1 var res6 = true > false;//1 > 0 var res7 = "10" > undefined;//10 > NaN ->false var res8 = "10" > null;//10 > 0 var res9 = "true" > false;//NaN > 0 //相等和全等 var r1 = 10 == "10"; var r2 = 10 === "10"; console.log(r1,r2); //3.逻辑运算符 /*给出闰年判断的条件: 能被4整除并且不能被100整除 能被400整除 */ var year = prompt("请输入年份"); var r = year%4==0&&year%100!=0 || year%400==0; console.log(year,typeof year,r); //逻辑非:对布尔值取反 var r1 = !5;//false //逻辑非的优先级高于关系运算 var r2 = !5 < 3;//false < 3 console.log(r1,r2); //3.三目运算符 var a = 10; if(a > 5){ console.log("成立"); }else{ console.log("不成立"); } var res = a>5 ? "OK" : "error"; console.log(res); a = 3; var res2 = a>5? "OK" : a>=3 ? ">=3" : "小于3"; console.log(res2); </script> </head> <body> <h1 onclick=""></h1> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> /* 接收用户输入的身高(m)和体重(kg) 计算bmi = 体重/(身高 *身高) 对bmi保留1位小数 并且判断身体指数: bmi < 18.5 "太瘦了" 18.5 ~ 23.9 "健康" bmi > 23.9 "注意身体健康" */ var w = prompt("请输入体重(kg)"); var h = prompt("请输入身高(m)"); var bmi = w / (h * h); var bmi2 = bmi.toFixed(1); //console.log(bmi,bmi2,typeof bmi2); var r = bmi2>23.9? "注意": bmi2>=18.5 ? "健康" : "太瘦"; console.log(bmi2,r) </script> </head> <body> </body> </html>
一、流程控制
1. 作用
控制代码的执行顺序
2. 分类
1) 顺序结构
从上到下依次执行代码语句
2) 分支/选择结构
1. if语句
简单if结构 text
if(条件表达式){
表达式成立时执行的代码段
}
注意 : 除零值以外,其他值都为真,以下条件为假值false javascript
if(0){}
if(0.0){}
if(""){} //空字符串
if(undefined){}
if(NaN){}
if(null){}
特殊写法 :
{ }可以省略,一旦省略,if语句只控制其后的第一行代码
if - else结构 text
if(条件表达式){
//条件成立时执行
}else{
//条件不成立时选择执行
}
多重分支结构
if(条件1){
//条件1成立时执行
}else if(条件2){
//条件2成立时执行
}else if(条件3){
//条件3成立时执行
}...else{
//条件不成立时执行
}
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> //1.if语句 var a = 10; if(a < 5){ console.log("成立"); } if(a < 5) console.log("a>5"); console.log("测试"); //2.if-else语句 if(a == 0){ }else{ } //3.if-else if语句 var bmi = 20.5; if(bmi > 23.9){ }else if(bmi >= 18.5){ }else{ } /* 接收用户输入的年,月,日 计算当日是该年的第几天*/ </script> </head> <body> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> var year = prompt("年"); var month = prompt("月"); var day = Number(prompt("日")); var sum = 0; //整月天数累加,当前月天数累加 if( month == 1){ sum = day; }else if(month == 2){ sum = 31 + day; }else if(month == 3){ sum = 31 + 28 + day; } //闰年判断(year ,month > 2) console.log(sum); </script> </head> <body> </body> </html>
2. switch语句
语法 :
switch(value){
case 值1 :
//value与值1匹配全等时,执行的代码段
break; //结束匹配
case 值2 :
//value与值2匹配全等时,执行的代码段
break;
case 值3 :
//value与值3匹配全等时,执行的代码段
break;
default:
//所有case匹配失败后默认执行的语句
break;
}
使用 :
1. switch语句用于值的匹配,case用于列出所有可能的值;只有switch()表达式的值与case的值匹配全等时,才会执行case对应的代码段
2. break用于结束匹配,不再向后执行;可以省略,break一旦省略,会从当前匹配到的case开始,向后执行所有的代码语句,直至结束或碰到break跳出
3. default用来表示所有case都匹配失败的情况,一般写在末尾,做默认操作
4. 多个case共用代码段
case 值1:
case 值2:
case 值3:
//以上任意一个值匹配全等都会执行的代码段
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> /* var week = Number(prompt("请输入0~6之间的数字")); switch(week){ case 0: //0 === 0 //变量值与case列举的值匹配全等时执行的代码段 console.log("星期日"); //break; case 1: console.log("星期一"); //break; default: console.log("请输入合法值"); } */ //多个case共用代码段 var month = Number(prompt("请输入月")); switch(month){ case 1: case 3: case 5: case 7: case 8: case 10: case 12: console.log("31天"); break; case 2: console.log("28天"); break; } </script> </head> <body> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> var year = prompt("年"); var month = prompt("月"); var day = Number(prompt("日")); var sum = 0; //1.整月天数的累加 switch(month-1){//整月最多取到11月 //省略break会从当前匹配的case开始向后执行所有代码语句 case 11: sum += 30; case 10: sum += 31; case 9: sum += 30; case 8: sum += 31; case 7: sum += 31; case 6: sum += 30; case 5: sum += 31; case 4: sum += 30; case 3: sum += 31; case 2: sum += 28; if(year%4==0&&year%100!=0 || year%400==0){ sum++; } case 1: sum += 31; } //2.当前月天数的累加 sum += day; console.log(sum); </script> </head> <body> </body> </html>
3. 循环结构
作用
根据条件,重复执行某段代码
分类
while循环
定义循环变量;
while(循环条件){
条件满足时执行的代码段
更新循环变量;
}
代码:
var i=1;
var sum=0;
while(i<101){
//循环体
console.log(i)
//更新循环变量
sum+=i
i++;
}
console.log(sum)
do-while循环
do{
循环体;
更新循环变量
}while(循环条件);
代码:
//循环输出100次
var i=1;
do{
console.log("do");
//更新循环变量
i++;}while(i<101)
与while循环的区别 : 对于不确定循环次数while循环使用的比较多;
+ while循环先判断循环条件,条件成立才执行循环体
+ do-while循环不管条件是否成立,先执行一次循环体
for循环
for(定义循环变量;循环条件;更新循环变量){
循环体;
}
代码:
for(var i=1;i<101;i++){
//循环体
console.log("js真棒");
if(i==5){
break;}
console.log("---------")
}
循环控制 :
1. break 强制结束循环
2. continue 结束当次循环,开始下一次循环
循环嵌套 :
在循环中嵌套添加其他循环
/*控制台输出9*9乘法表*/
for(var i=1;i<10;i++){
var show="";
for(var j=1;j<=i;j++){
show+=i+"*"+j+"="+i*j+"\t";
}
//按照行输出
console.log(show);
}
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> //循环变量 var i = 1; var sum = 0; while(i<101){ //循环体 console.log(i); sum += i; //更新循环变量 i++; } console.log(sum); </script> </head> <body> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> var year = prompt("年"); var month = prompt("月"); var day = Number(prompt("日")); var sum = 0; //1.整月天数的累加 var i = 1; while(i < month){ //1~month-1 switch(i){ case 1: case 3: case 5: case 7: case 8: case 10: sum += 31; break; case 4: case 6: case 9: case 11: sum += 30; break; case 2: sum += 28; if(year%4==0&&year%100!=0 || year%400==0){ sum++; } } i++; } //2.当前月天数的累加 sum += day; console.log(sum); /* switch(i==1){ case true } */ </script> </head> <body> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> //循环输出一百次"" var i = 101; do{ console.log("超哥哥最帅"); //更新循环变量 i++; }while(i < 101); i = 101; while(i < 101){ console.log("小泽老师最美"); i++; } for(var i = 1;i < 101;i++){ //循环体 console.log("老祁的B-box真棒"); } /*控制循环体的执行:break/continue*/ for(var i = 1; i < 11;i++){ console.log(i); if(i == 5){ //一旦执行break,循环体中后面的代码都不执行 continue; } console.log("-------------"); } /*循环接收用户输入,并且在控制台输出;直至用户 输入"exit"表示退出*/ /* while(true){ var input = prompt("请输入"); if(input == "exit"){ //结束循环 break; } console.log(input); } */ /* var input; do{ input = prompt("请输入"); if(input != "exit") console.log(input); }while(input != "exit") */ /* 控制台输出乘法表(循环嵌套) 1 * 1 */ for(var i = 1; i <= 9; i++){ var show = ""; for(var j = 1; j <= i;j++){ //制表符 \t show += i + "*" + j + "=" + i*j + "\t"; } //按行输出 console.log(show); } </script> </head> <body> </body> </html>
一、函数
1) 作用
封装一段待执行的代码
2)语法
//函数声明
function 函数名(参数列表){
函数体
return 返回值;
}
//函数调用
函数名(参数列表);
3)使用
函数名自定义,见名知意,命名规范参照变量的命名规范。普通函数以小写字母开头,用于区分构造函数(构造函数使用大写字母开头,定义类)
4)匿名函数
匿名函数:省略函数名的函数。语法为:
+ 匿名函数自执行
语法:
(function (形参){
})(实参);
代码:
//匿名函数自执行:(函数声明)(实参)
(function(){
var a=100;
//构建局部作用域,运行结束即回收
console.log("匿名函数",a)
})()
定义变量接收匿名函数
var fn = function (){};
fn(); //函数调用
5)作用域
JS中作用域分为全局作用域和函数作用域,以函数的{ }作为划分作用域的依据
1. 全局变量和全局函数
+ 只要在函数外部使用var关键字定义的变量,或函数都是全局变量和全局函数,在任何地方都可以访问
+ 所有省略var关键字定义的变量,一律是全局变量
2. 局部变量/局部函数
+ 在函数内部使用var关键字定义的变量为局部变量,函数内部定义的函数也为局部函数,只能在当前作用域中使用,外界无法访问
3. 作用域链
局部作用域中访问变量或函数,首先从当前作用域中查找,当前作用域中没有的话,向上级作用域中查找,直至全局作用域
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> //1.无参数无返回值的函数 //函数声明 function f1(){ console.log("f1被调用"); } //函数调用 f1(); //2.带有参数的函数 //JS允许形参与实参个数不匹配 function f2(a,b){//形参未传值,默认为undefined console.log(a * a,b); //函数内部可以使用arguments获取实际传递的参数 console.log(arguments); } f2(5);//函数调用时将实际参数赋值给形式参数 //3.带有返回值的函数 function f3(a){ //局部变量r1,只能在当前函数中使用 var r1 = a * a; var r2 = a + a; //将函数内部的变量传递 给外界使用 //只能返回一个值,后面的代码都不执行 return r1,r2; console.log("函数使用"); } //全局变量r1 var r1 = f3(10); console.log(r1); //全局变量与局部变量 /* 全局变量: 1.函数体外部声明的变量一定是全局变量 2.一切省略var关键字创建的变量都是全局变量 局部变量: 在函数内部使用var关键字创建的变量为局部变量 */ var age = 18; function fn(){ var age = 28; uname = "老王"; //就近访问当前作用域中的变量 console.log(age); } fn(); console.log(age,uname); /* 使用函数封装日期计算: 闰年判断封装成函数; 主体功能封装成函数,通过按钮点击调用 <button onclick="fn()"> */ </script> </head> <body> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> //闰年判断 function isRun(y){ var r = y%4==0&&y%100!=0 || y%400==0; return r; } //主函数 function show(){ var year = prompt("请输入年"); console.log(isRun(year)); } </script> </head> <body> <button onclick="show()">日期计算</button> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> //匿名函数的使用,自执行: (匿名函数声明)(实参) (function (){ var a = 100; //构建局部作用域 console.log("匿名函数自执行",a); })() //定义变量接收匿名函数 var fn = function (){ console.log("fn被调用"); }; fn(); console.log(fn); //函数作为参数 function show (f){ console.log("show:",f); f(); } //直接传递函数名 show(fn);//f = fn //匿名函数作为参数传递 show(function (){ console.log("直接传递匿名函数"); })//f = function (){} </script> </head> <body> </body> </html>
二、 内置对象
1) 对象
对象是由属性和方法组成的,使用点语法访问
2) Array 数组
1. 创建
方式一:
//1、数组的创建
var arr1=["小马",20,true];
console.log(arr1);
方式二:
//使用new关键字创建
var arr2=new Array("则",27,false);
console.log(arr2)
2. 特点
+ 数组用于存储若干数据,自动为每位数据分配下标,从0开始
+ 数组中的元素不限数据类型,长度可以动态调整
+ 动态操作数组元素 :根据元素下标读取或修改数组元素,arr[index]
3. 属性和方法
属性 : length 表示数组长度,可读可写
方法 :
push(data)
在数组的末尾添加一个或多个元素,多个元素之间使用逗号隔开
返回添加之后的数组长度
pop()
移除末尾元素
返回被移除的元素
unshift(data)
在数组的头部添加一个或多个元素
返回添加之后的数组长度
shift()
移除数组的第一个元素
返回被移除的元素
toString()
s1=arr.toString()
console.log(s1)
将数组转换成字符串类型
返回字符串结果
join(param)
将数组转换成字符串,可以指定元素之间的连接符,如果参数省略,默认按照逗号连接
返回字符串
s2=arr.join("")
console.log(s2)
reverse()
反转数组,倒序重排
返回重排的数组,注意该方法直接修改原数组的结构
sort()
对数组中元素排序,默认按照Unicode编码升序排列
返回重排后的数组,直接修改原有数组
参数 : 可选,自定义排序算法
例:
//自定义升序
function sortASC(a,b){
return a-b;
}
代码:
arr.sort(function(e1,e2){
return e1.age-e2.age;
})
console.log(arry)
作用:作为参数传递到sort()中,会自动传入两个元素进行比较,如果a-b>0,交换元素的值,自定义升序排列
```javascript
//自定义降序
function sortDESC(a,b){
return b-a;
}
//如果返回值>0,交换元素的值,b-a表示降序排列
```
+ forEach(param)
遍历数组元素
参数为函数
例 :
arr.forEach(function (elem,index){
//forEach()方法会自动调用匿名函数,依次传入元素及下标
});
4. 二维数组
数组中的每个元素又是数组
var arr1 = [1,2,3];
var arr2 = [[1,2],[3,4],[5,6,7]];
//操作数组元素
var r1 = arr2[0] //内层数组
var num = r1[0]; //值 1
//简写
var num2 = arr2[1][0];
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> //1.数组的创建 var arr1 = ["超哥哥",30,true]; console.log(arr1); //使用new关键字创建 var arr2 = new Array("小泽",31,false); console.log(arr2); //特殊 var arr3 = [5]; //使用new关键字传递一个整数参数创建数组,代表初始化数组长度 var arr4 = new Array(5); console.log(arr3,arr4); //2.操作数组元素(根据元素索引) console.log(arr3[0]); arr4[0] = "老祁"; arr4[2] = "大旭"; arr4[8] = "AI"; console.log(arr4); //3.数组对象的属性:length console.log(arr4.length); //4.遍历数组元素 //创建数组,包含若干元素,实现数组元素的正序遍历和倒序遍历 var arr5 = [1,2,3,4,5]; //普通for循环 for(var i = 0;i < arr5.length;i++){ console.log(arr5[i]); } for(var i = arr5.length-1;i >= 0;i--){ console.log(arr5[i]); } console.log("-------------------------"); //for-in循环 for( var i in arr5){ console.log(i,arr5[i]); } //数组对象提供的遍历方法,forEach(function (){}) arr5.forEach(function (elem,index){ console.log("-----:",elem); }); /* 1.循环接收用户输入,将数据存储在数组中,直至输入"exit"结束, 控制台打印数组 2.声明包含若干元素的数组,打印数组中的最大值 */ </script> </head> <body> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> function saveData(){ var arr = []; while(true){ var input = prompt("请输入"); if(input == "exit"){ break; } //添加至数组,数组长度表示数组中下一个元素的索引 arr[arr.length] = input; } console.log(arr); } //遍历数组取最大值 function showMax(){ //数据源 var arr = [10,5,66,78,9,56,3,-90,0]; var max = arr[0]; for(var i = 0;i < arr.length;i++){ if(arr[i] > max){ max = arr[i]; } } console.log(max); } //showMax(); /*定义数组,接收用户输入的内容,查询数组中是否存在相应元素 如果存在返回对应元素的下标,不存在返回-1*/ function findIndex(){ //数据源 var arr = [10,5,66,10,78,9,56,3,-90,0,10]; //var arrInd = []; var data = prompt("请输入要查找的数值"); var index = -1; /* //查找元素第一次出现的下标 for(var i = 0;i < arr.length;i++){ if(arr[i] == data){ index = i; break; } } */ //查找元素最后一次出现的下标 for(var i = arr.length-1;i >= 0;i--){ if(arr[i] == data){ index = i; break; } } console.log(data,index,arr); } findIndex(); </script> </head> <body> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> //1.操作数组的头尾元素 var arr = ["hello","world"]; var r1 = arr.push(1,2,3); console.log(r1,arr); var r2 = arr.pop(); console.log(r2,arr); var r3 = arr.unshift(10); r3 = arr.unshift(20,30); console.log(r3,arr); var r4 = arr.shift(); console.log(r4,arr); //2.转换字符串 var r5 = arr.toString(); var r6 = arr.join(""); console.log(r5); console.log(r6); console.log(arr); //3.数组反转(倒序重排) arr.reverse();//调整原有数组的结构 console.log(arr); //4.数组排序(对数组原有结构的调整) //默认按照字符的Unicode编码升序排列 arr.sort(); console.log(arr); //对number值进行大小排列 arr.sort(function (a,b){ /*a,b代表数组中相邻的两个元素,如果a-b>0,则交换 元素的位置*/ //自定义升序 return a-b; }) console.log(arr); //自定义降序 function sortDESC(a,b){ //如果b-a>0,则交换两个元素的位置 return b-a; } arr.sort(sortDESC); console.log(arr); /*复杂数组*/ var obj = { uid:001, uname:"大旭", play:function (){ console.log("play"); } }; console.log(obj.uid); obj.play(); var array = [ {uname:"大旭",age:35}, {uname:"超哥哥",age:33}, {uname:"小泽",age:31} ]; console.log(array[0].age); //将数组元素按照年龄升序排列 array.sort(function (e1,e2){ return e1.age-e2.age; }) console.log(array); /*代码实现十进制转二进制: 除2取余,直至商为0;余数倒序排列 6 / 2 = 3 ... 0 3 / 2 = 1 ... 1 1 / 2 = 0 ... 1 */ function decode(){ var num = prompt("请输入数字"); var arr = []; while(num != 0){ arr.unshift(num % 2); num = parseInt(num / 2); } console.log(arr.join("")); } decode(); //二维数组 var arr = [ [1], [2,3], [4,5,6] ]; console.log(arr[2][1]); //二维数组的遍历 for(var i in arr){ for(var j in arr[i]){ console.log(arr[i][j]); } } </script> </head> <body> </body> </html>
3)String 对象
1. 创建
var str = "100";
var str2 = new String("hello");
2. 特点
字符串采用数组结构存储每位字符,自动为字符分配下标,从0开始
3. 属性
length :获取字符串长度
4. 方法
转换字母大小写
toUpperCase() 转大写字母
toLowerCase() 转小写字母
返回转换后的字符串,不影响原始字符串
获取字符或字符编码
charAt(index) 获取指定下标的字符
charCodeAt(index) 获取指定下标的字符编码
参数为指定的下标,可以省略,默认为0
获取指定字符的下标
indexOf(str,fromIndex)
作用 : 获取指定字符的下标,从前向后查询,找到即返回,找到第一次出现的次数。
参数 :
str 表示要查找的字符串,必填
fromIndex 表示起始下标,默认为0
返回 :
返回指定字符的下标,查找失败返回-1
console.log(s2.indexOf("o"))
+ lastIndexOf(str,fromIndex)
作用 : 获取指定字符最后一次出现的下标,从后向前查找,找到即返回
参数 :
str 必填,表示要查找的内容
fromIndex 选填,指定起始下标
console.log(s2.lastIndexOf("o"))
截取字符串
substring(startIndex,endIndex)
作用 : 根据指定的下标范围截取字符串,startIndex ~ endIndex-1
参数 :
startIndex 表示起始下标
endIndex 表示结束下标,可以省略,省略表示截止末尾
console.log(s2.substring(1,4))
分割字符串
split(param)
作用 : 将字符串按照指定的字符进行分割,以数组形式返回分割结果
参数 : 指定分隔符,必须是字符串中存在的字符,如果字符串中不存在,分割失败,仍然返回数组
模式匹配
作用 : 借助正则表达式实现字符串中固定格式内容的查找和替换
正则表达式 :
var reg1 = /字符模式/修饰符;
修饰符 :
i : ignorecase 忽略大小写
g : global 全局范围
字符串方法 :
match(regExp/subStr)
作用 : 查找字符串中满足正则格式或满足指定字符串的内容
返回 : 数组,存放查找结果
replace(regExp/subStr,newStr)
作用 : 根据正则表达式或字符串查找相关内容并进行替换
返回 : 替换后的字符串,不影响原始字符串
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> //1.创建 var s1 = "小泽"; var s2 = new String("大旭老师"); console.log(s1,s2); //2.字符串按照数组结构存储,可以使用数组方法操作字符 console.log(s1[1],s2[0]); //遍历字符串 for(var i = 0;i < s2.length;i++){ console.log(s2[i]); } //3.字符串方法 //3.1转换大小写字母 var s3 = "Maria"; var r1 = s3.toUpperCase(); var r2 = s3.toLowerCase(); console.log(r1,r2,s3); //3.2获取指定下标对应的字符或字符编码 var r3 = s3.charAt(); var r4 = s3.charCodeAt(); console.log(r3,r4); //3.3获取指定字符的下标 //"Maria" var r5 = s3.indexOf("a",2); var r6 = s3.lastIndexOf("b",2); console.log(r5,r6); //3.4截取字符串substring(start,end) //截取范围start~end-1 var r7 = s3.substring(0,2); console.log(r7); //3.5分割字符串 var r8 = s3.split("/"); console.log(r8); //3.6模式匹配 var str = "上知乎,搜知乎,问知乎,答知乎"; //match(param),返回结果数组 var res1 = str.match("知乎"); console.log(res1); //定义正则,表示查找内容 var regexp = /\d{6,10}/ig; var reg2 = /知乎/g; var res2 = str.match(reg2); console.log(res2); //replace()查找并替换,返回替换后的字符串结果 var res3 = str.replace(reg2,"新浪"); console.log(res3,str); </script> </head> <body> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> /* 1.接收用户输入的邮箱,提取用户名和服务商 "zhangsan@163.com" 2.从身份证号中提取年月日信息 "100100190012120123" 3."101_5&201_7&301_9" 商品id为101,数量为5 */ //1.提取用户名和服务商 var mail = "lvze@tedu.cn"; //方法1:截取 var index = mail.indexOf("@"); var username = mail.substring(0,index); //省略结束下标,表示截取至末尾 var servername = mail.substring(index+1); console.log(username,servername); //方法2:使用@符号分割字符串 var res = mail.split("@"); console.log(res[0],res[1]); //2.提取身份证号中的年月日 var uid = "100100190012100123"; var year = uid.substring(6,10); var month = uid.substring(10,12); var day = uid.substring(12,14); console.log(year,month,day); //3.分割商品信息 var str = "101_5&201_7&301_9"; var arr = str.split('&');//["101_5","",""] for(var i=0; i<arr.length;i++){ var arr2 = arr[i].split('_');//["101","5"] console.log("商品id为:",arr2[0],"商品数量为:",arr2[1]); } </script> </head> <body> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> /* 模拟验证码: 1.创建数据源(由大小写字母和数字组成) 2.随机取四位字符,拼成验证码 随机数:Math.random()返回[0,1)之间的随机小数 调整为随机下标 3.提示用户输入(不区分大小写) 4.比较用户输入的内容,给出验证结果 */ </script> </head> <body> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <a href="04_history.html">页面0</a> <a href="01_window.html">页面二</a> <button onclick="console.log(history.length)"> 获取length </button> <button onclick="history.back()">返回</button> <button onclick="history.forward()">前进</button> <input type="text" id="uinput"> <span id="code"></span> <button id="btn">验证</button> <script> //元素的id属性值作为变量直接操作,存储元素对象本身 console.log(code); //生成四位验证码 var str = "ABCDEFGHIabcdefghtyuiu0123456789"; var show = ""; for(var i = 1; i < 5; i++){ //生成随机下标 //Math.floor(n) var index = Math.floor(Math.random()*str.length); show += str[index]; } //操作元素内容 code.innerHTML = show; //动态绑定事件 btn.onclick = function (){ //获取输入框的值 console.log(uinput.value); //验证 if(uinput.value.toUpperCase() == show.toUpperCase()){ alert("输入正确") }else{ alert("输入有误"); } }; /*Math对象*/ //1.向上取整:舍弃小数位,整数位+1 console.log(Math.ceil(0.99)); //2.向下取整:舍弃小数位,保留整数位 console.log(Math.floor(0.99)); //3.四舍五入取整 console.log(Math.round(0.49)); console.log(Math.round(0.5)); //4.生成0~1之间的随机小数 console.log(Math.random()); </script> </body> </html>
一、BOM
1. BOM 介绍
BOM全称为“Browser Object Model”,浏览器对象模型。提供一系列操作浏览器的属性和方法。核心对象为window对象,不需要手动创建,跟随网页运行自动产生,直接使用,在使用时可以省略书写。
2. window对象常用方法
1)网页弹框
alert() //警告框
prompt() //带输入框的弹框,可以接收两个参数,(提示信息,输入框内的默认值)
prompt("请输入",0)
confirm() //确认框
2)窗口的打开和关闭
window.open("URL") //新建窗口访问指定的URL
window.open("http:www.baidu.com")开窗口新弹出一个窗口
window.close() //关闭当前窗口
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> console.log(window); //window对象的方法 //1.网页弹框 /* window.alert("操作无效");//无返回值 var r = window.confirm("是否确认");//返回布尔值 console.log(r); //prompt可以接收两个参数("提示信息",输入框的默认值) var r1 = window.prompt("请输入",0); */ /* 全局变量和全局函数都是window对象的属性和方法 */ var a = 100; function a1(){ console.log("a1被调用"); } console.log(window); console.log(a,window.a); a1(); window.a1(); //2.窗口的打开和关闭 /*给出确认框,当点击确定时打开目标文件,点击取消时关闭当前窗口*/ /* var r = confirm(""); if(r){ window.open("http://www.baidu.com"); }else{ window.close(); } */ </script> </head> <body> <a href="04_history.html">页面0</a> <a href="00_work.html">页面一</a> <button onclick="console.log(history.length)"> 获取length </button> <button onclick="history.back()">返回</button> <button onclick="history.forward()">前进</button> </body> </html>
3)定时器方法
间歇调用(周期性定时器)
作用:每隔一段时间就执行一次代码
开启定时器:
var timerID = setInterval(function,interval);
/*
参数 :
function : 需要执行的代码,可以传入函数名;或匿名函数
interval : 时间间隔,默认以毫秒为单位 1s = 1000ms
返回值 : 返回定时器的ID,用于关闭定时器
*/
关闭定时器 :
//关闭指定id对应的定时器
clearInterval(timerID);
超时调用(一次性定时器)
作用:等待多久之后执行一次代码
//开启超时调用:
var timerId = setTimeout(function,timeout);
//关闭超时调用:
clearTimeout(timerId);
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <button id="start">开启</button> <button id="stop1">关闭</button> <h1 style="text-align:center;" id="show"></h1> <script> var timer; start.onclick = function (){ //开启定时器 timer = setInterval(function (){ //打印日期时间(Date) var date = new Date(); console.log(date); },1000); console.log("---------"); }; stop1.onclick = function (){ //关闭间歇调用 clearInterval(timer); }; /*页面输出5秒倒计时*/ var i = 5; show.innerHTML = i; var timerId = setInterval(function (){ i--; if(i != 0 ){ show.innerHTML = i; }else{ show.innerHTML = "倒计时结束!"; //停止定时器 clearInterval(timerId); } },1000); </script> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <button id="start">开启</button> <button id="stop1">关闭</button> <script> start.onclick = function (){ //开始超时调用 timer = setTimeout(function (){ console.log("超时调用"); },1000); }; stop1.onclick = function (){ //关闭超时调用 clearTimeout(timer); }; </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> <script> </script> </head> <body> <h1 id="d1">欢迎学习人工智能</h1> <script> function f1(){ var tag=document.getElementById("d1"); var content=tag.innerText; var l=content.charAt(0); var f=content.substring(1,content.length); var new_content=f+l; tag.innerText=new_content; } setInterval("f1();",1000); </script> </body> </html>
window 对象常用属性
window的大部分属性又是对象类型
1)history
作用:保存当前窗口所访问过的URL
属性 :
length 表示当前窗口访问过的URL数量
方法 :
back() 对应浏览器窗口的后退按钮,访问前一个记录
forward() 对应前进按钮,访问记录中的下一个URL
go(n) 参数为number值,翻阅几条历史记录,正值表示前进,负值表示后退
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> console.log(history); </script> </head> <body> <a href="00_work.html">页面一</a> <a href="01_window.html">页面二</a> <button onclick="console.log(history.length)"> 获取length </button> <button onclick="history.back()">返回</button> <button onclick="history.forward()">前进</button> <button onclick="history.go(1)">go(1)</button> <button onclick="history.go(-1)">go(-1)</button> <button onclick="history.go(1)">go(2)</button> <button onclick="history.go(-1)">go(-2)</button> <!--历史记录的长度变化: 1.通过超链接在当前窗口访问其他URL,会造成历史记录增加 2.前进和后退不会造成历史记录的变化,只是指针的移动 3.历史记录的进出栈管理: A->B->C 从页面C后退至页面A,在A中通过超链接跳转至页面C A->C --> </body> </html>
2)location
作用:保存当前窗口的地址栏信息(URL)
属性 :
href 设置或读取当前窗口的地址栏信息
方法 :
reload(param) 重载页面(刷新)
参数为布尔值,默认为false,表示从缓存中加载,设置为true,强制从服务器根目录加载
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!--设置或读取窗口的地址栏信息(URL)--> <button onclick="console.log(location.href);"> 获取href </button> <button onclick="location.href='http://www.baidu.com';"> 设置href</button> <!--reload(false)默认从缓存中重载页面,设置为true,表示 从服务器根目录重载页面--> <button onclick="location.reload(true)">刷新</button> </body> </html>
3)document
提供操作文档HTML 文档的方法,,参见DOM
二、DOM节点操作
DOM全称为“Document Object Model”,文档对象模型,提供操作HTML文档的方法。(注:每个html文件在浏览器中都视为一篇文档,操作文档实际就是操作页面元素。)
1)节点对象
JS 会对html文档中的元素,属性,文本内容甚至注释进行封装,称为节点对象,提供相关的属性和方法。
2)常用节点分类
元素节点 ( 操作标签)
属性节点(操作标签属性)
文本节点(操作标签的文本内容)
3)获取元素节点
根据标签名获取元素节点列表
var elems = document.getElementsByTagName("");
代码如下:
var list1=document.getElementsByTagName("h1");
console.log(list1)
/*
参数 : 标签名
返回值 : 节点列表,需要从节点列表中获取具体的元素节点对象
*/
根据class属性值获取元素节点列表
var elems = document.getElementsByClassName("");
/*
参数 : 类名(class属性值)
返回值 : 节点列表
*/
根据id属性值取元素节点
var elem = document.getElementById("");
/*
参数 : id属性值
返回值 : 元素节点
*/
根据name属性值取元素列表
var elems = document.getElementsByName("");
/*
参数 : name属性值
返回 : 节点列表
*/
4)操作元素内容
元素节点对象提供了以下属性来操作元素内容
innerHTML : 读取或设置元素文本内容,可识别标签语法
innerText : 设置元素文本内容,不能识别标签语法
value : 读取或设置表单控件的值
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1 class="c1" id="d1" style="">Fine,Thank U,and you</h1> <h1 class="c1">岁月静好,感恩有你,与你相随</h1> <input type="text" name="username" value=""> <button id="btn">取值</button> <div id="show"></div> <script> //获取元素的操作只能等待标签解析完毕后执行 //1.根据标签名获取元素列表 var list1 = document.getElementsByTagName("h1"); console.log(list1); console.log(list1[0],list1[0].innerHTML); //2.根据class属性值获取元素列表 var list2 = document.getElementsByClassName("c1"); console.log(list2); //3.根据id属性值获取元素 var elem = document.getElementById("d1"); console.log(elem); //标签属性都是元素节点对象的属性 console.log(elem.id,elem.className); elem.style = "color:red;text-align:center;"; //4.根据name属性值获取元素列表 var list3 = document.getElementsByName("username"); console.log(list3); //操作元素内容或值 elem.innerHTML = "<a href>小泽最帅</a>"; console.log(elem.innerHTML); elem.innerText = "<a href>小泽最帅</a>"; console.log(elem.innerText); btn.onclick = function (){ //获取表单控件的值 console.log(list3[0].value); show.innerHTML = "<h1>"+list3[0].value+"</h1>"; }; /* 创建输入框,按钮和div 点击按钮时将输入框中的内容以一级标题的形式显示在div中 */ </script> </body> </html>
5)操作元素属性
通过元素节点对象的方法操作标签属性
elem.getAttribute("attrname");//根据指定的属性名返回对应属性值
elem.setAttribute("attrname","value");//为元素添加属性,参数为属性名和属性值
elem.removeAttribute("attrname");//移除指定属性
标签属性都是元素节点对象的属性,可以使用点语法访问,例如:
h1.id = "d1"; //set 方法
console.log(h1.id); //get 方法
h1.id = null; //remove 方法
注意 :
+ 属性值以字符串表示
+ class属性需要更名为className,避免与关键字冲突,例如:
h1.className = "c1 c2 c3";
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="index.js"></script> <style> #main{ color:red; } .c1{ background:green; } </style> </head> <body> <h1 id="" style="">小泽真温柔</h1> <script> //获取元素节点 var h1 = $("h1"); //操作标签属性 h1.setAttribute("id","d1"); h1.setAttribute("class","c1"); console.log(h1.getAttribute("class")); h1.removeAttribute("id"); //点语法 h1.id = "box"; h1.className = "c1 c2"; console.log(h1.id,h1.className); h1.id = ""; h1.className = null; //操作元素样式 //1.通过操作元素的id/class属性,对应选择器的样式 h1.id = "main"; h1.className = "c1"; //2.操作行内样式 console.log(h1.style); //直接赋值 h1.style = "width:200px;height:200px;"; //单独调整样式,h1.style返回样式表对象,由CSS的属性组成 //出现连接符的属性名一律更名为驼峰标识 h1.style.width = "300px"; h1.style.textAlign = "center"; h1.style.lineHeight = "200px"; </script> </body> </html>
6)操作元素样式
为元素添加id,class属性,对应选择器样式
操作元素的行内样式,访问元素节点的style属性,获取样式对象;样式对象中包含CSS属性,使用点语法操作。
p.style.color = "white";
p.style.width = "300px";
p.style.fontSize = "20px";
注意 :
+ 属性值以字符串形式给出,单位不能省略
+ 如果css属性名包含连接符,使用JS访问时,一律去掉连接符,改为驼峰. font-size -> fontSize
7)元素节点的层次属性
parentNode
获取父节点
childNodes
获取子节点数组,只获取直接子节点(包含文本节点和元素节点)
children
获取子节点数组,只获取直接子元素,不包含间接元素和文本节点
previousSibling
获取前一个兄弟节点(文本节点也可以是兄弟节点)
previousElementSibling 获取前一个元素兄弟节点
nextSibling
获取后一个兄弟节点
nextElementSibling 获取下一个元素兄弟节点
attributes
获取属性节点的数组
8)节点的创建,添加和删除
创建元素节点
var elem = document.createElement("标签名");//返回创建好的元素节点
节点的添加
添加和移除操作都必须由父元素执行,方法如下:
在父元素的末尾添加子节点
parendNode.appendChild(node);
指定位置添加
parendNode.insertBefore(newNode,oldNode);//在oldNode之前添加子节点
移除节点
parentNode.removeChild(node);//移除指定节点对象
三、DOM 事件处理
事件:指用户的行为或元素的状态。由指定元素监听相关的事件,并且绑定事件处理函数。
事件处理函数:元素监听事件,并在事件发生时自动执行的操作。
1) 事件函数分类
鼠标事件
onclick //单击
ondblclick //双击
onmouseover //鼠标移入
onmouseout //鼠标移出
onmousemove //鼠标移动
键盘事件(了解)
onkeydown //键盘按键被按下
onkeyup //键盘按键被抬起
onkeypress //字符按键被按下
文档或元素加载完毕
onload //元素或文档加载完毕
表单控件状态监听
onfocus //文本框获取焦点
onblur //文本框失去焦点
oninput //实时监听输入
onchange //两次输入内容发生变化时触发,或元素状态改变时触发
onsubmit //form元素监听,点击提交按钮后触发,通过返回值控制数据是否可以发送给服务器
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ width:200px; height:200px; background:green; } </style> </head> <body> <div id="div"></div> <script> /* 事件对象:保存与当前事件相关的所有信息, 伴随事件发生自动创建,自动作为参数传递到事件处理函数中, 我们只需要在事件处理函数中定义形参接收即可 */ //1.鼠标事件 div.onclick = function (e){//event evt e /* 鼠标事件对象,主要保存鼠标的位置信息 offsetX offsetY:获取鼠标在元素坐标系中的位置 */ console.log("单击",e,e.offsetX,e.offsetY); }; div.ondblclick = function (){ // console.log("双击"); }; div.onmouseover = function (){ //console.log("鼠标移入"); }; div.onmouseout = function (){ //console.log("鼠标移出"); }; div.onmousemove = function (){ // console.log("鼠标移动"); }; //2.键盘事件(了解) onkeydown = function (e){ /* 键盘事件对象 key属性返回按键对应的字符 onkeydown:获取事件对象的which,功能键返回键盘编码; 字符键一律返回大写字母的ASC码 onkeypress:获取事件对象的which,返回字符键的ASC码值, 区分大小写 */ console.log("onkeydown",e,e.key,e.which); }; onkeypress = function (e){ console.log("onkeypress",e,e.key,e.which); }; onkeyup = function (){ //console.log("onkeyup"); }; </script> </body> </html>
2)事件绑定方式
内联方式
将事件名称作为标签属性绑定到元素上
例 :
<button onclick="alert()">点击</button>
动态绑定
获取元素节点,动态添加事件
例 :
btn.onclick = function (){
};
3)事件函数使用
1. onload
常用于等待文档加载完毕再进行下一步操作
2. 鼠标事件
3. 表单事件
onchange: 监听输入框前后内容是否发生变化;也可以监听按钮的选中状态
onsubmit :表单元素负责监听,允许返回布尔值,表示数据是否可以发送;返回true,允许发送;返回false,不允许提交
4. 键盘事件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> window.onload = function (){ //窗口加载完毕后执行 //console.log("window.onload"); //输入框相关 uname.onfocus = function (){ //console.log("获取到焦点"); }; uname.onblur = function (){ //this:指代事件的触发对象或函数的调用者 //console.log("失去焦点:",this,uname.value,this.value); }; //实时监听输入 uname.oninput = function (){ //console.log("oninput:",this.value); }; //监听前后两次输入的内容是否一致 uname.onchange = function (){ //只有前后两次输入不一致,并且失去焦点时才触发 console.log("onchange:",this.value); }; //监听按钮状态的改变 savePwd.onchange = function (){ /*按钮有选中和未选中两种状态, 对应checked属性值为true/false*/ console.log(this.checked); }; //监听表单中的数据是否可以提交 /* 交由form元素监听,在点击提交按钮时触发,允许返回布尔值, true表示允许发送,false表示阻止发送 */ form.onsubmit = function (){ //用户名为空时阻止提交 if(uname.value == ""){ return false; }else{ return true; } }; }; function fn(){ console.log(this); } window.fn(); </script> </head> <body> <form action="/login" method="get" enctype="" id="form"> 用户姓名:<input type="text" name="uname" id="uname"><br> 记住密码:<input type="checkbox" id="savePwd" checked="checked"><br> <input type="submit"> </form> <ul> <li> <span id="city">北京</span> <ol id="ol"> <li>北京</li> <li>上海</li> <li>广州</li> <li>深圳</li> </ol> </li> </ul> <script> //console.log("测试"); /* 实现下拉菜单的点击传值(this练习) */ //获取内层li元素列表 var list = ol.children; for(var i = 0; i < list.length; i++){ console.log("for:",i); list[i].onclick = function (){ console.log(i); //传值 //this指代事件触发对象 city.innerHTML = this.innerHTML; console.log(this); }; } </script> </body> </html>
键盘事件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="index.js"></script> </head> <body> <div> <p>参考</p> 示例 <h1 id="d1" class="c1"> <span>h1->span</span> </h1> <p>参考</p> </div> <script> var h1 = $("h1"); var div = $("div"); //获取唯一的父节点 console.log(h1.parentNode); //获取子节点数组(包含文本节点和元素节点) console.log(div.childNodes); //获取子元素数组(只包含直接子元素) console.log(div.children); //获取兄弟节点 console.log(h1.previousSibling); console.log(h1.nextSibling); //获取元素兄弟节点 console.log(h1.previousElementSibling); console.log(h1.nextElementSibling); //获取属性节点数组 console.log(h1.attributes); //节点的创建,添加和移除 //创建元素节点 var h2 = document.createElement("h2"); console.log(h2); h2.innerHTML = "动态添加"; h2.id = "d2"; //添加节点,由父节点操作 document.body.appendChild(h2);//追加至父元素末尾 /*节点与页面中元素一一对应,想在页面中出现几个元素, 就需要创建几个节点*/ var h3 = document.createElement("h3"); //指定位置添加 document.body.insertBefore(h3,h2); //移除节点 //document.body.removeChild(div); /* 1.实现网页轮播图 方式一:控制图片的隐藏与显示 方式二:切换图片路径 2.参照效果图(添加元素练习) */ </script> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #banner{ width:600px; height:300px; margin:0 auto; } #banner img{ width:600px; height:300px; } </style> </head> <body> <div id="banner"> <img src="northStar.jpg" alt="" id="img"> </div> <script> //1.保存图片路径 var imgArr = ["northStar.jpg","wxy.jpeg"]; //2.保存图片索引 var index = 0; //3.开启间歇调用 var timer = setInterval(autoPlay,1000); function autoPlay(){ //更新索引 index ++; //判断是否越界 if(index == imgArr.length){ index = 0; } //修改元素的src属性 img.src = imgArr[index]; } </script> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> table{ width:600px; border:1px solid #000; } th,td{ border:1px solid #000; } </style> </head> <body> <div> <input type="text" name="gname" placeholder="商品名称"> <input type="text" name="gprice" placeholder="商品价格"> <input type="text" name="gcount" placeholder="商品数量"> <button onclick="add()">增加</button> </div> <table> <thead> <tr> <th>商品名称</th> <th>商品价格</th> <th>商品数量</th> <th> <button>操作</button> </th> </tr> </thead> <tbody id="tbody"> </tbody> </table> <script> function add(){ //1.获取输入框 var list = document.getElementsByTagName("input"); //2.获取输入框的值 var gname = list[0].value; var gprice = list[1].value; var gcount = list[2].value; //3.创建元素节点 var tr = document.createElement("tr"); var td1 = document.createElement("td"); td1.innerHTML = gname; var td2 = document.createElement("td"); td2.innerHTML = gprice; var td3 = document.createElement("td"); td3.innerHTML = gcount; var td4 = document.createElement("td"); td4.innerHTML = "<button>修改</button><button>删除</button>"; //4.添加显示 tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); tr.appendChild(td4); tbody.appendChild(tr); /* var list var tr for(var i = 0; i < 3;i++){ var td = document.....; td.innerHTML = list[i].value; tr.appendChild(td); } var td4 = ; tr.appendChild(td4); tbody.appendChild(tr) */ } </script> </body> </html>