本文深入浅出地讲解了JavaScript的基础知识，包括数据类型、运算符、流程控制、内置对象等，同时涵盖了DOM操作及BOM相关方法，帮助读者快速掌握前端开发必备技能。
javaScript是一种web前端的描述语言，也是一种基于对象（object）和事件驱动（Event Driven）的、安全性好的脚本语言。
它运行在客户端从而减轻服务器的负担。
javaScript的特点：
-
javaScript主要用来向html页面中添加交互行为
-
javaScript是一种脚本语言，语法和c语言系列语言的语法类似，属弱语言类型。
-
javaScript一般用来编写客户端脚本，如node.js例外。
-
javaScript是一种解释型语言，边执行边解释无需另外编译。
基本数据类型
typeof 可以查看
-
number
-
string
-
boolean
-
null
-
undefined
运算符
js中的运算符跟python中的运算符有点类似，但也有不同。所谓运算,在数学上，是一种行为，通过已知量的可能的组合，获得新的量。
1.赋值运算符
以var x = 12,y=5来演示示例
| 运算符 | 例子 | 等同于 | 运算结果 |
|---|---|---|---|
| = | x=y | x=5 | |
| += | x+=y | x=x+y | x=17 |
| -= | x-=y | x=x-y | x=7 |
| *= | x*=y | x=x*y | x=60 |
| /= | x/=y | x=x/y | x=2 |
| %= | x%=y | x=x%y | x=2 |
2.算数运算符
var a = 5,b=2
| 运算符 | 描述 | 例子 | 运算结果 |
|---|---|---|---|
| + | 加法 | var c = a+b | c = 7 |
| - | 减法 | var c = a-b | c = 3 |
| * | 乘法 | var c = a*b | c = 10 |
| / | 除法 | var c = a/b | c = 2.5 |
| % | 取余 | var c = a%b | c = 1 |
| ++ | 自增 | var x= a++ | x = 6,a = 6 |
| var x = ++a | x = 5,a = 6 | ||
| -- | 自减 | var x = a-- | x = 4,y = 4 |
| var x = --a | x = 5,y= 4 |
3.比较运算符
var x = 5;
| 运算符 | 描述 | 比较 | 返回值 |
|---|---|---|---|
| == | 等于 | x==8,x==5 | false,true |
| === | 等同于（值和类型均相等） | x===5,x==='5' | true,false |
| != | 不等于 | x!='8' | true |
| !== | 不等同与（值和类型有一个不相等，或两个都不相等） | x!==5,x!=='5' | true,false |
| > | 大于 | x>8 | false |
| < | 小于 | x<8 | true |
| >= | 大于等于 | x>=8 | false |
| <= | 小于等于 | x<=8 | true |
数据类型转换
其实这个概念我就详细介绍了，我们的数据类型有很多，在某个页面中展示的数据类型也不同，比如说电话号码我就要求number的类型，而输入姓名的时候就要求string类型的。那么在适当的情况下我们可以将数据类型进行转换。python中比如说int('12') 转换成数值类型的。那么javascript中如何转换的呢？
1.将数值类型转换成字符串类型
var n1 = 123;
var n2 = '123';
var n3 = n1+n2;
// 隐式转换
console.log(typeof n3);
// 强制类型转换String(),toString()
var str1 = String(n1);
console.log(typeof str1);
var num = 234;
console.log(num.toString())
2.将字符串类型转换成数值类型
var stringNum = '789.123wadjhkd';
var num2 = Number(stringNum);
console.log(num2)
// parseInt()可以解析一个字符串 并且返回一个整数
console.log(parseInt(stringNum))
console.log(parseFloat(stringNum));
3.任何数据类型都可以转换为boolean类型
var b1 = '123';
var b2 = 0;
var b3 = -123
var b4 = Infinity;
var b5 = NaN;
var b6; //undefined
var b7 = null;
// 非0既真
console.log(Boolean(b7))
由于隐式转换 如果没有特殊的情况下是不考虑的
流程控制
if和else if
var ji = 20;
if(ji >= 20){
console.log('恭喜你，吃鸡成功，大吉大利')
}
alert('alex');//下面的代码还会执行
var ji = 20;
if(ji>=20){
console.log('恭喜你，吃鸡成功，大吉大利')
}else{
console.log('很遗憾 下次继续努力')
}
if (true) {
//执行操作
}else if(true){
//满足条件执行
}else if(true){
//满足条件执行
}else{
//满足条件执行
}
最后一个else是不需要填写条件的
注意：浏览器解析代码的顺序 是从上往下执行，从左往右
逻辑
与（&&）
//1.模拟 如果总分 >400 并且数学成绩 >89分 被清华大学录入
//逻辑与&& 两个条件都成立的时候 才成立
if(sum>400 && math>90){
console.log('清华大学录入成功')
}else{
alert('高考失利')
}
或（||）
//2.模拟 如果总分>400 或者你英语大于85 被复旦大学录入
//逻辑或 只有有一个条件成立的时候 才成立
if(sum>500 || english>85){
alert('被复旦大学录入')
}else{
alert('高考又失利了')
}
swithch
var gameScore = 'good1111';
switch(gameScore){
//case表示一个条件 满足这个条件就会走进来 遇到break跳出。break终止循环。如果某个条件中不写 break，那么直到该程序遇到下一个break停止
case 'good':
console.log('玩的很好')
//break表示退出
break;
case 'better':
console.log('玩的老牛逼了')
break;
case 'best':
console.log('恭喜你 吃鸡成功')
break;
default:
console.log('很遗憾')
}
while循环
循环三步走：
1.初始化循环变量
2.判断循环条件
3.更新循环变量
var i = 1; //初始化循环变量
while(i<=9){ //判断循环条件
console.log(i);
i = i+1; //更新循环条件
}
do_while
//不管有没有满足while中的条件do里面的代码都会走一次
var i = 3;//初始化循环变量
do{
console.log(i)
i++;//更新循环条件
}while (i<10) //判断循环条件
for循环
for(var i = 1;i<=10;i++){
console.log(i)
}
常用内置函数
数组Array
1.数组的创建方式
-
字面量方式创建（推荐大家使用这种方式，简单粗暴）
var colors = ['red','color','yellow'];
-
使用构造函数（后面会讲）的方式创建 使用new关键词对构造函数进行创建对象
var colors2 = new Array();
2.数组的赋值
var arr = [];
//通过下标进行一一赋值
arr[0] = 123;
arr[1] = '哈哈哈';
arr[2] = '嘿嘿嘿'
3.数组的常用方法
| 方法 | 描述 |
|---|---|
| concat() | 把几个数组合并成一个数组 |
| join() | 返回字符串，其中包含了连接到一起的数组中的所有元素，元素由指定的分割符分割开来 |
| pop() | 移除数组的最后一个元素 |
| shift() | 移除数组的第一个元素 |
| unshift() | 往数组的开头添加一个元素，并且返回新的长度 |
| slice(start,end) | 返回数组的一段 |
| push() | 往数组的最后添加一个元素，并返回新的长度 |
| sort() | 对数组进行排序 |
| reverse() | 对数组进行反转 |
| length | 它是一个属性，唯一的一个，获取数组的长度，可以结合for循环遍历操作 |
字符串String
字符串方法
| 方法 | 描述 |
|---|---|
| charAt() | 返回指定索引的位置的字符 |
| concat() | 返回字符串值，表示两个或多个字符串的拼接 |
| match() | 返回正则表达式模式对字符串进行产找，并将包含查找结果作为结果返回（后面正则表达式课程会详细讲） |
| replace(a,b) | 字符串b替换了a |
| search(stringObject) | 知名是否存在相应匹配。如果找到一个匹配，search方法将返回一个整数值，指明这个匹配距离字符串开始的偏移位置。如果没有找到匹配，返回-1 |
| slice(start，end) | 返回start到end-1之间的字符串，索引从0开始 |
| split(’a‘,1) | 字符串拆分,以a拆分，第一个参数返回数组的最大长度 |
| substr(start,end) | 字符串截取，左闭右开 |
| toUpperCase() | 返回一个新的字符串，该字符串字母都变成了大写 |
| toLowerCase() | 返回一个新的字符串，该字符串字母都变成了小写 |
//1.将number类型转换成字符串类型
var num = 132.32522;
var numStr = num.toString()
console.log(typeof numStr)
//四舍五入
var newNum = num.toFixed(2)
console.log(newNum)
Date日期对象
创建日期对象只有构造函数一种方式,使用new关键字
//创建了一个date对象
var myDate = new Date();
常用的方法
| 语法 | 含义 |
|---|---|
| getDate() | 根据本地时间返回指定日期对象的月份中的第几天（1-31）。 |
| Date() | 根据本地时间返回当天的日期和时间 |
| getMonth() | 根据本地时间返回指定日期对象的月份（0-11） |
| getFullYear() | 根据本地时间返回指定日期对象的年份（四位数年份时返回四位数字） |
| getDay() | 根据本地时间返回指定日期对象的星期中的第几天（0-6） |
| getHours() | 根据本地时间返回指定日期对象的小时（0-23） |
| getMinutes() | 根据本地时间返回指定日期对象的分钟（0-59） |
| getSeconds() | 根据本地时间返回指定日期对象的秒数（0-59） |
Math 内置对象
常用内置对象
| 方法 | 含义 |
|---|---|
| Math.floor() | 向下取整,称为"地板函数" |
| Math.ceil() | 向上取整,称为'地板函数' |
| Math.max(a,b) | 求a和b中的最大值 |
| Math.min(a,b) | 求a和b中的最小值 |
| Math.random() | 随机数,默认0-1之间的随机数,公式min+Math.random()*(max-min),求min~max之间的数 |
普通函数
声明函数之后 调用函数
//1.js中的函数的声明 记得：有函数的声明 就一定有调用
function add(){
alert("函数被调用了")；
alert(this);//当前的this指向了window
//执行的一些操作
}
//2.函数的执行
add()；
或是
var add = function(){
alert('函数被调用了')；
}
add()
带参数的函数
function add3(x,y){
return x+y;
}
var sum = add3(4,5)
alert(sum)
创建对象
使用Object或对象字面量创建对象
JS中最基本创建对象的方式：
var student = new Object();
student.name = "easy";
student.age = "20";
这样，一个student对象就创建完毕，拥有2个属性name以及age，分别赋值为"easy"和20。
来一个对象字面量方式创建对象
var sutdent = {
name : "easy",
age : 20
};
可是这个有着致命的问题：一旦要创建的对象数量很多，那么需要的代码量就会很大，这个方法就没有意义了
工厂模式创建对象
JS中没有类的概念，那么我们不妨就使用一种函数将以上对象创建过程封装起来以便于重复调用，同时可以给出特定接口来初始化对象
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);
通过函数可以极大的方便对象的创建
但是 无法区分对象类型的尴尬
这就需要自己亲自构造函数
构造函数模式创建对象
在上面创建Object这样的原生对象的时候，我们就使用过其构造函数：
var obj = new Object();
在创建原生数组Array类型对象时也使用过其构造函数：
var arr = new Array(10); //构造一个初始长度为10的数组对象
在进行自定义构造函数创建对象之前，我们首先了解一下构造函数和普通函数有什么区别。
1、实际上并不存在创建构造函数的特殊语法，其与普通函数唯一的区别在于调用方法。对于任意函数，使用new操作符调用，那么它就是构造函数；不使用new操作符调用，那么它就是普通函数。
2、按照惯例，我们约定构造函数名以大写字母开头，普通函数以小写字母开头，这样有利于显性区分二者。例如上面的new Array()，new Object()。
3、使用new操作符调用构造函数时，会经历(1)创建一个新对象；(2)将构造函数作用域赋给新对象（使this指向该新对象）；(3)执行构造函数代码；(4)返回新对象；4个阶段。
了解了构造函数和普通函数的区别之后，我们使用构造函数将工厂模式的函数重写，并添加一个方法属性：
function Student(name, age) {
this.name = name;
this.age = age;
this.alertName = function(){
alert(this.name)
};
}
function Fruit(name, color) {
this.name = name;
this.color = color;
this.alertName = function(){
alert(this.name)
};
}
这样我们再分别创建Student和Fruit的对象：
var v1 = new Student("easy", 20);
var v2 = new Fruit("apple", "green");
这时我们再来用instanceof操作符来检测以上对象类型就可以区分出Student以及Fruit了：
alert(v1 instanceof Student); //true
alert(v2 instanceof Student); //false
alert(v1 instanceof Fruit); //false
alert(v2 instanceof Fruit); //true
alert(v1 instanceof Object); //true 任何对象均继承自Object
alert(v2 instanceof Object); //true 任何对象均继承自Object
这样我们就解决了工厂模式无法区分对象类型的尴尬。那么使用构造方法来创建对象是否已经完美了呢？使用构造器函数通常在js中我们来创建对象。
我们会发现Student和Fruit对象中共有同样的方法，当我们进行调用的时候这无疑是内存的消耗。
我们完全可以在执行该函数的时候再这样做，办法是将对象方法移到构造函数外部：
function Student(name, age) {
this.name = name;
this.age = age;
this.alertName = alertName;
}
function alertName() {
alert(this.name);
}
var stu1 = new Student("easy1", 20);
var stu2 = new Student("easy2", 20);
在调用stu1.alert()时，this对象才被绑定到stu1上。
我们通过将alertName()函数定义为全局函数，这样对象中的alertName属性则被设置为指向该全局函数的指针。由此stu1和stu2共享了该全局函数，解决了内存浪费的问题。
但是，通过全局函数的方式解决对象内部共享的问题，终究不像一个好的解决方法。如果这样定义的全局函数多了，我们想要将自定义对象封装的初衷便几乎无法实现了。更好的方案是通过原型对象模式来解决。
原型的模式创建对象查阅相关资料后补充
定时器
在js中的定时器分两种：1、setTimeout() 2、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秒调一次')
}
两种方法根据不同的场景和业务需求择而取之，
一般情况下setTimeout用于延迟执行某方法或功能，
setInterval则一般用于刷新表单，对于一些表单的假实时指定时间刷新同步，动画效果等。
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节点
| 语法 | 含义 |
|---|---|
| childNodes | 获取所有的子节点，除了元素还有文本等 |
| children | 获取所有元素子节点，不包含文本 |
| parentNode | 获取父节点 |
| previousSibling | 获取上一个兄弟节点，包含文本 |
| previousElementSibling | 获取上一个兄弟元素节点，不包含文本 |
| nextSibling | 获取下一个兄弟节点，包含文本 |
| nextElementSibling | 获取下一个兄弟元素节点，不包含文本 |
| firstChild | 获取第一个子节点，包含文本 |
| firstElementChild | 获取第一个子节点，不包含文本 |
| lastChild | 获取最后一个子节点，包含文本 |
| lastElementChild | 获取父元素最后一个元素节点。不包含文本 |
3.节点的增删改查
<div>
<h3>路飞学城</h3>
</div>
<div id="box">
<p>alex</p>
<p>wusir</p>
<p>xiaomage</p>
<p>egon</p>
<a>luffy</a>
</div>
<div>
<h3>路飞学城2</h3>
</div>
// 1.创建元素节点
var oH2 = document.createElement('h2');
// 设置oH2的内容，p标签会被解析成p元素显示到HTML页面中
oH2.innerHTML = '<p>嘿 sariy</p>';
// 只设置元素内的文本内容，div标签将被当做文本元素
oH2.innerText = '<div>嘿嘿</div>'
// 2.将创建好的元素节点添加到指定元素所有内容的后面
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.setAttribute('href','https://www.luffycity.com');
// 删除元素上的属性
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';
BOM输出
所谓BOM指的是浏览器对象模型 Browser Object Model，它的核心就是浏览器
alert(1);//弹出框 调式使用
console.log('路飞学城');//用于浏览器的调用 F12查看
prompt('message',defaultValue)
var pro = prompt('路飞学城','33333');
console.log(pro)
confirm() //如果点击确定 返回true 如果点击取消 返回false
open_close方法
open('https://www.baidu.com');//打开百度网页，winodow对象可以省略
//行间的js中的window不能省略
<button onclick="window.open('https://www.luffycity.com/')">路飞学城</button>
//打开空白页面
open('about:blank',"_self")
//关闭当前页面
close();
//行间js中的window还是不能省略
<button onclick="window.close()">关闭</button>
其他的BOM对象和方法
//返回浏览器的用户设备信息
console.log(window.navigator.userAgent)
//获取用户本地信息
console.log(window.location)
//经常使用的一个方法，跳转一个网址
window.location.href = 'https://www.luffycity.com';
//全局刷新 后面会学习ajax来实现局部刷新操作，这才是我们要学习的重点。记住：尽量少用这个方法
setTimeout(function(){
window.location.reload();
}
client系列
style：
top
left
right
bottom
client：
clientTop 内容区域到边框顶部的距离
clientLeft 内容区域到边框左部的距离
clientWidth 内容区域+左右padding 可视宽度
clientHeight 内容区域+ 上下padding 可视高度
屏幕的可视区域
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);
}
}
offset系列
//占位宽 高 Top Left /* * offsetTop: 如果盒子没有设置定位 到浏览器的顶部的距离,如果盒子设置定位，那么是以父盒子为基准的top值 * offsetLeft： 如果盒子没有设置定位 到浏览器的左部的距离，如果盒子设置定位，那么是以父盒子为基准的left值 offsetWidth 内容+padding+border * */
scroll系列
<body style="width: 2000px;height: 2000px;">
<div style="height: 200px;"></div>
<div style="height: 200px;"></div>
<div style="height: 200px;"></div>
<div style="height: 200px;"></div>
<div style="height: 200px;"></div>
<div id = 'scroll' style="width: 200px;height: 200px;border: 1px solid red;overflow: auto;padding: 10px;margin: 5px 0px 0px 0px;">
<p>路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城
路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城
路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城
路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城
</p>
</div>
</body>
*{
padding: 0;
margin: 0;
}
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)
}
var s = document.getElementById('scroll');
s.onscroll = function(){
//scrollHeight : 内容的高度+padding 不包含边框
console.log('上'+s.scrollTop)
console.log('左'+s.scrollLeft)
console.log('宽'+s.scrollWidth)
console.log('高'+s.scrollHeight)
}
}
-------------------本内容总结自路飞学城python-book和小马老师
扫一扫
9万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
