1:逻辑与
语法:表达式1 && 表达式2
如果第一个表达式为真,则返回表达式2
如果第一个表达式为假,则返回表达式1
2:逻辑或
如果表达式1为真,则返回表达式1,如果表达式1为假,则返回表达式2
3:冒泡排序
冒泡排序:是一种算法,把一系列数据按照一定顺序进行排列(从小到大,或从大到小)
4:数组排序 sort()方法
arr.sort(function(a,b){
return a - b
})
a - b为升序,b-a为降序
5:如果实参的个数小于形参的个数,多余的形参定义为undefined 最终结果为nan
6:arduments:当前函数的一个内置对象,所有函数都内置了一个arguments,arguments对象中储存了传递的所有实参
arguments展示的是一个伟数组
7:如果在函数内部没有生命的函数,直接赋值的变量,也是全局变量
function fn(){
num2 = 20
}
fn();
console.log(num2)//20
8:全局变量只有在浏览器关闭的时候才会销毁,比较占内存资源
9:局部变量当我们程序执行完毕就会销毁,比较节约资源
10:预解析:
我们js引擎会把js分为两步:预解析 代码执行
(1)预解析 js引擎会把js里面所有的var还有function提升到当前作用域的最前面
(2)代码执行 按照代码书写顺序从上到下执行
2:预解析分为变量预解析(变量提升)和函数与解析(函数提升)
(1):变量提升 就是把所有的变量声明提升到当前作用域的最前面 不提升赋值
(2):函数提升 就是把所有的函数声明提升到当前作用域最前面 不调用函数
11:构造函数创建对象,new关键字
new在执行时会做的四件事
1:在内存中创建一个新的空对象
2:让this指向这个新的对象
3:执行构造函数里面的代码,给这个新的对象添加属性和方法
4:返回这个新的对象(所以构造函数不需要reurn)
12:for..in对对象进行便利
13:Math中常用方法
Math.PI 圆周率
Math.floor 向下取整
Math.ceil 向上取整
Math.round 四舍五入版,,就近取整 注意-3.5结果为-3
Math.abs 绝对值
Math.max()/Math.min() 求最大值和最小值
14:随机数方法 random()
得到一个两数之间的随机整数
Math.floor(Math.random()*(max-min))+min
得到一个两数之间的随机整数,包括两个数在内
Math.floor(Math.random()*(max - min+1))+min
15:Date()日期对象
1:Date()是一个构造函数,必须用new Date()
2:如果里面没有参数,那么返回的就是系统时间
2:参数,有两种类型,数字型:2019,10,01或者字符串型‘2019-12-12 8:8:’
如果是数字类型,那么返回的的月分会大一月
getFullYear() 获取年 obj.getFullYear()
getMonth() 获取当月(0-11) obj.getMonth()
getDate() 获取天 obj.getDate()
getDay() 星期几 obj.getDay()
getHours() 小时 obj.getHours()
getMinutes() 分钟 obj.getMinutes()
getSeconds() 秒 obj.getSeconds()
16:事件戳
1:通过valueOf() 或者 getTime()
2:简单写法+new Date()
3:H5新增
Date.now()
17:d = parsenInt(总秒数/60/60/24)天
h = parsenInt(总秒数/60/60%24)小时
m = parsenInt(总秒数/60%60)分钟
s = parsenInt(总秒数%60)秒
18:检测是否为数组
1:instanceof 运算符
console.log(arr instanceof Array)
2:Array.isArray(参数) H5新增
console.log(Array.isArray(arr))
19:添加删除数组元素方法
push(参数1...) 末尾添加一个或多个元素,修改原有数组 返回新长度
pop() 删除数组最后一元素,数组长都-1 无参数,修改原有长度 返回删除的元素
unshift(参数1...) 数组开头添加一个或多个元素,修改原数组 返会长度
shift() 删除数组第一个元素,数组长度-1无参数修改原数组 返回第一个元素值
20:数组排序
reverse() 颠倒数组中元素的顺序 改变原来数组,返回新数组
sort() 对数组元素进行排序 改变原来数组,返回新数组
21:数组索引方法
indexOf() 数组中查找给定元素的第一个索引 如果存在返回索引号,如果不存在返回-1
lastIndexOf() 在数组中的最后一个索引 如果存在返回索引号,如果不存在返回-1
indexOf('a',3) 从索引号是3的地方开始查找
22:数组转换成字符串
toString() 把数组转换成字符串,逗号分隔每一项 返回一个字符串
join('分隔符') 方法把数组中所有元素转换成一个字符串 返回一个字符串
23:根据位置返回字符
charAt(index) 返回指定位置的字符(index字符串的索引号) str.charAt(index)
charCodeAt(index) 获取指定位置处的ASCII码 str.charCodeAt(index)
str[index] 获取指定位置的字符 HTML,IE8支持
24:字符串操作方法
concat(str1,str2,str3) 该方法用于拼接多个字符串等效预+,+更常用
substr(str,length) 从str位置开始(索引号),length取的个数
splice(start,end) 从start位置开始,截取到end,end取不到(他们都是索引)
subString(start,end) 和splice一样,但不接受负值
25:替换字符串
replice()//只会替换第一个字符
var arr = 'andy'
console.log(arr.replice('a',''b'))
26:字符转换成数组
split(‘分隔符’)
27:堆和栈
1:栈(操作系统):由操作系统自动分配释放函数的参数值,局部变量的值等,其操作方式类似预数据结构中的栈:
简单数据类型存放到栈里
2:堆(操作系统):由程序员分配释放,如程序员不释放,由垃圾回收机制回收
复杂数据类型存放到堆里
28:获取body元素
document.body
获取html
document.documentElement
29:innerText与innerHtml区别
1:innerText不识别html标签,Html识别
2:innertext取出空格和换行
30:获取属性
e.属性与e.getAttribute('属性')区别
1:e.属性 获取内置属性
2:e.getAttribute('属性') 主要获取自定义属性(标准) 程序员自己定义的的属性
31:设置属性
e.属性 = '值'
e.setAttribute('属性','值')
32:移除属性
e.removeAttribute('属性')
32:节点操作
1:node.parentNode1 没有括号
parentNode属性返回某节点的父节点,最近的父节点,如果没有返回空
2:子节点
1:parentNode.childNodes (标准)
parentNode.childNodes 返回的式子节点的集合,包含所有节点,元素节点文本节点等,即时更新集合
2:parentNode.children (非标准,但是浏览器都支持)
3:节点层级
parentNode.firstChild 第一个子节点,找不到返回null
parentNode.lastChild 最后一个子节点
一般不用,因为包含文本节点,
firstElementChid 返回第一个子元素节点 ie9以上支持
lastElementChild 最后一个子元素节点
一般我们用
parentNode.children[0] 第一个子节点
parentNode.children[子节点.length-1] 最后一个子节点
4:兄弟节点
node.nextSibling
返回当前元素的下一个兄弟节点,找不到返回null,同样也包含所有的节点,包含元素节点,和文本节点
node.previousSibling
返回当前元素的上一个兄弟节点,同样也包含所有的节点,包含元素节点,和文本节点
node.nextElementSibling
当前元素洗一个元素节点
node.previousElementSibling
当前元素的上一个元素节点
5:创建节点
document,createElement('tagName')
document,createElement()方法创建tagName指定的Html元素
例如:var li = document.createElement('li')
6: 添加节点
node.apendChild(child)
node.appendChild()方法将一个节点添加到指定父节点的子节点列表的末尾,类似于css里面的after为元素
node.insertBefore(child,指定元素)
node.insertBefore(child,指定元素)将一个节点添加到父节点指定字节点的前面,类似于before为元素
6:删除节点
node.removeChild(child)
node.removeChild()方法从Dom中删除一个字节节点,返回删除的·节点
<a:href:'javascript:;'>可以组织链接跳转
7:复制节点
node.cloneNode()
node.cloneNode()方法返回调用该方法的节点的一个副本
注意:如果括号参数为空或者为false,则是浅拷贝,即克隆复制节点本身,不克隆里面的内容
var li = document.querySlect('li')
var lili = li.cloneNode()
然后再添加
8:三种动态创建元素的区别
1:document.write()
2:element.innerHTML
3:document.createElement()
区别:
1:document.write是直接将内容写入到页面的内容流中,但是文档流执行完毕,则他会导致页面全部重绘
2:innerHtml是将内容写入到某个Dome节点中,不会导致页面全部重绘
3:innerHTML创建创建多个元素效率会更高(不要拼接字符串,采用数组形式拼接),结构稍微复杂
4:createElement()创建多个元素效率稍微低一点,但是结构更清新
33:事件操作
1:删除事件
1.1:传统注册方式
eventTarget.onclick = null
1.2:方法监听注册方式
eventTarget.removeEventListener(type,listener);
34:Dom事件流
1:dom事件流有三个阶段
1:js代码中只能执行捕获或者冒泡中的一个阶段
2:onclick和attachEvent(ie)只能得到冒泡阶段
3:捕阶段 如果addEventListener 第三个参数是true那么则处于捕获阶段
2:事件对象的常见属性和方法
事件对象属性方法 说明
e.target 返回触发事件的对象
e.type 返回事件类型 比如click
e.preventDefault() 组织默认行为
e.stopPropagation() 组织冒泡
e.srcElement() 返回触发事件对象 ie678使用
e.cancelBubble() 阻止冒泡 ie678使用
e.returnValue() 组织默认行为ie678使用
3;e.target 和this的区别
e.target 返回的是触发的事件对象(元素),点击了那个元素就返回那个元素
this: 哪个元素绑定了这个事件,就返回哪个元素,currebtTarget给this一样
4:事件委托
事件委托原理
不要给每个子节点单独设置监听器,而是事件监听器设置再父节点上然后利用冒泡原理影响设置每个子节点
5:常用鼠标事件
onclick 鼠标点击左键触发
onmouseover 鼠标经过
onmouseout 鼠标离开
onfocus 获取焦点
onblur 失去焦点
onmousemove 鼠标移动
onmouseup 鼠标弹起
onmousedown 鼠标按下
contextmenu 控制应该合适显示上下文菜单
禁止鼠标右键菜单
contextmenu 主要控制应该何时显示上下文菜单,主要用于程序员取消默认得上下文菜单
document.addEventListener('contextmenu',function(e){
e.preventDefault()
})
document.addEventListener('selectstart',function(e){
e.preventDefault()
})
6:鼠标事件对象
event对象代表事件状态,MouseEvent鼠标事件 KeyboardEvent 键盘事件
鼠标事件对象 说明
e.clientX 鼠标相对于浏览器窗口可视区X坐标
e.clientY 鼠标相对于浏览器窗口可视区y坐标
e.pageX 鼠标相对去文档页面X坐标 ie9以上支持
e.pageY 鼠标相当于文档页面Y坐标
e.screenX 鼠标相对于电脑屏幕X坐
e.screenY 鼠标相对于电脑屏幕y坐
7:常用键盘事件
键盘事件 触发事件
onkeyup 某个键盘按键被松开时触发
onkeydown 某个键盘按键被按下时触发
onkeypress 某个键盘按键按下时触发 不识别功能键比如ctrl shift 箭头等
执行顺序:keydown->keypress->keyup
8:键盘事件对象
keyCode 返回该键的ASCLl码值(keyup和keydown是不区分字母大小写的,keypress是区分大小写的)
35:BOM
1:窗口加载事件
window.onload = function(){}
或者
whindow.addEventListener('load',function(){});
window.onload是窗口(页面)加载事件,当文档内容完全加载完成会触发的事件(包括图像,脚本文件,css,文件等),就调用处理函数
document.addEventListener('DOMContentLoaded',function(){})
DOMContentLoaded事件触发时,仅当Dom加载完成,不包括样式,图片,flash等等 ie9支持
2:调整窗口大小事件
window.onresize = function(){}或者
whindow.addEventListener('resize',function(){})
3:定时器
1:setTimeout()
语法规范:
window.setTimeout(调用函数,延迟事件)
1:window可以省略
2:延迟事件是毫秒。可以省略,默认是0
3:这个调用函数可以直接写函数,还可以写函数名,还有一个写法'函数名()'
4:可以给每个定时器起一个名子
2:停止setTimeout()定时器
1:window.clearTimeout(timeoutId)
2:里面参数就是定时器的表示符
3:setInterval()定时器
1:window.setInterval(回调函数,间隔数)
setInterval()方法重复调用一个函数,每隔这个时间就调用一次函数
4:this指向问题
this的指向在函数调用的时候是确定不了的,只有在函数执行的时候才能确定this到底指向谁,一般情况下this的最终指向调用它的哪个对象
1:全局作用域下ths执向window,(定时器下this执行window)
2:方法调用中,谁调用this指向谁
3:构造函数中,this指向构造函数实例
5:location对象属性
location.href 获取或者设置整个url
location.host 返回主机名(域名)
location.port 返回端口号,如果未写返回空字符串
location.pathname 返回路径
location.serch 返回参数
location.hash 返回片段 #后面内容常见链接锚点
重点:href和serch
6:location对象的方法
location.assign() 和href一样,可以跳转页面(也成为重定向)
location.replice() 替换当前页面,因为不记录历史,所以不能后退页面
location.reload()// location.reload(true) 重新加载页面,相当于刷新按钮f5如果参数为true强制刷新ctrl+f5
7:history对象
history对象与浏览器历史记录进行交互,包含用户在浏览器窗口访问过的url
back() 可以后退功能
forwar() 前进功能
go(参数) 前进后退功能参数如果是1就前进1个页面如果是-1就后退一个页面
37:重重
navigator对象
navigator对象包含有关浏览器信息,他有很多属性,我们最常用的是userAgent,该属性可以返回客户机发送的服务器user-agent头部的值
下面代码可以判断用户哪个终端打开页面,实现跳转
function browserRedirect() {
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) ){
window.location.href="http://blog.csdn.net/zml_2015";
} else {
window.location.href="http://m.blog.csdn.net/blog/index?username=zml_2015";
}
}
browserRedirect();
————————————————
版权声明:本文为CSDN博主「pinming_sanlang1990」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/pinming_sanlang1990/article/details/80910625
38:元素的偏移量
1: offset系列相关属性可以动态的得到该元素的位置(偏移),大小等
1:获取元素距离带有定位元素的位置
2:获取元素自身大小
3:返回的数值不带单位
e.offsetParment 返回该元素带有定位的父级元素,如果父级元素没有定位返回body
e.offsetTop 返回元素带有定位元素的上方偏移量
e.offsetLeft 返回元素相对带有父级元素的左偏移量
e.offsetWidth 返回元素包括padding,边框,内容区的宽度,返回数值不带单位
e.offsetHeight 返回元素包括padding,边框,内容区的高度,返回数值不带单位
2:offset与style的区别
1:offset可以得到任意样式中的样式值 style只能得到行内样式表中的样式值
2:offset系列获取的数值没有单位 style获得的是带有单位的字符串
3:offsetWidth包含padding+border+width style.width不包含padding和border
4:offsetWidth等属性是只读属性,只能获取不能复制 style.width是可读写属性,可以获取也可以复制
5:所以我么们想要获取元素大小的位置,用offset更合适,想要给元素更改值则需要style改变
3:client
使用client属性可以获取元素可视区的相关属性
e.clientTop 返回元素上边框的大小
e.clientLeft 返回元素左边框的大小
e.clientWidth 返回自身包括padding,不包含边框,返回数值不带单位
e.clientHeight 返回自身包括padding,内容区的高度,不包含边框,返回数值不带单位
4:scroll
scroll属性可以动态的得到该元素的大小,滚动距离
e.scrollTop 返回被卷去的上侧距离,返回数值不带单位
e.scrollLeft 返回被卷去的左侧距离,返回数据不带单位
e.scrollWidth 返回自身实际宽度,不包含边框,返回数值不带单位
e.scrollHeight 返回自身实际的高度,不含边框,返回数值不带单位 内容的大小
window.pageYOffset 页面被卷曲头部的距离
window.pageXOffset 页面被卷去左侧距离
5:三大系列总结
e.offsetWidth 包含padding,边框,内容区的宽度,返回数值不带带单位
e.clientWidth 包含padding,内容去,不包含边框,返回数值不带单位
e.scrollWidth 自身实际(内容)宽度,返回数值不带单位
6:主要用法
1:offse系列用于获取元素的位置 offsetLeft offsetTop
2:client系列用于获取元素大小 clientWidth clientHeight
3:scroll经长用于获取滚动距离 scrollTop scrollLeft
4:页面滚动距离 window.pageXOffset
5:window.scroll(x,y)页面滚动到某个距离
39: mouseenter和mouseover的区别
1:当鼠标移动到元素上会触发mouseenter事件
2:类似mouseover
3:mouseover鼠标经过自身会触发,经过子盒子还会触发,mouseenter只会经过自身触发
4:之所以这样,mouseenter不会冒泡
5:跟mouseenter搭配鼠标离开mouseleavr同样不会冒泡
40:缓动动画
缓动动画就是让元素运动的速度有所变化,最常见的就是让速度慢慢停下来
思路:
1:让盒子每次移动的距离慢慢变小,速度就会慢慢落下来
2:核心算法:(目标值 - 现在的位置)/10 作为每次移动的距离 步长
3:停止的条件:让当前盒子位置等于目标位置就停止动画
41:触屏事件
1:
touchstart 手指触摸到一个DOM元素时触发
touchmove 手指在一个Dom元素上滑动时触发
touchend 手指从一个Dom元素上移开时触发
2:触摸事件对象
TouchEvent
TouchEvent是一类描述手指在触摸屏的状态变化的事件,这类事件用于描述一个或多个触摸点,使开发者可以检测到触点的移动,触点的增加和减少等等
touchstart touchmove touchend 三个事件都会各自有事件对象
触摸事件对象重点我们看三个常见对象列表
触摸列表 说明
e.touches 正在触摸屏墓上所有手指的一个列表
e.targetTouches 正在触摸当前Dom元素上的手指的一个列表
e.changeTouches 手指状态发生了改变的列表,从无到有,从有到无
42:click延时
1:移动端click事件会有300ms的延时,原因是移动端屏幕双击会缩放(double tap to zoom)页面
解决方案:
1:禁用缩放:浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟
只需要视口标签设置为<meta name = "viewport" content = "user-sclable=no"
2:利用touch事件自己封装这个事件解决300ms延迟
原理:1:当我们手指触摸哦屏幕,记录当前出,触摸时间
2:当我们手指离开屏幕,用离开的时间减去触摸的时间
3:如果时间小于150ms,并且没有滑动屏幕,那么我们就定义为点击
3:利用fastclick插件
官网地址:https://githup.com/ftlabs/fastclick
①在HTML页面中添加
<script type='application/javascript' src='/path/to/fastclick.js'></script>
注:必须在页面所有Element之前加载脚本文件先实例化fastclick
②在JS中添加fastclick的身体,推荐以下做法:
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
如果你使用了JQuery,那么JS引入就可以改用下面的写法:
$(function() {
FastClick.attach(document.body);
});
43:移动端常用开发插件
Swiper插件的使用
中文官网地址:https://www.swiper.com.cn/
1:引用相关插件文件
2:按照规定语法使用
其他常用插件
superslide:http://www.superslide2.com/
iscroll:https://githup.com/cubip/iscroll
视频插件:zy.media.js
44:本地存储
1:window.sessionStorage
1:生命周期为关闭浏览器窗口
2;在同一个窗口(页面)下数据可以共享
3:以键值对的形式存储使用
存储数据:
语法:sessionStorage.setItem(key,value)
获取数据
语法:sessionStorage.getItem(key)
删除数据
语法:sessionStorage.removeItem(key)
删除所有数据
语法:sessionStorage.clear()
2:window.localStroage
1:生命周期:永久生效,除非手动删除,否则关闭页面也会存在
2:可以多个窗口(页面)共享,(同一浏览器可以共享)
3:以见键值对形式存储
4:使用方法与sessionStorage一样
存储数据:
语法:localStorage.setItem(key,value)
获取数据
语法:localStorage.getItem(key)
删除数据
语法:localStorage.removeItem(key)
删除所有数据
语法:localStorage.clear()