基本语法
JavaScript无类型语言:即声明变量时不需要指定类型
一、执行顺序
顺序执行,浏览器顺序加载
二、语法
-
对大小写敏感
-
语句末尾的分号可有可无
-
常量:const 常量名 = 常量值
-
变量:
全局变量:函数体外不定义的变量(var 变量名)
局部变量:函数体内部或语句块内定义的变量(let 变量名)
-
数据类型:
- 数字型:整数、浮点数
- 字符型:单引号或双引号括起来的一串内容
- 布尔型(逻辑型):true、false
- 特殊类型:NULL、Underfined、NaN
-
运算符:
-
算数运算符:%,++,–;(i++):先赋值,后自增,(++i):先自增,后赋值
-
比较运算符(关系运算符):<、>、<=、>=、!= ,!==,==等
-
赋值运算符:*复合赋值运算符(例:a+=2)
-
逻辑运算符:&&、||、!;
语句中存在短路现象:
- &&运算的短路现象:当存在一个为假时,后面的语句将不再执行
- ||运算的短路现象:当存在一个为真时,后面的语句将不在执行
-
条件运算符:三目运算符(条件?为真结果:为假结果)
-
其他运算符:位运算、逗号运算
-
运算符的优先级:单目运算符>双目(多目)运算符>括号>算数运算符>比较运算符>逻辑运算符>条件运算符>赋值运算符
-
流程控制
一、顺序结构
按语句的先后顺序依次执行
二、选择结构
根据条件选择不同的语句执行
- if语句
- switch-case语句
- 条件表达式
三、循环结构
- while循环:“当”型循环
- do-while循环:“直到”循环
- for循环:
- for…each循环:
- break:终止循环
- continue:结束本次循环
函数
一、定义
实现某个特定功能的代码块
方式
-
关键字:function 函数名(形参1,形参2…){函数体语句}
-
字面量:var 变量 = function 函数名(形参…){函数体语句}
-
构造函数:var 变量 = new Function(‘形参’,…,‘函数体语句’)
解释:关键字定义的函数时函数声明,会提前解析,可在任意位置调用;其余两种方法定义的函数不是函数声明,必须在声明后才能进行调用(即调用必须在函数体后面)
二、调用
- 简单调用:函数名(实参1,实参2,…)
- 在事件响应中调用:事件名 = 函数名(实参)
- 在链接中调用:<a herf = “JavaScript : 函数名(实参)”
三、参数
函数的参数可有可无
- 形参(形式参数):在函数定义时,出现在函数首部的参数(即占位符,无意义)
- 实参(实际参数):在函数调用时,出现在函数首部的参数(实在数据)
- 传递方向:实参 --> 形参
- 返回值:函数可以有返回值(通过return语句返回),也可以没有
- 嵌套函数:在一个函数的内部再定义一个函数
- 递归函数:函数自己调用自己
- 内置函数:Js定义好的函数,用户可以直接调用。
- parseInt:将数字字符转化成整数
- parsrFloat:将数字字符转化成浮点数
- encodeURI:将字符串转化成有效的URL地址
- decodeURI:将encodeURI文本进行解码
- isNaN:判断是否为数字,不是数字为true,是数字为false
- eval:计算字符串表达式的值
面向对象
不是JavaScript独有的,是一种思想
一、特征
- 封装性:隐藏内部细节,之对外开放操作接口
- 继承性:一个对象可以继承另一个对象的成员,在不改变另一个对象的前提下进行扩展
- 多态性:同一个操作作用于不同的对象会产生不同的结果
二、对象的定义
通过“{}”实现,对象的成员是键值对,多个成员用“,”隔开
*空对象: var o1= {}
*单个成员的对象: var o2= {name:'jack'}
*多个成员的对象: var o3 ={name: 'rose',sex:'female',age:16}
*含方法的成员对象: var o4={name: 'Tom',sex:'male',age:2,say:'function(){console.log("hello")}'}
三、访问对象的成员
对象名.成员名
四、对象成员的遍历
for... in
for (var obj) in o4
五、对象的拷贝
1.浅拷贝
将原对象的快捷方式拷贝给新对象(复制了快捷方式,对象本身没有复制)
优点:节省内存空间
p2 === p1
为true
var p1 = {
name: "jack",
age: 17
}
var p2 = p1
console.log(p1)
console.log(p2)
p2.name = 'tom'
console.log(p1)
console.log(p2)
2.深拷贝
真正创建一个对象的副本,将该副本给零一个对象
function deepCopy(obj) {
var o = { }
for (var k in obj){
o[k] = (typeof obj[k] === "object")?deepCopy(obj[k]):obj[k]
}
return o
}
var p1 = {
name:'jack',
age:16,
subject:{
name:['html','css']
}
}
var p2 = deepCopy(p1)
console.log(p1)
console.log(p2)
console.log(p1 === p2)
p2.name = "rose"
console.log(p1)
console.log(p2)
六、构造函数
是JavaScript创建对象的另一种方式,和“{}”不同的是可以创建若干具有相同特征的对象
七、js中内置的构造函数
使用方法:new 构造函数名([参数])
object: new Object()
String:new String('123456')
Date:new Date(2021-03-12)
Number:new Number()
八、访问对象的构造函数
通过对象的 constructor
属性
对象名.constructor
九、私有成员
在构造函数中用var定义的变量
1.访问方式
私有成员不能通过对象名.成员名的方式访问
访问时需在构造函数中嵌套定义一个函数返回私有成员的值
function Peoson (){
var name = 'jack'
this.getname=function(){
return name
}
}
var o1 = new Peoson()
console.log(o1.name)
console.log(o1.getname())
十、this
this在函数中使用,函数的调用环境变化了this的指向也会发生改变
- 使用new关键字蒋函数作为构造函数调用时,在该构造函数内部的this指向新创建的对象
- 直接通过函数名调用函数时,函数中的this指全局对象(浏览器中指window对象)
- 将函数作为对象的方法调用,this指向该对象
- 改变this指向: apply()、call()
十一、常用的内置对象
String:字符串对象
Number:数值对象
Math:数学运算
Date:日期对象
Array:数组对象
十二、原型和继承
每创建一个函数就会随之有一个对象存在,函数通过prototype属性指向对象(原型又称为原型对象,指的是方法所对应的对象)
- 通过原型实现继承:一个对象没有某个属性或方法,可以从另一个对象中获取,从而实现继承
- 替换原型对象实现继承,将构造函数的原型对象替换成一个新的对象,那么基于该构造函数创建的对象给就会继承新的原型对象
- 利用
Object.create()
实现继承
十三、原型链
对象由原型对象,原型对象也有原型对象,这样就构成链式结构简称为原型链
- 对象的构造函数
- 函数的构造函数:函数的本质是对象,因此函数也有构造函数。所有内置对象的构造函数都是Function函数
- 原型对象的原型对象:对象的原型通过
对象.constructor.prototype
获取,因为constructor
属性又指向构造函数构成了循环,无法访问原型对象的原型,为了解决该问题有些浏览器(火狐、谷歌)为对象增加了新的属性:__proto__
用来指向原型对象的原型
十四、原型链的结构
- 自定义函数,以及Object、String、Number等内置函数都是由Function函数来创建的,Function函数是由Function函数自身创建的
- 每个构造函数都有一个原型对象,构造函数通过prototype属性指向原型对象,原型对象由通过constructor属性指向构造函数
- 由构造函数创建的示例对象,继承自构造函数的原型对象,通过实例对象的
__proto__
属性可以直接访问原型对象 - 构造函数的原型对象继承字Object的原型对象,而Object的原型对象的
__proto__
属性为Null
十五、instanceof
运算符
用来检测一个对象的原型链中是否含有某个构造函数的prototype属性所表示的对象,有返回true,无返回false
数组
类型相同的数据集合
一、创建数组
- 使用Array对象创建,
var arr = new Array('a1','a2',12,32)
- 使用“[]”创建数组,
var tep = new[1,2,3,4,'a']
二、数组的基本操作
-
获取数组的长度:Array对象提供length属性提供存放数组的长度
-
数组元素的访问和遍历:
2.1 访问数组元素:数组名[下标]
2.2 遍历:通过for…in…循环实现
-
元素的添加:数组名.push()
-
元素的修改:数组名[下标] = 新值
-
元素的删除:delete 数组名[下标]
三、数组的排序
- 冒泡排序:相邻两个元素进行比较,通过大小关系,进行相互交换位置
- 插入排序:
- 选择排序:
四、常用操作
-
栈和队列方法:
1.1 push():给数组尾部添加一个或多个元素,返回数组新长度
1.2 unshift():给数组开头添加一个或多个元素,返回新长度
1.3 pop():从数组尾部删除一个元素,并返回该元素,若数组为空,返回undefined
1.3 shift():从数组开头删除一个元素,并返回该元素,若数组为空,返回undefined
-
检索方法:
2.1 includes():确定数组中是否含有某个元素,有为true,无为false
2.2 indexOf():返回给定元素的第一个索引
2.3 lastindexOf():返回给定元素的最后一个索引
2.4 Array.isArray():判断传递过来的值是否为Array,是返回true,否返回false
-
数组转字符串:
3.1 join():将数组中的搜友元素连接一个字符串中
3.2 toString(): 将数组转换成字符串
-
其他方法:
4.1 sort():对数组进行排序并返回数组(默认升序)
4.2 fill():用一个固定值填充数组中指定下标范围内的元素
4.3 reverse():颠倒数组中元素的位置
4.4 splice():在指定范围内对数组添加或删除元素
4.5 slice():把指定范围内的数组元素拷贝到新数组中
4.6 concat():合并两个或多个数组
闭包
是指有权访问另一个函数作用域内的变量(局部变量)的函数
一、作用
- 在函数外部读取函数内部的变量
- 可以让变量的值始终保存在内存中(不能滥用闭包。否则会造成内存的消耗)
二、实现
在一个函数内部创建另一个函数,通过另一个函数访问这个函数的局部变量
BOM对象(Browser Object Model)
浏览器对象模型
一、Window(核心对象)
- 属性
- name:窗口名称
- closed:布尔值,表示窗口是否关闭
- top:最顶层的父窗口
- parent:当前窗口的父窗口
- 方法
- alter():消息框
- confirm():确认框
- prompt():带输入的消息框
- open():打开窗口
- closed():关闭窗口
- focus():焦点
- moveTo():将窗口移动到指定位置
- resizeTO():调整窗口的大小到指定的宽高
二、Location(地址对象)
- 属性
- href:返回一个完整的URL地址
- port:URL服务器的端口号
- protocol:URL协议
- host:URL的主机名和端口号
- hostname:URL主机名
- 方法
- reload():重新载入当前文档
- replace():用新文档替换当前文档
- assign():载入一个新文档
三、Document(文档对象)
- 属性:
- body:代表文档主题
- form:代表表单
- 方法:
- getElementById():通过id获取标签
- getElementsByTagNames():通过标签名获取标签
四、Screen(屏幕对象)
- 属性
- height:屏幕高度
- width:屏幕宽度
- colorDepth:屏幕的颜色深度
- 方法:
- getPageX():获取相对于页面的X轴值
- getScreenX():获取绝对X坐标值
五、History(历史对象)
- 属性:
- length:历史列表中的网址数
- 方法:
- go():加载历史列表中某个具体页面
- back():加载历史列表中的前一个URL
- forward():加载历史列表中的下一个UPL
六、Navigator(浏览器对象)
- 属性:
- appName:浏览器的名称
- appVersion:浏览器的版本
- cookieEnable:浏览器是否启用cookie
DOM对象(Document Object Model)
一、常见概念
- 根节点:标签时整个文档的根,有且只有一个
- 子节点:某个节点的下一级节点。例如:是的子节点
- 父结点:某个节点的上一级节点。例如:是的父节点
- 兄弟节点:两个或多个节点有同一个父节点。例如为兄弟节点
二、对象属性
- document.body:文档中的body元素
- document.forms:文档中的form对象
- document.images:文档中多有的Image对象
- document.documentElement:文档中所有的html元素
三、对象方法
- document.getElementById():返回指定id的对象
- document.getElementsByName():返回指定名称的对象的集合
- document.getElementsByClassName():返回指定类名的对象集合
- document.getElementsByTagName():返回指定标签名的对象集合
四、元素(标签)的内容
- 属性
- innerHTML:返回开始和结束标签之间的html
- innerText:返回元素中去除所有标签的内容
- textContent:返回指定节点的文本内同
- 方法
- document.write():向文档写入指定的内容(写入后不换行)
- document.writeln():向文档写入指定的内容(写入后换行)
五、元素属性
- 作用:便于JavaScript获取、修改、删除、遍历html元素
- 属性:
- attributes:返回元素的属性集合
- 方法:
- setAttribute(name,value):设置或修改指定原型的值
- getAttribute(name):获取指定元素的属性值
- removeAttribute(name):从元素中删除指定的属性
六、DOM的节点操作
- 获取节点
- firstChild:当前节点的首个节点
- lastChild:当前节点的最后一个节点
- nodeName:当前节点的名称
- nodeValue:当前节点的值
- nextSibling:同一层级中指定节点之后紧跟的节点
- previousSibling:同一层级中指定节点之前的一个节点
- parentNode:当前节点的父节点
- childNodes:当前节点的所有子节点
- 追加节点
- document.createElement():创建元素节点
- document.createTextNode():创建文本节点
- document.createAttribute():创建属性节点
- appendChild():在指定节点的末尾添加一个节点
- insertBefore():在当前节点之前增加子节点
- getAttributeNode():获取指定名称的属性节点
- setAtteibuteNode():改变指定名称的属性节点
- 删除节点
- removeAttributeNode():删除指定节点
- removeChild():删除指定节点的子节点
事件处理
一、概念
- JavaScript侦测到的一些行为,如:页面加载、鼠标单击等具体的动作,它对实现网页的交互效果起着非常重要的作用
- 事件处理程序:JavaScript为响应用户行为所执行的程序代码
- 事件驱动式:在Web页面中JavaScript侦测到用户行为,并执行相应的事件处理程序的过程
- 事件流:在事件发生时,会在发生事件的元素和DOM树的根节点之间按照特定的顺序进行传播的过程。(捕获和冒泡)
- 事件流传播顺序的解决方式
- 事件捕获方式(Netscape – 网景):传播顺序应该是从DOM树到发生事件的元素节点
- 事件冒泡方式(微软):事件流的传播顺序是从发生事件的元素节点到DOM树的根节点
二、事件绑定方式
- 行内绑定:<标签名 事件 = “事件的处理程序”>
- 动态绑定:DOM元素对象.事件 = 事件处理函数
三、事件监听方式
- 早期的IE浏览器:DOM对象.attachEvent(type,callback)
- 标准方式:DOM对象.addEventListener(type,callback)
四、事件对象
- 属性
- type:事件类型
- target:触发事件的元素(事件的目标节点)
- currentTarget:当前触发事件的目标节点
五、事件分类
-
页面事件
- load:页面加载完毕后触发
- unload:页面关闭时触发
-
焦点事件
- focus:获得焦点时触发(不会冒泡)
- blur:失去焦点时触发(不冒泡)
-
鼠标事件
- click:按下并释放鼠标按键时触发
- dbclick:鼠标双击事件
- mouseover:鼠标进入时触发
- mouseout:鼠标离开时触发
- change:内容改变时触发
- mousedown:按下任意鼠标键时
- mouseup:释放任意鼠标按键时
- mousemove:在元素内移动鼠标时
鼠标事件的位置属性
- clientX:鼠标指针在浏览器窗口可视区的水平坐标
- clientY:鼠标指针在浏览器窗口可视区的垂直坐标
- pageX:鼠标指针位于文档的水平坐标(IE6-8不支持)
- pageY:鼠标指针位于文档的垂直坐标(IE6-8不支持)
- screenX:鼠标指针位于屏幕的水平坐标
- screenY:鼠标指针位于屏幕的垂直坐标
-
键盘事件
-
keypress:按下功能键时触发(shift、ctrl、alt、fn、capslock)
-
keydown:键盘按键按下时触发
-
keyup:键盘按键谈起是触发
-
表单事件
- submit:当表单提交时触发
- reset:当表单重置时触发
正则表达式
一、概念
是一种描述字符串结构的语法规则,又称为RegExp
二、模式修饰符
- g:用于在目标字符串中实现全局匹配
- i:忽略大小写
- m:多行匹配
- u:以Unicode编码执行正则表达式
- y:粘性匹配,仅匹配目标字符串中此正则表达式的lastIndex属性
三、字符类别
- .:匹配除"\n"以外的任意单个字符
- \d:匹配任意的阿拉伯数字(0-9)
- \f:匹配任意一个换页符
- \D:匹配任意一个非阿拉伯数字字符
- \w:匹配任意一个字母(大小写)、数字、下划线
- \s:匹配一个空白符(空格、制表符、换页符、换行符)
四、字符集合
- [cat]:匹配集合中的任意一个字符:c、a、t
- [~cat]:匹配除c、a、t以外的字符
- [a-z]:匹配a到z之间的所有字符
- [~a-z]:匹配a到z以外的所有字符
- [a-zA-z0-9]:匹配大小写字母和0-9范围内的字符
- [\u4e00-\u9fa5]:匹配任意一个中文字符
五、字符限定和分组
- ?:匹配前面的字符出现零次或一次
- +:匹配前面的字符出现一次或多次
- *:匹配前面的字符出现零次或多次
- {n}:匹配前面的字符n次
- {n,}:匹配前面的字符最少n次
- {n,m}:匹配前面的字符最少n次,最多m次
六、方法
- String类:
- scarch():参数是一个正则对象
- split():按规则进行分割
- match():正则匹配函数
- replace():替换
- RegExp类:
- exec():
- d
七、贪婪匹配和懒惰匹配
贪婪匹配:表示要匹配尽可能多的字符。默认
\n"以外的任意单个字符
2. \d:匹配任意的阿拉伯数字(0-9)
3. \f:匹配任意一个换页符
4. \D:匹配任意一个非阿拉伯数字字符
5. \w:匹配任意一个字母(大小写)、数字、下划线
6. \s:匹配一个空白符(空格、制表符、换页符、换行符)
四、字符集合
- [cat]:匹配集合中的任意一个字符:c、a、t
- [~cat]:匹配除c、a、t以外的字符
- [a-z]:匹配a到z之间的所有字符
- [~a-z]:匹配a到z以外的所有字符
- [a-zA-z0-9]:匹配大小写字母和0-9范围内的字符
- [\u4e00-\u9fa5]:匹配任意一个中文字符
五、字符限定和分组
- ?:匹配前面的字符出现零次或一次
- +:匹配前面的字符出现一次或多次
- *:匹配前面的字符出现零次或多次
- {n}:匹配前面的字符n次
- {n,}:匹配前面的字符最少n次
- {n,m}:匹配前面的字符最少n次,最多m次
六、方法
- String类:
- scarch():参数是一个正则对象
- split():按规则进行分割
- match():正则匹配函数
- replace():替换
- RegExp类:
- exec():
- d
七、贪婪匹配和懒惰匹配
贪婪匹配:表示要匹配尽可能多的字符。默认
懒惰匹配:表示要匹配尽可能少的字符。在上一个限定符上加上一个"?"就是惰性匹配