js
文章平均质量分 56
chanda_yang
这个作者很懒,什么都没留下…
展开
-
字符串操作
join('')-参数是分隔符号concat() – 将两个或多个字符的文本组合起来,返回一个新的字符串。 indexOf() – 返回字符串中一个子串第一处出现的索引。如果没有匹配项,返回 -1 。 charAt() – 返回指定位置的字符。 lastIndexOf() – 返回字符串中一个子串最后一处出现的索引,如果没有匹配项,返回 -1 。 match() – 检查一个字原创 2016-09-06 18:15:27 · 253 阅读 · 0 评论 -
执行环境与作用域
执行环境包括全局执行环境函数执行环境,window对象,因此所有全局变量和函数都是作为window对象的属性和方法创建的。某个执行环境中的所有代码执行完毕后,该环境被销毁, 保存在其中的所有变量和方法也随之销毁(全局执行环境直到应用程序退出——例如关闭网页或浏览器——时才会被销毁)函数执行环境:当执行流进入一个函数时,函数的环境就会被推入一个环境栈中,而在函数执行之后,栈将其环境弹出,把控原创 2016-09-06 16:52:19 · 359 阅读 · 0 评论 -
编码解码的方法
js对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decodeURIComponent 1、 传递参数时需要使用encodeURIComponent,这样组合的url才不会被#等特殊字符截断。 例如:document.w原创 2016-09-19 09:45:51 · 439 阅读 · 0 评论 -
数组的操作
Array 对象属性属性描述constructor返回对创建此对象的数组函数的引用。length设置或返回数组中元素的数目。prototype使您有能力向对象添加属性和方法。Array 对象方法方法描述concat()连接两个或更多的数组,并返回结果。join原创 2016-09-19 09:28:26 · 278 阅读 · 0 评论 -
两张图解释CSS动画的性能
JS是单线程的,但是浏览器可以开启多个线程,渲染一个网页需要两个重要的线程来共同完成:Main Thread 主线程Compositor Thread 绘制线程(我自己翻译的)主线程的工作:运行JS计算 HTML 元素的 CSS 样式布局页面将元素绘制到一个或多个位图中把这些位图交给转载 2016-09-17 11:41:55 · 468 阅读 · 0 评论 -
定位相关总结
screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角。clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照点会随之滚动条的移动而移动。pageX:参照点也是浏览器内容区域的左上角,但它不会随着滚动条而变动原创 2016-09-05 09:33:51 · 228 阅读 · 0 评论 -
js中的继承——浅拷贝、深拷贝
构造函数的继承http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html今天要介绍的是,对象之间的"继承"的五种方法。比如,现在有一个"动物"对象的构造函数。 function Animal(){ this.species = "动物转载 2016-08-13 18:35:24 · 2679 阅读 · 0 评论 -
闭包
闭包是什么定义在一个函数内部的函数;一个可以访问另一个函数作用域内的变量的函数闭包作用可以读取函数内部的变量;让这些变量的值始终保持在内存中;可以用于创建私有函数或方法。保护命名空间避免污染全局变量实现原理 因为javascript没有块级作用域,因此外部你是怎么用闭包的1匿名自执行函数:我们创建了一个匿名的函数,并立即执行它,由于外部无法引用它内原创 2016-08-04 00:14:38 · 250 阅读 · 0 评论 -
call和apply及bind应用
call 的第二个参数可以是任意类型,而apply的第二个参数必须是数组,也可以是arguments应用:实现继承function Animal(name){ this.name = name; this.showName = function(){ alert(this.name); }原创 2016-09-02 15:42:17 · 381 阅读 · 0 评论 -
localStoragesessionStorage
1可以用JOSN.stringfiy和JOSN.parse来存储对象2当储存的数据发生变化时,会触发storage事件。我们可以指定这个事件的回调函数。window.addEventListener("storage",onStorageChange);回调函数接受一个event对象作为参数。这个event对象的key属性,保存发生变化的键名。function onStorageC转载 2016-09-13 08:54:26 · 320 阅读 · 0 评论 -
数组操作方法
Array对象方法参考:concat 方法:返回一个新数组,这个新数组是由两个或更多数组组合而成的。array1.concat([item1[, item2[, . . . [, itemN]]]])join 方法 :返回字符串值,其中包含了连接到一起的数组的所有元素,元素由指定的分隔符分隔开来。arrayObj.join(separator)与C#不原创 2016-09-06 18:57:35 · 357 阅读 · 0 评论 -
arguments.callee
setTimeout(function(){ console.log('1'); setTimeout(arguments.callee,1000); },1000);这里arguments.callee指向匿名函数function(){}定义:argument代表当前函数的参数数组 arguments.callee表示引用当前正在执行的原创 2016-09-19 19:55:22 · 440 阅读 · 0 评论 -
dom-console
作用原创 2018-03-07 14:53:39 · 209 阅读 · 0 评论 -
关于dom 事件冒泡、捕获 dom事件三个阶段
本文主要解决两个问题:什么是事件流DOM事件流的三个阶段起因温故了一下我的《JavaScript高级程序设计》的时候,翻到DOM事件那一章,(说实话,现在无论是什么框架你都离不开操作DOM啊,毕竟这是你展示的最基本元素,就像人的细胞)。想起了dom事件流原理,好多人不明白,只知道click mouseout等实用场景,真要理解和更进一步的前端是要转载 2016-09-22 08:39:19 · 430 阅读 · 0 评论 -
锚点定位
1、使用id定位: 代码如下:锚点1 11111111111 11111111111 11111111111 11111111111 11111111111 11111111111 11111111111 11111111111 11111111111 11111111111 11111111111 1111转载 2016-09-21 12:47:29 · 724 阅读 · 0 评论 -
定位
不能确定浏览器窗口本身的大小,可以取得页面视口的大小var pageWidth = window.innerWidth; var pageHeight = window.innerHeight; if(typeof pageWidth != 'number'){ if(document.compatMode == 'CSS1C原创 2016-09-07 14:12:46 · 228 阅读 · 0 评论 -
DOM扩展
选择符APIquerySelector()返回该模式匹配的第一个元素querySelectorAll() 返回所有匹配的元素与类相关document.getElementByClassName(一个或多个类名)classList属性 add(value) 将指定字符串添加到列表中contains 返回布尔值remove 从列表中删除给定的字符原创 2016-09-08 08:52:58 · 215 阅读 · 0 评论 -
DOM操作
insetBefore(要插入的节点,参照节点)appendChild()replaceChild()removeChild(要插入的节点,要替换的节点)cloneChild(true)深复制,复制该节点的子节点cloneChild()浅复制,只会复制节点本身该方法不会复制添加到DOM节点中的js属性,例如事件处理程序等。这个方法只复制特性、子节点,其他一切都不会复制。原创 2016-09-07 18:08:46 · 316 阅读 · 0 评论 -
继承
原型链:实例指向——构造函数的原型——父对象构造函数的原型—— functionSuperType(){ this.property= true; } SuperType.prototype.getSuperValue= function(){原创 2016-09-07 16:31:04 · 285 阅读 · 0 评论 -
创建对象
工厂模式function createPerson(name,age,job){ var o=new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function(){ alert(this.name); }; return原创 2016-09-06 23:06:18 · 275 阅读 · 0 评论 -
location对象和history对象
location对象hashhosthostnamehrefpathnameportprotocolsearch解析查询字符串function query(){ var qs =location.search.length>0 ? location.search.substring(1):'',原创 2016-09-07 16:21:17 · 642 阅读 · 0 评论 -
pushState
一、认识window.historywindow.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象。window对象通过history对象提供对览器历史记录的访问能力。它暴露了一些非常有用的方法和属性,让你在历史记录中自由前进和后退。1、历史记录的前进和后退在历史记录中后退,可以这么做:window.hi转载 2016-09-23 10:05:22 · 446 阅读 · 0 评论 -
jsonp
后端代码 $callback = $_GET['callback'];//得到回调函数的名称$data = array('a','b');echo $callback.'('.json_encode($data).')'; ?>原创 2016-09-01 12:10:21 · 189 阅读 · 0 评论 -
DOM操作
1、DOM中的所有节点都继承自Node类型,IE9之前将DOM节点作为COM对象来实现;每个DOM节点都有一个nodeType属性来表明节点类型,总共有12个类型: 1 Node.ELEMENT_NODE 2 Node.ATTRIBUTE_NODE 3 Node.TEXT_NODE 4 Node.CDATA_SECTION_NODE 5 Node.ENTITY_REFERENC转载 2016-09-01 11:38:18 · 230 阅读 · 0 评论 -
动画
平时工作中会遇到需要实现一些存在动画的页面。这里对动画的实现知识做一个整理。页面动画的实现可以分为两类:CSS动画、Canvas动画、JavaScript动画。JavaScript动画没啥好讲的,这里就不整理了。CSS动画CSS3中提供了一个属性transition,用来实现CSS样式的平滑变化。举个例子:.box { width: 100px; height: 100px转载 2016-09-11 18:31:28 · 306 阅读 · 0 评论 -
函数柯里化与函数绑定
1. 参数复用;2. 提前返回;3. 延迟计算/运行。原创 2016-08-04 19:29:18 · 224 阅读 · 0 评论 -
跨域
只要协议、域名、端口有任何一个不同,都被当作是不同的域。对于端口和协议的不同,只能通过后台来解决。 协议:http 主域名:cnblogs.com 子域名:www 端口号: 2050CORS(跨域资源共享) 原理:使用自定义的HTTP头部让浏览器与服务器进行沟通并不是所有的浏览器都支持Node.js中的应用//allow原创 2016-08-04 00:22:36 · 206 阅读 · 0 评论 -
事件监听
事件流IE是事件冒泡流——事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点其他是事件捕获流——不太具体的节点更早接收到事件,而最具体的节点最后接收到事件DOM事件流三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段事件处理程序HTML事件处理程序缺点:1存在一个时差问题 2 这样扩展事件处理程序的作用域链在不同浏览器中会导致不原创 2016-08-04 14:44:19 · 252 阅读 · 0 评论 -
XMLHttpRequest2级
FromData现代Web应用中频繁使用的一项功能就是表单数据的序列化,XMLHttpRequest 2级为此定义了FormData类型。FormData为序列化表单以及创建与表单格式相同的数据(用于通过XHR传输)提供了便利。下面的代码创建了一个FormData对象,并向其中添加了一些数据。var data = new FormData();data.ap原创 2016-08-04 16:51:44 · 331 阅读 · 0 评论 -
get/post/put/delete
1. get是从服务器上获取数据,post是向服务器传送数据。2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。3. 对于get方式,服务器端用req.query获原创 2016-08-04 00:23:36 · 227 阅读 · 0 评论 -
ajax实现过程
特征Ajax能够以异步方式从服务器取得更多信息,意味着用户单击后,可以不必刷新页面也能取得新数据,也就是说,可以使用XHR对象取得新数据,然后通过DOM将新数据插入到页面中。而且Ajax与XML无关,这种技术就是无需刷新页面就能从服务器取得数据。实现过程;创建XMLHttpRequest对象(需要考虑各浏览器兼容的问题)var xmlHttp;function createXM原创 2016-08-04 00:20:53 · 254 阅读 · 0 评论 -
json对象
解析与序列化早起使用eval()函数进行解析序列化现在用stringfiy()方法进行序列化 该方法接收三个参数(要序列化的对象,过滤器,一个选项表示是否在JSON字符串中保留缩进);toJSON()方法 该方法可以作为过滤器的补充,解析 parse()方法进行解析原创 2016-08-04 16:12:05 · 140 阅读 · 0 评论 -
js循环绑定事件
1 2 3 4 var ali = document.getElementsByTagName('a'); for(var i=0;i (function(){ var p = i ; c原创 2016-08-15 21:31:23 · 261 阅读 · 0 评论 -
location对象
查询字符串参数location.search返回从问号到URL末尾的所有内容该函数可以用来解析查询字符串,然后返回包含所有参数的一个对象function getQueryStringArgs(){ //取得查询字符串并去掉开头的问号 var qs = (location.search.length > 0 ? location原创 2016-08-04 08:54:46 · 214 阅读 · 0 评论 -
原型与继承
原型只要创建了一个对象就会为他创建一个prototype属性,这个属性指向函数的原型对象。在默认情况下,所有原型对象都会自动获得一个constructor属性,这个属性包含一个指向prototype属性所在函数的指针。当用构造函数创建一个新实例时,该实例的内部将包含一个指针,指向构造函数的原型对象,ECMA5管这个指针叫做[[Prototype]],但浏览器上都支持一个属性叫做_proto_原创 2016-08-04 00:18:54 · 1306 阅读 · 0 评论 -
数组分块(array chuncking)
在数组分块模式中,array变量本质上就是一个“待办事宜”列表,它包含了要处理的项目。使用shift()方法可以获取队列中下一个要处理的项目,然后将其传递给某个函数。如果在队列中还有其他项目,则设置另一个定时器,并通过arguments.callee调用同一个匿名函数。要实现数组分块非常简单,可以使用以下函数。function chunk(array, process, context原创 2016-08-04 19:38:09 · 1915 阅读 · 0 评论 -
自定义事件(观察者模式)
观察者模式由两类对象组成:主体和观察者。主体负责发布事件,同时观察者通过订阅这些事件来观察该主体。该模式的一个关键概念是主体并不知道观察者的任何事情,也就是说它可以独自存在并正常运作即使观察者不存在。从另一方面来说,观察者知道主体并能注册事件的回调函数(事件处理程序)。涉及DOM上时,DOM元素便是主体,你的事件处理代码便是观察者。事件是与DOM交互的最常见的方式,但它们也可以用于原创 2016-08-04 19:43:27 · 865 阅读 · 0 评论 -
四种常见的POST提交数据方式
HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 这几种。其中 POST 一般用来向服务端提交数据,本文主要讨论 POST 提交数据的几种方式。我们知道,HTTP 协议是以 ASCII 码传输,建立在 TCP/IP 协议之上的应用层规范。规范把 HTTP 请求分为三个部分:状态行、请求头、消息主转载 2016-08-09 09:29:25 · 1084 阅读 · 0 评论 -
简述在IE下mouseover和mouseenter的区别
栗子一:script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js">script>script type="text/javascript">x=0;y=0;$(document).ready(function(){ $("d转载 2016-08-18 19:04:22 · 1406 阅读 · 0 评论 -
JS中&&和||用法
&&和||在JQuery源代码内尤为使用广泛,由于本人没有系统的学习js,所以只能粗略的自我理解出来,希望大家指点下。粗略理解如下:a() && b() :如果执行a()后返回true,则执行b()并返回b的值;如果执行a()后返回false,则整个表达式返回a()的值,b()不执行;a() || b() :如果执行a()后返回true,则整个表达式返回a()的值,b()不执行;如原创 2016-08-18 18:01:35 · 195 阅读 · 0 评论