snandy

设置元素class的三种方式

摘要：列举所有的方式，看看各浏览器的支持差异。一、el.setAttribute('class','abc');<!DOCTYPE HTML><HTML> <HEAD> <meta charset="utf-8" /> <title>setAttribute('class', 'abc')</title> <style type="text/css"> .abc { background: red; } </ 阅读全文

posted @ 2011-08-26 17:34 snandy 阅读(2257) 评论(0) 推荐(0)

运算数的求值顺序

摘要：请注意，这里说的是运算数的求值顺序。而非运算符，运算符的求值顺序我们比较熟悉。比如a * b + c;1，先算乘方，再算乘除，最后算加减2，有括号，先算括号里面的，同一级运算按照从左到右的顺序依次进行这一点所有的程序设计语言都采取数学中数字的计算顺序。当然程序设计语言中还有一些不同于数学中的运算符。那运算数的求值顺序是如何的呢？如下// 求 a 和 b的和sum = a + b;1，从内存中取a的值2，从内存中取b的值3，进行相加运算貌似描述的很弱智，理所当然就是这样的。有人可能觉得先取b的值，再取a，然后相加。这样最后的结果也是一样的。的确是这样。但如果运算数是一个函数执行呢？sum = a 阅读全文

posted @ 2011-08-19 11:13 snandy 阅读(2338) 评论(2) 推荐(1)

读jQuery之十五

摘要：在之前的event-jq-0.2.js基础上继续提取jQuery的trigger和namespace。实现功能如下// add eventE.bind(el, 'click', fn);E.bind(el, 'click.name', fn);E.bind(el, 'click', fn, data);// remove event : E.unbind(el, 'click', fn);E.unbind(el, 'click.name');E.unbind(el, 'click');E.unbin 阅读全文

posted @ 2011-08-18 18:23 snandy 阅读(2056) 评论(3) 推荐(3)

读jQuery之十四（触发事件核心方法）

摘要：触发事件，或称模拟用户动作。比如点击，我们可以用代码去模拟用户点击，达到的效果与真实的鼠标点击是一样的。在事件模块的演变我使用了dispatchEvent(标准) 和fireEvent(IE)来主动触发事件。如下...dispatch = w3c ? function(el, type){ t... 阅读全文

posted @ 2011-08-15 16:47 snandy 阅读(10023) 评论(2) 推荐(7)

函数的副作用

摘要：函数副作用指当调用函数时，除了返回函数值之外，还对主调用函数产生附加的影响。例如修改全局变量（函数外的变量）或修改参数。函数副作用会给程序设计带来不必要的麻烦，给程序带来十分难以查找的错误，并且降低程序的可读性。严格的函数式语言要求函数必须无副作用。函数的副作用相关的几个概念，Pure Function、Impure Function、Referential Transparent。纯函数 ( Pure Function )输入输出数据流全是显式（Explicit）的。显式（Explicit）的意思是，函数与外界交换数据只有一个唯一渠道——参数和返回值。函数从函数外部接受的所有输入信息都通阅读全文

posted @ 2011-08-14 14:30 snandy 阅读(11534) 评论(4) 推荐(7)

事件模块的演变（9）

摘要：增加了批量添加事件E.on(el, { click : { handler : once : delay : scope : stopEvent : preventDefault : stopPropagation : }, mouseover : {}, mouseout : {}});数据结构：event-0.6.js 阅读全文

posted @ 2011-08-12 10:18 snandy 阅读(2709) 评论(0) 推荐(0)

读jQuery之十三

摘要：最近看完了添加事件和删除事件的核心方法，忍不住想把jQuery的事件模块抠出来。jQuery的代码是非常内聚的，一环套一环。想独立出来不容易。jQuery的事件模块严重依赖于其数据储存(jQuery.data)，你会发现我的代码中的dataManager对象对应它。这里只提供bind和unbind方法。暂不包含事件命名空间(event namespace)事件代理(event delegation)特殊事件如dom ready接口如下：E.bind(el, 'click', fn); E.bind(el, 'click', fn, data);E.unbind( 阅读全文

posted @ 2011-08-11 11:41 snandy 阅读(2078) 评论(1) 推荐(0)

主动派发事件总结

摘要：有时需要模仿用户的一些动作（鼠标/键盘操作），最常见的莫过于鼠标点击。一一列举1，dispatchEvent()这是标准的触发事件方法，使用时需要先创建好事件对象。如下var evt = document.createEvent('Event');evt.initEvent('click',true,true);element.dispatchEvent(evt);2，fireEvent()这是IE旧版本中实现的触发事件方法，它无须创建事件对象，直接使用。如下element.fireEvent('onclick');注意：与attachEvent 阅读全文

posted @ 2011-08-07 09:27 snandy 阅读(2908) 评论(1) 推荐(4)

模拟元素点击的几种方式

摘要：最简单的莫过于使用click方法<input id="btn" type="button" value="BUTTON" onclick="alert(1)"/><script> var btn = document.getElementById('btn'); btn.click();</script>所有浏览器都弹出了1。把input换成div呢<div id="d1" style="background:gold;widt 阅读全文

posted @ 2011-08-02 06:52 snandy 阅读(40916) 评论(18) 推荐(12)

各浏览器对click方法的支持差异

摘要： click方法可以用来模拟用户点击。有的浏览器中所有元素都具有click方法，有的浏览器则没有。如下IE6/7/8/9/Opera12/Firefox5/Chrome21Safari5INPUT[type=text]INPUT[type=password]INPUT[type=radio]INPUT[type=checkbox]INPUT[type=button]INPUT[type=submit]INPUT[type=image]INPUT[type=hidden]INPUT[type=reset]INPUT[type=submit]INPUT[type=file]1BUTTON[type= 阅读全文

posted @ 2011-07-31 10:12 snandy 阅读(5854) 评论(1) 推荐(2)

仅Firefox中链接A无法实现模拟点击以触发其默认行为

摘要：偶然发现之前写的事件模块在Firefox5中无法触发A的默认行为了。IE/Opera/Firefox5中A具有click方法，因此模拟点击直接调用click方法即可。而标准的事件触发可以使用dispatchEvent方法。但现在FF5无法触发了A的默认行为了。如下<!doctype html><html> <head> <meta charset="utf-8"> <title>Firefox5链接A无法实现模拟点击bug</title> </head> <body> <a 阅读全文

posted @ 2011-07-30 22:39 snandy 阅读(3713) 评论(2) 推荐(1)

读jQuery之十二（删除事件核心方法）

摘要：使用jQuery删除事件（或称解除事件绑定）有三个函数：unbind、die和undelegate。这三个方法都依赖于未公开的jQuery.event.remove（后续使用remove简写）。此为删除事件的核心方法。remove 所作的事情与上一篇提到的.add 刚好相反。且与.add中的处理代码... 阅读全文

posted @ 2011-07-29 15:11 snandy 阅读(5194) 评论(2) 推荐(0)

Chrome（12）中使用getComputedStyle获取透明度(opacity)返回字符串不同于其它浏览器

摘要：获取计算后的元素样式，IE有currentStyle，而标准浏览器用getComputedStyle。IE9后也支持getComputedStyle了。发现以前写的css方法不好用了，在chrome中返回的结果与其它浏览器不同。重现如下<!DOCTYPE HTML><HTML> <HEAD> <meta charset="utf-8" /> <title>css opacity</title> <style type="text/css"> div { backgroun 阅读全文

posted @ 2011-07-27 15:33 snandy 阅读(2869) 评论(4) 推荐(0)

各浏览器对focusin/focusout事件的支持差异

摘要：浏览器版本：IE6/7/8/9IE10 preview2Firefox 5Safari 5Chrome 12Opera 11测试：IE6/7/8IE9/10Firefox5Safari5Chrome12Opera11el.onfocusinYYNNNYel.attachEvent('onfocusin',fn)YYNNNYel.addEventListener('focusin',fn,false);NYNYYY结论：1，所有 IE 版本均支持focusin/focusout事件（注意：IE6/7/8中不支持el.addEventListener方法）。2，阅读全文

posted @ 2011-07-19 11:44 snandy 阅读(7644) 评论(0) 推荐(2)

IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素，子元素依然能显示bug

摘要：多数情况下隐藏(设置display:none)一个元素，无需依次将其内的所有子元素都隐藏。非要这么做，有时会碰到意想不到的bug。如下1，两个div，d1中包含d22，d1，d2都设置了absolute或relative3，隐藏d14，隐藏子元素d25，显示d1这时IE6/7 and IE8/9/10(IE7模式)中会发现，子元素d2也能显示出了(别忘了，d2被display:none 了哦)。但IE8/9/10/Firefox5/Safari4/Chrome12中子元素d2仍然是被隐藏的。重现代码<!DOCTYPE HTML><HTML> <HEAD> & 阅读全文

posted @ 2011-07-18 14:54 snandy 阅读(3369) 评论(1) 推荐(2)

读jQuery之十一(添加事件核心方法)

摘要：上一篇提到jQuery中添加事件提供给客户端程序员的接口方法有很多bind/click等，但其实现的核心方法是jQuery.event.add。这篇看看其源码，这个add定义如下（省略大部分）add: function( elem, types, handler, data ) { if ( ele... 阅读全文

posted @ 2011-07-16 12:16 snandy 阅读(5484) 评论(5) 推荐(3)

仅img元素创建后不添加到文档中会执行onload事件

摘要：示例<!DOCTYPE HTML><HTML> <HEAD> <meta charset="utf-8" /> <title>仅img元素创建后却不添加到文档中会执行onload事件</title> </HEAD> <BODY> <script> var img = document.createElement('img'); img.src = "http://www.sinaimg.cn/rny/sinamail57/skins/1103 阅读全文

posted @ 2011-07-11 09:43 snandy 阅读(1915) 评论(0) 推荐(0)

读jQuery之十（事件模块概述）

摘要： jQuery的事件模块是较复杂的，前面仅仅提到了对事件对象的包装。即统一了一些兼容性的问题。这篇会综述下jQuery的整个事件模块。后面会详细分析jQuery.event.add/jQuery.event.remove/jQuery.event.trigger。虽然事件模块代码很难读，但其提供的AP... 阅读全文

posted @ 2011-06-27 15:36 snandy 阅读(3998) 评论(2) 推荐(6)

读jQuery之九（一些瑕疵）

摘要： jQuery1.6.1 发布有一段时间了，发现一些冗余代码，列出如下1，bind 方法，最后一个参数fn是多余的// Handle object literalsif ( typeof type === "object" ) { for ( var key in type ) { this[ name ](key, data, type[key], fn); } return this;}2，注释// Add which for click: 1 === left; 2 === middle; 3 === right应修改为// Add which for mousedow 阅读全文

posted @ 2011-06-20 09:28 snandy 阅读(3531) 评论(6) 推荐(5)

JavaScript判断变量是否为undefined两种方式差异

摘要：我们经常需要判断某个变量/属性是否为undefined。通常有两种写法// 方式1typeof age === 'undefined';// 方式2age === undefined这两种写法有什么区别吗? 应该使用哪一种呢？看看下面的例子typeof age === 'undefined'; //... 阅读全文

posted @ 2011-06-17 14:32 snandy 阅读(47996) 评论(12) 推荐(7)

读jQuery之八（包装事件对象）

摘要：由于各个浏览器中原生事件对象的差异性，多数 JS库/框架都或多或少的对原生事件对象进行了修复及包装。比如，停止事件冒泡IE用 cancelBubble ，标准浏览器则用 stopPropagation 。获取事件源对象，IE用 srcElement ，标准浏览器则用 target 诸如此... 阅读全文

posted @ 2011-06-17 06:58 snandy 阅读(5065) 评论(2) 推荐(2)

读jQuery之七（判断点击了鼠标哪个键）

摘要： jQuery丢弃了标准的 button 属性采用 which，这有点让人费解。which 是Firefox引入的，IE不支持。which的本意是获取键盘的键值(keyCode)。 jQuery中的which即可以是键盘的键值，也可以是鼠标的键值。即当判断用户按下键盘的哪个键时可以使用which，当判断用户按下鼠标的哪个键时也可以用which。它一举两用了。源码// Add which for key eventsif ( event.which == null && (event.charCode != null || event.keyCode != null) ) { e 阅读全文

posted @ 2011-06-15 11:22 snandy 阅读(8149) 评论(4) 推荐(3)

读jQuery之六（缓存数据）

摘要：很多同学在项目中都喜欢将数据存储在HTMLElement属性上，如Test给页面中div添加了自定义属性“data”及值“some data”。后续JS代码中使用getAttribute获取。jQuery从1.2.3开始提供了data/removeData方法用来存储/删除数据。1.6.1代码片段j... 阅读全文

posted @ 2011-06-10 09:58 snandy 阅读(38601) 评论(9) 推荐(18)

读jQuery之五（取DOM元素）

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

posted @ 2011-06-08 09:04 snandy 阅读(8446) 评论(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 阅读(2273) 评论(1) 推荐(1)