手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表分类:Javascript

Help Test jQuery 1.3 Beta 1

Submitted by gouki on 2008, December 23, 8:09 PM

The jQuery team has been working hard on the new release of the jQuery library and it’s ready for some in-depth testing! jQuery 1.3 is not ready for production use yet but we need help to weed out any bugs that might’ve snuck through.

看上去jQuery团队们都很辛苦，所以，小白鼠们，你们也辛苦一点，把BUG测试的多一点，我们在以后的项目中才敢正常的应用啊。

自己也是用jQuery的，应该也会测试一些，特别是针对这次更新的功能：

  • Selector Engine - The selector code has undergone a complete rewrite - it’s likely that some edge cases still exist here.
  • DOM Manipulation (append/prepend/before/after) - This code has also undergone a large rewrite along with some of the logic for executing inline script elements.
  • .offset() - Another method that has been completely rewritten.
  • Event Namespaces - The logic for handling namespaced events has been completely rewritten.
  • Event Triggering - When triggering an event the event now bubbles up the DOM - this is likely to cause some problems.

选择器改写，DOM控制器又是大的改写，.offset改写,事件命名空间改写，不知道改写后效率会怎么样，当然，估计改写也应该是冲着效率而去的，否则改写的意义也不是特别大了。

事件触发，针对DOM的事件触发？估计问题也会挺多，他们也是这么认为的。DOM太难控制了，毕竟不是每个页面都是按照规范来写的。

如果你写了一些代码，并认为它触发了这些BUG，你可以提交到：http://dev.jquery.com/ ，当然提交的代码尽量是简短一些，提交的时候也需要将你的mail写上，这样，jQuery Team可能在修改后会通知你的哦。

Tags: javascript, jquery, beta, new release

Javascript | 评论:0 | 阅读:18767

来自jljlpch的jQuery详解

Submitted by gouki on 2008, December 22, 10:44 PM

能够用厚厚的PDF来解释jQuery的人不多，但确实是有一个。看到这篇文章也是一个意外，是从订阅的某个人的博客里找到的。他看到这篇文章也很意外，于是乎，我也就很意外的转载了一下。
原文地址：http://jljlpch.javaeye.com/blog/234218
作者：jljlpch
原文中的PDF下载地址：

我会做个镜象的。。。
原文如下：

jQuery是一个非常优秀的JS库，与Prototype,YUI,Mootools等众多的Js类库相比，它剑走偏锋，从web开发的实用角度 出发，抛除了其它Lib中一些中看但不实用的东西，为开发者提供了优美短小而精悍的类库。其使用简单，文档丰富，而且性能高效，能极大地提高web系统的 开发效率。因此可以说是web应用开发中最佳的Js辅助类库之一。大部分开发者正在抛弃Prototype，而选择Jquery做为他们进行web开发的 JS库。

如是开发人员仅仅只知道文档中的简单的使用方法，却不明白Jquery的运行原理和内部机制，在使用jquery时，肯定会碰到许多的问题。这些问 题有一部分是Jquery的Bug。大部分是自身的使用不当而造成的。而文档的简单的使用说明很难解决问题。在调试基于jQuery的web应用时，很多 时候都要跟踪进入jQuery对象分析其运行状态以了解出错的原因。

如果对于web的应用的页面运行性能和效率有所要求的话，那么我们更应该去明白其运行机理和核心源码。但是jQuery源码不像其它的类库那样，它 有点晦涩，难懂。这就是本源码分析的原因，让所有使用jQuery的读者，能快速上手jQuery的源码，并在开发中得心应用。

Jquery的网络资源丰富，但Baidu了很久，很难找到那种完全深入地分析Jquery源码的文稿。倒是Jquery的开发者，John Resi的《Pro Javascript Techniques》涉及到Jquery的源码的分析，但是其主指还是在于JavaScript的使用。那本书并不能使我们完全细致地了解Jquery 的源码。

 

写个这个源码分析的理由其实很简单，在工作中使用jquery经常出问题，不得不分析其源码，我把分析的源码放在blog。其标题是jquery core 源码分析。结果有一网友竟评论说打到标题党，可见还是有很多人像我这样想完全了解jquery的core代码。

 

从自己能看懂，到自己写出来。发现自己有一个质的提高。但是由于水平有限，分析过程的难免有错误。请大家多多指教。不过嘴下能留情就最好了。有什么问题可以到blog:jljlpch.javaeye.com去访问和评论。附件附有打包的源码。

 

 

 

分析源码，最难的地方不是你能理解，你能分析得出来。如果把所有的分析都写在源文件中，我想很多人看不了多少行就会中止的。很难有人有兴趣对得源码一行行地去分析。何把源码有机地组合起来，串成一条线是本教程的最为头疼的地方。

 
读书的最高境界是厚积薄发。分析源码也是一样。对于4，5千行的jquery源码，我们如何做到心中有数，知道什么功能在什么函数里内 呢？ 什么函数用在什么地方呢？这样就得把所有的函数有机分类地重组起来，想着Jquery的主要目的和自己对于js方面的理解。我把整个Jquery薄发成三 个单词 query-->manipulate-->expand。

 

jquery一个很紧缩的lib，它的主要目的就是对dom元素进行操作。那么dom元素的从哪里？
到dom树中去找。这就是 query。$()，Jquery的构建就是一个query的过程。我们可以把这个query范围放大一点，它不光是从dom中查找的CSS selector，还有可能是从html的片断中去寻找的dom元素生成，更进一步就是直接的dom元素（集）。$()的构建就是从这里出发的。
query到元素集，这个query的过程还没有最终完成。因为这些结果集不一定满足我们的要求，那么就要筛选，要过滤。要进行数组方面的相关的操作。这就涉及到jquery对象的类数组的特征。我们就可以把这些类数组的相关的函数放在一起来分析。

当最终的需求的集合形成，我们要的完成我们真正要做的，对集合中的dom元素进行操作。
怎么操作？操作什么呢？不就是对dom元素的attribute,class, style,css，event等进行操作吗？
细化一下：
1、我们可以把attribute,class,style都看作是是属性的操作，还有expando的自定义的属性。这就涉及到jquery.data。
2、对dom元素的内容。什么是内容。innerHtml是。all childNodes也是,value也可以算。对于内容的操作就有追加，插入，前插，后插，内部前插和内部后插。那当然不能少了clone,remove这些操作。
3、 CSS是可以在dom元素中单独出来分成一块来做分析的。对于css的操作，不就是 height,width,innerHeight,innerWidth,out(height,widith)的操作，还有元素的位置 （position,offset),display or not。这就是对于CSS的操作。
4、Event也是元素的操作中的一部分。这一部分除了addEvent,fireEvent,removeEvent,和domready就没有别的啦。
5、Ajax是给元素从服务器中找内容填充的。真正用到最多不还是load吗，对于getScript,getJson之类全都是在jQuery.ajax的函数的基础而出来。
6、 Fx可以看做是CSS的操作。但是其又高于CSS。对于FX,最基本不就show,hide,slide(down,up),fade(in,out)这 几种用法。无论什么用法，都基于时间的长短映射到元素CSS的属性值的对对应比率的大小。采用setInterval间隔来运行就形成了动画。这就 animate()函数。所有效果的发源地。

想想整个jquery就是这么简单。当然如果没有去身体力行去自己分析，无论什么教程都是没有用的。

其实query-->manipulate是表层的东西。还有一个高层的就是expand。这涉及到一个lib的架构与设计。

这部分我们可以从源码的角度去解读对于js lib的架构。
除了扩展性（extend)之后，一个lib肯定是要花大力气去考虑它的性能。
考虑它的内存使用。
这是站在设计Jquery的角度去分析。

想了很久，但是这一部分还没有写入目前的源码分析中。

 

镜象PDF下载：jquery1.2.6源码分析.rar

Tags: jquery, javaeye, 详解

Javascript | 评论:0 | 阅读:19273

jQuery插件---获取URL参数

Submitted by gouki on 2008, December 18, 6:44 PM

平时我们取得location的search的时候，往往都是要用location.search，然后根据取回的结果集再处理

1、先判断第一位是否是“?”，如果是则从?开始往后面处理

2、写程序以&开始分隔，当然得先用unescape，或者用那个urldecode（具体的名字不记得了）处理一下，把&之类的处理一下

3、以=分隔，这样才能可以取得一一对应的值。

现在方便了。jQuery有这样的插件了。。。。

原文来自：http://www.cssrain.cn/article.asp?id=1204

内容如下：

例如 当前你的URL是：
http://www.cssrain.cn/index.php?test=1&kk=2

如果想获取test，则可以引入插件后，
用如下方法获取：
var test = $.query.get('test');

如果参数有多个相同的名称 ，则可以这样：
var arr = $.query.get('testy');
输出：  [ 值1 ,  值2,  值3...]

如果要获取多个相同名称中的某一个，可以这样：
var arrayElement = $.query.get('testy[1]');

此插件不仅能获取参数，也能设置参数。

设置一个参数：
var newUrl = $.query.set("section", 5).toString();
输出  ： "?section=5"

设置两个参数：
var newUrl = $.query.set("section", 5).set("action", "do").toString();
输出 :  "?action=do&section=5"


删除一个参数：
var oldQueryAgain = $.query.REMOVE("type");

清空所有参数：
var emptyQuery = $.query.empty();

复制所有参数：
var stillTheSame = $.query.copy();


插件地址：
http://plugins.jquery.com/project/query-object

Tags: javascript, jquery, search, location, get

Javascript | 评论:1 | 阅读:47250

通过JS更改FORM的action

Submitted by gouki on 2008, December 18, 1:34 PM

有时候我们不得不通过更改form的action来进行提交数据。当然大多数情况下，我们都是通过隐藏的字段来使action得到不同的数据。比如我们form的action是search.php，那么我们都是通过隐藏字段来使我们通过search.php搜索不同值，比如<input type="hidden" name="action" value="article">然后在search.php里面通过$_POST['action']=='article'来知道我们搜索的内容是文章而不是其他。

但如果我们搜索页面并非只有一个入口search.php怎么办？比如我们的全文搜索是search.php，搜索文章是search_article.php，搜索新闻是search_news.php。怎么办？当然我们可以通过下拉框的值来更改FORM的action，就可以了。

简单代码如下，

XML/HTML代码
  1. <script type="text/javascript">  
  2. <!--  
  3.     function redirectForm( which ){  
  4.         var searchModeList = document.getElementById('searchMode');  
  5.         var actionFile = '';  
  6.         for (var i=0,sml=searchModeList.length; i<sml ; i++ ){  
  7.             if( i == searchModeList.selectedIndex ){  
  8.                 actionFile = searchModeList[i].value;  
  9.             }  
  10.         }  
  11.         if( actionFile == ''){  
  12.             return false;  
  13.         }else{  
  14.             actionFileactionFile = actionFile + '.php';  
  15.         }  
  16.         which.action = actionFile;  
  17.         which.submit();  
  18.     }  
  19. //-->  
  20. </script>  
  21. <form method="post" action="" onsubmit="return redirectForm(this);" id='searchForm'>  
  22.     <select id="searchMode">  
  23.         <option value="search" selected="selected">Default</option>  
  24.         <option value="search_article" >Article</option>  
  25.         <option value="search_news">News</option>  
  26.     </select>  
  27.     <input type="submit" />  
  28. </form>  

Tags: javascript, form, action

Javascript | 评论:1 | 阅读:36517

Javascript堵塞问题的解决[转]

Submitted by gouki on 2008, December 8, 5:10 PM

本文来自：Thinking in LAMP - 老王的技术手册，网址是在baidu上面的，文章URL是：http://hi.baidu.com/thinkinginlamp/blog/item/1ebc2e730600891b8601b049.html

原文内容如下：（为了方便，我将图片COPY过来了，而并非是引用，不好意思老王）

所谓“Javascript堵塞问题”，指的是浏览器在下载javascript文件的时候，会堵塞其他下载进程，并且多个javascript文件之 间，只能一个一个下载，不能并行下载。浏览器之所以要这么干，一来是因为javascript里可能会有一些涉及页面渲染的操作，比如 document.write，所以要先把他们加载完，以免影响用户体验，二来是如果并发下载javascript文件，代码执行的先后顺序会错乱，从而 引起逻辑错误。为了规避上述弊端，YSlow建议如果有多个javascript文件，并且这些文件里没有类似document.write等页面渲染的 操作，那么应该尽可能把他们合并成一个文件，并放到页面的尾部。不过很多时候，合并javascript文件是个浩大的工程，不仅破坏了模块化结构，而且 还可能会给代码维护带来不必要的麻烦，今天说说另一个方法，以期避免对现有代码的大规模修改。

先做两个javascript文件，他们是a.php，b.php，之所以用php文件是因为我只会这个，内容如下：

PHP代码
  1. <?php sleep(1); ?>  

 

可以看到a.php和b.php的内容是一样的，其中之所以sleep一秒钟，是为了让演示的效果更明显。

现在让我们来做一个页面（x.htm），看看javascript堵塞问题是如何产生的：

XML/HTML代码
  1. <html>  
  2. <head>  
  3. <title>DEMO</title>  
  4. <script type="text/javascript" src="a.php"></script>  
  5. <script type="text/javascript" src="b.php"></script>  
  6. </head>  
  7. <body>  
  8. <img src="http://www.google.com/intl/en_ALL/images/logo.gif">  
  9. </body>  
  10. </html>  

浏览这个页面的时候，通过Pagetest软件，我们可以看到类似下面的结果：

大小: 3.2 K 尺寸: 500 x 69 浏览: 2432 次 点击打开新窗口浏览全图

我们可以看到，logo.gif图片的下载进程被堵塞了，并且a.php和b.php是分别下载的。

下面让我们再来做一个页面（y.htm），看看是怎么解决这个问题的：
XML/HTML代码
  1. <html>  
  2. <head>  
  3. <title>DEMO</title>  
  4. <script>  
  5. var load = function(file) {  
  6.     var scriptElement = document.createElement("script");  
  7.     scriptElement.src = file;  
  8.     document.getElementsByTagName("head")[0].appendChild(scriptElement);  
  9. }  
  10. load('a.php');  
  11. load('b.php');  
  12. </script>  
  13. </head>  
  14. <body>  
  15. <img src="http://www.google.com/intl/en_ALL/images/logo.gif">  
  16. </body>  
  17. </html>  
浏览这个页面的时候，通过Pagetest软件，我们可以看到类似下面的结果：
大小: 3.23 K 尺寸: 500 x 69 浏览: 2337 次 点击打开新窗口浏览全图
结论显而易见，logo.gif图片的下载进程并没有被堵塞，并且a.php和b.php是并行下载的。

参考资料：http://stevesouders.com/docs/web20expo-20080425.ppt

膘叔：虽然从我个人而言，我会考虑将js换到其他的域名下面，以防止堵塞（所谓的YAHOO设计网页14条军规中的），然后通过一个程序minify来进行引用。关于minify我会单独介绍。（其实也是COPY别人的文章而来，最近是很懒了。一是要考试，二是单位太忙，只能做到天天更新，但无法原创了）

 

Tags: javascript, load, block

Javascript | 评论:0 | 阅读:21517

Records:305«‹48495051525354555657›»