javascript基础
学习网站：https://github.com/paperplane110/30-Days-Of-JavaScript
一、javascrip简介
1、什么是javascrip？
javascrip是一种web前端的描述语言，也会一种基于对象和事件驱动的、安全性好的脚本语言。
2、特点
（1）它运行在服务端，从而减轻了服务器压力。
（2）js是一种直译式脚本语言（解释型语言），一种动态型、弱类型语言
3、作用
（1）定义网页的行为。 实现网页的交互。
（2）丰富客户端效果，数据的有效传递
4、三大部分：ECMEscript（核心）、DOM(文档对象模型)、BOM(浏览器对象模型)
二、js引入方式及js方法
引入方式有三种：行内式引入、内部式引入、外部式引入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js的方法</title> <style type="text/css"> </style> </head> <body> <!-- 行内式引入 --> <p id="p1" onclick="clickhandler()">123</p> </body> <!-- 建议引入时，在body标签之后，因为我们要等待所有dom元素加载完成之后才去执行相应的js操作 --> <!-- 外部式引入 --> <!-- <script type="text/javascript" src="./01-1.js"></script> --> <!-- 内部式引入 --> <script type="text/javascript"> //页面输出 document.write("<span class='span1'>456</span>") // 向控制台输出内容 console.log("123456") // 向控制台抛出一个错误 console.error("错误！") // 输出一个对象的所有属性 console.dir(window) // 弹出输入框，返回输入内容 var a = prompt("输入你的名字："); console.log(a); //js函数定义 function clickhandler(){ /*多行 注释*/ // 弹出框 alert(1); } //调用函数 clickhandler() </script> </html>
三、变量
所有创建变量声明都用：var
如果没有使用var关键字声明的变量就是全局变量
一行可以声明多个变量.并且可以是不同类型
js中代码的执行顺序是至上往下的
变量名规范：
变量名可以由字母、数字、下划线、$组成，不能是纯数字，不能以数字开头，不能是关键字和保留字，除了关键字，top name也尽量不使用。变量命名建议使用驼峰状
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js变量</title> </head> <body> </body> <script type="text/javascript"> // 1、先声明再定义 var dog; alert(dog); dog = "小黄"; alert(dog); // 2、声明时即刻定义 var cat = "小猫"; alert(cat); </script> </html>
四、数据类型
1、基本数据类型：
数字 number
字符串 string
布尔 boolean
空对象 null
空值 表示变量未赋值 undefined
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数据类型</title> </head> <body> </body> <script type="text/javascript"> //数字 var a = 123; // console.log(a); // 输出a的数据类型 console.log(typeof a); //字符串 var str = "123"; console.log(str); // 布尔类型 var b1 = true; console.log(b1); console.log(typeof b1); // null var c1 = null; //空对象 object类型 console.log(c1) console.log(typeof c1); // undefined var v1; console.log(typeof v1); var e1 = 5/0; //输出：Infinity(无限大) 是一个number类型 </script> </html>
2、引用数据类型：
Function 函数
Object 对象
Array 数组
String 字符串
Date 日期
五、运算符
赋值运算符 = += -= *= /= %=
算术运算符 + - * / % ++（自增） --（自减）
比较运算符 ==(比较两者的值是否相等) ===(比较两者的值和类型是否相等) > < >= <= != (比较值) !==(比较值和类型)
逻辑运算符 and(&&) or(||)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>运算符</title> </head> <body> </body> <script type="text/javascript"> //1、赋值运算符 var money = prompt("请输入你的金额："); var saveMoney = money * (1+0.02); console.log(saveMoney); //2、算术运算 + - * / % var a = 10; var b = 4; var sum = a+b; console.log(sum); //3、复合运算符 += -= *= /= %= var c = 7, d = 8; d = c + d; // 同 d+=c console.log(d); //4、自增和自减 var f = 1; var h = f++; // 结果是1 先赋值给h，然后f再++ var h1 = ++f; //结果是3 f先++，再赋值给h1 // 5、比较运算符 <, >, ==, ===, <=, >= console.log(5>6); console.log(5==5); console.log("5"==5); //返回true，==比较的是值得大小,里面包含了一个隐式的转换，将字符串转为数字，===：类型和值都进行比较 console.log("5"== 5); //返回false // 6、逻辑运算符 and(&&),or(||) console.log(true && true); console.log(false && false); //只要有一个为假就为假 console.log(true || false); //只要有真就为真 console.log(false || false); </script> </html>
字符串操作：
加减乘除运算
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字符串处理</title> </head> <body> </body> <script type="text/javascript"> //字符串运算 var firstName = "八"; var lastName = "王"; var name = "散文"; var am = "作品"; //字符串拼接 var str = name+"诗是一种现代文体﹐是适应现﹑当代社会人们敏感多思﹑复杂缜密等心理特征而发展起来的。虽然中国1000多年前就有类似散文诗的"+am+"﹐欧洲在16﹑17世纪不少作家就写过很有诗意的散文﹐但作为一种独立的文学样式流行起来是在19世纪中叶以后。" var fullName = firstName + " " + lastName; console.log(fullName); //输出：八 王 console.log(str); var a1 = "1"; var a2 = "2"; console.log(a1+a2); //字符串进行+运算,是指字符串拼接 输出：12 console.log(parseInt(a1+a2)); //字符串转换为数字 输出：12 console.log(a1*a2); //可以对字符串进行乘法运算 输出：2 console.log(a1-a2); //可以对字符串进行减法运算 输出：-1 console.log(a1/a2); //可以对字符串进行除法运算 输出：0.5 var b1 = "one"; var b2 = "tow"; console.log(b1*b2); //结果：NaN (not a number NaN是个number类型) console.log(typeof(b1*b2)); //结果：number </script> </html>
六、数据类型转换
Number(null) 返回结果是0；Number(undefined)返回结果是NaN
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数据类型转换</title> </head> <body> </body> <script type="text/javascript"> //1、数字类型转换为字符串 var n1 = 123; var n2 = ""; var n3 = n1 + n2; //隐式转换 console.log(n3); // 输出：123 console.log(typeof(n3)); //输出：string //强制类型转换String()和toString()两种方法 var str1 = String(n1); console.log(str1); console.log(typeof(str1)); var num = 234; console.log(num.toString()) //2、字符串转为数字 var stringNum = "789.23dbdb"; var stringNum1 = "789.23"; var num2 = Number(stringNum1); console.log(num2); //输出：789.23 //解析字符串并返回一个整数 console.log(parseInt(stringNum)); //输出：789 //解析字符串并返回一个浮点型 console.log(parseFloat(stringNum)); //输出：789.23 //js中所有的数据类型都被转换为boolean var b1 = "123"; var b2 = 345; var b3 = 0; var b4 = -23; var b5 = Infinity; var b6 = NaN; var b7 = null; var b8; //undefined // 非0即真 console.log(Boolean(b1)); //true console.log(Boolean(b2)); //true console.log(Boolean(b3)); // false console.log(Boolean(b4)); //true console.log(Boolean(b5)); // true console.log(Boolean(b6)); // false console.log(Boolean(b7)); // false console.log(Boolean(b8)); // false </script> </html>
七、流程控制
1、if语句
if
if...else.....
if.....else if.....else.....
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>流程控制</title> </head> <body> <h2>标题2</h2> </body> <script type="text/javascript"> // if语句 var ji = 10; if (ji >= 20){ console.log("恭喜你，吃鸡成功") }else{ console.log("很遗憾，下次继续努力") } /*if (true){ }else if(true){ }else if(true){ }else{ }*/ //考试系统录入 var math = 90; var english = 60; var sum = 485; //1、总分大于400并且数学成绩大于89分，被清华大学录取 if (sum>400 && math>89){ console.log("被清华大学录取") }else{ alert("没考上") } //如果总分大于400，或者英语成绩大于85，就被复旦大学录取 if (sum>400 || english>85){ console.log("被复旦大学录取") }else{ alert("没考上") } </script> </html>
2、switch语句
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>switch语句</title> </head> <body> </body> <script type="text/javascript"> var gameScore = "better"; switch(gameScore){ //case表示一个条件，满足条件就执行,遇到break就跳出 case "good": console.log("玩的很好") break; //break表示退出 case "better": console.log("玩的特别好") break; case "best": console.log("玩的超级好") break; default: console.log("很遗憾") } </script> </html>
3、while循环
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>while语句</title> </head> <body> </body> <script type="text/javascript"> //while循环： //初始化循环变量，判断循环条件，更新循环变量 var i = 1; while (i<=9){ console.log(i) i += 1; } //将1-100之间所有3的倍数的数输出来 var j = 1; while(j<=100){ if(j%3===0){ console.log(j) } j++; } </script> </html>
4、do....while
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>do-while</title> </head> <body> </body> <script type="text/javascript"> //不管有没有满足while条件，do里面的代码都会执行一次 var i = 3; do{ console.log(i) i++; }while(i<10) </script> </html>
5、for循环
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>for循环</title> </head> <body> </body> <script type="text/javascript"> // 初始化循环变量，循环条件，更新条件 for(var i=1; i<=10; i++){ console.log(i) } //输出1-100之间的偶数 for(var j=1;j<=100; j++){ if(j%2===0){ console.log(j) } } // 计算1-100之间所有数的和 var sum = 0; for(var a=1; a<=100; a++){ sum += a; } console.log(sum); // 打印： /* ****** ****** ****** */ for(var b=1;b<=3; b++){ for(var c=1; c<=6; c++){ document.write("*"); } document.write("<br>"); } </script> </html>
6、练习——打印直角三角形和等边三角形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>练习</title> </head> <body> </body> <script type="text/javascript"> //在浏览器中输出直角三角形(6行的) for(var a1=1; a1<=6; a1++){ //控制行数 for(var a2=1; a2<=a1; a2++){ //控制打印* document.write("*"); } document.write("<br>"); } //等边三角形 for(var i=1; i<=6; i++){ for(var j=i; j<6; j++){ document.write(" "); } for(var s=1;s<=i*2-1; s++){ document.write("*"); } document.write("<br>"); } </script> </html>
八、常见内置对象
1、array（数组）
数组的创建和使用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数组的创建和使用</title> </head> <body> </body> <script type="text/javascript"> //数组：一个容器，装东西 //创建数组 //1、字面量方式创建,推荐使用这种方式，简单、粗暴 var colors = ["red","yellow","black"]; document.write(colors); //输出:red,yellow,black console.log(typeof(colors)); //输出：object console.log(colors); //输出：["red", "yellow", "black"] //空数组 var emptyarray = []; //2、使用构造函数的方式创建，使用new关键字 var colors2 = new Array(); //创建一个空数组 var colors3 = new Array("white", "red"); console.log(colors3); //数组赋值 var arr = []; arr[0] = 123; arr[1] = "ab"; arr[2] = "哈哈"; console.log(arr); console.log(arr[1]); //通过下标取到相应的值 console.log(arr.length); //数组长度 //数组遍历 for(var i=0; i<arr.length;i++){ console.log(arr[i]); } </script> </html>
数组常用方法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数组常用方法</title> </head> <body> </body> <script type="text/javascript"> //1、1数组的合并 concat() var north = ["北京","山东"]; var south = ["深圳", "上海"]; var newArr = north.concat(south); console.log(newArr); //输出：["北京", "山东", "深圳", "上海"] //2、数组转为字符串 toString(),每个元素之间使用逗号隔开 var score = [89,67,88,99]; var str = score.toString(); console.log(str); //输出：89,67,88,99 //join():将数组中的元素使用指定的字符连接起来，会形成一个新的字符串 var str2 = score.join("/"); console.log(str2); //输出：89/67/88/99 //3、查找下标 indexOf(), var index = score.indexOf(88); console.log(index); //输出：2 //如果查找的值不在数组中，返回-1 var index1 = score.indexOf(100); console.log(index1); //输出：-1 //反向查找 var lastindex = score.lastIndexOf(88); console.log(lastindex); //输出：2 //4、数组的排序 var names = ["alex","egon","amy"]; //反转数组 reverse() var reverseNames = names.reverse(); console.log(reverseNames); //输出：["amy", "egon", "alex"] //sort() 按26个字母排序 var ennames = names.sort(); console.log(ennames); //输出：["alex", "amy", "egon"] 如果第一个字母一样 就按第二个字母排，如果第二个一样就按第三个 以此类推 //5、移除元素和添加元素 //移除第一个元素,并返回移除元素 var firstName = names.shift(); console.log(firstName); //输出：alex console.log(names); //输出：["amy", "egon"] console.log(ennames); //输出：["amy", "egon"] 打印发现 ennames也跟着被修改了 //unshift()向数组开头添加一个或多个元素，并返回长度 var newlength = names.unshift("jack","monkey"); console.log(newlength); // 输出：4 console.log(names); //输出：["jack", "monkey", "amy", "egon"] //push() 添加一个或多个元素到数组的末尾，并返回新数组长度 var newLen = names.push("lulu","哈哈"); console.log(newLen); //输出：6 console.log(names); // 输出：["jack", "monkey", "amy", "egon", "lulu", "哈哈"] //pop()：删除数组最后一个元素，并返回删除元素 var popitem = names.pop(); console.log(popitem); //输出：哈哈 //split() 将字符串拆分为数组 var str3 = "hello luffy"; // str4 = str3.split("");//结果：["h", "e", "l", "l", "o", " ", "l", "u", "f", "f", "y"] //以空格为标志进行拆分: str4 = str3.split(" "); console.log(str4); // 输出：["hello", "luffy"] str5 = str4.join(","); //将拆分的数组拼接成字符串 console.log(str5); //输出：hello,luffy </script> </html>
2、函数function
函数的声明与调用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>函数</title> </head> <body> </body> <script type="text/javascript"> // 函数是由事件驱动或者当它被调用时执行的可重复使用的代码块 //函数声明方式一 //1、函数的申明 关键字function ,有函数声明就一定有函数调用 function add(){ alert("函数调用"); } //函数调用 add(); //2、声明函数的时候带参数 function add2(a,b){ alert(a+b); } add2(2,3); //带参数并有返回值 function add3(x,y){ return x+y; } res = add3(4,5); console.log(res); //函数申明方式二 var add4 = function(){ alert('函数被调用了')； } add4() </script> </html>
3、对象 Object
创建对象的常用方法：
（1）使用Object或对象字面量创建
var student = new Object();
student.name = "easy";
student.age = "20";
//字面量方式创建
var sutdent = {
name : "easy",
age : 20
};
（2）工厂模式创建对象
function createStudent(name, age) {
var obj = new Object();
obj.name = name;
obj.age = age;
return obj;
}
var student1 = createStudent("easy1", 20);
var student2 = createStudent("easy2", 20);
...
var studentn = createStudent("easyn", 20);
（3）构造函数模式创建
普通函数与构造函数的区别：
a.在函数定义上没有什么不同，只是调用方式不同，若使用了new操作符调用函数，那它就是构造函数，不使用new操作符的就是普通函数，如 new Array()表示调用构造函数
b.在函数命名是，我们约定构造函数名的首字母大写，以此来从形式上区分构造函数与普通函数
c.使用new操作符调用函数时会经历四个步骤：创建一个新对象；将构造函数作用域赋值给新对象（使this指向新对象）；执行构造函数代码；返回新对象
（4）原型模式创建
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>object-构造函数</title> </head> <body> </body> <script type="text/javascript"> //创建对象 //1、字面量方式创建 key:value形式,推荐使用此法 var stu = { name:"alex", age:22, hobby:"play" }; console.log(stu); console.log(window); //点语法：包括get方法和set方法 var n = stu.name; console.log(n); stu.age = 34; console.log(stu.age); //2、使用Object()构造函数创建对象 obj = new Object(); obj.name = "amy"; console.log(obj); //---------自定义构造函数来创建对象----------- //注意：1、函数名首字母大写，2、构造函数不需要return，3、为对象添加成员变量：this.name = "value" var Stu = function(){ this.name = "alex"; this.age = 18; this.fav = function(){ console.log("吃饭"); } } //创建对象 var s = new Stu(); console.log(s); var s1 = new Stu(); console.log(s1); //s和s1虽然表面相同 ，但其实内存地址是不同的。 //弊端：每次new一个对象，里面的成员变量和方法都一样 //推荐使用 构造函数的方式 function Animal(){ this.name = "星星"; this.age = 14; this.fav = function(){ console.log(this.age); } } //给对象添加方法 Animal.prototype.showname = function(){ alert(this.name); } var a = new Animal() a.fav(); a.showname(); </script> </html>
4、String
常用方法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内置对象</title> </head> <body> </body> <script type="text/javascript"> //内置对象String var str = "hello world"; console.log(str.length); var big = str.toUpperCase();//字符串转为大写 console.log(big); console.log(str); //字符串转为小写 var small = big.toLowerCase(); console.log(small); //以什么样的字符进行切割字符串为数组，并规定返回的数组长度 var arr = str.split(" ",1); console.log(arr); // 结果：["hello"] //返回指定索引值范围内的字符 左闭右开 空格也算 var s = str.slice(1,7); console.log(s); // 输出：ello w console.log(typeof s); // 输出：string //substring(index1,index2)返回索引值为index1到index2的子字符串，左闭右开 空格也算 var a = str.substring(2,7); console.log(a); //结果： llo w console.log(typeof a); //输出：string //内置对象Number //1、转换为字符串 var num = 123; var numStr = num.toString(); console.log(numStr); console.log(typeof(numStr)); num1 = 145.34345; //指定保留小数位数，四舍五入 var newnum = num1.toFixed(2); console.log(newnum); </script> </html>
5、Date
//创建了一个date对象
var myDate = new Date();
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>date</title> </head> <body> </body> <script type="text/javascript"> //创建日期对象 var myDate = new Date(); //获取一个月的第几天 date = myDate.getDate(); console.log(date); //14 //获取当天的时间 console.log(Date()); //Sat Jul 14 2018 14:33:22 GMT+0800 (中国标准时间) //返回某月(0-30) console.log(myDate.getMonth()+1); //7 //返回一周中的某天(0-6, 周天表示0) console.log(myDate.getDay()); //6 //返回日期对象的年份（四位数年份） console.log(myDate.getFullYear()); //2018 //字符串格式 返回当地日期时间 console.log(myDate.toLocaleString()); //输出:2018/7/14 下午2:33:22 </script> </html>
6、Math
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>math对象</title> </head> <body> </body> <script type="text/javascript"> var x = 1.234; //cell()向上取整,大于等于x，并且与它最接近的整数 var a = Math.ceil(x); console.log(a); //2 //floor() 向下取整,小于等于x，并且与它最接近的整数 var b = Math.floor(x); console.log(b); //1 //求两个数的最大值或最小值 console.log(Math.max(2,5)); //5 console.log(Math.min(2,5));//2 //经常用的：random 0-1之间的随机数，包含0，不包含1 var ran = Math.random(); console.log(ran); //0.15840571443875762 //取100-200之间的随机数 var c = Math.random()*100 + 100; console.log(c); //100.54341101410613 //min~max之间的随机数公式：Math.random()*(max-min) + (min) //5-15之间的随机数 var d = Math.random()*10 + 5; console.log(d); //7.489996688351555 </script> </html>
九、定时器
在js中的定时器分两种： setTimeout() 和 setInterval()
1、setTimeout() 只在指定时间后执行一次
//定时器 异步运行
function hello(){
alert("hello");
}
//使用方法名字执行方法
var t1 = window.setTimeout(hello,1000);
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
window.clearTimeout(t1);//去掉定时器
2、setInterval() 以指定时间为周期 循环执行
//实时刷新时间单位为毫秒
setInterval('refreshQuery()',8000);
// 刷新查询
function refreshQuery(){
console.log('每8秒调一次')
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定时器</title> </head> <body> </body> <script type="text/javascript"> //setInterval(code,millisec[,"lang"]) code:要执行的函数或代码 //1秒钟打印一次 var n = 0; var time = null; time = window.setInterval(function(){ n++; console.log(n); },1000) //5秒钟后关闭上面的打印 setTimeout(function(){ clearInterval(time); },5000) </script> </html>
十、正则表达式
1、正则的创建于常用方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>正则表达式</title> </head> <body> </body> <script type="text/javascript"> //创建正则 //1、构造函数创建new RegExp("检测的文本","修饰符") i:不区分大小写，g：全局匹配; var str = "luffy 2018"; var reg = new RegExp("l","ig"); //2、字面量方式创建 var reg1 = /y/ig; //检索方式 //1、test() 检索的字符在字符串中是否存在 // console.log(reg1.test(str)); //输出：true //2、exec() ：用来检索字符串中正则表达式的匹配 console.log(reg1.lastIndex);//保存一次匹配时开始的下标。 输出：0 console.log(reg1.exec(str));//输出：["y", index: 4, input: "luffy 2018"] console.log(reg1.lastIndex);//输出：5 //------常用方法 //1、match 字符串.match(正则) var s = "hello world"; var reg2 = /o/g; //使用正则表达式对字符串执行查找，并将包含查找的结果作为数组返回 console.log(s.match(reg2)); //输出：["o", "o"] //2、替换replace str.replace(被替换的，替换的) console.log(s.replace(reg2, "*")); //3、search() 返回查询到的第一个匹配的字符串在字符串中出现的位置，下标 console.log(s.search(reg2)); //输出：4 //4、split 以匹配的规则分割 console.log(s.split(reg2));//输出：["hell", " w", "rld"] </script> </html>
2、元字符和正则表达式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元字符和正则表达式</title> </head> <body> </body> <script type="text/javascript"> //--------- 一、单个字符和数字 window.onload = function(){ //元字符 一些匹配的规则 //1 .匹配除换行符以外的任意字符 var str = "luffycity 2018"; var reg = /./ig; console.log(reg.exec(str));//输出：l // 如果不想让字符有其他意义 转义\ // \.表示匹配. str = "www.baidu.com"; var reg = /www\......\.com/ig; console.log(reg.exec(str));//输出：www.baidu.com //2、 []:匹配[]里面的任意一个字符 var str1 = "hello"; //匹配字母、数字 var reg1 = /[a-zA-Z0-9]/g; console.log(reg1.exec(str1)); //h var str2 = "a1343"; var reg2 = /[0-9][0-9][0-9]/g; console.log(reg2.exec(str2)); //134 //3、 [^] 所有不在这个范围内的字符 var str3 = "abs123"; var reg3 = /[^a-z][^A-Z]/g; console.log(reg3.exec(str3)); //12 //4、 \d:匹配数字 对立\D:匹配非数字 var str4 = "web"; var reg4 = /\d/g; //匹配数字 var reg5 = /\D/g; //匹配非数字 console.log(reg4.exec(str4));//null console.log(reg5.exec(str4));//w //5、 \w：匹配数字、字母、下划线 \W:匹配除数字、字母、下划线以外的任意字符 var reg6 = /\w/g; var reg7 = /\W/g; console.log(reg6.exec(str4)); //w console.log(reg7.exec(str4)); //null //6、 \s ：匹配空格 trim()：去除字符串前后的空格 \S:匹配非空白字符 var str5 = " lufy"; var reg8 = /\s/g; var reg9 = /\S/g; console.log(reg8.exec(str5)); //" " console.log(reg9.exec(str5)); //"l" // 7、^：以什么开头 $：以什么结尾 var str6 = "www.luffy.com"; var reg10 = /^www/g; console.log(reg10.exec(str6)); //"www" var reg11 = /^www\......\.com$/g; console.log(reg11.exec(str6)); //"www.luffy.com" //--------- 二、重复的字符 //8、 ?：匹配前面的字符0个或1个 var str7 = "123webbr44546ere"; var reg12 = /[0-9]?/g; console.log(reg12.exec(str7)); //"1" //8、 *：匹配0个或任意多个字符 尽可能多的匹配 var reg13 = /[a-z]*/g; console.log(reg13.exec(str7)); //"" //9、 + ：至少匹配1次 var reg14 = /\d+/g; console.log(reg14.exec(str7)); //123 //10、 {10}：匹配连续的10个字符 var stra = "11274747898" // 以1开头后面连续匹配10个数字结尾 var rega = /^1\d{10}$/g; console.log(rega.exec(stra)); //"11274747898" // 11、 {min,max} 最少min个 最多max个 var strb = "edg"; //以大小英文字母结尾开头并最少2个最多3个字母结尾 var regb = /^[a-zA-Z]{2,3}$/g; console.log(regb.exec(strb)); //"edg" //12、 |：或者 var strc = "www.google"; var regc = /www.baidu|google|luffy/g; console.log(regc.exec(strc)); //"google" // 13、 ()：分组 var strc1 = "www.google"; var regc1 = /(baidu)|(google)|(luffy)/g; console.log(regc1.exec(strc1)); //"google", undefined, "google", undefined //获取匹配的字符串 console.log(RegExp.$1); console.log(RegExp.$2); console.log(RegExp.$3); var str = "helloworld"; var reg = /(hello)(world)/g; console.log(reg.exec(str));//"helloworld", "hello", "world" console.log(RegExp.$1);//hello //将分组好的匹配调换顺序 console.log(str.replace(reg,"$2 $1")); //world hello } </script> </html>
3、正则练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> <script type="text/javascript"> window.onload = function(){ //1、检索字符串中是否不包含字母 var str = "12"; var reg1 = /[^a-zA-Z]/g; if (reg1.test(str)){ console.log("不包含"); }else{ console.log("包含"); } //2、去除字符串首尾空格 var str2 = " hello world "; //使用trim()方法 console.log(str2.trim()); // 使用正则 var reg2 = /^\s+/g; var str3 = str2.replace(reg2,"") var reg3 = /\s+$/g; console.log(str3.replace(reg3,"")); // var oBtn = document.getElementById("btn"); //检查用户账号 function check(str){ var re = /^[a-zA-Z]\w{3,15}$/ig; if(re.test(str)){ console.log("正确"); }else{ console.log("不正确"); } } check("alex"); //调用 //手机号码验证 function checkNum(num){ re = /^1[0-9]{10}$/g; if(re.test(num)){ console.log("正确"); }else{ console.log("不正确"); } } checkNum("13456789000"); //验证座机号：区号+号码，区号以0开头，3位或4位，号码由7位或8位组成 function checkTel(num){ re = /^0\d{2,3}-?\d{7,8}$/g; if(re.test(num)){ console.log("正确"); }else{ console.log("错误"); } } checkTel("0832-29999022"); //邮箱验证：第一部分@第二部分.第三部分 第一部分：字母、数字、下划线、短线组成 第二部分同第一部分 第三部分：com或cn组成 function checkMail(mail){ re = /^(\w-*)+@(\w-*)+\.com|cn/g; if(re.test(mail)){ console.log("正确"); }else{ console.log("错误") } } checkMail("_78tg@qq.com"); checkMail("@q-q.com"); checkMail("_78tg@.cn"); } </script> </html>
十一、DOM相关知识
在JS中，所有的事物都是节点，元素、文本等都是节点。
应用场景：可以通过节点进行DOM对象的增删改查
1、获取DOM节点的方法
//通过id获取，唯一的
var oDiv = document.getElementById('box');
//通过类名获取 返回所有该类的节点 通过下标获取某一个节点
var oDiv = document.getElementsByClassName('.box')[0];
//通过标签名获取 返回所有该标签名的节点 通过下标获取某一个节点
var oDiv = document.getElementsByTagName('div')[0];
2、常用DOM节点
3、节点的增删改查
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM对象</title> </head> <body> <div> <h3>路飞学城</h3> </div> <div id="box"> <p>alex</p> <p>wusir</p> <p>xiaomage</p> <p>egon</p> <a id="a1">百度</a> </div> <div> <h3>路飞学城2</h3> </div> </body> <script type="text/javascript"> // 1.创建元素节点 var oH2 = document.createElement('h2'); // 设置oH2的内容，p标签会被解析成p元素显示到HTML页面中 oH2.innerHTML = '<p>嘿 sariy</p>'; // 设置元素内容innerText 只设置元素内的文本内容，div标签将被当做文本元素 oH2.innerText = '<div>嘿嘿</div>' // 2.将创建好的元素节点添加到指定元素所有内容的后面 var oDiv = document.getElementById("box"); oDiv.appendChild(oH2); // 获取元素节点里的所有内容 包括标签和文本 console.log(oDiv.innerHTML); // 表示元素节点的标签名大写 console.log(oDiv.tagName); // 只获取元素内的文本内容，html标签将被忽略 console.log(oDiv.innerText); // 设置元素id oH2.id = 'luffy'; // 设置类名 oH2.className = 'wusir'; oH2.className = 'wusir2'; //获取标签属性 console.log(oH2.getAttribute('class'));//wusir2 oA = document.getElementById("a1"); // 设置标签属性 oA.setAttribute('href','https://www.baidu.com'); console.log(oDiv.innerHTML); // 删除元素上的属性 oA.removeAttribute('href'); // 删除创建的对象 // oDiv.removeChild(oH2); //如果为true 克隆当前元素与元素的所有子节点 // console.log(oDiv.cloneNode(true)); // 父节点.replaceChild(新节点,子节点) 用新节点替换某个子节点 var op = document.createElement('p'); op.innerText = '我是一个段落'; oDiv.replaceChild(op,oA); //style属性 ：css内联样式属性值 //一般情况下， css的样式属性中出现“-” 号，则对应的style属性 是：去掉“-”号，把“-”号 后面单词的第一字母大写。 如果没有“-”号，则两者 一样。 //例如:oDiv.css.backgroundColor = 'red'; </script> </html>
4、DOM相关案例
（1）模态框案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模态框架</title> <style type="text/css"> *{ padding:0; margin:0; } html,body{height: 100%;} #box{width: 100%;height: 100%;background-color: rgba(0,0,0,0.3);} #content{ position: relative; top:150px; width: 400px; height: 200px; line-height: 200px; text-align:center; color:red; background-color: #fff; margin:auto; } #span1{ position: absolute; background-color: red; top:0; right: 0; width: 30px; height: 30px; line-height: 30px; color:white; } #span1:hover{cursor:pointer;} </style> </head> <body> <button id="btn">弹出</button> </body> <script type="text/javascript"> //dom : document object model //树状结构 console.log(document); //获取dom元素 var btn = document.getElementById("btn"); //创建divdom元素 var oDiv = document.createElement("div"); var oP = document.createElement("p"); var oSpan = document.createElement("span"); oDiv.id = "box"; oP.id = "content"; //添加内容 oP.innerHTML = "模态框成功弹出"; oSpan.id = "span1"; oSpan.innerHTML = "X"; //添加子节点 oDiv.appendChild(oP); oP.appendChild(oSpan); console.log(btn); // btn.onclick = function(){ //动态添加div到body中 console.log(btn.parentNode); btn.parentNode.insertBefore(oDiv,btn); } oSpan.onclick = function(){ //删除子节点 oDiv.parentNode.removeChild(oDiv); } </script> </html>
（2）点击有惊喜
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>点击有惊喜</title> <style type="text/css"> *{ padding:0; margin:0; } .box{ width: 200px; height: 200px; background-color: red; text-align: center; color: white; line-height: 200px; font-size: 20px; font-weight: bold; margin:20px auto; } .box:hover{ cursor:pointer; } </style> </head> <body> <div class="box">点击有惊喜！</div> </body> <script type="text/javascript"> var oBox = document.getElementsByClassName("box")[0]; console.log(oBox); var a = 0; oBox.onclick = function(){ a++; if (a%4===1){ this.style.background = "green"; this.innerText = "继续点击"; }else if(a%4===2){ this.style.background = "blue"; this.innerText = "哈哈，骗你的"; }else if(a%4===3){ this.style.background = "transparent"; this.innerText = ""; }else{ this.style.background = "red"; this.innerText = "点击有惊喜！"; } } </script> </html>
（3）简易留言板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简易留言板</title> <style type="text/css"> *{ padding:0; margin:0; } </style> </head> <body> <h2>留言板</h2> <div id="box"></div> <textarea id="msg"></textarea> <input type="button" id="btn" name="" value="留言"> <button onclick="sum()">统计</button> </body> <script type="text/javascript"> var ul = document.createElement("ul"); var box = document.getElementById("box"); box.appendChild(ul); var btn = document.getElementById("btn"); var msg = document.getElementById("msg"); var count = 0; //计数 btn.onclick = function(){ console.log(msg.value); var li = document.createElement("li"); //设置内容 li.innerHTML = msg.value + "<span> x</span>"; //通过标签名获取内容 var lis = document.getElementsByTagName("li") if(lis.length==0){ //如果是第一条，直接添加 ul.appendChild(li); count++; }else{ //不是第一条就在之前插入 ul.insertBefore(li,lis[0]); count++; } //留言之后清空已留言的内容 msg.value = ""; var spans = document.getElementsByTagName("span"); for(var i = 0; i < spans.length; i++){ spans[i].onclick = function(){ ul.removeChild(this.parentNode); count--; } } } function sum(){ alert("一共发布了"+count+"条留言") } </script> </html>
（4）选项卡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选项卡</title> <style type="text/css"> *{ padding:0; margin:0; } ul{ list-style:none; } #tab{ width: 480px; margin:20px auto; border: 1px solid red; } ul li{ float:left; width: 160px; height: 60px; line-height: 60px; text-align: center; background-color: #ccc; } ul li a{ text-decoration: none; color: black; } li.active{ background-color: #fff; } p{ display: none; height: 200px; text-align: center; line-height: 200px; background-color: #fff; } p.active{ display: block; } </style> </head> <body> <div id="tab"> <ul> <li class="active"><a href="#">首页</a></li> <li><a href="#">新闻</a></li> <li><a href="#">图片</a></li> </ul> <p class="active">首页的内容</p> <p>新闻的内容</p> <p>图片的内容</p> </div> </body> <script type="text/javascript"> var tabli = document.getElementsByTagName("li"); var tabContent = document.getElementsByTagName("p"); for(var i = 0; i < tabli.length; i ++){ //保存i变量 tabli[i].index = i; tabli[i].onclick = function(){ for(var j = 0; j < tabli.length; j++){ tabli[j].className = ""; tabContent[j].className = ""; } this.className = "active"; tabContent[this.index].className = "active"; } } </script> </html>
（5）淘宝搜索框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿淘宝搜索框</title> <style type="text/css"> *{ padding:0; margin:0; } #search{ position: relative; } input{ /*去掉外框线*/ outline:none; display:block; width: 490px; height: 20px; margin-top:20px; padding-left:10px; font-size: 20px; border: 2px solid red; border-radius:10px; } label{ position: absolute; top:1px; left:10px; font-size: } </style> </head> <body> <div id="search"> <input type="text" id="text" name=""> <label for="txt" id="msg">路飞学城</label> </div> </body> <script type="text/javascript"> var txt = document.getElementById("text"); var msg = document.getElementById("msg") //检测用户表单输入 txt.oninput = function(){ if(this.value == ""){ msg.style.display = "block"; }else{ msg.style.display = "none"; } } </script> </html>
（6）获取当前最新时间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获取当前时间</title> </head> <body> </body> <script type="text/javascript"> //每隔1秒获取一次当前时间 setInterval(function(){ var date = new Date(); var y = date.getFullYear(); var m = date.getMonth()+1; var d = date.getDate(); var h = date.getHours(); var min = date.getMinutes(); var s = date.getSeconds(); //今天是2018年7月3日 document.body.innerHTML = "今天是"+y+"年"+m+"月"+d+"日"+" "+num(h)+":"+num(min)+":"+num(s); },1000) //如果时间小于两位数就在前面补0 function num(n){ if (n<10){ return "0"+ n; } return n; } </script> </html>
（7）匀速运动案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>匀速运动案例</title> <style type="text/css"> *{ padding:0; margin:0; } .box{ width: 200px; height:200px; background-color: red; position: absolute; top:50px; left:0px; } </style> </head> <body> <div id="wrap"> <button id="btn">运动</button> <div class="box" id="box1"></div> </div> </body> <script type="text/javascript"> var btn = document.getElementById("btn"); var box1 = document.getElementById("box1"); var num = 0; var time = 0; btn.onclick = function(){ time = setInterval(function(){ num += 5; //速度控制 if (num > 1000){ clearInterval(time); box1.style.display = "none"; } box1.style.left = num+"px"; },10) } </script> </html>
（8）5秒后关闭广告
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>5秒后关闭广告</title> <style type="text/css"> *{ padding:0; margin:0; } img{ position:absolute; } ul{ list-style:none; } #left{ left:0; } #right{ right:0; } ul li{ font-size: 40px; } </style> </head> <body> <img src="./5.jpg" id="left"> <img src="./5.jpg" id="right"> <ul> <li>图片1</li> <li>图片2</li> <li>图片2</li> <li>图片2</li> <li>图片2</li> <li>图片2</li> <li>图片2</li> <li>图片2</li> <li>图片2</li> <li>图片2</li> <li>图片2</li> <li>图片2</li> <li>图片2</li> <li>图片2</li> <li>图片2</li> <li>图片2</li> <li>图片2</li> <li>图片2</li> </ul> </body> <script type="text/javascript"> window.onload = function(){ var left = document.getElementById("left"); var right = document.getElementById("right"); setInterval(function(){ left.style.display = "none"; right.style.display = "none"; }, 5000) } </script> </html>
（9）模拟小米滚动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小米滚动</title> <style type="text/css"> *{ padding:0px; margin:0px; } #box{ width:512px; height:400px; border:3px solid grey; position:relative; overflow:hidden; margin:100px auto; } #xioami{ position: absolute; top:0; left: 0; } .up{ width:100%; height:200px; position: absolute; top:0; } .down{ width:100%; height:200px; position: absolute; top:200px; } </style> </head> <body> <div id="box" class="wrap"> //准备一张长图 <img src="./1.jpg" id="xioami"> <span class="up" id="picup"></span> <span class="down" id="picdown"></span> </div> </body> <script type="text/javascript"> var up = document.getElementById("picup"); var down = document.getElementById("picdown"); var xiaomi = document.getElementById("xioami"); var count = 0; var time = null; up.onmouseover = function(){ //先清定时器 clearInterval(time); time = setInterval(function(){ count -= 1; count >= -449 ? xioami.style.top = count + "px" : clearInterval(time); },10) } down.onmouseover = function(){ clearInterval(time); time = setInterval(function(){ count += 1; count < 0 ? xioami.style.top = count + "px" : clearInterval(time); },10) } </script> </html>
（10）无缝轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝轮播图</title> <style type="text/css"> *{ padding:0; margin:0; } ul{ list-style: none; } .box{ width: 800px; height: 700px; margin:50px auto; overflow:hidden; position: relative; } .box ul li img{ width: 800px; height: 100%; } ul li{ float:left; } .box ul{ width:600%; position:absolute; top:0; left:0; } </style> </head> <body> <div class="box"> <ul> <li><img src="./pic/1.JPG"></li> <li><img src="./pic/2.JPG"></li> <li><img src="./pic/3.JPG"></li> <li><img src="./pic/4.JPG"></li> <li><img src="./pic/5.JPG"></li> <li><img src="./pic/6.JPG"></li> </ul> </div> </body> <script type="text/javascript"> var box = document.getElementsByClassName("box")[0]; var ul = box.children[0]; var num = 0; var time = null; time = setInterval(autoplay,30); //函数声明 function autoplay(){ num--; num<=-4800 ? num=0 : num; ul.style.left = num + "px"; } box.onmouseover = function(){ clearInterval(time); } box.onmouseout = function(){ time = setInterval(autoplay,30); } </script> </html>
十二、BOM相关知识
1、BOM输出
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BOM-输出</title> <style type="text/css"> *{ padding:0; margin:0; } </style> </head> <body> <button onclick="printluffy()">打印</button> <button onclick="findluffy()">查找</button> </body> <!-- bom:browser object model 核心：浏览器，包含输出、屏幕宽高、setInterval、window.open()、close()等 --> <script type="text/javascript"> //1、弹出框 // alert(1); //2、浏览器调试 console.log("werr"); //3、prompt("message", defaultValue) var pro = prompt("web", "baidu"); console.log(pro); //baidu //4、confirm() 如果点击“确定”返回true，点击“取消”返回false var m = confirm("web"); console.log(m); //输出：true function printluffy(){ window.print(); } function findluffy(){ var m2 = confirm("路飞"); find(m2); } </script> </html>
2、open() & close()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>open-close</title> <style type="text/css"> *{ padding:0; margin:0; } </style> </head> <body> <!-- 行间的js中的open() window不能省略 --> <button onclick='window.open("http://www.baidu.com")'>百度</button> <button>打开百度</button> <button onclick="window.close()">关闭</button> <button>关闭网页</button> </body> <script type="text/javascript"> var oBtn = document.getElementsByTagName("button")[1]; var oBtn1 = document.getElementsByTagName("button")[3]; oBtn.onclick = function(){ // open("http://www.baidu.com"); //在当前窗口打开一个空白页面 open("about:blank","_self"); } oBtn1.onclick = function(){ if(confirm("是否关闭当前网页？")){ close(); } } </script> </html>
3、BOM其他对象和方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> <script type="text/javascript"> alert("刷新了"); //返回浏览器用户设备信息 console.log(window.navigator.userAgent); //查看网页相关信息，如host,port,href等 console.log(window.location); //经常使用的一个方法，自动打开一个网址 // window.location.href = "http://www.baidu.com"; //全局刷新，尽量少用 window.location.reload(); //3秒刷新一次页面 setTimeout(function(){ window.location.reload(); },3000); </script> </html>
4、client系列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>client</title> <style type="text/css"> *{ padding:0; margin:0; } .box{ width: 200px; height: 200px; position: absolute; border: 1px solid red; margin:10px 0px 0px 0px; padding:10px; } </style> </head> <body> <div class="box"></div> </body> <script type="text/javascript"> /* client: clientTop 内容区域到边框顶部的距离 clientLeft 内容区域到边框左侧的距离 clientWidth 内容的区域+左右padding 即可视宽度 clientHeight 内容的区域+上下padding 即可视高度 */ var oBox = document.getElementsByClassName("box")[0]; console.log(oBox.clientTop);//1 console.log(oBox.clientLeft);//1 console.log(oBox.clientWidth);//220 console.log(oBox.clientHeight);//220 </script> </html>
5、屏幕可视区域
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>屏幕可视区域</title> </head> <body> </body> <script type="text/javascript"> //获取当前屏幕可视区域宽高 window.onload = function(){ console.log(document.documentElement.clientWidth); console.log(document.documentElement.clientHeight); //对浏览器可视区域进行监听 window.onresize = function(){ console.log(document.documentElement.clientWidth); console.log(document.documentElement.clientHeight); } } </script> </html>
6、offset系列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>offset</title> <style type="text/css"> body{ position: relative; } </style> </head> <body> <div id="box" style="width:200px;height:200px;border:1px solid red; position:absolute;top:2px;left:3px;"></div> </body> <script type="text/javascript"> /* offset: offsetTop：如果盒子没有设置定位，则是到浏览器顶部的距离；如果设置定位，则是以父盒子为基准的top值 offsetLeft：如果盒子没有设置定位，到浏览器左侧的距离；如果设置定位，则是以父盒子为基准的left值 offsetWidth：内容区域+padding+border offsetHeight：内容区域+padding+border */ window.onload = function(){ var obx = document.getElementById("box"); //占位宽、高 Top Left console.log(obx.offsetTop); //2 console.log(obx.offsetLeft); //3 console.log(obx.offsetWidth); //202 console.log(obx.offsetHeight); //202 } </script> </html>
7、scroll系列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>scroll</title> <style type="text/css"> *{padding:0;margin:0;} </style> </head> <body style="width: 2000px;height: 2000px;"> <div style="height:200px;background-color: red;"></div> <div style="height:200px;background-color: yellow;"></div> <div style="height:200px;background-color: pink;"></div> <div style="height:200px;background-color: blue;"></div> <div style="height:200px;background-color: orange;"></div> <div id="scroll" style="width: 200px;height: 200px;border:1px solid grey;overflow:auto;"> <p style="font-size: 30px;">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p> </div> </body> <script type="text/javascript"> /* */ window.onload =function(){ //实时监听滚动事件 //监听页面滚动 window.onscroll = function(){ console.log("上"+document.documentElement.scrollTop); //往上滚动了的距离 console.log("左"+document.documentElement.scrollLeft); //往右滚动了的距离 console.log("宽"+document.documentElement.scrollWidth); console.log("高"+document.documentElement.scrollHeight); } //scrollHeight:指内容的高度+padding，不含margin //监听id为scroll的盒子的滚动 // var s = document.getElementById("scroll"); // s.onscroll = function(){ // console.log("上"+s.scrollTop); // console.log("左"+s.scrollLeft); // console.log("宽"+s.scrollWidth); // console.log("高"+s.scrollHeight); // } } </script> </html>
浙公网安备 33010602011771号