随笔分类 -  JavaScript

摘要：上次做了jQuery1.5.1 DOM相关的函数性能测试，有童鞋指出我的计算方法不太合理，这里换了计时方式。承接上一篇日志，这次要做的是jQuery1.6与1.5.2的属性值相关性能测试，1.6版本重写了绝大部分属性值函数，效果如何，慢慢道来。首先是这次的计时函数。如下所示:$(function(){ var t1=new Date(); var t2=new Date(); var sum=0; var $input=$("#test"); while(t2-t1<500){ for(var i=0;i<500;i++){ value=$input.val() 阅读全文

摘要：申明：本文没多少技术含量，高手请绕道1.6发布那天有事在身，没有及时Down下来读代码。今天用文件差分比较器看了看1.6和1.5.2的差别。整体上看，1.6修改了约8%的代码，主要有以下这些：1.（559行）修正了JSON解析BUG，改变了JSON解析方式。1.5.2是调用Window.execScript执行脚本，1.6里改成了类似JSONP的方式，把代码直接当脚本插入文档了。2.（1188行）重写了浏览器兼容性检测代码。旧版里通过动态创建一批元素，再反向检测他们的值来判断浏览器特性。这些代码在1.6中差不多都被干掉了。取而代之的是更精细的特性检测。还重写了关于脚本解析的兼容性测试。3.（1 阅读全文

摘要：这是一篇总结性质的日志。目的是使用原生js得到页面的总宽度，高度，左上角坐标，鼠标落点的绝对和相对坐标。需要兼容的浏览器有IE6，IE8，FF4，Chrome 10，Safari 5，Opera 11。解释一下为什么不测试Chrome，Safari这些浏览器更早的版本。一是因为他们历代版本在这方面改动不大，基本向后兼容。二是，这些浏览器在中国占有率和使用率都太低了。下面是总结：目的：得到页面总宽度document.body.scrollWidth：全部正确document.documentElement.scrollWidth：全部正确document.body.clientWidth：全部正 阅读全文

摘要：上一篇日志写的日历控件，后来想想还不如直接用三个select方便，而且也不漂亮。根据“最少点击”原则，后来又折腾了一段时间，做了个新的日历控件。它看上去是这样的：点击日期，弹出选择栏，带半透明效果，滑过变色效果。下面的确认，取消按钮是直接做在背景图上的，没有任何按钮效果（因为点两个的效果都是关闭这个控件，没必要做效果）背景图是这样的由于透明色简单，所以打算做成png格式，无奈IE6下错误地透明了近似颜色，导致背景图残破，只好换成gif。HTML代码，依然是典型的div+iframe格式，用三个li显示日期，另外11个li显示弹出的数字选择。两个span做确认和取消按钮。<div clas 阅读全文

摘要：项目需要一个js日期控件，现在找的js控件大小57kb，使用灵活但显得太臃肿。因此昨天花两个小时写了个小巧美观的日期控件，它看起来是这样的：外观有点山寨手机上的日期选择器，而且确定按钮设计的偏小，不过这都可以再改。考虑到日期控件将作为一个浮动层出现在任何地方，因此在IE6下有可能遇到select无法遮挡的BUG，所以采用标准的div+iframe结构。8个按钮用了8个LI元素。HTML代码如下：<div class="colordate"> <iframe frameborder="0"></iframe> <u 阅读全文

摘要：网上类似的jQuery和非jQuery表格控件都非常多了，由于项目需要，我没有时间去找一个合适且小巧的表格控件，于是自己写了一个。这个表格控件要实现如下的目标：1.列宽可以控制2.有鼠标滑过和选中高亮效果3.标题列支持添加排序回调函数4.事件绑定要少，因为表格数据是ajax动态加载的5.支持多选首先用HTML写一个表格框架，这里表扬一下特别好用的Zen Coding插件，写table.colortable>thead>tr>th*4就可以生成所需的结构<table class="colortable"> <thead> <tr 阅读全文

摘要：首先我承认，WebService技术早就不是新鲜玩意了，下面只是对整个过程的代码总结。前台选择jQuery发送ajax请求，代码如下：1 $.ajax({ type: "post", url: "Service.asmx/HelloWorld",2 contentType: "application/json;charset=utf-8",3 dataType: "json",4 success: function (msg) {5 alert(msg.d);6 } 7 });参数中，type必须是post类型，c 阅读全文

摘要：大家都知道jQuery（JQ）是基于js的代码封装，性能肯定不如原生js好，尤其是DOM操纵部分性能差异明显。今天要研究的就是原生js和jQuery的DOM操作函数在主流浏览器中的性能差异究竟是多少，是否真的差距明显。测试平台：E5400+2G DDR2+Windows 7 SP1 32bit参与测试的浏览器有：FireFox: 3.6.3IE6IE8Chrome: 10.0.648Safari: 5.0.1Opera: 10.01测试方法：对于一次处理一个对象的函数，循环执行3000次，对于批量处理函数，一次处理3000个对象。结果见下图，时间单位是毫秒：结果分析：大部分时候，原生js的确比 阅读全文