文章分类 - JavaScript
摘要：postMessage是html5新增的方法，主要用来解决跨域通信的问题，用法很简单，只需要在页面获得另一个页面的window( 如iframe引入的页面 )，就可以调用postMessage方法将数据传送过去，接收的页面只需要监听message事件，就可以获取到数据，从而进行操作。就是这样而已，下面给出一个例子，看代码会更加清晰。page1.html page2.html 这是子页面 运行效果如下图：其实只需要看一个页面的代码就能了解全部了，只是为了例子完整性将其全...
阅读全文
摘要：关于浏览器缓存，直接看图：如上图，当输入url回车或按f5刷新时，浏览器先判断是不是有缓存，这个判断是通过判断Expires或Cache-control；其中，Cache-control优先级大于Expires,也就是说，当两者同时出现时，只会通过判断Cache-control来判断请求是否有缓存。有缓存时，直接从缓存读取；没有时，则再判断Etag，Etag也没有时，再判断Last-Modified，这些都没时，则就是没有缓存的了。上面的判断还与用户行为有关，如下图：图片来源：http://www.cnblogs.com/skynet/archive/2012/11/28/2792503.ht
阅读全文
摘要：我的标题看起来很大，但我却是纯粹的标题党，所以不要对接下来的内容抱有太大希望，这里只是我的个人笔记本而已，但却总好像是写给别人看的一样，可能写完还会发发微博，但却有忽悠嫌疑。好了，说了这么多还没进入主题，有罪，下面再描述一下。最近由于工作的需要，有一个复制的功能需要做，以前就知道单靠dom接口和js是无法兼容主流浏览器的，但由于懒惰自己并没花时间多了解，这次就稍微整理一下备忘。首先，想实现主流浏览器的复制功能，看这里：《突破IE跨浏览器复制内容到剪贴板》，假设你看到这篇文章的时间跟我写这篇文章的时间相隔很久了，也就是这个链接已经404，那么，你还可以看这里：http://note.sdo.co
阅读全文
摘要：做前端最痛苦的莫过于兼容问题了，同一样东西，不同浏览器有不同的实现，同一个浏览器不同的版本也有不同的处理。直叫人抓狂。但既然做了前端，就不得不提起耐心，面对这些万恶的兼容。jQuery作为一个目前来讲最流行的JS库，它同样提供了检测各种各样特性的功能，告诉你某个功能该浏览器是否支持，好让你做出进一步的处理。下面，先罗列一下一些问题吧。测试浏览器：IE6，IE7，IE8，IE9，chrome23.0.1271.95，firefox17.0.1，其中IE78是在IE9的文档模式下，不包准确，但jQuery和网上搜到的结果应该可以相信前人的测试是准确的。另，在chrome23这本版本已修复的bug也
阅读全文
摘要：关于Deferred对象，建议先看一下阮一峰老师的《jQuery的deferred对象详解》看完之后，相信你对Deferred已经有所了解，如果你还想继续阅读下面的源码，可以先自己看下jQuery.Callbacks，或者先参考我前一篇文章：《学习jQuery.Callbacks》完后再看下面的源码注释，相信你会发现，所谓的Deferred，其实就是构建了2条Callbacks的回调list，如下：var calresolve = $.Callbacks('once memory'), calreject = $.Callbacks('once memory')
阅读全文
摘要：Callbacks是JQ的一个回调对象，可以用来添加回调，执行回调，删除回调等等。并提供一些参数如once,memory,unique等来进行特殊需求的控制。这里就不举例说明Callbacks的用法了。具体详细说明可以参见：http://api.jquery.com/jQuery.Callbacks/我们学习源码，需先了解如何使用，这里假设我们已经知道如何使用Callbacks了。他的实现思路就是: 构建一个存放回调的数组，如var list = []，通过闭包使这条回调数组保持存在。添加回调时，将回调push进list，执行则遍历list执行回调。看思路貌似很简单，我们就直接来看源码吧，对于
阅读全文
摘要：querySelector和querySelectorAll能获取以W3C标准规定的CSS选择器方式获取节点和节点集合(array-like)。那么，一个类库的选择器模块假如不需要兼容IE67的话，实现就非常简单了。按照一般类库的使用方式，通常获取节点都是$(selector,context)，也就是在context里寻找selector，然后以数组的形式返回。利用querySelectorAll来封装这样的功能，是一件很简单的事情。首先，最简单的，函数的内部实现转换一定是context.querySelectorAll(selector);再将其结果转换为数组，如下面实现：var $ = f
阅读全文
摘要：contains， 判断节点的包含关系，大部分这类文章都说IE支持contains而FF不支持，FF需要用compareDocumentPosition方法，但据我现在测试，我的FF16已经支持contains了。contains的实现有一个特殊的地方是他自己包含自己也被算是包含，而compareDocumentPosition则不包含自己。故，假设要实现一个考虑充分的contains函数，则如下代码：var contains = function(root, el) { if (root.compareDocumentPosition) return...
阅读全文
摘要：1.src//html<script type="text/jvascript" src="ooxx.js"></script> //scriptvar script = document.getElementsByTagName('script')[0]; //标准浏览器返回 http://www.ooxx.com/ooxx.js 即返回绝对路径//IE67，src的字符串为什么则返回什么，这里是ooxx.jsalert(script.src); //无兼容问题，均返回src所填字符串，这里为ooxx.jsale
阅读全文
摘要：思路：1.调用dom.ready时，先判断下dom是否ready了，如果dom已经ready,则直接执行函数，否则，推入readyList数组等待执行。2.判断domready，标准浏览器下，有document.DOMContentLoaded事件表明domready，而IE下，则通过doScroll来模拟，原理是在IE中，任何DOM元素都有一个doScroll方法。当documentElement可以调用doScroll时，证明dom加载完成了。判断domready的原理如上，但在实际应用中，我看到很多代码都是在进行上面的判断前，先判断document.readyState==='c
阅读全文
摘要：有时候，加载一些广告的时候，我们用setTimeout实现异步，好让广告不会阻塞我们页面的渲染。为什么setTimeout能够实现异步呢？看一段糟糕的代码：setTimeout(function() { while (true) { }}, 100);setTimeout(function() { alert('你好!');}, 200);setTimeout是异步，那么，不管前面的代码怎么样，他条件满足了就会执行，但上面的代码，由于任务队列里有一个死循环，而后面的弹出代码在队列的后面，循环不息，所以后面的永远不会被执行到。理解setTimeout,我个人认为就是理解浏览器的.
阅读全文
摘要：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb23
阅读全文
摘要：这是《锋利的JQ》里第五章的第三个实例，直接看效果：<!doctype html><html><head><title>复选框全选反选</title><script>window.onload = function(){ var checkedAll = document.getElementById("checkedAll"); var inputs = document.getElementsByTagName("input"); var send = document.getE
阅读全文
摘要：这是《锋利的JQ》里第五章的第二个实例，主要知识点是涉及到动画，动画在前面的博文里已有提到，所以这一个实例就放代码，不解释，详情请移步：《锋利的JS》之 轮播效果和动画。结构代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><
阅读全文
摘要：这是《锋利的JQ》里第5章的第一个实例，也算是最简单的实例吧，看效果：<!doctype html><html><head><title>文本框得到失去焦点</title><script>window.onload = function(){ var reg = document.getElementById("regForm"); var inputs = []; for(var i = 0; i < reg.elements.length; i++){ if(reg.elements[i].t
阅读全文
摘要：这个实例花了我很多时间，主要是在寻找移动动画上，同时也通过这个实例，学习到了很多。先看实例运行的效果：通过单击左右按钮，展示图片分别向左向右切换。下面是结构代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>&
阅读全文
摘要：昨天写《锋利的JQ》里的动画案例卡住了，切换都成功了，但没有动画效果，按自己以前学的动画知识，在那里连接不上。不得已继续搜寻资料学习动画。看了一个“CJ”的javascript视频教程，觉得里面讲的动画挺不错的。有必要记录下。首先，我们知道，最常见的动画莫过于移动，一般都是通过修改node.style['left' | 'top']这样实现。那么，我们可以构建这么一个小例子，如结构：<style type="text/css"> #test{ width:100px; height:100px; background:red; p
阅读全文
摘要：这是《锋利的JQ》第三章里的案例，主要实现的功能就是当鼠标划过链接时，用特定的提示代替a标签默认的title提示。效果如图所示：结构如下 ：<style type="text/css"> body{ margin:0; padding:40px; background:#fff; font:80% Arial; color:#555; line-height:180%;} p{ clear:both; margin:0; padding:.5em 0;} #tooltip{position:absolute; border:1px solid #333; bac
阅读全文
摘要：这是〈锋利的JQ〉里的第二章实例，首先，看效果：如图：默认状态：隐藏单击按钮显示更多。很简单的效果，先看结构：<style type="text/css"> *{ margin:0; padding:0;} body{ font-size:12px; text-align:center;} a{ color:#04d; text-decoration:none;} a:hover{ color:#f50; text-decoration:underline;} .SubCategoryBox{ width:600px; margin:0 auto; text-a
阅读全文
摘要：学了一段时间的JS了，理论知识自我感觉就差实践了，但网上的效果如此之多，也不知从哪里开始，干脆就看《锋利的JQ》，在学JQ的过程中，再把相关实例用JS重写一遍，这样，既学了JQ，又学了JS，一举两得，何乐而不为哈哈哈。自己想想都兴奋。开篇以标记之，愿自己坚持写下去，阿门，上帝保佑。
阅读全文
浙公网安备 33010602011771号