JavaScript学习笔记

本文主要是介绍JavaScript学习笔记，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

弹窗输出 alert()
控制台输出 console.log()
弹窗输入框 prompt()

引入js
<script type="text/javascript" src="js路径" ></script>

变量 声明var (A-Z a-z 0-9 _ $) 不能以数字开头不能是关键字
只声明不赋值 undefined
不声明不赋值 报错

数据类型 typeof检测变量的数据类型
简单数据类型 Number,String,Boolean,Undefined,Null
数字型
八进制数字前面加0
十六进制数字前面加0x
最大值Number.MAX_VALUE
最小值Number.MIN_VALUE
无穷大Infinity
无穷小-Infinity
非数值NaN 意思是Not a Number
isNaN()判断是不是数字,是就返回false,不是返回true
字符型
单引号双引号都可以
\n换行 \斜杠 ‘单引号 "双引号 \t tab缩进 \b空格
字符串长度获取 .length
复杂数据类型 object
数据类型转换
转成字符型String() .toString()转成字符型 用+号拼接字符串
转成数字型parseInt() parseFloat() Number() 用-,*,/算术运算符隐式转换
转换布尔型Boolean() 除了代表空、否定的值比如false,’’,0,NaN,null,undefined以外其他全是true

运算符
算术运算符 +加 -减 乘 /除 %取余 用浮点数会出问题
递增和递减运算符 ++递增 --递减 前置先运算后返回值 后置先返回值后运算
比较运算符 <小于号 >大于号 >=大于等于 <=小于等于 ==判等号 !=不等号 ===全等 !==全不等
逻辑运算符 &&与 ||或 !非
赋值运算符 =直接赋值 +=,-=,=,/=,%=加,减,乘,除,取余一个数后赋值

流程控制
if(条件表达式){执行语句} 条件表达式为真执行,为假不执行
if(条件表达式){执行语句}else{执行语句} 成立执行if的,否则执行else
if(条件表达式){执行语句}else if(条件表达式){执行语句}else{执行语句} 依次判断
三元表达式 表达式 ? 表达式1:表达式2 表达式成立执行1,不成立执行2
switch(条件表达式){
case value1:
执行语句
break;
default:执行语句
break;
}

循环
for(初始化变量;条件表达式;操作表达式){
执行语句
}
while(条件表达式){
执行语句
}
do{
执行语句
}while(条件表达式)

跳出循环
continue跳出本次循环,继续下一次循环
break跳出整个循环

数组
创建数组
var 数组名=new Array();
var 数组名=[];
var 数组名=[‘元素’,‘元素’];
新增元素
.length可以改变数组长度来新增元素
.push(元素) 在末尾添加元素
.unshift(元素) 在开头添加元素
删除元素
.pop() 删除最后一个元素
.shift() 删除第一个元素
判断是否为数组
数组名 instanceof Array 是为true 否为false
翻转数组 .reverse()
数组排序(冒泡排序) .sort()只能个位数
完美写法 .sort(function(a,b){
return a-b;升序
return b-a;降序
});
数组查找
.indexOf(元素); 找到返回索引号，没有返回-1 只返回第一个
.lastIndexOf(元素); 找到返回索引号，没有返回-1 只返回最后一个
数组转为字符串
.toString(); 输出元素用逗号隔开
.join(‘分隔符’)

函数:封装可以被重复执行的代码块
1.声明函数
第一种声明方式 function 函数名(){
函数体
}
第二种声明方式 var 变量名=function(){}
2.调用函数
函数名();
参数个数
实参等于形参,输出正确
实参多于形参,只取形参个数
实参少于形参,多的形参为undefined
return 可以返回值,也同时终止函数,如果没有则返回undefined
arguments 有多少实参传多少实参

作用域
全局作用域,整个script标签或者是一个单独的js文件中生效
局部作用域,只在函数内生效

预解析js引擎会把所有的var和function提升到作用域的最前面然后按照书写顺序从上往下执行
变量提升只提升声明,不提升赋值
函数提升只提升声明,不调用函数

对象
创建对象
1. var obj={};
2. var obj=new Object();
3. function 函数名(属性名){ 构造函数的方式创建对象
this.属性名=属性名;
}
调用对象
对象名.属性名 或者 对象.方法名()
遍历对象
for(var k in obj){
k属性名
obj[k]属性值
}

内置对象 Math,Date,Array,String等 查MDN文档
Math
.PI 圆周率 .floor() 向下取整 .ceil() 向下取整 .max() 求最大值
.round() 四舍五入 .abs() 绝对值 .mix() 求最小值 .random()返回一个随机小数 0 =< x < 1

Date
    .getFullYear() 获取当年     .getMonth() 获取当月 (0-11)    .getDate() 获取当日日期     .getDay() 获取星期几 (周日0~周六6)
    .getHours() 获取当前小时       .getMinutes() 获取当前分钟      .getSeconds() 获取当前秒钟   
    .getTime()或者.getvalueOf() 或者 var date=+new Date();  date; 获取1970到现在的毫秒数    H5新方法  .now();

String
    .indexOf('要找的字符',[起始的位置,可有可无]);  查找字符
    .lastIndexOf('要找的字符')  从后往前找，只找第一个匹配的
    .charAt(索引号)  返回指定位置的字符
    .charCodeAt(索引号)  返回指定位置的字符的ASCII码
    str[索引号]   H5新方法获取指定位置的字符
    .concat(str1,str2,...)  拼接字符串
    .substr(start,length) 从start开始,截取length个字符
    .slice(start,end)   截取从start开始到end位置的字符串,end截不到
    .substring(start,end)  截取从start开始到end位置的字符串,end截不到，不接受负值
    .replace('被替换的字符','替换为的字符') 替换字符,只会替换第一个
    .split('分隔符') 字符转换为数组
    .toUpperCase() 转为大写
    .toLowerCase() 转为小写

栈堆
栈放简单数据类型
堆放复杂数据类型
通过栈里的地址,找到堆里的复杂数据类型

浏览器功能的API BOM
页面元素的API DOM 把文档当作一个对象 顶级对象是document
文档document
元素element
根据ID获取元素 document.getElementById()
根据标签名获取元素 document.getElementsByTagName() 以伪数组的方式存在
H5新方法
根据类名获取元素 document.getElementByClassName()
*根据选择器获取元素 document.querySelector() 返回指定选择器的第一个元素对象
*根据选择器获取元素 document.querySelectorAll() 返回指定选择器所有元素对象
获取body元素 document.body
获取html元素 document.documentElement
节点node

事件 触发—响应机制
事件源 被触发的对象
事件类型 如何触发
事件处理程序 通过一个函数赋值的方式

鼠标事件
点击 onclicks
经过 onm ouseover
离开 onm ouseout
获得焦点 onfocus
失去焦点 onblur
移动 onm ousemove
弹起 onm ouseup
按下 onm ousedown
禁止鼠标右键菜单 contextmenu
禁止鼠标选择 selectstart

修改元素
内容
Element.innerText 不识别HTML标签的 可以用来去除空格和换行
Element.innerHTML 识别HTML标签的 保留空格和换行
属性
Element.src 修改路径
Element.href 修改路径
Element.title 修改标题
Element.id 修改id
Element.alt

修改表单属性
Element.type 修改类型
Element.value 修改值
Element.checked 修改选择
Element.selected
Element.disabled 修改是否被使用

修改样式属性 样式使用驼峰命名法
Element.style 修改行内样式
Element.className 修改类名样式

全选与取消做法
Element.checked返回是否被选中，然后赋值给其他的复选框

获取自定义属性值
元素.属性 获取内置属性值
Element.getAttribute(‘属性’) 主要获取自定义的属性

设置移除自定义属性值
元素.属性=‘值’ 设置内置属性值
Element.setAttribute(‘属性’,‘值’) 主要设置自定义属性
Element.removeAttribute(‘属性’) 移除属性
自定义属性规范 前面加 data- H5新方法 Element.dataset.属性 Element.dataset[‘属性’] IE11以上才支持

节点操作
nodeType 节点类型 1 元素节点(主要) 2 属性节点 3 文本节点
nodeName 节点名称
nodeValue 节点值
找父节点 Element.parentNode
找子节点 Element.childNodes 所有的子节点，包含 元素节点 文本节点 等等 (不推荐使用)
Element.children 找到所有子元素节点
找第一个 .firstChild 返回的可以是元素节点 文本节点 等等
Element.firstElementChild 返回的是元素节点 IE9以上才支持
找最后一个 Element.lastChild 返回的可以是元素节点 文本节点 等等
Element.lastElementChild 返回的是元素节点 IE9以上才支持
找兄弟节点 Element.nextSibling 返回下一个节点 可以是元素节点 文本节点 等等
Element.previousSibling 返回上一个节点 可以是元素节点 文本节点 等等
Element.nextElementSibling 返回下一个元素节点 IE9以上才支持
Element.previousSibling 返回上一个元素节点 IE9以上才支持
创建节点
document.createElement(‘tagName’)
添加节点
node.appendChild(child); 将一个节点添加到指定父节点的子节点的末尾
node.insertBefore(child,指定元素); 将一个节点添加到指定父节点的指定子节点的前面
删除节点
node.removeChild(child)
复制节点
node.cloneNode() 只复制节点，不克隆里面的子节点
node.cloneNode(true) 可以复制里面的内容

注册事件
传统注册方式 注册事件的唯一性
利用on开头的事件例如onclick
方法监听注册方式
addEventListener(type,listener[,useCapture]) IE9之前不支持
type 事件类型 比如click,mouseover 不要加on 要加引号
listener 事件处理函数,事件发生时调用该函数
useCapture 可选参数,是一个布尔值 默认是false
attachEvent(eventNameWithOn,callback) 基本上被淘汰了
eventNameWithOn 事件类型 比如onclick 要带on 要加引号
callback 事件处理函数,事件发生时调用该函数

删除事件
传统解绑方式
利用 事件=null的方式
方法监听解绑方式
removeEventListener(type,listener[,useCapture]); 要用函数名，原函数写在外面，不用小括号调用直接写函数名
detachEvent(eventNameWithOn,callback);

事件流 1.document 2.Element html 3.Element body 4.Element 元素节点
捕获阶段
1 -> 2 -> 3 -> 4
当前目标阶段
4
冒泡阶段
4 -> 3 -> 2 -> 1
1.JS 代码中只能执行捕获或者冒泡其中一个阶段
2.onclick和attachEvent(ie) 只能得到冒泡阶段
第三个参数是true 则处于捕获阶段 很少使用
document -> html -> body -> 元素节点
第三个参数是false，则处于冒泡阶段 用的多
元素节点 -> body -> html -> document
onblur,onfocus,onmouseenter,onmouseleave 是没有冒泡的

事件对象
有了事件才会存在，在function的()里
系统自动创建的，不需要传递参数
事件对象可以自己命名 event,evt,e IE678 需要通过Window.event的兼容写法 e= e||Window.event

event.srcElement    返回的是触发事件的对象  IE678用的
event.type      返回事件的类型  比如click  不带on
event.preventDefault()    阻止默认
event.returnValue       阻止默认    IE678   
return false  阻止默认 后面的代码不执行了，只限传统注册方式
event.stopPropagation()   阻止冒泡 
event.cancelBubble=true   阻止冒泡    IE678

事件委托在父元素上设置监听
鼠标事件对象 MouseEvent
    .clientX 返回鼠标相对于浏览器窗口可视化的X坐标
    .clientY 返回鼠标相对于浏览器窗口可视化的y坐标
    .pageX 返回鼠标相对于文档页面的X坐标    IE9以上才支持
    .pageY 返回鼠标相对于文档页面的Y坐标    IE9以上才支持
    .screenX 返回鼠标相对于电脑屏幕的X坐标
    .screenY 返回鼠标相对于电脑屏幕的Y坐标

键盘事件 
    onkeyup 某个键盘按键被松开时触发        不区分大小写字母
    onkeydown 某个键盘按键被按下时触发      不区分大小写字母
    onkeypress 某个键盘按键被按下时触发  不识别功能键   区分大小写字母

键盘事件对象 KeyboardEvent
    keyCode 返回改键的ASCII值       判断用户按的是什么键

BOM 浏览器对象模型 把浏览器当作一个对象 顶级对象是window
Window对象事件
页面加载事件
load 等页面加载完了执行 传统只能写一个 如果多了以最后一个为准 addEventListener可以写多个
DOMContentLoaded 当DOM加载完了，不包括样式表，图片，flash等等 IE9以上才支持
调整窗口大小事件
resize 只要页面大小发生了变化就会触发

Window对象
    window.innerWidth   当前浏览器屏幕宽度
    window.setTimeout()        定时器 到期后执行  单位毫秒  回调函数
    setInterval()       定时器  重复调用一个函数    每隔多少毫秒调用一次
    clearTimeout(timeoutID) 清除定时器
    clearInterval()         清除定时器   主要全局变量和局部变量

JS是单线程  同一时间只能做一件事
    同步 正常的排队执行
        同步任务都在主线程上执行，形成执行栈
    异步 同时做多个任务
        异步任务是通过回调函数实现的    
            比如 普通事件 click,resize等等
                 资源加载 load,error等等
                 定时器   setInterval,setTimeout等等
    执行机制   先执行同步任务再执行异步任务         事件循环:不断的去任务队列找异步任务执行
        主线程执行栈 -> 异步进程处理 -> 任务队列

location对象    用于获取解析URL
    URL 统一资源定位符      格式 protocol://host[:port]/path/[?query]#fragment
        protocol 通信协议   http,ftp,maito等
        host 主机(域名) 
        port 端口号 http默认端口为80
        path 路径   由零或多个/分隔
        query 参数  用&分割
        fragment 片段 用#分割
    对象属性
        location.href 获取或者设置整个URL
        location.host 返回主机
        location.port 返回端口号 如果未写返回 空字符串
        location.path 返回路径
        location.search 返回参数
        location.hash 返回片段
    对象方法
        location.assign()   和href一样，可以跳转页面
        location.replace()  替换当前页面，因为不记录历史，所有不能后退页面
        location.reload()   重新加载页面，相当于刷新，如果参数为true 强制刷新ctrl+f5

navigator对象
    userAgent 返回用户机的头部的值

history对象
    back()  可以后退功能
    forward 前进功能
    go(参数) 前进后退功能 参数如果是1 前进一个页面，如果是-1 后退一个页面

offset 元素偏移量系列 返回值不带单位
Element.offsetParent 返回作为该元素带有定位的父级元素 如果父级没有定位 返回body
Element.offsetTop 返回元素相对带有定位的父级元素上方的偏移
Element.offsetLeft 返回元素相对带有定位的父级元素左边框的偏移
Element.offsetWidth 返回自身包括padding，边框，内容区的宽度
Element.offsetHeight 返回自身包括padding，边框，内容区的高度

client 元素可视区系列 返回值不带单位
Element.clientTop 返回元素上边框的大小
Element.clientLeft 返回元素左边框的大小
Element.clientWidth 返回自身包括padding,内容区的宽度,不包含边框
Element.clientHeight 返回自身包括padding,内容区的高度,不包含边框

立即执行函数 两种写法 创建独立的作用域，避免了命名的冲突
(function(){})();
(function(){}());

load事件可能会被缓存，前进后退可能会无法重新触发，所以要用pageshow事件
用e.persisted 判断是不是从缓存里取过来的页面，是就返回true

scroll 元素滚动系列 返回数值不带单位
Element.scrollTop 返回被卷去的上侧距离
Element.scrollLeft 返回被卷去的左侧距离
Element.scrollWidth 返回自身实际宽度 不包含边框
Element.scrollHeight 返回自身实际高度 不包含边框

缓动动画的算法 (目标值-现在位置)/10 每次移动的距离

移动端
触屏事件 touch
touchstart 手指触摸到一个Dom元素时触发
touchmove 手指在一个Dom元素上滑动时触发
touchend 手指从一个Dom元素上移开时触发
触摸事件对象 touchEvent
touches 正在触摸屏幕的所有手指的一个列表
targetTouches 正在触摸当前Dom元素上的手指的一个列表
changedTouches 手指状态发生了改变的列表,从无到有或从有到无

移动效果
    .style.transform='translateX(...+'px')'
    .style.transform='all .3s'   过渡效果

classList 属性 返回元素的类名
Element.classList.add(‘类名’) 添加类名
Element.classList.remove(‘类名’) 删除类名
Element.classList.toggle(‘类名’) 切换类 如果有就删除，没有就添加 H5新方法

fastclick 插件引用 https://github.com/ftlabs/fastclick/blob/master/lib/fastclick.js
if(‘addEventListener’ in document){
document.addEventListener(‘DOMContentLoaded’,function(){
Fastclick.attach(document.body)；
},false);
}

swiper插件使用 https://www.swiper.com.cn/
superslide http://www.superslide2.com/
iscroll https://github.com/cubiq/iscroll

本地存储 H5新方法 存储在用户浏览器中 只能存字符串要用JSON.stringify() 编码后存储
sessionStorage 可以存约5M 生命周期为关闭浏览器窗口
sessionStorage.setItem(key,value) 存储数据
sessionStorage.getItem(key) 获取数据
sessionStorage.removeItem(key) 删除数据
sessionStorage.clear() 删除所有数据

localStorage 可以存约20M  多窗口页面共享 同一浏览器 生命周期永久，除非手动删除
    localStorage.setItem(key,value) 存储数据
    localStorage.getItem(key) 获取数据
    localStorage.removeItem(key) 删除数据
    localStorage.clear() 删除所有数据

小知识
防止链接跳转
a链接里加href=‘javascript:;’

动态创建元素
    document.write()    执行完毕导致代码重绘 很少使用
    Element.innerHTML           用数组形式拼接，快的起飞
    document.createElement()    效率比innerHTML用字符拼接快

target和this的区别
    event.target 返回的是触发事件的对象
    this 返回的是绑定的事件对象

this指向调用它的对象
    全局里指向window
    方法中谁调用指向谁
    构造函数中指向构造函数的实例

判断终端
    if((navigator,userAgent.match(/(phone|pad|pod|iPhone|iPod|Android|Mobile|
    BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|
    Windows phone)/i))){
        window.location.href='';
    }else{
        window.location.href='';
    }

offset和style的区别
    offset
        可以得到任意样式表中的样式值
        获得的数值没有单位  
        只能读取属性不能赋值
        包含 padding,border
    style
        只能得到行内样式表中的样式值
        获得的数值没有单位
        可以读写属性可以赋值
        不包含 padding,borderd

scroll和client的区别  scroll连着内容超出的部分也算在内，client不包含内容超出的部分

元素卷去用scroll，页面被卷去用pageYOffset

三大系列的主要用法
offset用于获取元素位置  offsetLeft offsetTop
client用于获取元素大小  clientWidth clientHeight
scroll用于获取滚动距离 scrollTop scrollLeft
页面的滚动距离通过 window.pageOffset

mouseover 和 mouseenter 的区别
mouseover不管经过父盒子还是子盒子都会触发
mouseenter只经过自身盒子触发    所有不会冒泡    搭配mouseleave 使用 同样不冒泡

动画核心原理是靠定时器修改定位  一定要加定位
    缓动动画的算法    (目标值-现在位置)/10   每次移动的距离

节流阀
    var flag=true;
    if(flag){flag=false;do something}       关闭
    在回调函数里，flag=true                  开启

click 延时解决方案
    禁用缩放
        <meta name="viewport" content="user-scalable=no">
    利用touch事件自己封装这个事件解决300ms延迟
        原理：当我们手指触摸屏幕，记录当前触摸时间
        当手指离开屏幕，用离开的时间减去触摸的时间
        如果时间小于150ms,并且没有滑动过屏幕,那么我们就定义为点击

        function tap(obj, callback) {
        var isMove = false;
        var startTime = 0;
        obj.addEventListenter('touchstart', function (e) {
            startTime = Date.now(); //记录触摸时间
        });
        obj.addEventListenter('touchmove', function (e) {
            isMove = true; //判断是否有滑动
        });
        obj.addEventListenter('touchend', function (e) {
            if (!isMove && (Date.now() - startTime) < 150) {
                callback && callback();
            }
            isMove = false; //取反重置
            startTime = 0;
        });
    }
    tap(div, function () {});

这篇关于JavaScript学习笔记的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！