js
rainbow8590
这个作者很懒,什么都没留下…
展开
-
简单了解ES6的语法
ES6的部分语法constconst 用来定义一个不改变的常量,一旦用const定义,就不能更改,若强制更改会报错。const Pi = 3.14;let用let来定义一个块级作用域,只有在这个作用域内let声明的变量才存在,在这个作用域外部访问声明的变量会报错for(let i= 0 ; i<5 ;i++){ console.log(i)}console.log(i)f原创 2017-10-24 15:59:13 · 429 阅读 · 0 评论 -
client offset scroll的区别
client offset scroll 三大家族javaScript中的client offset scroll 经常用到,为了区分三者之间的区别,总结了一下:clientWidth:获取网页可视区域的宽度(两种用法)clientHeight: 获取网页可视区域的高度(两种用法)clientX: 鼠标距离可视区域左侧的距离(event调用)clientY:鼠标距离可视区域上侧的距离(e原创 2017-10-24 15:56:56 · 835 阅读 · 0 评论 -
关于function
function的基本了解与使用定义: 基于事件驱动,完成指定任务的可被重复使用的代码块。特点: 重用性 可维护性声明方式: 1.function name(){} 2.var fn = function(){} 3.var fn = new Function(can1,can2,....,函数体)函数的参数: 形参和实参原创 2017-10-24 15:56:53 · 275 阅读 · 0 评论 -
检测数据类型的方式
typeof : 用来检测数据类型的运算符 首先返回的是一个字符串,其次字符串中包含了对应的数据类型(number string boolean undefined function object) Typeof 值 >> 值对应的数据类型 Typeif 变量名 >>> string 多次typeof后返回原创 2017-10-24 15:56:50 · 401 阅读 · 0 评论 -
this和new
this使用总结在function我们会经常遇到this,下面总结了一些规律来判断this的对象是谁:全局作用域中的this指向window;This的区分:1.函数执行,首先看函数名前面是否有'.',有的话,'.'前面是谁this就是谁;没有的话this就是window;2.自执行函数中的this永远是window;3.给元素的某一个事件绑定方法,当事件触发的时候,执行对应的方法原创 2017-10-24 15:56:48 · 779 阅读 · 0 评论 -
关于JavaScript中的同步(SYNC)和异步(ASYNC)
同步和异步JS是属于单线程的,也就是我们说的同步,但是JS中也有异步;JS中的异步编程:1.定时器: 多个定时器时,如果执行完成循环都到达时间了,先执行时间短的那个服务器2.事件绑定 : js是基于事件驱动的,只有事件触发才会执行对应的代码3.回调函数也可以理解为异步编程4.在Ajax中可以使用异步编程只有send()之后,ajax向服务器发送请求的任务才开始A原创 2017-10-24 15:56:45 · 6652 阅读 · 0 评论 -
Ajax 和 JSONP
AjaxAjax主要是与服务器进行交换数据,在不重新加载整个页面的情况下,更新部分网页,也就是按需加载。是一种用于创建快速动态网页的技术。Ajax是遵循同源策略的:端口号 协议 域名 完全相同。有一个不相同就不能进行交互。Ajax四步:var xhr = new XMLHttpRequest();xhr.open('get',url,true)xhr.send();xhr.onrea原创 2017-10-24 15:56:42 · 123 阅读 · 0 评论 -
关于对象
对象的特性: 1.继承性 2.封装性 3.多态性对象的属性和方法可以重写(子类重写父类的方法);但不能重载(JS中没有重载,但可以通过参数个数的判断来模拟重载)。创建对象的方式:1.字面量形式: var obj = {}2.内置对象创建: var obj = new Object();3.构造函数创建: function Test(){} var obj = new T原创 2017-10-24 15:56:40 · 128 阅读 · 0 评论 -
for循环与自执行函数
for循环与自执行函数一般情况下,for循环输出的值都是判断条件的最后一个值,但是当for循环里面的代码是一个自执行函数时有会出现怎样的情况呢,下面我尝试了几种情况:for(var i = 0 ; i < 5; i++){ (function(n){ setTimeout(function(){ console.log(n) },原创 2017-10-24 15:56:37 · 3832 阅读 · 0 评论 -
for循环与闭包
for循环和闭包今天记录for循环和闭包的使用: for(var i = 0 ; i < lis.length ; i++) { lis[i].onclick=function(i){ return function(){ console.log(i) } }(i);}在for循环里面执行闭包的时候,将循环体的代码储存在一个内原创 2017-10-24 15:56:35 · 3678 阅读 · 0 评论 -
for循环保存i值的方法
通常情况下,因为一些效果我们需要获取到for循环中的i的值,但是往往拿到的都是最后一个i的值。下面介绍几种方法可以获取到i的值1.自定义属性arr[i].index = i;2 自执行函数:for(var i = 0 ; i < 5; i++){ (function(n){ setTimeout(function(){ console.log(n) },10原创 2017-10-24 15:56:32 · 9866 阅读 · 0 评论 -
FormData的使用
`FormData 对象,可以把form中所有表单元素的name与value组成一个queryString,提交到后台。在使用Ajax提交时,使用FormData对象可以减少拼接queryString的工作量。 1.创建一个FormData空对象,然后使用append方法添加key/value var formdata = new FormData(); fo原创 2017-10-24 15:56:29 · 541 阅读 · 0 评论 -
数据绑定
数据绑定的操作做前端就免不了与后台的交互,当我们获取到了从后台传输过来的数据后怎么操作它呢,在介绍方法之前先了解两个名词:DOM的回流(重排 reflow):当页面中的html结构发生改变(增加。删除元素,位置发生改变....),浏览器都需要从新计算一遍最新的DOM结构,重新对当前页面进行渲染。尽量减少回流也是一种优化方式DOM的重绘:某一个元素的部分样式发生改变了(背景颜色...),浏原创 2017-10-24 15:56:27 · 191 阅读 · 0 评论 -
DOM的映射机制
·DOM的映射机制:页面中的标签和JS获取到的元素对象是紧紧地绑定在一起的,html结构改变了,JS中不需要重新获取集合里的内容也会跟着改变。var lis = document.getElementsByTagName_r('li'); console.log(lis.length) >>> n //原来页面有n个li var newli = document_createEl原创 2017-10-24 15:56:24 · 466 阅读 · 0 评论 -
点击图片弹出轮播图 -- 插件
轮播--点击图片弹出轮播图:实现效果:1.鼠标经过图片改变图片的透明度2.点击图片,弹出遮罩层3.点击遮罩层左右箭头,实现轮播;4.点击遮罩层图片以外的部分,关闭遮罩层html:``css: *{ margin: 0; padding: 0; } img{ border: none; dis原创 2017-10-24 15:56:16 · 2476 阅读 · 2 评论 -
scrollTop()和document.body.scrollTop的区别
我们都知道jquery用着比原生的JS要方便很多,但有一些方法还是有一些差别的,下面记录一下我在做全屏滚动的时候遇到的scrollTop的问题:正常情况下,scrollTop()和document.body.scrollTop获取到的值是一样的,因为scrollTop()就是document.body.scrollTop封装得来的。但是在整屏滚动的页面上,两者的值却是不同的:当我们刷新页面的原创 2017-10-24 15:56:02 · 5256 阅读 · 0 评论 -
解决微信返回按钮到上一页页面不刷新的问题
解决微信返回按钮到上一页页面不刷新的问题 window.onpageshow = function(event){ //event.persisted 判断浏览器是否有缓存, 有为true, 没有为false if (event.persisted) { window.location.reload(); }转载 2018-02-02 10:05:12 · 10162 阅读 · 0 评论 -
iscroll.js参数设置及API
参数设置核心库croe 属性名 说明 默认值 options.useTransform 是否使用 CSS3 的 Transform 属性 true options.useTransition 是否使用 CSS3 的 Transition 属性,否则使用 requestAnimationFram 代替 true options.HWC...转载 2018-03-09 10:22:36 · 2754 阅读 · 0 评论 -
JS数据类型
javaScript的数据类型javaScript的数据类型分为基本数据类型和复杂数据类型,还有两个特殊的数据类型:基本数据类型: number string boolean 复杂数据类型: object function其他数据类型: undefined nullnumber:数字类型 ---- 整数、浮点数、NaN(特殊的数字类型) NaN ≠ NaNstring:字符原创 2017-10-24 15:56:59 · 225 阅读 · 0 评论 -
刷新页面回到页面顶部
点击浏览器的刷新按钮刷新 我们在做前端网站的时候往往会遇到用户点击刷新的行为,下面这个事件是JS为用户点击刷新按钮时触发的事件。 这个事件是在用户关闭页面之前和刷新页面时触发: 里面的两行代码为:刷新页面时就让网页从头显示。scrollTop有兼容性,请将兼容性写完整,保证各个浏览器之间的正常执行。 window.onbeforeunload = function(原创 2017-10-24 15:57:01 · 5546 阅读 · 0 评论 -
cookie和session
cookiesession原创 2017-10-24 15:58:35 · 107 阅读 · 0 评论 -
ajax工作原理
ajax工作原理ajax全称async javascript and xml ,是一门新的技术,用于和服务器端交互数据,用来实现网页不刷新的情况下,请求部分内容。它的原理是通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面一:创建一个AJAX对象:var xhr = new XMLHttpRequest;二:发原创 2017-10-24 15:58:27 · 134 阅读 · 0 评论 -
格式化时间插件
FormatDate使用方法:通过传递参数,控制日期的显示样式,还可以单独获得 年、月、日、周、时(12小时制和24小时制)、分、秒。 Format.date() // 2017 07 04 星期二 Format.date('YYYYMMDDhhmmss) // 20170704174245 Format.date原创 2017-10-24 15:58:21 · 472 阅读 · 0 评论 -
NUll和Undefined的区别
Null和undefined的区别:Null是有属性,但是没有值;Undefined是没有属性也没有值;Null的使用:1.设置未知数据类型的变量。以供后期使用:Var obj= null;2.释放一个堆内存: obj= null;3:通过DOM提供的属性和方法获取的元素标签如果不存在就是null4.匹配正则,如果不匹配,捕获的结果为null; reg.exec(str) str原创 2017-10-24 15:58:18 · 148 阅读 · 0 评论 -
addEventListener 和attachEvent 兼容性封装
addEventListener 和attachEvent 兼容性封装addEventListener 和attachEvent 是DOM2级事件绑定的方法,但是IE只支持attachEvent ,并且在有同一个事件源执行多个事件名相同的方法时,会有this指向,顺序,重复的问题,下面函数是进行封装的,兼容所有的浏览器。 var tempFn = null; function原创 2017-10-24 15:58:14 · 984 阅读 · 0 评论 -
js实现继承的六种方式
原型链利用原型让一个引用类型继承另外一个引用类型的属性和方法。构造函数,原型,实例之间的关系:每个构造函数都有一个原型对象,原型对象包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。原型链实现继承例子:function SuperType() { this.property = true;}SuperType.prototype.getSuperValue原创 2017-10-24 15:58:11 · 158 阅读 · 0 评论 -
判断一个节点是否是另一个元素的子节点
判断一个元素是否包含一个指定节点这个函数时在contains()的基础上封装的,contains()不兼容火狐,特意封装了一下,以后方便用。function isDOMContains(parentEle,ele,container){ //parentEle: 要判断节点的父级节点 //ele:要判断的子节点 //container : 二者的父级节点原创 2017-10-24 15:58:08 · 6321 阅读 · 1 评论 -
js事件对象兼容处理及传播机制
事件分为两部分 事件分为两部分:1.行为本身和事件绑定 1.行为本身:浏览器天生就赋予其的行为(mouseover mouseenter mouseout mouseleave mousemove mousedown mousewheel mouseup scroll resize click load unload focus blur keydown keyup),即使没有给上述方法绑定事原创 2017-10-24 15:58:03 · 167 阅读 · 0 评论 -
将一串数字转为大写人民币形式
数字转人民币大写形式function toChinese(str){//大写数字var arrNum = ['零','壹','贰','叁','肆','伍','陆','柒','捌','玖']// 基本单位var Intdanwei1 = ['','拾','佰','仟'];var Intdanwei2 = ['','万','亿','兆'];var Floatdanwei = ['角','原创 2017-10-24 15:58:00 · 1497 阅读 · 0 评论 -
js数组去重
一道面试题判断下面标签的id是否重复;有重复时返回不重复的值html:\\\\\\js:function repeat(){ //获取tag的id的数组 var arr = []; //将id名存入对象 并赋值为1 var json = {}; //最后不重复的数组 var res = [] var tags = doc原创 2017-10-24 15:57:48 · 120 阅读 · 0 评论 -
设计模式---- 单例模式 工厂模式 构造函数模式 原型模式 混合模式
单例模式把描述同一个事物(同一个对象)的属性和方法放在一个内存空间下,起到分组的作用,这样不同事物之间的属性即使属性名相同,相互之间也不会冲突。在项目中可以使用单例模式来进行模块化开发。var person1 = { name:'jack', age:18};var person2 = { name:'tom', age:18};弊端:虽然起到了原创 2017-10-24 15:57:30 · 443 阅读 · 0 评论 -
JS中预解释(变量提升)
预解释在JS中如果,定义了一个变量同时赋值了,但是在定义之前使用的时候值是undefined,这情况我们称之为预解释,也称之为变量提升。在当前的作用域中,JS代码执行之前,浏览器首先会默认的把所有的var和function进行提前的声明或者定义。预解释只发生在当前的作用域下。在全局作用域中用var声明和不用var声明的区别:用var 声明 : 可以进行预解释 不会报错 相当于给全局作用原创 2017-10-24 15:57:27 · 277 阅读 · 0 评论 -
关于内存释放和作用域销毁的知识
堆回收堆: 存放的时属性名和属性值或函数体的字符串;对象数据类型或者函数数据类型在定义的时候首先都会开辟一个堆内存,堆内存有一个引用地址,如果外面有变量指到了这个地址,那么这个内存就被占用了,不能销毁了。如果要销毁/释放堆内存,就让这个变量的值等于null。栈回收栈: 是js代码执行的环境。全局作用域下:当页面关闭的时候全局作用域才会销毁。私有作用域:一般情况下,函数执行还会琮琤一个新原创 2017-10-24 15:57:24 · 495 阅读 · 0 评论 -
event.target的认识
e.target的认识 最近在做特效的过程中遇到了获取目标事件源的情况,一般情况下我们获取目标事件源都是谁是调用者谁就是事件源,但是当有批量的DOM需要操作的时候,要判断哪一个dom是事件源就不是很明确了,使用e.target可以准确地获取事件源,并且在使用的过程中可以比较判断,从而实现我们的代码。举个例子:当做一个拖拽的案例的时候,有多个事件源,但是想要知道鼠标点击的是不是我们原创 2017-10-24 15:57:19 · 17953 阅读 · 1 评论 -
JS延迟加载
JS延迟加载的几种方法:利用定时器 利用定时器,延迟一定的时间后再引入js文件,给html的加载和渲染留出时间 setTimeout(function(){ document.getElementById(‘my').src='demo.js'; } “,3000);//延时3秒后执行 defer 属性 加上 defer 等于在页面完全载入后再执行原创 2017-10-24 15:57:15 · 193 阅读 · 0 评论 -
e.offsetX/e.clientX/e.pageX的区别
e.offsetX/e.clientX/e.pageX/e.screenX的区别没有标注的是各浏览器都支持的:e.offsetX:鼠标相对于事件源的X方向的距离( firfox 不支持)e.offsetY:鼠标相对于事件源的Y方向的距离( firfox 不支持)e.clientX:距离浏览器可视区域X方向的距离e.clientY:距离浏览器可视区域Y方向的距离e.pageX:鼠标原创 2017-10-24 15:57:09 · 4518 阅读 · 0 评论 -
获取指定长度的随机数 -- 插件
介绍这个插件可以实现获取随机数的功能,可以指定长度,也可以使用默认的长度,获取的随机值是大小写字母和数字的组合。使用方式rid() ---> 输出长度为7的字符串随机数rid(10) ---> 输出长度为10的字符串随机数js代码;(function(global){var randomId = { rid:function(){ //随机码数组原创 2017-10-24 15:57:04 · 1042 阅读 · 0 评论 -
js 处理表情符号
将表情转为字符:“` 应用场景: 提交表单中的表情符号转为字符串, 便于后台存储.function utf16toEntities(str) { var patt=/[\ud800-\udbff][\udc00-\udfff]/g; // 检测utf16字符正则 str = str.replace(patt, function(char){ var ...转载 2018-07-09 11:43:01 · 6624 阅读 · 1 评论