前端--JS
ECNAScript是js的一个标准
JS的三大部分:
1.基础部分
2.操作浏览器 BOM
3.操作文档中的标签 DOM
JS的导入方法:
1.在script标签中写入内容
2.在JS文件中写入代码,在head部分的script标签中导入地址
语言规范:
注释:
单行注释://
多行注释:/*..........*/
结束语:
每个语句结束的部分加上分号(;)
基础部分
声明变量:
语法:var 变量名;
变量名由_,数字,字母,$组成,不能有数字开头.其余的规则和python中的命名规则一样.
ES6增加:
const:定义常量,一旦声明常量的值不变
let:用法和var类似,只在let命令所在的代码块内生效
数据类型:
JavaScript:拥有动态类型
例:
var s; //声明变量
var s = 123 //s是数值类型
var s = "123" //s是字符串类型
数值类型:
JavaScript:不区分float和int统一叫数值类型.
例:科学计数法
var num = 10e3
console.log(num) ==>10000
NaN表示不是数值类型(Not a Number)
例:parseInt (取整) 和parseFalse
var num = 10.123;
console.log(parseInt(num)); ==>10
console.log(parseFloat(num)); ==>10.123
var s = "anc";
console.log(parseInt(s)) ==>NaN
字符串类型:
例:字符串的拼接
var s1 = "java";
var s2 = "Script";
console.log(s1+s2); ==>JavaScript
例:``反引符
var name = "小白";
var s = `他叫${name}.`
console.log(s) ==>他叫小白.
字符串的常用方法:
.length 返回长度(属性)
.trim() 去除左右两端的空格
.trimRight() 去除右边的空格
.trimLeft() 去除左边的空格
.charAt(n) 返回第n个字符
.indexOf(元素,n) 返回元素在字符串中的位置(索引) n是从索引即从第n位元素向后找(可以不写n) 没有返回-1
.concat(字符串) 将字符串和原字符串拼接
.substring(num1,num2) num1和num2都是索引 如果num1<num2则从num2切到num1
.slice(num1,num2) 切片 顾头不顾尾 num2可以是负数 没有返回一个空字符串
.toLowerCase() 小写
.toUpperCase() 大写
.split(元素,n) 将字符串按照元素来切割返回有n个元素的列表.(n可以不写)
布尔(bool)类型:
bool值只有true和false
""(空字符),0,null,undefined,NaN都表示false
undefined类型:
表示声明一个变量但没有赋值.
对象类型:
null是一个对象 表示手动清空一个变量.
对象包括:
1.数组(列表)
2.自定义对象(字典)
数组的常用方法:
.length 长度
.push(元素) 获取列表添加元素后的长度 原列表的最后添加元素
.pop() 获取列表最后一个元素 原列表的最后一个元素被删除
.unsift(元素) 获取列表添加元素后的长度 为原列表的开头添加元素
.shift() 获取列表第一个元素 原列表的第一个元素被删除
.slice(num1,num2) 切片支持负数 如果没有返回空列表
.reverse() 反转列表 直接操作原列表
.join("-") 将数组中的每个元素用-连接成一个字符串
.concat(元素) 连接成一个新数组 如果元素是一个列表将列表中的每个元素分别添加到列表中;如果元素是字符串将字符串作为一个元素添加到列表中
.sort() 按照每个元素的ASCII码进行排序,操作原列表
.splice(num1,num2,item1,item2...) 从num1开始删除,删除num2个元素,将删除的元素替换成item1,item2...
.map() 返回一个数组元素调用函数处理后的新数组.
例:sort按照自定义大小排序
function sortNumber(a,b) {
return a-b
}
var l1 = [2,4,0,45,9,12]
l1.sort(sortNumber)
console.log(l1) ==>[0, 2, 4, 9, 12, 45]
例:splice
var l1 = ["a",2,"d",5,2,"a",2]
console.log(l1.splice(2,3,"A","B","C","D","E")); //["d", 5, 2]
console.log(l1) //["a", 2, "A", "B", "C", "D", "E", "a", 2]
例:map
function myMap(a) {
return a**2
}
var l = [1,2,3,4,5]
console.log(l.map(myMap)) //[1, 4, 9, 16, 25]
类型查询:
typeof :是一个一元运算不是一个函数
运算符:
算数元素符:
+, - ,* ,/, %(取余), ++(默认加一), --(默认减一)
比较运算符:
< ,> ,= ,!= ,==(判断,弱判断,即数值相等返回true不管类型是否一致) ,===(即判断数值又判断类型) ,!==
逻辑运算:
&&(and) , ||(or) , !(not) 将一个变量快速转化成bool类型(!!num)
赋值运算:
= , += , -= , *=(乘等于) , /=(除等于)
流程控制:
例: if...else..
var age = 19;
if (age > 18) {
console.log("成年人")
} else {
console.log("未成年")
}
例:if...else if...else...
var a = 5;
if (a>5) {
console.log("a>5")
} else if (a<5) {
console.log("a<5")
} else {
console.log("a=5")
}
例:switch中的每一个case后面都会加break语句,否则程序会继续向下执行剩下的case语句
var today = 6;
switch (today) {
case 1:
console.log(1);
break;
case 2:
console.log(2);
break;
case 3:
console.log(3);
break;
default:
console.log(6);
}
例:for循环
for (var i=0; i<10; i++) { //第一个分号前面是初始化一个变量,第二个变量是条件,第二个后面是在代码块执行完后执行在判断条件,条件成立继续执行,不成立结束循环.
console.log(i);
}
例:for循环数组
var ll = [11,22,33,44,55]
for (var i=0; i<ll.length;i++) {
console.log(ll[i]);
}
例:while循环
var i = 0;
while (i<10) {
console.log(i);
i++;
}
例:三元运算
var a = 1;
var b = 2;
var c = a>b ? a:b;
console.log(c) ==>2
函数:
三种写函数的方法:
1.普通函数 语法:function 函数名(参数) {函数体;}
2.匿名函数 语法:var 变量名 = function (参数) {函数体;}
3.自执行函数:当函数执行完之后参数就销毁不占内存 语法:(function (形参) {函数体;})(实参)
ES6中有有箭头函数(=>)
例:
var a1 = [11,22,33,44];
a1.forEach((i=>) {console.log(i)})
函数的参数和返回值:
例: 两个参数
function fun(a,b) {
return a+b;
}
console.log(fun(4,5)) 结果:9
例: 不传参数 不报错返回NaN
function fun(a,b) {
return a+b;
}
console.log(fun()) 结果:NaN
例:多传一个参数 不报错返回前两个参数的和
function fun(a,b) {
return a+b;
}
console.log(fun(4,5,4)) 结果:9
例:多个返回值 返回最后一个值
function fun() {
return 10,20,30
}
console.log(fun()) 结果:30
属性:
函数中的forEach属性的匿名函数:
例:
var a1 = [11,22,33,44];
a1.forEach(function (k,v) {console.log(k,v)}) 当参数有两个时,结果为列表的每一项元素和对应的索引
var a1 = [11,22,33,44];
a1.forEach(function (i) {console.log(i)}) 当参数有一个时,结果为列表的每一项元素
函数中的map属性的匿名函数:
例:
var l = [0,1,2,3,4];
l.map(function (i) {
console.log(i+1)
})
函数arguments参数:
例:arguments作用是将传递的所有参数组成一个列表
function fun(a,b) {
var ret = 0;
console.log(arguments,arguments.length);
}
fun(1,2,3) 结果:Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ] 3
例: 多传一个参数但是计算出三个数和
function fun(a,b) {
var ret = 0;
for (var i = 0;i<arguments.length;i++) {
ret += arguments[i];
} return ret;
}
console.log(fun(1,2,3)) 结果:6
全局变量,局部变量和作用域:
全局变量:在函数外声明的变量.网页上的所有脚本和函数都可以访问.在页面关闭时会被删除
局部变量:在函数内声明的变量.只能在函数内部.当函数运行完毕变量会被删除
作用域:首先在函数内部找找不到再到外部函数查找,逐步找到最外层
在函数内部可以调用全局变量;在函数外部不调用函数内部的变量
词法分析:
词法分析是在函数调用的前一刻进行.会先形成一个激活对象：Avtive Object（AO），并会分析以下3个方面：
1.函数参数，如果有，则将此参数赋值给AO，且值为undefined。如果没有，则不做任何操作。
2.函数局部变量，如果AO上有同名的值，则不做任何操作。如果没有，则将此变量赋值给AO，并且值为undefined。
3.函数声明，如果AO上有，则会将AO上的对象覆盖。如果没有，则不做任何操作。
函数内部无论是使用参数还是使用局部变量都到AO上找。
例:
var age = 18;
function foo(age) {
console.log(age);
var age = 19;
console.log(age);
} foo(age); 结果:18 19
例:
var age = 18;
function foo() {
console.log(age);
var age = 19;
console.log(age);
} foo(age); 结果:undefined 19
例:
var age = 18;
function foo() {
console.log(age);
var age = 19;
console.log(age);
function age() {
console.log(age)
} console.log(age)
}
foo()
结果:
ƒ age() {
console.log(age)
}
19
19
自定义对象:
JS中的对象本质上是键值对的集合,但是只能用字符串作为key
例:
var a = {"name":"小白","age":18};
console.log(a.name);
console.log(a["name"]);
遍历对象中的内容:
例:
var a = {"1":2,"3":4};
for (var i in a) {
console.log(i,a[i])
}
创建一个对象:
例:
var person = new Object();
person.name = "小白";
person.age = 18;
console.log(person.name); 结果:小白
ES6中含有Map方法:
例:
var m = new Map();
var o = {p: "Hello World"};
m.set(o, "content");
m.get(o); // "content"
m.has(o); // true
m.delete(o); // true
m.has(o); // false
面向对象:
将一个匿名函数赋值给一个变量,且变量名大写相当于构造函数
例:
var Person = function (dream) { //父类构造函数
this.dream = dream;
};
var p1 = new Person("咸鱼翻身") //定义一个子类传入参数子类继承父类的属性
console.log(p1.dream)
例:
var Person = function (dream) { //父类构造方法
this.dream = dream;
};
Person.prototype.work = function() { //父类方法
this.dream ++;
return "工作获取报酬.";
};
var p1 = new Person("咸鱼翻身");
console.log(p1.dream,p1.work());
例:
var Person = function (dream) {
this.dream = dream;
};
var Son = function (dream) {
Person.call(this,dream); //调用父类中的dream属性相当于python中的super
};
var s1 =new Son("当个富二代");
console.log(s1.dream);
例:
var Person = function (dream) {
this.dream = dream;
};
Person.prototype.work = function() {
this.dream ++;
return "工作获取报酬.";
};
var Son = function (dream) {
Person.call(this,dream);
};
//继承父类的方法
Son.prototype = Object.create(Person.prototype);
// 修复 constructor
Son.prototype.constructor = Person;
//为子类添加方法
Son.prototype.sign = function () {
return "唱歌是一门技术"
};
var s1 =new Son("当个富二代");
console.log(s1.dream,s1.work(),s1.sign()
Date对象:
例:
var d = new Date(); //当前时间
console.log(d); //Wed Sep 05 2018 20:38:32 GMT+0800 (中国标准时间)
console.log(d.toLocaleString()); //2018/9/5 下午8:39:40
var d1 = new Date("2018-08-08 12:00:00"); //输入时间 字符串时间
console.log(d1); //输入时间的标准时间
console.log(d1.toLocaleString()); //输入时间的格式化时间
Date的方法:
例:
var d = new Date();
console.log(d);
console.log(d.getDate()); //获取年月日中的日
console.log(d.getDay()); //获取星期
console.log(d.getMonth()); //获取月份(0-11)
console.log(d.getFullYear()); //获取完整年份
console.log(d.getHours()); //获取小时
console.log(d.getMinutes()); //获取分钟
console.log(d.getSeconds()); //获取秒
JSON对象:
例:
var s = {"name":"小白","age":18};
console.log(JSON.stringify(s)); //将对象转换为字符串
var obj = "{\"name\":\"小白\",\"age\":18}";
console.log(JSON.parse(obj)) //将字符串转化成对象
RegExp对象:
JS中正则表达式中间不要加空格
例:
var r = new RegExp("^1[3-9]\\d{9}$"); // \d要转译
console.log(r.test("15012341234")) // true
简写:
console.log(/^1[3-9]\d{9}$/.test("15012341234")); //true \d不用转译
例:
var r = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}$");
console.log(r.test("undefined"));
console.log(r.test()); //不传参数相当于传一个undefined
console.log(r.test(undefined)); //传undefined相当于传了一个"undefined"
console.log(r.test("undefined"));
结果:全部都是true
例:忽略大小写
var s1 = "hellOw world";
console.log(s1.replace(/o/,"你好")); //hellOw w你好rld
console.log(s1.replace(/o/i,"你好")); //hell你好w world
console.log(s1.replace(/O/i,"你好")); //hell你好w world
console.log(s1.replace(/o/gi,"你好")); //hell你好w w你好rld
正则表达式加上g就会记录一个lastIndex属性,用来记录下一次从哪里开始匹配
例:
var r = /hellow/g;
console.log(r.test("hellow"),r.lastIndex); //true 6
console.log(r.test("hellow"),r.lastIndex); //false 0
console.log(r.test("hellow"),r.lastIndex); //true 6
console.log(r.test("hellow"),r.lastIndex); //false 0
Math对象:
例:
console.log(Math.abs(-4)); //绝对值
console.log(Math.floor(4.5)); //取整 向下舍去
console.log(Math.max(4,5)); //取最大值
console.log(Math.min(4,5)); //取最小值
console.log(Math.pow(2,3)); //2的3次幂
console.log(Math.random()); //0-1之间的随机数
console.log(Math.round(7.5)); //四舍五入
console.log(Math.sqrt(9)); //开平方根
BOM
window对象:
window.open() //打开一个空白网页
window.close() //关闭一个用代码打开的网页,用户自己手动打开的网页关闭不了
navigator对象:
例:
console.log(navigator.appName); //Netscape web浏览器全称
console.log(navigator.appVersion); //业界所有的主流浏览器的厂商和版本的详细信息
//5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36
console.log(navigator.userAgent); //客户端的绝大部分信息
//Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36
console.log(navigator.platform); //Win32 浏览器运行所在的操作系统
Screen对象:
例:
console.log(screen.availWidth); //1536
console.log(screen.availHeight); //824
history对象:
例:
history.forward(); //前进一页
history.back(); //后退一页
location对象:
例:
console.log(location.href); //获取当前页面地址
location.href = "https://www.baidu.com"; //跳转到指定页面
location.reload() //重新加载 刷新
弹出框:
弹出框分为三种:
警告框:单击确定按钮返回undefined 浏览器才会继续向下执行 语法: aleat("123")
弹出框:单击确定按钮返回true单击取消返回结果为false 语法: aonfirm("你确定吗?")
提示框:点击确定返回输入框中的内容,点击取消返回null 语法: prompt("请输入答案:","1")
计时器相关:
在一定时间间隔后执行代码,而不是立即执行,称为计时器
setTimeout:多少毫秒后执行JS语句
语法:var 变量名 = setTimeout(JS语句,毫秒) //JS语句是要执行的函数或代码 毫秒是时间
假如要取消setTimeout中执行JS语句操作,可以使用变量名来指定 语法:clearTimeout(变量名)
setInterval:间隔指定周期执行一次JS语句
语法:var 变量名 = setInterval(JS语句,毫秒) //JS语句是要执行的函数或代码 毫秒是周期
假如要取消setInterval中执行JS语句操作,可以使用变量名来指定 语法:clearInterval(变量名)
例:
var t = setTimeout(function() {alert(123)},3000);
console.log(t);
clearTimeout(t);
var t = setInterval(function() {alert(123)},3000);
console.log(t);
clearInterval(t);
DOM
DOM规定HTML文档中的每个成分都是节点:
文档节点(document对象):代表整个文档
元素节点(element对象):代表一个元素(标签)
文本节点(text对象):代表元素(标签)中的文本
属性节点(attribute对象):代表一个属性,元素(标签)才有属性
注释是注释节点(comment对象)
JS可以通过DOM创建动态的HTML:
JS能够改变页面中所有HTML元素和属性;
JS能够改变页面中所有CSS样式
JS能够对页面中的所有事件做出反应
查找标签:
直接查找:
例:
console.log(document.getElementById("d1")); //通过id查找
console.log(document.getElementsByClassName("c1")); //通过class查找 获取的是标签对象的数组
console.log(document.getElementsByName("p")); //通过元素(标签)查找 获取的是标签对象的数组
查找某个特定的标签时并进行操作时,通过id查找后用原生态方法进行操作时不用加索引,但是通过类名或者标签名查找后用原生态方法进行操作时需要加上索引.
间接查找:
例:
var d2ele = document.getElementById("d2");
console.log(d2ele.children); //儿子标签
console.log(d2ele.firstElementChild); //第一个子标签
console.log(d2ele.nextElementSibling); //下一个兄弟标签
console.log(d2ele.previousElementSibling); //上一个兄弟标签
console.log(d2ele.lastElementChild); //最后一个字标签
console.log(d2ele.parentElementChild); //父标签
节点操作:
创建节点:
语法:document.createElement("标签名");
例:
var pEle = document.createElement("span");
pEle.innerText = "小白"; //在文档中没有
添加节点:
语法:
父节点.appendChild(新标签); //追加一个子节点(作为最后的子节点)
父节点.insertBefore(新标签,某个节点) //把增加的节点放到某个节点的前面
例:
var imgEle = document.createElement("img"); //创建img标签
imgEle.setAttribute("src","周杰伦.jpg"); //为img标签添加src属性
var d2Ele = document.getElementById("d2"); //找到id为d2的标签
d2Ele.appendChild(imgEle); //为id为1d2的标签的子标签的下面添加一个子标签
console.log(imgEle.innerText)
var d3Ele = document.getElementById("d3"); //在父标签中找到某个子节点
d2Ele.insertBefore(imgEle,d3Ele); //将img标签插入到父标签中指定的某个字标签前面
console.log(imgEle.innerText);
删除节点:
语法:父节点.removeChild(要删除的节点) //获取要删除的元素,通过父元素调用删除
例:
var d2Ele = document.getElementById("d2"); //找到id为d2的标签
var d3Ele = document.getElementById("d3"); //在父标签中找到某个要删除的子节点
d2Ele.removeChild(d3Ele); //删除节点
替换节点:
语法:父节点.replaceChild(新标签,要被替换的节点)
例:
var d2Ele = document.getElementById("d2"); //找到id为d2的标签
var d3Ele = document.getElementById("d3"); //在父标签中找到某个要被替换的子节点
var imgEle = document.createElement("img"); //创建一个img标签
imgEle.setAttribute("src","周杰伦.jpg"); //为img标签添加一个src属性
d2Ele.replaceChild(imgEle,d3Ele); //替换标签
属性节点:
例:获取文本节点的值
var d3Ele = document.getElementById("d3");
console.log(d3Ele.innerText); 结果:span标签
console.log(d3Ele.innerHTML); 结果:span标签
例:设置文本标签的值
var d3Ele = document.getElementById("d3");
d3Ele.innerText="<p>新的p标签</p>"; //innerText不能识别标签符号
console.log(d3Ele.innerText); //<p>新的p标签</p>
d3Ele.innerHTML="<p>新的p标签</p>"; //innerHTML能识别标签符号
console.log(d3Ele.innerText); //新的p标签
attribute操作:
例:
var d2Ele = document.getElementById("d2");
d2Ele.setAttribute("age","18"); //为id为d2的标签添加属性
console.log(d2Ele.getAttribute("age")); //18 获取标签属性的值
console.log(d2Ele.removeAttribute("age")); //undefined 删除标签的属性
例:
var pEle = document.getElementsByTagName("p");
pEle[0].setAttribute("age",18);
console.log(pEle[0].getAttribute("age"));
console.log(pEle[0].removeAttribute("age"));
获取标签值:
语法: 标签名.value //适用于input,select(下拉框),textarea(用户输入大段文本的文本框)
input标签和textarea标签可以直接对value进行赋值 语法:标签名.value="内容"
input标签和textarea标签的value是用户输入的内容
select标签的value是用户选中那一项的value属性,如果没有就是value属性就是选中那一项后下拉框中的内容
例:
var d4Ele = document.getElementById("d4");
console.log(d4Ele.value);
class操作:
例:
var d1Ele = document.getElementById("d1");
console.log(d1Ele.className); //c c1
console.log(d1Ele.classList); //获取class类值,组成数组
d1Ele.classList.remove("c");
console.log(d1Ele.className); //c1 删除样式类中的c
d1Ele.classList.add("c");
console.log(d1Ele.className); //c c1 添加c到样式类中
console.log(d1Ele.classList.contains("c")); //true 判断c是不是标签的样式类的值
d1Ele.classList.toggle("c2");
console.log(d1Ele.className); //c1 c c2 判断c2在样式类中存在不存在存在就删除,不存在就添加
指定CSS操作:
语法: 标签对象.style.样式名 = 样式值
例:
var cEle = document.getElementsByClassName("c");
cEle[0].style.backgroundColor = "yellow"; //把背景色更改为黄色 样式名中含有中横线将中横线删除并将中横线后面的第一个字母大写
cEle[0].style.width = "400px" //将宽改为400像素 样式名中不含中横线直接写样式名
事件
绑定事件的两种方法:
第一种:
<style>
#d {
width: 100px;
height: 100px;
background: red;
border-radius:50%;
}
</style>
<body>
<div id="d"></div>
<button id="dian" onclick="changecolor(this)">点我</button>
</body>
<saript>
var diEle = document.getElementById("dian");
function changecolor(ths) {
var dEle = document.getElementById("d");
dEle.style.backgroundColor = "yellow";
}
</script>
第二种:
<style>
#dd {
width: 100px;
height: 100px;
background: red;
border-radius:50%;
}
</style>
<body>
<div id="dd"></div>
<button id="bb">点我</button>
</body>
<script>
var bbEle = document.getElementById("bb");
bbEle.onclick = function () {
var ddEle = document.getElementById("dd");
ddEle.style.backgroundColor = "yellow"
}
</script>
常用事件:
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 // 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。
