snandy

读jQuery之五（取DOM元素）

摘要：使用过Prototype.js的同学知道$(xx)调用后返回的是HTMLElement或其集合。jQuery的$调用后想要获取DOM元素可以使用get方法，如下// 方式1$('div').get(1); // 获取页面中第二个div当然，也可以使用数组索引方式获取// 方式2$('div')[1]... 阅读全文

posted @ 2011-06-08 09:04 snandy 阅读(8428) 评论(5) 推荐(9)

对象无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 阅读全文

posted @ 2011-06-08 07:37 snandy 阅读(2255) 评论(1) 推荐(1)

读jQuery之四（优雅的迭代）

摘要：前面提到jQuery库如何通过其中的jQuery.extend及jQuery.fn.extend去扩展自身的。第三篇给zChain.js添加了常用选择器，但目前为止zChain.js仍然做不了任何事情。jQuery的操作往往是分两步1，获取元素集合(选择器)2，操作元素集合而第二步操作元素集合的主要... 阅读全文

posted @ 2011-06-07 08:17 snandy 阅读(7196) 评论(3) 推荐(6)

读jQuery之三（构建选择器）

摘要：前面两篇已经道明了jQuery的核心框架。弄清楚了jQuery对象的组成，以及如何用extend方法来扩展库。链式操作也仅仅是方法体内返回this。为了叙述每一篇的重点，其示例代码都是最精简的，比如选择器只能传HTMLElement和id。这篇我们增强下选择器，依据2/8原则，这里仅实现最常用的几... 阅读全文

posted @ 2011-06-06 06:57 snandy 阅读(3431) 评论(1) 推荐(4)

读jQuery之二（两种扩展）

摘要：上一篇分析了jQuery对象的组成，这篇分析下它的extend方法。如下jQuery.extend = jQuery.fn.extend = function() { ...};我们可以用$.extend去扩展自定义的对象，如var myself = {name:jack};$.extend... 阅读全文

posted @ 2011-06-03 15:14 snandy 阅读(14418) 评论(7) 推荐(11)

读jQuery之一(对象的组成)

摘要：首次接触jQuery是在2008年，上地的一家小公司。当时的版本是1.1，在此之前我仅接触过Prototype.js。对于jQuery的写法甚是困惑，尤其在使用Prototype的$后，一度不能理解jQuery的$。对于现在前端同学来说，可能第一个接触的就是jQuery了，他们会觉得很习惯，很自然。... 阅读全文

posted @ 2011-06-03 08:44 snandy 阅读(14059) 评论(19) 推荐(23)

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 阅读全文

posted @ 2011-06-01 18:36 snandy 阅读(5252) 评论(1) 推荐(0)

自定义事件(Custom event)

摘要：前面用了8篇回顾浏览器中内置事件，且写出了一个基本完整，功能还算强大的事件模块。如果您愿意，还可以继续添加一些功能如事件代理、一次性添加多个事件、和选择器结合一次性为多个元素添加事件。当然这些都不是必须的，可根据需求自行扩展。这篇开始看看自定义事件，自定义事件有许多应用场景。实际上它实现了“观察者模式”。使用过google（或灵图）地图API的同学应该知道地图有个缩放事件zoom，即地图放大或缩小的时候触发。这个zoom就是自定义事件。感兴趣的可以点击此处看看。自定义事件并不深奥，几行代码就可以实现一个var obj = {};obj['click'] = function() 阅读全文

posted @ 2011-05-30 09:10 snandy 阅读(4963) 评论(1) 推荐(2)

事件模块的演变（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 阅读全文

posted @ 2011-05-28 18:33 snandy 阅读(1758) 评论(4) 推荐(2)

事件模块的演变（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中阅读全文

posted @ 2011-05-27 14:54 snandy 阅读(1293) 评论(3) 推荐(0)

事件模块的演变（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 阅读全文

posted @ 2011-05-26 15:05 snandy 阅读(1513) 评论(0) 推荐(1)

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 阅读全文

posted @ 2011-05-25 16:57 snandy 阅读(1578) 评论(2) 推荐(0)

勿重复检测浏览器

摘要：拿添加事件示例// 方式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 阅读全文

posted @ 2011-05-24 10:12 snandy 阅读(2369) 评论(13) 推荐(2)

仅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 阅读全文

posted @ 2011-05-18 17:56 snandy 阅读(5607) 评论(13) 推荐(0)

跨域请求之JSONP 三

摘要： script请求返回JSON实际上是脚本注入。它虽然解决了跨域问题，但它不是万能的。不能接受HTTP状态码不能使用POST提交（默认GET）不能发送和接受HTTP头不能设置同步调用（默认异步）...其最严重的就是不能提供错误处理，如果请求的代码正常执行那么会得到正确的结果。如果请求失败，如404,5... 阅读全文

posted @ 2011-05-05 11:07 snandy 阅读(8695) 评论(10) 推荐(3)

跨域请求之JSONP 二

摘要：续上篇，加两个实用功能1，增加data属性，请求参数2，增加scope属性，可以让回调函数在指定的上下文中执行接口如下Sjax.load(url, { data // 请求参数 (键值对字符串或js对象) success // 成功后回调函数 scope // 回调函数执行上下文 timest... 阅读全文

posted @ 2011-05-04 09:29 snandy 阅读(6706) 评论(1) 推荐(3)

跨域请求之JSONP 一

摘要：跨域请求的方式有很多种，iframedocument.domainwindow.namescriptXDomainRequest (IE8+)XMLHTTPRequest (Firefox3.5+)postMessage (HTML5)后台代理...它们有各自的优缺点，返回的数据格式也各不同，应根据... 阅读全文

posted @ 2011-05-03 06:40 snandy 阅读(39820) 评论(9) 推荐(9)

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 阅读全文

posted @ 2011-05-02 08:54 snandy 阅读(7148) 评论(0) 推荐(0)

JS Queue LazyLoad 之二

摘要：上一篇实现了对多个JS文件的顺序加载，这篇再完善丰富一下。加入回调函数，即每个JS文件加载后都有一次回调机会，这个回调是取决于使用者的。也就是说使用者可以配置是否回调，甚至指定某一个或多个回调。非常灵活，可以根据项目需求决定那些资源JS下载后进行回调。此外这篇还解决了重复资源加载问题。接口如下 QueueLazyLoad.js([ { url // JS路径 fn // 回调函数 scope // 回调函数执行上下文，默认为window }, ... ]);示例 QueueLazyLoad_0.2.js loading a.js ag... 阅读全文

posted @ 2011-05-02 05:29 snandy 阅读(2551) 评论(3) 推荐(2)

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([ { ... 阅读全文

posted @ 2011-05-01 15:38 snandy 阅读(3117) 评论(18) 推荐(1)

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(){});这种写阅读全文

posted @ 2011-05-01 05:48 snandy 阅读(2780) 评论(19) 推荐(4)

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 阅读全文

posted @ 2011-04-30 12:27 snandy 阅读(2148) 评论(2) 推荐(2)

JS/CSS module LazyLoad 之一

摘要：随着web app中JS越来越多，有时页面首次加载时有很多JS并没有用到。这时为了提高下载速度，提高页面渲染效率就需要让这部分暂时不用的JS延迟加载，即只在用到它们的时候再下载。这里会先实现一个最简单JS的惰性加载。后续几篇会逐步加强功能直至一个完整的JS/CSS模块加载库。这个系列里我不会实现队列，即各个JS文件是并行下载的，只有当多个JS全部下载后才执行回调。当然在第二个系列JS Queue LazyLoad中会实现各个JS文件顺序加载，每个JS文件下载后都有一次回调机会。这两种方式有各自的应用场景。先给出使用接口LazyLoad.js( urls // js文件路径 fn // 全部加载阅读全文

posted @ 2011-04-30 10:03 snandy 阅读(3865) 评论(14) 推荐(0)

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 阅读全文

posted @ 2011-04-29 11:25 snandy 阅读(2317) 评论(0) 推荐(1)

新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 阅读全文

posted @ 2011-04-27 08:09 snandy 阅读(3693) 评论(6) 推荐(6)