javascript
- 组成
- ECMAScript基础语法
- BOM浏览器对象模型
- DOM文档对象模型
- IDE集成开发环境（编辑器 编译 调试 图形界面）
- 可以写在html的任何地方
常量变量数据类型
- 常量 值不变
- 变量 值会变
不要重复定义一个变量 - 关键字 具有特殊含义的单词
- 数据类型
- 内置基本类型
- Number
- String
- undefined
- null
- Boolean
- 引用类型 Object
typeof 查看数据类型
- 内置基本类型
数据转换
- 字符串+数值 = 字符串
- 出了+以外，字符串和数值的计算都会转换为数字
非数值字符串与数字运算（除+），会生成null - 字符串转数值
- parseInt();转整数
- parsefloot();转小数
- toFixed(n);转小数字符，保留n位小数
- Number();
- 数值转字符串
- toString();
switch
switch(值表达式){
case 常量表达式1:语句1;break;
case 常量表达式2:语句2;break;
case 常量表达式2:语句2;break;
case 常量表达式2:语句2;break;
default:默认分支语句;break;
}
循环
- while(判断语句){循环体}
- do{循环体}while(判断语句);循环体至少执行一次
- for(语句1;语句2;语句3){循环体}
- 语句1用来规定循环变量初值
- 语句2用来规定循环次数
- 语句3用来将循环变量变化到规定范围之外
- 执行顺序：语句1，语句2，循环体，语句3，（语句2，循环体，语句3）。。。
- for…in…用来遍历数组（以下标形式）
- for…of…用来遍历数组（以元素形式）
- break contiune
- break跳出本层循环
- contiune跳出本次循环
函数
-
据有包裹性的最小功能模块
-
作用：
- 提高开发效率
- 便于维护
- 提高代码复用性
-
定义
- function 函数名(参数){函数体}
- var fun = function(参数){函数体}
- 事件 = function(参数){函数体} 匿名函数
- (参数)=>{函数体} 箭头函数（ES6新增）
- (参数)=>(返回值)
函数可以有参数也可以没有参数，可以有返回值也可以没有返回值
-
函数与事件
- 事件的本质就是函数调用
- 函数就是对事件做出具体反馈
- 事件绑定
//方式1
function fun(){}方式2：主要方式(匿名函数，箭头函数（ES6新增）)
获得元素.onlick = function(){}
获得元素.onlick = ()=>{}//方式3
function fun(){}
获得元素.onlick = fun;
‘’’
数组
- 定义
- 字面量：let arr = [];
- 构造法：let arr = new Array();
- let arr = new Array(n);一个数位数组的大小，一个数以上为数组的元素
构造法生成的数组是引用类型
- 访问数组
- 第一个元素是arr[0];最后一个元素是arr[n-1];
- 数组元素的遍历，循环访问数组的每一个元素
for(let i=0;i<arr.length;i++){
console.log(arr[i]);
}- arr.length;数组的长度
- 数组常见函数
- join("*")把数组中的元素转换成字符串,以*隔开
- splice(参数1,参数2,参数3);替换,返回值是一个又删除元素组成的新数组
- 参数1 开始索引
- 参数2 删除元素位移
- 参数3 插入的新元素,可以是多个
- push(参数1,参数2,参数3)向数组末尾添加一个或多个元素,返回长度
- pop()拿出最后一个元素(返回删除)
- unshift(参数1,参数2,参数3)头部添加一个或多个元素,返回长度
- shift()拿出第一个元素(返回删除)
- slice(start,end),返回一个数组的区间,左闭右开()
- reverse()逆序数组自身,返回值也是逆序之后数组本身
- sort()排序,按ASCII码排序
ES5新增
- 回调函数
- 一个函数作为一个函数的参数,此函数为回调函数
- 严格模式"use strict"写在script标签里面
- indexOf(查找的元素)查找数组中的一个元素
- 如果有返回数组下标
- 没有返回-1
- forEach()对数组的每个元素做某种处理,没有返回值,直接改变当前数组
- 不改变元素数组
- function fun(元素内容,元素索引,数组本身){};
- map()把原始数组的每一个元素进行某种处理后,返回一个新的数组,回调函数参数是数组元素本身
- 不改变元素数组
- function fun(元素内容,元素索引,数组本身){return 新数组元素};
- filter()过滤:将满足条件的元素生成一个新的数组
- 不改变元素数组
- function fun(元素内容,元素索引,数组本身){return 新数组元素};
- reduce()接收一个函数作为累加器,数组中的每个值(从左到右)开始所见,最终计算为一个值
- function fun(初始值,当前元素,当前元素索引,数组){return 新数组元素};
字符串
- 定义
- 字面量 let str = “”;
- 构造 let str = new String(“dsa”);引用类型
- ASCII码表
- " " 32
- “0” 48
- “CR” 13 回车
- “A” 65
- “a” 90
- str.charCodeAt()将字母按照ASCII码打印
- str.charAt(n)返回字符串中下标为n的元素
- str[n]获取字符串中的第n-1个字符
- str.length长度
- formCodeAt(n)获取下标为n的字符ASCII码
- str.indexOf(查找的字符)查找字符串有返回下标无返回-1(第一个)
- str.replcce(字符串1，字符串2)替换，用字符串2来替换字符串2
- 字符串1可以是字符串，也可以是正t则表达式
- slice() 截取字符串（支持复数）
- substring()截取字符串
- split("*")在字符串中带有*的位置分割字符串
- toLowerCase()小写
- toUpCase()大写
####Math And Date定时器 - Math不需要调用元素
- Math.floor()向下取整
- Marh.Int()向上取整
- Math.round()四舍五入
- Math.sqrt()开方
- Math.pow(x,y)x的y次方
- Math.min()最小值
- Math,max()最大值
- Math.random()随机数（0-1左闭右开）
- Date
- let time = new Date();
- time.getFullyear()
- time.getMonth()（月是从0开始的）
- time.getDate()
- time.getDay（从0开始，从星期日开始）
- time.getHours()（返回小时数）
- time.getMinutes()（分钟）
- time.getSeconds()（返回秒数）
- toLocaleString()（以本地格式的方式返回时间）
- 字符串改时间
- let time = new Date(2011/2/2/11:22:11"")
- Date.parse()时间戳（从现在到1971年1月1号0点时间秒数）
- 设置时间
- time.setFullyear()
- time.setMonth()（月是从0开始的）
- time.setDate()
- time.setDay（从0开始，从星期日开始）
- time.setHours()（返回小时数）
- time.setMinutes()（分钟）
- time.setSeconds()（返回秒数）
- 定时器
- 定时器
- let stop = setInterval(回调函数,1000)(有返回值，1000为1秒)
- alearInterval(stop);停止
- 延时器
- let stop = setTimeout(回调函数,1000)(有返回值，1000为1秒)
- clearTimeout(stop);停止
- 定时器
BOM
- Broswer Object Model 浏览器对象模型
- window对象
- 属性和方法
- 三个弹出框弹出框具有阻塞行为
- alert()弹出框
- confirm()确定框
- prompt()输入框，返回值为字符串
- open(“路径”)打开一个新的网页
- close()关闭自己
- 三个弹出框弹出框具有阻塞行为
- document
- document.write()会覆盖之前的对象
- hisort对象包含用户访问过的URL
- back()前一个URL
- forward()后一个URL
- go()指定的URl
- location
- href属性：代表当前网页的地址
- 可读可写
- navgator
- screen
- event
- 属性和方法
DOM
- Document Object Model文档对象模型
- parentNode 返回节点的父节点
- childNodes 返回节点的子节点
- firstChild 返回第一个子节点
- nextSibling 下一个节点
- childNodes 返回所有节点
- 通过层级关系访问元素节点
- firstElementChild 返回节点的第一个元素子节点，最普遍的用法是访问该元素的文本节点
- lestElementChild 返回节点的最后一个元素子节点
- nextElementSibling 下一个元素节点
- previousElementSibling 上一个元素节点
- children 返回所有的元素子节点
- nodeType判断节点属性
- 1 元素节点
- 2 属性节点
- 3 文本节点
- 节点操作
- let oH1 = createElement(“h1”)创建节点h1
- oH1.innerHtml = “dsasda”;给h1添加文本
- documen.body.appendChild(oH1);将oH1添加到body中
- oList.lastElementChild.remove();删除节点
- innerHTML outHTML innerText
- innerHTML 将元素中所有内容取出，不包括自身标签
- innerText 将元素的内容取出来不包括HTML标签
- outHTML 将自身即元素的所有内容
- inserBefore 添加到一个节点前面
- 自定义属性：
- oBox.getAttribute(“属性”) 获取属性
- oBox.setAttribute(“属性”,“属性值”) 更改属性
非行内样式的获取（兼容问题）
- 行内样式可以直接通过oBox.style.XX来获取
- 非行内样式需要getComputedStyle(oBox,false)[“属性名”]；
- 兼容模式：
return getComputedStyle?getComputStyle(oBox,false)[“属性名”]:oBbx.currentStyle[]
this
- 事件中指向事件发生的元素
- 函数中指向调用函数的元素
window.onscroll事件
- window.onscroll用来求得当前滚动条与顶端距离
- 兼容模式
//获取滚动条距离顶端的距离
window.onscroll = function(){
let _top = document.body.scrollTop||document.documentElement.scrollTop;
console.log(_top);
}
事件对象兼容
- 鼠标事件
oBox.onclick = (evt)=>{
let e = evt||event;
}
- //鼠标在整个文档顶部的定位
+ console.log(e.pageX);
+ console.log(e.pageY);
- //鼠标相对窗口的定位
+ console.log(e.clientY);
+ console.log(e.clientX);
- //鼠标相对内部元素位置
+ console.log(e.offsetX);
+ console.log(e.offserY);
- 键盘事件
- onkeyup用户释放某一个按键是发生
- onkeydown用户按下时发生
- onkeypress用户按键，产生字符时发生
- 事件对象属性 keyCode获取键盘值对应的ASCII码
let key = e.keyCode||e.which||e.charCode
- 阻止事件冒泡
e.stopPropagation?e.stopPropagation():e.cancelBublle = true;
- 阻止浏览器默认事件
e.preventDefault?e.preventDefault():e.returnValue = false;
或者
return false;
事件监听
- 好处
- 为同一个元素绑定多次同一个事件
- 可以用事件监听的方式，确定触发的是冒泡还是捕获
//false是冒泡，默认也是冒泡，true是捕获
addEventListtener(“去掉on的事件”,function(){事件1},false)
addEventListtener(“去掉on的事件”,function(){事件2},false)
- 冒泡和捕获同时存在 ：先捕获后冒泡
- 事件监听的兼容
obj.addEventListtener?obj.addEventListtener(type,callback):obj.attchEvent(“on”+type,callBack);
事件委托
- 把某个事件加到父元素上，提高代码效率
- 动态创建元素，添加事件
let target = e.target||e.srcElement;
target.tagName == “LI”;//target相当于this，target.tagName找儿子大写
1658
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
