读jQuery之五（取DOM元素）
摘要：
使用过Prototype.js的同学知道$(xx)调用后返回的是HTMLElement或其集合。jQuery的$调用后想要获取DOM元素可以使用get方法，如下// 方式1$('div').get(1); // 获取页面中第二个div当然，也可以使用数组索引方式获取// 方式2$('div')[1]... 阅读全文
Snandy
If you cannot hear the sound of the genuine in you, you will all of your life spend your days on the ends of strings that somebody else pulls.
对象无length属性时IE6/7中无法将其转换成伪数组(ArrayLike)
摘要：
有时需要将数组转成伪数组（ArrayLike），如下var ary = ['one','two','three'];var obj = {}; // 没有length属性Array.prototype.push.apply(obj, ary);for(var i in obj){ alert(i + ': ' + obj[i]);}IE8/9/Firefox/Safari/Chrome 依次弹出了obj的key及其value。即能转换成ArrayLike。但IE6/7下则不能，没有输出任何信息表明obj仍然是个空对象。如果给obj 阅读全文
读jQuery之四（优雅的迭代）
摘要：
前面提到jQuery库如何通过其中的jQuery.extend及jQuery.fn.extend去扩展自身的。第三篇给zChain.js添加了常用选择器，但目前为止zChain.js仍然做不了任何事情。jQuery的操作往往是分两步1，获取元素集合(选择器)2，操作元素集合而第二步操作元素集合的主要... 阅读全文
读jQuery之三（构建选择器）
摘要：
前面两篇已经道明了jQuery的核心框架。弄清楚了jQuery对象的组成，以及如何用extend方法来扩展库。链式操作 也仅仅是方法体内返回this。为了叙述每一篇的重点，其示例代码都是最精简的，比如选择器只能传HTMLElement和id。这篇我们增强下选择器，依据2/8原则，这里仅实现最常用的几... 阅读全文
读jQuery之二（两种扩展）
摘要：
上一篇分析了jQuery对象的组成，这篇分析下它的extend方法。如下jQuery.extend = jQuery.fn.extend = function() { ...};我们可以用$.extend去扩展自定义的对象，如var myself = {name:jack};$.extend... 阅读全文
读jQuery之一(对象的组成)
摘要：
首次接触jQuery是在2008年，上地的一家小公司。当时的版本是1.1，在此之前我仅接触过Prototype.js。对于jQuery的写法甚是困惑，尤其在使用Prototype的$后，一度不能理解jQuery的$。对于现在前端同学来说，可能第一个接触的就是jQuery了，他们会觉得很习惯，很自然。... 阅读全文
Firefox/Opera不支持onselectstart事件
摘要：
如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Firefox/Opera不支持onselectstart事件</title> </head> <body> <div id="d1" style="width:200px;height:200px;background:gold;">Text Text</div> <script type 阅读全文
自定义事件(Custom event)
摘要：
前面用了8篇回顾浏览器中内置事件，且写出了一个基本完整，功能还算强大的事件模块。如果您愿意，还可以继续添加一些功能如事件代理、一次性添加多个事件、和选择器结合一次性为多个元素添加事件。当然这些都不是必须的，可根据需求自行扩展。这篇开始看看自定义事件，自定义事件有许多应用场景。实际上它实现了“观察者模式”。使用过google（或灵图）地图API的同学应该知道地图有个缩放事件zoom，即地图放大或缩小的时候触发。这个zoom就是自定义事件。感兴趣的可以点击此处看看。自定义事件并不深奥，几行代码就可以实现一个var obj = {};obj['click'] = function() 阅读全文
事件模块的演变（8）
摘要：
这篇为其增加几个功能1，延迟handler的执行2，handler可指定执行上下文，即有时可能需要handler内this不是HTMLElement3，停止事件冒泡和阻止默认行为4，阻止元素默认行为5，停止事件冒泡为此，将添加事件函数on的接口做了修改。第四个参数是个对象，分别可指定以下参数E.on(el, 'click', fn, { once : // true则该handler仅执行一次 delay : // handler延迟执行的时间，以毫秒为单位 scope : // handler执行上下文，默认为el stopEvent : // 阻止el默认行为，停止冒泡 p 阅读全文
事件模块的演变（7）
摘要：
现有的事件管理都挂放在HTMLElement上的，即每个element有个events属性，该属性可以当成个hash对象。里面存储这该element的所有事件及事件handler。比如给element添加了click/mouseover/mouseout 三个事件，响应函数分别是f1/f2/f3。events的结构如下每一个events['click'] 是一个数组，即存放多个handler。给element的click事件添加3个事件handler，其结构如下往HTMLElement上添加了一个对象，该对象中存放了许多事件handler，可能会存在内存泄露的问题尤其在IE6中 阅读全文
事件模块的演变（6）
摘要：
基于“勿重复判断浏览器”的原则，将添加/删除/触发事件的三个分支重写。如下var w3c = !!window.addEventListener, addListener = w3c ? function(el, type, fn) { el.addEventListener(type, fn, false); } : function(el, type, fn) { el.attachEvent('on' + type, fn); }, removeListener = w3c ? function(el, type, fn) { el.removeEventListener 阅读全文
IE6/7/8/9不支持exec的简写方式
摘要：
如下var ary = /h/('hello');alert(ary);IE6/7/8/9中报错Firefox/Safari/Chrome/Opera的最新版本均弹出了“h”以上写法等价于var ary = /h/.exec('hello');即Firefox/Safari/Chrome/Opera浏览器中使用exec方法时可以去掉“exec”用 “正则直接量+()” 方式使用。IE10 Platform Preview 仍然不支持该简写方式。相关：https://developer.mozilla.org/en/JavaScript/Reference/Glo 阅读全文
勿重复检测浏览器
摘要：
拿添加事件示例// 方式1function addEvent(el, type, fn){ if(el.addEventListener){ el.addEventListener(type, fn, false); }else{ el.attachEvent('on'+type, fn) }}// 方式2var addEvent = document.addEventListener ? function(el, type, fn) {el.addEventListener(type, fn, false);} : function(el, type, fn) {el.att 阅读全文
仅IE不支持setTimeout/setInterval函数的第三个以上参数
摘要：
setTimeout/setInterval，这两个函数相信前端开发同学都很熟悉。它们在非IE(6-9)浏览器中还可以如下使用setTimeout(function(obj){ alert(obj.a);}, 2000, {a:1});即传了第三个参数，第三个参数将作为回调函数的参数obj传入。在非IE浏览器中都弹出了1。这样有个好处，即解决了回调函数的执行上下文，比如要调用某个对象的某个方法，即可以通过参数把该对象传进去。setTimeout(function(obj){ obj.method();}, 2000, obj);当然，你还可以传多个参数给回调函数，如下setTimeout(fu 阅读全文
跨域请求之JSONP 三
摘要：
script请求返回JSON实际上是脚本注入。它虽然解决了跨域问题，但它不是万能的。不能接受HTTP状态码不能使用POST提交（默认GET）不能发送和接受HTTP头不能设置同步调用（默认异步）...其最严重的就是不能提供错误处理，如果请求的代码正常执行那么会得到正确的结果。如果请求失败，如404,5... 阅读全文
跨域请求之JSONP 二
摘要：
续上篇，加两个实用功能1，增加data属性，请求参数2，增加scope属性，可以让回调函数在指定的上下文中执行接口如下Sjax.load(url, { data // 请求参数 (键值对字符串或js对象) success // 成功后回调函数 scope // 回调函数执行上下文 timest... 阅读全文
跨域请求之JSONP 一
摘要：
跨域请求的方式有很多种，iframedocument.domainwindow.namescriptXDomainRequest (IE8+)XMLHTTPRequest (Firefox3.5+)postMessage (HTML5)后台代理...它们有各自的优缺点，返回的数据格式也各不同，应根据... 阅读全文
IE8+中XMLHttpRequest支持timeout属性及ontimeout事件
摘要：
不久前我写了一个Ajax工具库。这篇是对请求超时处理的补充。IE8/9的XMLHttpRequest对象已经增加这方面的支持了。IE10 pre1测试也支持。如果W3C能将这两个东东标准化多好啊，不用那么的hack方式实现了。XMLHttpRequest的timeout属性可以设置，表示在等待响应多少毫秒之后终止。 即如果在规定的时间内浏览器没有收到响应，那么就触发timeout事件，给xhr.ontimeout赋值为一个响应函数后可被执行。主要代码如下xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ try{ var 阅读全文
JS Queue LazyLoad 之二
摘要：
上一篇实现了对多个JS文件的顺序加载，这篇再完善丰富一下。加入回调函数，即每个JS文件加载后都有一次回调机会，这个回调是取决于使用者的。也就是说使用者可以配置是否回调，甚至指定某一个或多个回调。非常灵活，可以根据项目需求决定那些资源JS下载后进行回调。此外这篇还解决了重复资源加载问题。接口如下 QueueLazyLoad.js([ { url // JS路径 fn // 回调函数 scope // 回调函数执行上下文，默认为window }, ... ]);示例 QueueLazyLoad_0.2.js loading a.js ag... 阅读全文
JS Queue LazyLoad 之一
摘要：
前面三篇实现了多个JS并行加载，即各个JS文件相互不依赖。实现时仅顺序将其插入到head中。直至全部插入完毕才进行回调。并行下载的好处是效率较高。但有时我们需要加载的JS模块之间存在相互依赖关系。如a,b,c三个JS文件。b.js中代码依赖于a中定义的某些函数或类，c.js又依赖b.js中的函数或类，而c中具有一个入口函数。这时得保证a,b,c顺序加载，否则如果c早于b或a先加载完，则可能会出现xx未定义之类的错误提示。顺序加载的缺点就是效率较低，因为必须一个个的下载。Queue LazyLoad 0.1版接口非常之简单，如下传个数组url即可 QueueLazyLoad.js([ { ... 阅读全文
JS/CSS module LazyLoad 之三
摘要：
在开始这篇前，有两个小问题须说明一下情况一LazyLoad.js(['a.js','a.js'],function(){});有人会问为什么要在页面中引入两次a.js？ 我也想问。其实是多余的。但有人就喜欢这么用，那怎么办。只能凉拌了。我可以在内部对数组中重复元素去重下。但这无疑增加了LazyLoad.js的代码量，或者说我更愿意看到不要这么去写。当然我自己用肯定不会这么写的。情况二LazyLoad.js(['a.js'], function(){});LazyLoad.js(['b.js'], function(){});这种写 阅读全文
JS/CSS module LazyLoad 之二
摘要：
上一篇完成的JS的按需加载，这篇添加个新方法css，完成对CSS文件的加载。接口与JS相同，示例如下LazyLoad.css(['a.css', 'b.css', 'c.css'], function(){ console.log('css模块加载完毕');});Firebug中效果如下，上一篇对JS的加载实现是通过script元素，css则是通过link元素。而link元素仅IE6/7/8/9和Opera中支持其onreadystatechange事件，Firefox/Safari/Chrome既不支持onreadystatec 阅读全文
JS/CSS module LazyLoad 之一
摘要：
随着web app中JS越来越多，有时页面首次加载时有很多JS并没有用到。这时为了提高下载速度，提高页面渲染效率就需要让这部分暂时不用的JS延迟加载，即只在用到它们的时候再下载。这里会先实现一个最简单JS的惰性加载。后续几篇会逐步加强功能直至一个完整的JS/CSS模块加载库。这个系列里我不会实现队列，即各个JS文件是并行下载的，只有当多个JS全部下载后才执行回调。当然在第二个系列JS Queue LazyLoad中会实现各个JS文件顺序加载，每个JS文件下载后都有一次回调机会。这两种方式有各自的应用场景。先给出使用接口LazyLoad.js( urls // js文件路径 fn // 全部加载 阅读全文
IE6/7/8/Opera不支持script元素的onerror事件
摘要：
如下<!DOCTYPE HTML><html> <head> <meta charset="utf-8"> <title>IE6/7/8/Opera不支持script元素的onerror事件</title> <script src="jquery-1.5.23.js" onerror="alert(3)"></script> </head> <body> </body></html>scrip 阅读全文
新API解析JSON-Ajax之七
摘要：
这是Ajax系列的最后一篇。ECMAScript 5发布有段时间了，其中就包括了解析JSON的原生API-JSON.parse。许多浏览器已经支持了。主流JS库如JQuery，Ext，Prototype都优先使用JSON.parse，不支持该方法的浏览器则使用new Function或eval。 为何优先使用JSON.parse，我想一个就是性能，原生的总是要快一些吧。此外JSON.parse较eval也更安全。这里也当然不能落后了，优先使用JSON.parse，不行再用new Function方式。最后失败了会给failure的第二个参数msg赋值为"parse json erro 阅读全文