JavaScript发展史
1. 1994年，网景公司(Netscape)发布了Navigator浏览器0.9版，这是世界上第一款比较成熟的网络浏览器，轰动一时。但是这是一款名副其实的浏览器--只能浏览页面，浏览器无法与用户互动,当时解决这个问题有两个办法，一个是采用现有的语言,许它们直接嵌入网页。另一个是发明一种全新的语言。
liveScript ==> javaScript ==> ECMAscript
2. 1995年Sun公司将Oak语言改名为Java，正式向市场推出。Sun公司大肆宣传，许诺这种语言可以"一次编写，到处运 行"(Write Once, Run Anywhere)，它看上去很可能成为未来的主宰。
3. 网景公司动了心，决定与Sun公司结成联盟
4. 34岁的系统程序员Brendan Eich登场了。1995年4月，网景公司录用了他,他只用10天时间就把Javascript设计出来了。（多肽语言，弱类型，脚本）
5.
(1)借鉴C语言的基本语法
(2)借鉴Java语言的数据类型和内存管理
(3)借鉴Scheme语言，将函数提升到"第一等公民"(first class)的地位
(4)借鉴Self语言，使用基于原型(prototype)的继承机制
JavaScript组成
ECMAscript
BOM浏览器对象模型
DOM文档对象模型
JavaScript书写方式
行内 onclick = “代码”
<script></script>
<script src="路径"></script>
/**/多行注释
//单行注释
JavaScript命名规则
驼峰命名法则
命名规则 数字 字母 下划线 $ 组成，不能数字开头，严格区分大小写
数据类型
number数字类型
boolean布尔值
string字符串
null空值
undefined指针为空(未定义)
object
数据类型转换
数字:parseInt parseFloat Number
字符串：toString、String
布尔值:boolean
数据类型判断
typeof 判断变量类型
isNaN判断是否是数字
运算符
算术运算符:- * / % **(次方)
赋值：=
关系运算符:
==比较两边是否相等
===比较两边值和类型是否相等
>大于
<小于
>=大于等于
<=小于等于
!=不等于
逻辑运算符
&&、||、！
整数和浮点数
parseInt()取整
parseFloat浮点数
一元运算符
1. `++`
- 进行自增运算
- 分成两种，**前置++** 和 **后置++**
- 前置++，会先把值自动 +1，在返回
```javascript
var a = 10;
console.log(++a);
// 会返回 11，并且把 a 的值变成 11
```
- 后置++，会先把值返回，在自动+1
```javascript
var a = 10;
console.log(a++);
// 会返回 10，然后把 a 的值变成 11
```
2. `--`
- 进行自减运算
- 分成两种，**前置--** 和 **后置--**
- 和 `++` 运算符道理一样
if分支结构
if（）{}
if（）{
]else{}
if（）{
}else if(){
}else{
}
switch语句
switch (要判断的变量) {
case 情况1:
情况1要执行的代码
break
case 情况2:
情况2要执行的代码
break
case 情况3:
情况3要执行的代码
break
default:
上述情况都不满足的时候执行的代码
}
default 默认
case 情况
break 中断
switch 开关
三目运算符
条件 ? 条件为 true 的时候执行 : 条件为 false 的时候执行
循环语句
while(){}
do { 要执行的代码 } while (条件)
语法： for (var i = 0; i < 10; i++) { 要执行的代码 }
break终止整个循环
continue结束当前循环进入下次循环
Debug工具使用
控制台 source
函数
function函数
形参和实参
形参例子
function box(参数){
}
实参例子
function box（）{
}
return返回关键字
arguments参数
arguments[0]
arguments.lengt获取长度
callee对应的是函数对象
函数作用域
全局作用域
局部作用域
函数方法
call和apply都是调用函数方法
使用规则
访问规则、赋值规则
数组
创建数组
var arr=[]
var arr1=new Arry();
数组方法
length: 长度的意思
push 是用来在数组的末尾追加一个元素
pop是用来删除数组末尾的一个元素,返回删除的元素
unshift 是在数组的最前面添加一个元素
shift是删除数组最前面的一个元素
splice是截取数组中的某些内容，按照数组的索引来截取（包含结束位置）
reverse是用来反转数组使用的
sort 是用来给数组排序的（默认按照字典排序 先按照第一位排序-如果第一位相等就按照第二位）
concat是把多个数组进行拼接
join是把数组里面的每一项内容链接起来，变成一个字符串
slice 复制数组的一部分(不包含结束位置）
join是把数组里面的每一项内容链接起来，变成一个字符串
注意： **join 方法不会改变原始数组，而是返回链接好的字符串**
indexOf查找下标
lastindexO查找最后一个下标
includes方法用来判断一个数组是否包含一个指定的值
for循环语法
in遍历的是数组的索引（即键名）
of遍历的是数组元素值
字符串方法
es5新增方法
严格方式
'use strict'
indexOf用来找到数组中某一项的索引
forEach就是用来遍历数组的
map，只不过可以对数组中的每一项进行操作，返回一个新的数组
filter把原始数组中满足条件的筛选出来，组成一个新的数组返回
every 判断 是否数组所有的元素都满足条件
some 判断是否数组有一些元素满足条件
find查找数组中第一个满足条件的元素
findIndex查找数组中第一个满足条件的元素的下标
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终
字符串方法
charAt是找到字符串中指定索引位置的内容返回
charCodeAt就是返回对应索引位置的 `unicode` 编码
indexOf就是按照字符找到对应的索引
substring是用来截取字符串使用的
注意包含开始索引，不包含结束索引
substr从哪个索引开始，截取多少个
toLowerCase 所有字母转成大写
toUpperCase所有字母转成小写
replace替换字符串内容
replaceAll替换所有形同字符串内容
split字符串分割
trim去掉全部空格
trimstart去掉开始空格
trimend去掉末尾空格
repeat重复次数
startsWith查看字符串以什么开头
Math与Date方法
Math方法
random生成随机0-1的数
round四舍五入变成整数
abs绝对值
ceil向上取整
floor向下取整
max获得最大值
min获取最小值
PI也就是π
pow 平方根
sqrt 算数平方根(开平方)
sin正弦
date方法
new Date()
getFullYear方式是得到指定字符串中的哪一年
getMonth方法是得到指定字符串中的哪一个月份
getDate方法是得到指定字符串中的哪一天
getHours方法是得到指定字符串中的哪小时
getMinutes方法是得到指定字符串中的哪分钟
getSeconds方法是得到指定字符串中的哪秒钟
getDay方法是得到指定字符串当前日期是一周中的第几天
getTime方法是得到执行时间到 `格林威治时间` 的毫秒数
修改年月日方法
setFullYear setMonth setDate setHours
DOM与BOM
BOM方法及介绍
BOM解释
浏览器对象模型
- 获取一些浏览器的相关信息（窗口的大小）
- 操作浏览器进行页面跳转
- 获取当前浏览器地址栏的信息
- 操作浏览器的滚动条
- 浏览器的信息（浏览器的版本）
- 让浏览器出现一个弹出框（alert/confirm/prompt）
window方法
获取浏览器窗口的尺寸
innerHeight与innerwidth
alert弹出一个提示框
confirm弹出一个询问框
prompt弹出一个输入框
location存储浏览器地址
location.href显示URL浏览器地址
location.reload重新加载页面(重新刷新)
注意:不要写在全局不然会一直刷新
浏览器方法
navigator.platform获取当前操作系统
浏览器的 onload 事件:
是在页面所有资源加载完毕后执行的
window.onload = function () {
console.log('页面已经加载完毕')
}
onscroll 事件是当浏览器的滚动条滚动的时候触发：
window.onscroll = function () {
console.log('浏览器滚动了')
}
scrollTop获取向上滚动的距离
scrollLeft页面向左滚动的距离
定时器与延时器
setTimeout()只执行一次，就结束
setInterval每间隔多少时间就执行一次函数
关闭定时器
clearTimeout和clearInterval
history方法
history历史记录
history.back前进(也可以实现后退)
history.go:
（正值前进负值后退）
history.go(0)刷新当前页面
history.forword到下一个历史记录
navigator.userAgent获取浏览器整体信息
navigator.appName获取浏览器名字
navigator.appVersion获取浏览器版本号
location方法
location.assign跳转页面也可以后退
location.reload重新加载页面(重新刷新)
注意:不要写在全局不然会一直刷新
location.replace在当前页面跳转新的URL(没有历史记录)
origin完整的服务器地址
protocol：http协议
host:主机
hostname：主机名
port：端口
path：路径
search：搜索字段
hash:哈希值
DOM方法及介绍
DOM介绍
- DOM（Document Object Model）： 文档对象模型
- 其实就是操作 html 中的标签的一些能力
- 我们可以操作哪些内容
- 获取一个元素
- 移除一个元素
- 创建一个元素
- 向页面里面添加一个元素
- 给元素绑定一些事件
- 获取元素的属性
- 给元素添加一些 css 样式
- ...
- DOM 的核心对象就是 docuemnt 对象
- document 对象是浏览器内置的一个对象，里面存储着专门用来操作元素的各种方法
- DOM： 页面中的标签，我们通过 js 获取到以后，就把这个对象叫做 DOM 对象
获取dom方法
getElementById获取标签id名
getElementsByClassName获取标签class名
getElementsByName获取标name名字
getElementsByTagName获取标签名
querySelector按照选择器获取元素
querySelectorAll按照选择器获取所有元素
innerHTML 获取HTML结构
innerText获取元素内部的文本（只能获取到文本内容，获取不到 html 标签）
getAttribute获取元素的某个属性（包括自定义属性）
setAttribute给元素设置一个属性（包括自定义属性）
removeAttribute移除标签元素属性
style给元素添加css样式
className操作元素类名
documentElement根标签(保存html根标签)
classList方法
在设置的时候，不管之前有没有类名，都会全部被设置的值覆盖
div.classList.add('box')//添加类名
div.classList.remove('box')//删除类名
div.classList.contains('box')//true 有类名 false 没有这个类名
DOM节点属性方法
childNodes（会获取空格）
获取某一个节点下 **所有的子一级节点**(会获取空格）
children(不会获取空格)
获取某一节点下所有的子一级 元素节点
firstChild(会获取空格)
获取某一节点下子一级的 第一个节点
lastChild(会获取空格)
获取某一节点下子一级的最后一个节点
firstElementChild(不会获取空格)
获取某一节点下子一级 第一个元素节点
lastElementChild(不会获取空格)
获取某一节点下子一级 最后一个元素节点
nextSibling(会获取空格)
获取某一个节点的 **下一个兄弟节点**
previousSibling(会获取空格)
获取某一个节点的 **上一个兄弟节点**
nextElementSibling(不会获取空格)
获取某一个节点的 **下一个元素节点**
previousElementSibling(不会获取空格)
获取某一个节点的 **上一个元素节点**
parentNode(不会获取空格)
获取某一个节点的 **父节点**
attributes获取元素里面所有属性节点
节点属性
创建节点
createElement创建元素节点
appendChild在末尾插入元素节点
insertBefore插入那个节点前
removeChild删除节点
replaceChild修改节点
语法父节点.replaceChild(新节点，旧节点)
createTextNode创建文本节点
获取元素
getComputedStyle获取元素属性
currentStyle获取元素属性（IE使用)
获取元素偏移量
offsetLeft 向左偏移
offsetTop向上偏移
offsetWidth 获取元素的宽度
offsetHeight获取元素高度
event事件
鼠标事件
onclick单击鼠标
ondblclick双击鼠标
onmousedown鼠标按下时触发
onmouseup当鼠标按下松开时出触发
onmouseover鼠标移入触发
onmouseout鼠标移除触发
onmousemove鼠标在元素上移动触发
onmouseenter移入元素触发(不会冒泡)
onmouseleave移除元素触发(不会冒泡)
HTML事件
onload当页面 加载完触发
onselect选择文本内容时触发
onchange文本框失去焦点触发
oninput当文本框改变内容触发
onfocus元素获取焦点触发
onblur元素失去焦点触发
onresize窗口大小改变触发
onscroll滚动滚动条触发
event事件源兼容
Event对象获取方式 （兼容性）
el.οnclick=function(evt){
let e = evt || window.event
}
event方法
event.button
当前事件触发时哪个鼠标按键被点击（onmousedown 0 左键 1 滚轮 2 右键）
clientX、clientY属性
元素到浏览器+滚动距离
screenX、screenY属性
鼠标在整个屏幕距离
offsetX、offsetY属性
元素距离
pageX、pageY
浏览器+滚动距离
兼容性（元素标签）
target 事件源 evt.target || evt.srcElement;
键盘事件
键盘事件keyup、keydown、keypress
键盘方法
onkeydown监听用户按下键盘上任意键触发
onkeypress监听用户按下键盘字符键触发
onkeyup监听用户松开键盘上键触发
altKey属性，bool类型，表示发生事件的时候alt键是否被按下
ctrlKey属性，bool类型，表示发生事件的时候ctrl键是否被按下
shiftKey属性，bool类型，表示发生事件的时候shift键是否被按下
keyCode/which兼容(按键对应的ascll码)
事件源 target（事件在哪个元素上产生）
阻止事件冒泡
/阻止事件冒泡
e.stopPropagation();
//ie低版本(高版本所有浏览器都支持)
e.cancelBubble = true;
//阻止冒泡兼容
var evt = e || window.event;
if(evt.stopPropagation) {
evt.stopPropagation();
} else {
evt.cancelBubble = true;
}
阻止默认事件
阻止默认行为的方式
e.preventDefault()，
IE则是使用e.returnValue = false;
return false;
自定义右键菜单 oncontextmenu
添加事件与阻止事件
添加事件监听器：ele.addEventListener(事件名，处理函数，布尔值)
现代浏览器（IE9、10、11 | ff, chorme, safari, opera）
注意：事件名不带on，处理函数为函数引用，布尔值代表冒泡(内到外)或捕获（外到内）
element.addEventListener(“click”,function(){},false);//false 事件冒泡
element.addEventListener(“click”,function(){},true);//true事件捕获
移除事件监听器：removeEventListener(事件名，处理函数)
移除监听器
移除事件监听器：removeEventListener(事件名，处理函数)
IE8事件监听器与移除监听器
注意：事件名带on
attachEvent(事件名，处理函数)
detachEvent(事件名，处理函数)
事件委托事件
利用事件冒泡的原理，把本应添加给某元素上的事件委托给他的父级（外层）。
扫一扫
713
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
