[原文发表时间] Thursday, June 10, 2010 10:34 PM

上个月，我写了一篇关于微软如何在向 jQuery贡献代码的文章，也谈到了在第一批贡献的代码中的一些功能：jQuery 模板和数据链接支持.

今天，我们发布了一个新的jQuery国际化插件的原型，你可以在你的JavaScript程序中引用这 个插件添加国际化功能。插件涵盖了超过350种文化的国际化信息，从苏格兰盖尔语、佛里斯兰语、匈牙利语、日语到加拿大英语等。插件将以开源的形式发布。

你可以从我们的Github代码库下载插件的原型版本：

http://github.com/nje/jquery-glob

另外也可以在这里下 载一些示例了解简单的用法。

理解国际化

jQuery国际化插件可以让你在 JavaScript代码中轻松地处理不同文化之间的数字、货币和日期格式。例如，你可以使用这个插件正确地显示一个国家的货币符号：

你也可以用这个插件编排日期格式，这样日期和月份 会以正确的顺序显示，而日期和月份的名称也能够得到正确的翻译：

请注意上图阿拉伯的日期格式中，年份显示成了 1431。这是因为年份已经按照回历的方式转换过了。

一些文化差异比较明显，例如使用不同的货币或者不同的月份名称等。但另外一些差异 却细微而又出人意料。例如，在有一些文化里，数字不是以均衡的方式分组的。在语言标记为“te-IN”的文化中（印度东部的泰卢固语），数字先按3位数字 分组，然后再每2位数字分组。因此象数字一百万（1000000）就会被写成“10,00,000”。而有些文化就根本不对数字进行分组。所有这些细微的 差异都能够被jQuery国际化插件自动处理。

要得到正确的日期可能非常需要技巧。不同的文化采用不同的历法，比如公历和回历。同一种 文化也可能会采用多个历法，比如日本就同时采用公历和以天皇年号推算的纪年历。插件提供了函数将日期在所有这些历法中相互转换。

使 用语言标记

jQuery国际化插件依据RFC 4646和RFC 5646标准里定义的语言标记来识别文化（参见 http://tools.ietf.org/html/rfc5646）， 语言标记通常由连字符将多个辅标签组合而成，比如：

请注意单一语言例如英语可以同时有多个语言标记。同是英语国家，加拿大采用的数字、货币和日期格式就不同于澳大利亚或者美国。你可以使用下面 的语言辅标签查找工具来获取某个文化的语言标记：

http://rishida.net/utils/subtags/

jQuery国际化插件里一个叫做globinfo的文件夹包含了这350种文化的信息。实际上，这个文件夹里有700多个文 件，因为它包括了每个文件的最小化（minify）和原始版本。

比如说，在globinfo文件夹，文件 jQuery.glob.en-AU.js对应英文（澳大利亚），jQuery.glob.id.js对应印度尼西亚文，而 jQuery.glob.zh-CHS对应简体中文。

示例：指定某种文化

假如你要创建 一个德文的网站，并且希望在客户端的JavaScript脚本里使用德语习惯显示所有的日期、货币符号和数字。那页面的源代码也许与下面的HTML类似：

注意上面的span标签，它们标识了所有需要用国 际化插件进行格式化的区域：商品的价格、上架的日期以及库存量。

要在网页里使用jQuery国际化插件，需要添加三个 JavaScript文件：jQuery库，jQuery国际化插件和指定的文化习惯信息：

在上例中，我将包含了德语文化习惯的 jQuery.glob.de-DE.js文件静态地加入到网页中，”de-DE”是语言标记，表示在德国使用的德语。

既然已经引入了 必要的脚本文件，就可以使用下面的客户端JavaScript代码调用插件来显示价格、上架的日期以及库存量等值：

jQuery国际化插件为jQuery函数库添加 了一些新的函数—包括preferCulture()和format()等新函数。你可以通过preferCulture()函数设置插件其他函数调用时 使用的默认文化。preferCulture()函数接受一个语言标记作为参数，这个函数会使用最接近这个语言标记的文化。

$.format() 函数才是真正用来编排货币、日期和数字格式的。$.format()函数的第二个参数是格式分类符。例如，传入“c”表示按货币的样式编排参数值。在 githum的ReadMe文件里详细描述了所有格式分类符代表的意思：http://github.com/nje/jquery-glob

当我们在浏览器打开这个页面的时候，所有的东西都是按照德语习惯正确显示。货币符号采用的是欧元符号，日期采用德语的日期和月份名称，并且，数 字分隔符用的是点号（.），而不是逗号（,）。

你可以通过运行示例下 载中的3_GermanSite.htm文件来了解上述方法。

示例：用户动态选择一个区域设置

在前面的例子中，我们显式指定使用德语文化习惯（通过引用jQuery.glob.de-DE.js文件）。我们现在来看看动态设置文化习惯的 几个例子。

比如说我们打算在页面上加一个包含所有350种文化的下拉框，当用户在下拉框里选择了一个文化，页面上所有的日期都按照这个 文化的习惯显示。

这是网页的HTML源代码：

请留意所有包含了日期的<span> 标签都有一个data-date属性（data-*属性是HTML 5里的新功能，同时在老的浏览器上也可以使用）。当用户在下拉框里选择了一个文化信息后，我们的代码将会格式化data-date属性里保存的日期。

为了显示所有可能的文化信息，我们要象下面这样添加一个叫jQuery.glob.all.js 的文件。

jQuery国际化插件里有一 个叫做jQuery.glob.all.js的文件，这个文件包含了所有插件支持的350多种文化的国际化信息。即使经过最 小化处理，还是有367k字节。由于文件很大，除非你的确需要一次性使用所有这些文化信息，我们建议你只添加所使用到的文化信息对应的 JavaScript文件。下一个例子中，我会演示如何在网页中动态地加载某个语言对应的JavaScript文件。

下一步，把所有支持的文化名称添加到下拉框的列表里。可以用$.cultures这个属性获取它们：

最后，再写几行代码把每个span标签里的 data-date属性的日期都抓出来并编排格式：

jQuery国际化插件里面的 parseDate()函数将一个字符串的日期转换成JavaScript日期，而format()函数则用来编排这些日期的格式。“D”这个格式分类符 说明使用长日期格式编排日期。

现在，只要页面浏览者选择这350种语言其中之一，内容都会被正确的国际化。你可以通过运行示例下 载中的4_SelectCulture.htm文件来了解上述方法。

示例：动态加载国际化文件

在上一节说过,你应该尽量避免在页面中引用jQuery.glob.all.js文件, 因为它实在是太大了。相反，你可以动态地加载你所需要的国际化信息。

比如说，你要创建一个下拉列表显示下面这些语言：

下面的代码会在用户从下拉框中选择一个新的语言后 执行。这段代码会先判断选中的语言对应的国际化脚本文件是否已经加载了。如果还没有加载，则使用jQuery的$.getScript()函数动态加载国 际化脚本文件。

当国际化脚本文件被浏览器加载以后，就会调用 globalizePage()函数，继而执行客户端的代码完成国际化。

这个方法的优点是可以让你避免加载整个 jQuery.glob.all.js文件—只要加载使用到的文件，而且只加载一次。

示例下 载中的5_Dynamic.htm文件演示了这个方法。

示例：自动检测用户的常用语言设置

大多数网站通过检测用户的浏览器设置来得到其常用语言，然后根据这种语言文化习惯来国际化网站内容。用户可以在浏览器中设置一个常用语言。这 样，用户在请求页面时，常用语言设置会包含在请求Http消息头的Accept-Language字段中。

如果使用的是微软的IE浏览 器，可以通过以下步骤设置你常用的语言：

1. 在菜单栏里选择工具，Internet 选项。

2. 选择常规标签。

3. 在外观里点击语言按钮。

4. 点击添加在语言列表里增加新的语言。

5. 然后把你最常用的语言放在列表的最顶端。

你可以在这个对话框中设置多门常用语言。所设 置语言的顺序关系将会体现在HTTP请求的Accept-Language字段中，如：

Accept-Language：fr- FR,id-ID;q=0.7,en-US;q=0.3

比较奇怪的是，用户不能够通过客户端的JavaScript脚本得到 Accept-Language的内容。微软的IE和Firefox浏览器都支持一系列语言相关的属性，这些属性可以通过 Window.navigator进行访问，例如windows.navigator.browserLanguage和 window.navigator.language，不过这些属性中的语言一般指的是操作系统中设置的语言或者是浏览器的语言版本。你不能通过这些属性 来得到用户设置的常用语言。

得到用户语言偏好（也就是Accept-Language字段中的内容）的唯一可靠方法就是编写服务器代 码。例如，下面的ASP.NET页面就利用了服务器的Request.UserLanguages属性把用户的语言偏好设置赋给了客户端 JavaScript的acceptLanguage变量（然后就可以通过客户端JavaScipt访问这些值了）：

为了使这段代码能够正常工作，页面中必须包含与 acceptLanguage对应的文化信息。例如如果你的常用语言是fr-FR（法语-法国），那就必须在这个页面中引用 jQuery.glob.fr-FR.js或者jQuery.glob.all.js这两个JavaScript脚本之一，否则没办法得到文化信息。关于 这个方法的应用可以示例下 载中的”6_AcceptLanguages.aspx”。

如果对于页面中用户的常用语言没有对应的脚本包含其文化信息，那 么$.preferCulture()方法就会引用中立（neutral）的文化信息（例如，使用jQuery.glob.fr.js，而不是 jQuery.glob.fr-FR.js）。如果中立文化信息也不可用，那么$.preferCulture()方法就会回滚到使用默认文化（英语）。

示例：利用国际化插件使JQuery UI DatePicker实现国际化

国际化插件的目的之一就是使开发能适应各种不同文化的jQuery小工具的变得更为简单。

我们希望确保jQuery的国际化 插件能够与现有的jQuery的UI插件如DatePicker共存并正常工作。为了实现这个目标，我们创建了DatePicker插件的一个整合版本， 使它可以在渲染日历的时候利用我们的插件来提供国际化支持。下图演示了把jQuery的国际化插件和整合后的DatePicker插件一起加入到页面并选 择印度尼西亚语的效果。

注意：一周中每一天的名称都以印度尼西亚语的缩写 形式显示。 此外，月份的名字也以印度尼西亚语显示。

你可以从我们的github网站下载整合版的JQuery UI DatePicker。你也可以使用示例下 载中文件7_DatePicker.htm所使用的版本。

• 即拷即用：onDOMReady（提取自jQuery.ready）
• jQuery源码查看器
• [译]jQuery 1.4 发布：15个新特性实例精讲
• Jquery1.4正式版发布了 JS库时代就是这样快
• YUI3设计中的激进和妥协

先说明一下，为什么要提取jQuery的ready方法？

因为在很多时候大家做前端时，需要在DOM树载入时马上执行一些函数，比如对导航条进行初始化。
但又不愿意仅为了这一个需求而引入整个jQuery库，于是就把jQuery的ready方法提取出来，单独使用了。

另外你也可以在构建自己的js框架时使用此函数。

重复一遍，我们的口号是什么？
彪悍的应用，没有一行代码是多余的！！！

(function(){
        var isReady=false; //判断onDOMReady方法是否已经被执行过
        var readyList= [];//把需要执行的方法先暂存在这个数组里
        var timer;//定时器句柄
        ready=function(fn) {
                if (isReady )
                        fn.call( document);
                else
                        readyList.push( function() { return fn.call(this);});
                return this;
        }
        var onDOMReady=function(){
                for(var i=0;i<readyList.length;i++){
                        readyList[i].apply(document);
                }
                readyList = null;
        }
        var bindReady = function(evt){
                if(isReady) return;
                isReady=true;
                onDOMReady.call(window);
                if(document.removeEventListener){
                        document.removeEventListener("DOMContentLoaded", bindReady, false);
                }else if(document.attachEvent){
                        document.detachEvent("onreadystatechange", bindReady);
                        if(window == window.top){
                                clearInterval(timer);
                                timer = null;
                        }
                }
        };
        if(document.addEventListener){
                document.addEventListener("DOMContentLoaded", bindReady, false);
        }else if(document.attachEvent){
                document.attachEvent("onreadystatechange", function(){
                        if((/loaded|complete/).test(document.readyState))
                                bindReady();
                });
                if(window == window.top){
                        timer = setInterval(function(){
                                try{
                                        isReady||document.documentElement.doScroll('left');//在IE下用能否执行doScroll判断dom是否加载完毕
                                }catch(e){
                                        return;
                                }
                                bindReady();
                        },5);
                }
        }
})();

使用方式如下

ready(navInit);//navInit为已存在的函数
//或
ready(function(){
        if(agt.toLowerCase().indexOf("msie 6") != -1)
                navInitForIE6();//如果浏览器是IE6，则执行navInitForIE6函数来初始化下拉菜单
});

再次感谢abeet的分享

您可能还关注的？

• 微软的jQuery国际化插件
• jQuery源码查看器
• [译]jQuery 1.4 发布：15个新特性实例精讲
• Jquery1.4正式版发布了 JS库时代就是这样快
• YUI3设计中的激进和妥协

还不错，可以按版本查看 jquery每个方法的实现

如果能有用原生js来模仿jquery每个方法的站点就好了 哈哈：） 好贪啊

您可能还关注的？

• 微软的jQuery国际化插件
• 即拷即用：onDOMReady（提取自jQuery.ready）
• [译]jQuery 1.4 发布：15个新特性实例精讲
• Jquery1.4正式版发布了 JS库时代就是这样快
• YUI3设计中的激进和妥协

你可以立刻下载jQuery 1.4试用： http://code.jquery.com/jquery-1.4.js

下面带你进入Jquery1.4新特性实例精讲

1. 传参给 jQuery(…)

之前，jQuery可以通过 attr 方法设置元素的属性，既可传属性的名和值，也可以是包含几组特定 属性名值对 的 对象。在 jQuery 1.4 中，你可以把一个参数对象作为第二个参数传给 jQuery 函数本身，同时创建HTML元素。

比方说你想要创建一个带有几个属性的锚记元素（<a></a>）。在1.4中，一切如此简单：

jQuery('<a/>', {
    id: 'foo',
    href: 'http://google.com',
    title: 'Become a Googler',
    rel: 'external',
    text: 'Go to Google!'
});

你大概也能猜到，这个锚记元素没有的 text 属性会调用 jQuery 的私有方法 .text() ，把元素里的文字设置为“Go to Google!”

针对这一用法，下面是更有用的实例：

jQuery('<div/>', {
    id: 'foo',
    css: {
        fontWeight: 700,
        color: 'green'
    },
    click: function(){
        alert('Foo has been clicked!');
    }
});

id 为一般属性，被直接加上了，而 css 和 click 则激发了相应的 jQuery 方法。在1.4以前，上面的代码需写成这个样子：

jQuery('<div/>')
    .attr('id', 'foo')
    .css({
        fontWeight: 700,
        color: 'green'
    })
    .click(function(){
        alert('Foo has been clicked!');
    });

详细了解 jQuery(…)

2. 直到遇见你…

1.4的DOM遍历工具包里又增加了3个新方法： nextUntil，   prevUntil  和  parentsUntil 。这些方法会按照特定的方向遍历DOM，直到遇到满足指定选择符的元素为止。举例来说，现在我们有一张水果名的清单：

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Grape</li>
    <li>Strawberry</li>
    <li>Pear</li>
    <li>Peach</li>
</ul>

我们想挑选出所有在 Apple 后，Pear 前的所有条目。代码十分简单：

jQuery('ul li:contains(Apple)').nextUntil(':contains(Pear)');
// 选出的是 Banana, Grape, Strawberry

详细了解： prevUntil, nextUntil, parentsUntil

3. 绑定多个事件处理器

不再需要把各个事件绑定方法“链”在一起，现在你可以把它们捆成一堆，如下：

jQuery('#foo).bind({
    click: function() {
        // do something
    },
    mouseover: function() {
        // do something
    },
    mouseout: function() {
        // do something
    }
})

这一用法也适用于 ” .one() “.

详细了解 .bind(…)

4. 依属性指定缓动效果

以前只能为一个动画指定一种缓动效果（easing，即动画过程中的速度变化规律。jQuery 原生支持两种缓动效果，swing（默认）和linear 。要使用其他效果，你需要自己另行下载。），现在你可以为动画的各个属性参数指定不同的缓动效果：

jQuery('#foo').animate({
    left: 500,
    top: [500, 'easeOutBounce']
}, 2000);

点此查看实际效果

你也可以在一个可选的动画选项对象中为 secialEasing 设置一系列名值对来完全上面的工作：

jQuery('#foo').animate({
    left: 500,
    top: 500
}, {
    duration: 2000,
    specialEasing: {
        top: 'easeOutBounce'
    }
});

编辑注：我们的作者 James Padolsey 谦虚了，这一功能点是他想出来的哦！

详细了解有关 per-property-easing 的内容

5. 更新的 Live 事件！

jQuery 1.4 添加了对指派 submit ， change ， focus 和 blur 事件的支持。在jQuery中，我们利用” .live() ” 方法指派事件。当你想要为多个元素注册事件处理器时，这会非常有用。而且就算满足选择符的元素是新出现的，这些事件也会继续有效（使用  .live()  比不断重复绑定要省力省心得多）。

不过，当心了！ 注册 focus 和 blur 事件时你需要用 focusin 和 focusout 作为事件名。

jQuery('input').live('focusin', function(){
    // do something with this
});

6. 控制函数上下文

jQuery 1.4 提供了一个全新的  proxy  函数，位于 jQuery 命名空间下。这一函数接受两个参数，一个是“作用域”（scope）或者一个方法名，另一个是某函数或者目标作用域（the intended scope）。

众所周知， JavaScript的 this 关键字是一个很难把握的东西。有时候你并不想它代表一个元素，而想让它代表你前面创建的某个对象。

例如，在这里我们创建了一个  app  对象，它拥有两个属性，一个是  clickHandler  方法，一个是负责参数配置的对象。

var app = {
    config: {
        clickMessage: 'Hi!'
    },
    clickHandler: function() {
        alert(this.config.clickMessage);
    }
};

这个  clickHandler  方法，当像  app.clickHandler()  这样调用时， app  就是其上下文，也就是说  this  关键字指向的是  app  。如果只需简单地调用，这样的写法没什么问题：

app.clickHandler(); // "Hi!" is alerted

不过如果把它当作一个事件处理器：

jQuery('a').bind('click', app.clickHandler);

当我们点击这个锚记时，并没有达到预想的效果（没东西 alert 出来）。这是因为 jQuery （以及大部分理智的事件模型），默认地，都会把处理器的上下文指定为目标元素本身。也就是说， this 所代表正是被点击的这个链接。而我们想的是， this  应该继续代表  app  。在jQuery 1.4中，实现这一目的十分简单：

jQuery('a').bind(
    'click',
    jQuery.proxy(app, 'clickHandler')
);

现在点击所有锚记都会弹出“Hi!”了。

代理函数把你的函数包裹一圈，同时把函数内的  this  设定为你想要东西。在其他上下文应用场景，如把回调函数传给其他 jQuery 方法或插件，代理函数也能派上用场。

了解更多  jQuery.proxy

7.  动画队列延迟

现在，可以给动画队列加一个延迟了。虽然这个功能可以在任何队列里实现，但最常用的可能还是延迟“fx 队列”（”fx” queue，jQuery默认的动画队列）。它能让你在两个动画行为之间暂停一下，而不用牵扯到回调函数和  setTimeout  之类的东西。 .delay()  的第一个参数即你需要设定的延迟毫秒数：

jQuery('#foo')
    .slideDown() // Slide down
    .delay(200) // Do nothing for 200 ms
    .fadeIn(); // Fade in

如果你想延迟一个除 fx 以外的队列，把队列名作为第二个参数传给  .delay() 就可以了 。

详细了解  .delay(…)

8. 检测元素是否含有特定内容

jQuery 1.4 让检测一个元素（或集合）是否含有（ .has() ）某项东西更为容易。其背后的机理和选择过滤器  :has() 是一样的。这个方法会从当前集合中选出满足任意指定条件之一的元素。

jQuery('div').has('ul');

这条语句在所有DIV元素中挑出那些包含UL元素的。这种情况可能用选择过滤器  :has()  就好了，但当你要更程式化地过滤选择集时  .has()  方法就十分有用了。

jQuery 1.4 还在 jQuery 命名空间下新增了一个  contains   函数。这是一个比较底层的函数，接受两个 DOM 节点为参数。返回一个布尔值，指示第二个元素是否包含在第一个元素中。例如：

jQuery.contains(document.documentElement, document.body);
// 返回true - <body> 确实包含在 <html> 中

详细了解： .has(…) , jQuery.contains(…)

9. 给元素剥皮！

很早以前，jQuery 就可以用  .wrap()  给元素裹一层皮。现在， jQuery 1.4 添加了  .unwrap()  方法，用以剥皮。看下面的DOM结构：

<div>
    <p>Foo</p>
</div>

来把 p 元素外面的一层皮（div）剥掉：

jQuery('p').unwrap();

总而言之，这个方法可以把任意元素的父元素移除。.

详细了解  .unwrap(…)

10. 移除元素，而不删除数据

以前有一个 .remove() 方法，是把元素剥离后抛弃。全新的  .detach() 方法可以让你把一个元素从DOM中剥离，而不丢失数据。囊括该元素的 jQuery 对象会在操作完成后还保留这个元素。数据可以通过  .data()   或者 jQuery 事件系统中的任意事件处理器传入 jQuery 对象。

当你需要把某个元素从DOM中移除，然后在将来某个场景中重新引入时，这个函数会很有用。元素的事件句柄和其他所有数据都会被保留。

var foo = jQuery('#foo');
// 绑定一个重要的事件处理器
foo.click(function(){
    alert('Foo!');
});
foo.detach(); // 从DOM中移除
// … do stuff
foo.appendTo('body'); // 重新加入到DOM
foo.click(); // 弹出alert信息： "Foo!"

详细了解  .detach(…)

11. index(…) 的功能增强

jQuery 1.4 为您使用  .index()  提供了两种新方法。以前，你必须把元素作为参数传给它，然后获得一个返回的数值，代表在当前集合中这个元素的索引。现在，如果不传参数过去，返回的值就代表某元素在其同辈中排行老几。比方说下面的DOM：

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Grape</li>
    <li>Strawberry</li>
    <li>Pear</li>
    <li>Peach</li>
</ul>

你想要晓得点击一个条目后它是列表中的第几个，实现的代码十分简单：

jQuery('li').click(function(){
    alert( jQuery(this).index() );
});

jQuery 1.4 也允许你将选择符作为  .index()  的第一个参数。这样做会返回当前元素在你指定的选择符所匹配出的元素集合中的索引值。

还得提醒一点，这一方法返回的是数值，如果文档中无法找到指定条件的元素，会返回数值 -1 。

详细了解  .index(…)

12. DOM 操纵可接收回调函数

现在，大部分的DOM操纵方法都支持了将 函数 作为单一参数传入（ .css()  和  .attr()  传入为第二个参数）。这个函数会为选择集中的每一个元素都跑一遍，从而为相应操纵方法提供更“有个性”的值。

下列方法支持这一功能：

  
• after
    
• before
    
• append
    
• prepend
    
• addClass
    
• toggleClass
    
• removeClass
    
• wrap
    
• wrapAll
    
• wrapInner
    
• val
    
• text
    
• replaceWith
    
• css
    
• attr
    
• html

有了回调函数，你就能在选择集中利用  this  关键字来访问当前元素，用回调函数的第一个参数来访问其索引值。

jQuery('li').html(function(i){
    return 'Index of this list item: ' + i;
});

还有还有，上面的某些方法还提供第二个参数供你利用。如果你调用的是一个设定型方法（如 .html()  和  .attr(‘href…)  ），你还能取得当前值。例如：

jQuery('a').attr('href', function(i, currentHref){
    return currentHref + '?foo=bar';
});

如您所见，对于 .css()  和  .attr()  方法来说，之所以要把函数作为第二个参数传递，是因为第一个参数要用来指定我们需要修改的是哪一个属性：

jQuery('li').css('color', function(i, currentCssColor){
    return i % 2 ? 'red' : 'blue';
});

13. 判定对象类型

jQuery 1.4 新增了两个全新的辅助函数（都直接位于 jQuery 命名空间下），可以帮助你判别你正在操纵的是何种对象。

第一个函数是  isEmptyObject , ，它返回一个布尔值，判定对象是否为空（）。第二个是  isPlainObject  ，它返回的布尔值代表传递过去的参数是否为JavaScript的简单对象（plain object），也就是用  {} 或   new Object() 创建的对象。

jQuery.isEmptyObject({}); // true
jQuery.isEmptyObject({foo:1}); // false
jQuery.isPlainObject({}); // true
jQuery.isPlainObject(window); // false
jQuery.isPlainObject(jQuery()); // false

了解更多： isPlainObject(…) , isEmptyObject(…)

14. Closest(…) 的功能增强

jQuery的 .closest()  方法现在可以接受一组选择符作为参数。当你需要遍历某一元素的所有上级，找到一个以上符合特定特征的最近元素时，此功能就能派上用场。

而且，现在它还能接受上下文环境作为第二个参数，也就是说你可以控制DOM遍历的深度或者说远度。虽然说大家可能很少会用到这两个新特性，但一旦用上效果是惊人的！

了解更多  .closest(…)

15. 新事件！ focusIn 与 focusOut

如前所述，现在部署 focus 和 blur 事件时，你需要使用 focusin 和 focusout 这两个新事件。这两个事件帮助你在特定元素或者该元素的子元素 获取/失去 焦点时采取行动。

jQuery('form')
    .focusin(function(){
        jQuery(this).addClass('focused');
    });
    .focusout(function(){
        jQuery(this).removeClass('focused');
    });

值得说明的是，这两个事件不会传播开来（即所谓的“冒泡”），它们会被捕获住。也就是说，外部元素（父辈）会在作孽的“目标”元素（causal “target” element）之前被触发。

了解更多关于 focusIn 和 focusOut 事件的内容。

Jquery1.4 API文档

  原文作者：James Padolsey
  原文来自亲泥巴：jQuery 1.4 发布：15个新特性实例精讲
  英文原文地址：http://net.tutsplus.com/tutorials/javascript-ajax/jquery-1-4-released-the-15-new-features-you-must-know/

您可能还关注的？

• 微软的jQuery国际化插件
• 即拷即用：onDOMReady（提取自jQuery.ready）
• jQuery源码查看器
• Jquery1.4正式版发布了 JS库时代就是这样快
• YUI3设计中的激进和妥协

vfresh兄弟已经写了一个新版的概述 我就直接转载过来了

修改内容：

1. .add() 支持 .add( selector, context ) 方式
2. 以下增加支持处理function方式：.addClass() .after() .before() .append() .css() .html() .prepend() .removeAttr() .removeClass() .replaceWith() .text() .toggleClass() .val() .wrap() .wrapAll() .wrapInner()
3. .bind() 支持批量绑定事件
4. .closest()支持第二个参数(筛选元素的容器)，优化效率。用法：.closest( selector, [ context ] )
5. .data() 支持批量设值 $('body').data({one: 1, two: 2});
6. .index() 如果无参数，则返回在它兄弟级元素集合中的索引值；并支持使用选择器(selector)过滤
7. jQuery() 如果无参数，会返回一个空的数组（旧版本返回document）
   用 jQuery() 创建DOM时，可以使用第二个参数来设置属性值、绑定事件 查看示例
8. .offset() 新增功能可以直接设置元素相对于document的坐标，并支持function参数
9. jQuery.param() 第二个参数(布尔值)，可以设定是否进行URI编码

新增内容：

1. .clearQueue() 清除.queue()生成的队列，如无参数将清除fx中的队列；类似于.stop(true)
2. jQuery.contains() 检测是元素否包含目标

jQuery.contains(document.documentElement, document.body); // true
jQuery.contains(document.body, document.documentElement); // false

3. .delay() 延迟执行队列

<!DOCTYPE html>
<html>
<head>
  <style>
div { width: 60px; height: 60px; float: left; }
.first { background-color: #3f3; }
.second { background-color: #33f;}
</style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body>

<p><button>Run</button></p>
<div class="first"></div>
<div class="second"></div>

<script>
    $("button").click(function() {
      $("div.first").slideUp(300).delay(800).fadeIn(400);
      $("div.second").slideUp(300).fadeIn(400);
    });
</script>
</body>
</html>

4. .detach() 返回从元素数组中移除的匹配元素。
5. .focusin() 是.bind(‘focusin’, handler)的简写方式。
6. .focusout() 是.bind(‘focusout’, handler)的简写方式。
7. .has() 筛选出包含有指定元素的集合

<div id="a"><strong>这个会被选中</strong></div>
	<div id="b">这个选不中</div>
	<script type="text/javascript">
	$('div').has('strong').css('color','red');
	</script>

8. jQuery.isEmptyObject() 检测对象是否为空值

jQuery.isEmptyObject({}) // true
jQuery.isEmptyObject({ foo: "bar" }) // false

9. jQuery.isPlainObject( object ) 检测是否为pain object

jQuery.isPlainObject({});	//true
	jQuery.isPlainObject('{}');	//false

10. .nextUntil([ selector ]) 查找当前元素之后到selector(参数)之间的同辈元素

<div id="a1">3232323</div>
<div id="a"><strong>这个会被选中</strong></div>
<div id="b">这个选不中</div>
<div id="c">ccc</div>
<div id="d">ccc</div>
<script type="text/javascript">
$('#a').nextUntil('#d');	//取得[#b,#c]
</script>

11. .prevUntil([ selector ]) 查找当前元素之前到selector(参数)之间的同辈元素
12. .parentsUntil( [ selector ] ) 取得一个包含着所有匹配元素的祖先元素（直到找到selector截止）的元素集合
13. jQuery.noop 空函数，当想定义一个空函数时可以用这个。
14. .toArray() 取得所有匹配的 DOM 元素集合，有点类似于.get()
15. .unwrap() 移除匹配元素的父级

您可能还关注的？

• YUI3设计中的激进和妥协
• 转：评论jQuery是魔鬼还是天使？
• 太NB了：Google Docs Ctrl + C 技术浅析
• 微软的jQuery国际化插件
• 判断 iframe 是否加载完成的完美方法

1，种子的一步到位 or 颗粒化
所谓种子一步到位是指只要在页面引入一个种子文件的script标签，比如prototype和jquery，只要引入一个prototype.js或jquery.js就可以了，他们将各自对dom操作和event的封装等等都囊括进一个文件中，并尽力将其做到最小，这样做的好处是显而易见的，使用框架非常简单。然而yui将这些功能做了级别划分和颗粒化设计，从概念上抽象出来“核心”、“工具”和“组件”，每个小功能放在一个文件当中，需要的时候则要自行去引用，yui文档中给出的大量demo都采用这种方法，这种设计显然不像jquery那样对初学者友好，而且使用起来不够傻瓜，为了实现一个小功能，甚至要引入三四个js文件。yui这样做的原因有两个，一是yui实在太大，把所有功能都搞进一个文件中确实有点不靠谱，二是为其动态加载的框架设计做铺垫。


2，手动引入 or 动态加载
往页面中写js的传统方法是，直接将js文件作为script标签路径写在页面中，使用yui也可以这样引入页面，但yui更推荐使用loader进行动态加载。动态加载脚本的渊源很复杂，目前来看主要原因有三，其一，页面中手写js标签无论如何都会占用一个http请求，即使这个请求是一个304，动态加载的文件缓存后则不必发起真实的http请求，其二，动态加载可以实现按需加载，而且可以根据js文件之间的依赖进行去重和排序，手写标签加载js文件则必须让开发者去额外关注一下文件的排序、重复等等，其三，动态加载有利于页面代码的语义化，这使得开发者只关心“需要什么”，而不用去在意“如何得到”。当项目变得越发臃肿，维护成本越来越高的时候，这中小技巧会有不小的好处的。

3，逻辑启动的单一入口 or 沙箱
我们在页面中启动一个js逻辑通常是放在一个类似onDomReady的方法中，如果页面中存在多个逻辑的时候怎么办呢？比如，a实现了逻辑A，页面代码是这样的

<script src=”logicA.js” />
<script>
$.onDomReady(function(){
   LogicA.start();
});
</script>

这段代码通常写在页面的尾部，这段逻辑所伴随的html代码是埋藏在页面的某处，这时b要在页面中增加逻辑B，b的做法是首先找到尾部的这段代码，然后更改成如下模样：

<script src=”logicA.js” />
<script src=”logicB.js” />
<script>
$.onDomReady(function(){
   LogicA.start();
   LogicB.start();
});
</script>

同样，B逻辑所伴随的html代码也是埋藏在页面的某处，这样看来，js逻辑和其伴随的html代码如此分离，以至于到了删减功能的时候，往往删掉html却忘了删js，或者删掉js忘了删除html，在重用代码的时候也会是个麻烦。同样，在调试的时候，工程师也要打开两个窗口分别关注js和html，即使这两段代码在同一个文件当中。如此则不如把代码写成这样：

<!–A逻辑的html代码段–>
<script src=”logicA.js” />
<script>
$.onDomReady(function(){
___LogicA.start();
});
</script>

…

<!–B逻辑的html代码段–>
<script src=”logicB.js” />
<script>
$.onDomReady(function(){
   LogicB.start();
});
</script>

这种coding写法正是yui所提倡的，也就是所谓的沙箱，每个逻辑包含在一个沙箱中，各司其则互不干扰。当第三者浏览代码的时候也立即明白这就是一个独立的功能块，包含典型的html结构和启动逻辑的js，要重用，整块拷走即可。

4，代码污染 or 沙箱
刚才提到的沙箱可以解决一部分代码污染的问题，新人阅读代码不用再看着乱码般的源码，“瞻前顾后”小心翼翼的寻找html和js的对应关系。但这种写法也存在隐患，现在的前端开发越来越复杂也更多的使用分层，比如底层使用yui，中间层是自定义的工具库，或者再加一个项目的widget组件库，写页面逻辑则是基于这些库进行开发。这样的话，每段逻辑可能写成这个样子：

<!–A逻辑的html代码段–>
<script src=”widget.js” /><!–项目的widget库–>
<script src=”logicA.js” />
<script>
$.onDomReady(function(){
   LogicA.start();
});
</script>

尽管我们可以约定，将项目用到的所有的组件都统一加载进页面中，但当组件越来越多的时候，就出现了上文所说的一步到位和颗粒化之间的矛盾，当每个控件单独占用一个js文件和与之相伴随的css皮肤，一个相对复杂的逻辑就变成了上文所说的手动引入js文件，并随之引入一些显而易见的弊端：

<!–复杂的A逻辑的html代码段，使用了日历，弹层，幻灯–>
<script src=”calendar.js” /><!–日历–>
<script src=”box.js” /><!–弹层–>
<script src=”tabview.js” /><!–幻灯原型–>
<script src=”slider.js” /><!–幻灯–>
<script src=”logicA.js” />
<script>
$.onDomReady(function(){
   LogicA.start();
});
</script>

首先，手写大量的js文件会各自占用单独的http请求，在者，这个场景中，slider.js继承自tabview.js，因此要着重关注他们的顺序，第三，如果别人在页面的其他地方也使用了日历或者幻灯，还要再加两个相同的js标签？其实，说到这里，我们已经可以隐约看到大项目团队开发的影子了，在一个迭代及其频繁的项目中，开发者需要在短的时间内完成一个复杂页面的某个功能的开发，而且不能影响到页面的其他功能，毕竟，每添加一个功能，QA mm们都要将与之牵连的所有功能都要回归，可辛苦了我们的QA mm们。在这种情况下，一个功能的开发可能和同一个页面其他功能的开发相互并行。互相不属于同一个项目组，也不知晓对方的实现。这种模式则是我们经常遇到的多人开发，冲突也大都由此产生，每个功能单独看来是正确的，合并到一起会产生冲突和bug，这时调试bug则需要两个工程师同时进行，很麻烦。甚者，当组件升级了，比如，tabview.js再继承自tab.js，则又要去联系各个工程师，将每个引用tabview.js的地方之前再加上一个tab.js，很麻烦。我们说，这种多人协作模式所带来的冲突也是代码污染的一种，因为每个人只能掌控类似tms区块那么巴掌大的地方，所组成的最终页面是什么样，都不知道。更何况，这种生猛的引用js，也会阻塞页面加载，占用http请求，影响性能。

鉴于此，yui将js的动态引入机制也并入其沙箱设计之中，我要引用的只是一个名字，比如slider.js，他依赖tabview.js，tabview.js依赖tab.js，这样我只需引用一个名叫”slider”的东西即可，不用操心他依赖什么，更不用管如何引入到页面中，yui都帮我们搞定：

<script>
TB.addmoudle({
   logicA:{
      fullpath:’logica.js’,
      requires:['slider']
   }
}).use(‘logicA’,function(Y){
   LogicA.start();
});
</script>

当我们看最终组成的页面的时候，看到的只是埋藏在页面各个角落的这些简短的结构一致的js代码段。很易理解，这点代码也不用像长的代码块压成一行。（更多细节可参照 前端弱架构导致的代码污染 ）

5，颗粒化 or http请求数
这的确是一对矛盾，颗粒化带来了项目开发、管理、和代码重用的高效率，却又引入了更多的http请求数，好在yui提供了combo，可以将所有的http请求合并成一个。只需在YUI引入的时候配置下combo属性即可，高颗粒化的请求数瞬间降低一倍以上。在之前做雅虎关系的时候，在yui2和yui3pre并存的情况下，可以将请求降低到4个，yui2和3各一个种子，各自一个combo。当然这是在hack掉yui的loader的前提下。yui默认不会合并非yui文件（更多细节可以阅读基于yui的团队开发）。即使这样，我们仍然可以控制我们的http请求数，在不hack yui的情况下，可以解决部分性能问题。

6，懒惰加载 or 即时加载即时执行
上文提到，逻辑依赖沙箱，沙箱依赖的js文件则是延时加载的，这样就导致一个问题，当页面比较庞大的时候，会等待页面js加载完毕才会渲染动作，这样的用户体验不佳，而即时加载即使运行则可以渲染出模块后随即渲染动作，当网速一定的时候，两者看似是一对不可调和的矛盾，yui 动态加载的机制比较折中的处理了这个问题，A逻辑需要a.js，B逻辑需要b.js，A逻辑则只会在a.js加载完成后执行，而不管b.js是否加载完成，而当A需要a.js和b.js的时候，A则需要等待a.js和b.js都加载完成才会执行，B逻辑只需判断当前是否已经加载b.js，如果b.js已经在其他模块中引入进来，B则可以立即执行。但确定的是，所有的js的引入一定是在domReady后执行的，也就是说，不管怎样，动作的渲染一定是在页面html结构出来后才开始执行的，用户体验上还是会有损失。

7，面向接口的设计 or 面向dom的设计
我们知道jquery的插件习惯将所有的动作都加载到一个$(‘#id’)上，使用的时候只要执行类似$(‘#id’).init()即可。这看起来简洁明快，开发者的逻辑的思路也始终没有离开“节点”，很方便理解，而对yui3 的node扩展就不那么方便，从yui3的pre版到正式版，对node扩展的方法在不断的修改（更多细节看这里：扩展yui3 node的定时器），这也可以看出yui设计者在对node扩展性设计时的纠结和苦恼：要不要允许开发者去扩展node节点呢？大概是因为设计者们对prototype先天的弊端心有余悸。目前看来，设计者还没有完全走出纠结，尽管对node扩展相比yui3第一个预览版方便了很多，开发者仍然不能像写jquery插件那样优雅自如的对node进行扩展。相反，zakas却将更多的精力放在了widget接口的设计上，在这一点上，相比jquery，yui3则具有无可限量的优越性，因为在yui3中，组件不仅仅是组件，而是一个有血有肉的生命体，他可以出生，可以成长，可以被改造，可以死亡，组件在这些复杂的运行时环境中自我锤炼，因此，一个复杂页面在yui3的技术体系中，变成了一个由无数组件链接而成的生态系统，这种生物链所带来的设计创新和新视野是其他js框架无论如何也无法超越的。关于yui3的组件开发更多细节可以参照：基于yui3的组件开发1 和 克军在D2上的分享《从yui2到yui3看前端的演变》

8，苗条的身材 or 庞大的身躯
说到这里，大概会有很多人拍砖。其实jquery和yui同属两类不同的js框架，一个苗条纤细，一个身重如山，两者之间其实没有什么水深火热，只是使用范围不同罢了，类似jquery的轻框架的使用范围是博客级别的小网站，尤其适合单人开发，代码写一次不再修改，而且很适合初学者学习使用，给初学者带来自信。yui则使用与企业级的项目中的团队开发，项目维护周期远远超过开发周期，因此yui性能一定比不过jquery，jquery的续航能力也一定不如yui，没有最优秀，只有最适合。当然这自然也挡不住我个人对迷人的jquery的喜爱，只要我们能从各个js框架学到东西，能提高自己做前端架构的能力，就ok。

说了这么多，其实只有一个观点，人无完人，框架无完框架，缺憾之处必有权衡。以上YY，欢迎拍砖！

原文：http://ued.taobao.com/blog/2010/01/11/yui3%e8%ae%be%e8%ae%a1%e4%b8%ad%e7%9a%84%e6%bf%80%e8%bf%9b%e5%92%8c%e5%a6%a5%e5%8d%8f/

您可能还关注的？

• Jquery1.4正式版发布了 JS库时代就是这样快
• 微软的jQuery国际化插件
• 即拷即用：onDOMReady（提取自jQuery.ready）
• jQuery源码查看器
• [译]jQuery 1.4 发布：15个新特性实例精讲

使用方法：
在需要使用该插件的页面插入如下依赖 具体路径请自行修改
分别是：JQuery1.32 本插件核心代码 和本插件的css样式

<script src="jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="simpletip/jquery.tip-min.js" type="text/javascript"></script>
<link href="simpletip/SimpleTip.css" rel="stylesheet"/>

插件使用：

$(document).ready(function(){//jq的页面载入事件
    $("#tip2").tip({ //获取目标元素
    width: 100,//自定义宽度 也可以不设定此项
    text: "<span class='icon01'></span>宽度：100px 是自定义的"//提示内容 可以包含html代码
    });
})

核心代码分析：

(function($){//建立闭包
	var _tip;//创建提示对象
    $.fn.tip = function(options){//jq插件机制的核心函数$.fn
        var defaults = {	//默认参数
			width:300,
            text: "这里是提示文字"
        };
        var opts = $.extend(defaults, options);//参数合并 具体参见jq手册
        this.bind("mouseover", function(event){//给目标对象绑定事件
            showtip(event, opts);
        });
        this.bind("mouseout", function(event){
            _tip.hide();
        });
        this.css("cursor", "pointer");//目标对象的鼠标样式
    };
    function showtip(event, opts){//显示提示层方法
        target = $(event.target);//获取事件触发的对象
        if (!_tip) {//如果提示对象不存在
            _tip = $("<div/>");//创建一个div element
            _tip.addClass("tip").css("width", opts.width).appendTo($("body"));//根据参数设定宽度 插入到body中
            _tip.bind("mouseenter", function(event){//给提示对象绑定事件 这里使用mouseenter jq已经做了兼容
                $(this).show();
            });
            _tip.bind("mouseleave", function(event){//给提示对象绑定事件 这里使用mouseleave jq已经做了兼容
                $(this).hide();
            });
        }
        _tip.css("width", opts.width);//提示对象的宽度
        _tip.html("<div>"+opts.text+"</div>");//提示对象的内容
        _tip.append($("<iframe class='ie6iframe'></iframe>").css("width", _tip.width()).css("height", _tip.outerHeight(true)));
		//建立遮罩层
        _tip.css("position", "absolute").css("top",target.offset().top + target.height() - 3).css("left",target.offset().left);//提示对象定位
        _tip.show();
    };
    })(jQuery);

就到这里吧：）
[查看DEMO] [下载源码]
转载请注明来源：）

您可能还关注的？

• 微软的jQuery国际化插件
• 即拷即用：onDOMReady（提取自jQuery.ready）
• jQuery源码查看器
• [译]jQuery 1.4 发布：15个新特性实例精讲
• Jquery1.4正式版发布了 JS库时代就是这样快

做个记录 有时间好好学习一下

下载 Jquery1.2.6中文注释版

您可能还关注的？

• 微软的jQuery国际化插件
• 即拷即用：onDOMReady（提取自jQuery.ready）
• jQuery源码查看器
• [译]jQuery 1.4 发布：15个新特性实例精讲
• Jquery1.4正式版发布了 JS库时代就是这样快

//获取元素相对于这个页面的x和y坐标。
function pageX(elem){
return elem.offsetParent?(elem.offsetLeft+pageX(elem.offsetParent)):elem.offsetLeft;
}
function pageY(elem){
return elem.offsetParent?(elem.offsetTop+pageY(elem.offsetParent)):elem.offsetTop;
}

//获取元素相对于父元素的x和y坐标。
function parentX(elem){
return elem.parentNode==elem.offsetParent?elem.offsetLeft:pageX(elem)-pageX(elem.parentNode);
}
function parentY(elem){
return elem.parentNode==elem.offsetParent?elem.offsetTop:pageY(elem)-pageY(elem.parentNode);
}

//获取使用css定位的元素的x和y坐标。
function posX(elem){
return parseInt(getStyle(elem,”left”));
}
function posY(elem){
return parseInt(getStyle(elem,”top”));
}

//设置元素位置。
function setX(elem,pos){
elem.style.left=pos+”px”;
}
function setY(elem,pos){
elem.style.top=pos+”px”;
}

//增加元素X和y坐标。
function addX(elem,pos){
set(elem,(posX(elem)+pos));
}
function addY(elem,pos){
set(elem,(posY(elem)+pos));
}

//获取元素使用css控制大小的高度和宽度
function getHeight(elem){
return parseInt(getStyle(elem,”height”));
}
function getWidth(elem){
return parseInt(getStyle(elem,”width”));
}

//获取元素可能，完整的高度和宽度
function getFullHeight(elem){
if(getStyle(elem,”display”)!=”none”){
return getHeight(elem)||elem.offsetHeight;
}else{
var old=resetCss(elem,{display:”block”,visibility:”hidden”,position:”absolute”});
var h=elem.clientHeight||getHeight(elem);
restoreCss(elem,old);
return h;
}
}
function getFullWidth(elem){
if(getStyle(elem,”display”)!=”none”){
return getWidth(elem)||elem.offsetWidth;
}else{
var old=resetCss(elem,{display:”block”,visibility:”hidden”,position:”absolute”});
var w=elem.clientWidth||getWidth(elem);
restoreCss(elem,old);
return w;
}
}

//设置css，并保存旧的css
function resetCss(elem,prop){
var old={};
for(var i in prop){
old[i]=elem.style[i];
elem.style[i]=prop[i];
}
return old;
}
function restoreCss(elem,prop){
for(var i in prop){
elem.style[i]=prop[i];
}
}

//显示和隐藏
function show(elem){
elem.style.display=elem.$oldDisplay||” “;
}
function hide(elem){
var curDisplay=getStyle(elem,”display”);
if(curDisplay!=”none”){
elem.$oldDisplay=curDisplay;
elem.style.display=”none”;
}
}

//设置透明度
function setOpacity(elem,num){
if(elem.filters){
elem.style.filter=”alpha(opacity=”+num+”)”;
}else{
elem.style.opacity=num/100;
}
}

//滑动
function slideDown(elem){
var h=getFullHeight(elem);
elem.style.height=”0px”;
show(elem);
for(var i=0;i<=100;i+=5){
new function(){
var pos=i;
setTimeout(function(){elem.style.height=(pos/100*h)+”px”;},(pos*10));
}
}
}

//渐变
function fadeIn(elem){
show(elem);
setOpacity(elem,0);
for(var i=0;i<=100;i+=5){
new function(){
var pos=i;
setTimeout(function(){setOpacity(elem,pos);},(pos+1)*10);
}
}
}

//获取鼠标光标相对于整个页面的位置。
function getX(e){
e=e||window.event;
return e.pageX||e.clientX+document.body.scrollLeft;
}
function getY(e){
e=e||window.event;
return e.pageY||e.clientY+document.body.scrollTop;
}

//获取鼠标光标相对于当前元素的位置。
function getElementX(e){
return (e&&e.layerX)||window.event.offsetX;
}
function getElementY(e){
return (e&&e.layerY)||window.event.offsetY;
}

//获取页面的高度和宽度
function getPageHeight(){
var de=document.documentElement;
return document.body.scrollHeight||(de&&de.scrollHeight);
}
function getPageWidth(){
var de=document.documentElement;
return document.body.scrollWidth||(de&&de.scrollWidth);
}

//获取滚动条的位置。
function scrollX(){
var de=document.documentElement;
return self.pageXOffset||(de&&de.scrollLeft)||document.body.scrollLeft;
}
function scrollY(){
var de=document.documentElement;
return self.pageYOffset||(de&&de.scrollTop)||document.body.scrollTop;
}

//获取视口的高度和宽度。
function windowHeight() {
var de = document.documentElement;
return self.innerHeight||(de && de.offsetHeight)||document.body.offsetHeight;
}
function windowWidth() {
var de = document.documentElement;
return self.innerWidth||( de && de.offsetWidth )||document.body.offsetWidth;
}

您可能还关注的？

• 太NB了：Google Docs Ctrl + C 技术浅析
• 微软的jQuery国际化插件
• 判断 iframe 是否加载完成的完美方法
• 讨论闭包传入参数：window & undefined
• 最近写日期操作的几个JS函数

　　jQuery倡导的简单、快速编写js的方式，彻底改变了那传统琐碎的js编写方式，不再需要担心浏览器的兼容性，无论是简单还是绚烂的功能，也不再需要编写一堆冗赘的代码。她像一个天使让js焕然一新充满了活力……..

　　她对js的贡献让我想起了Dreamweaver对互联网发展的贡献，回望历史，在那 web标准方兴未艾、浏览器战火纷飞的年代，Dreamweaver用她兼容一切的table布局方案和视图化的编码方式，让web的制作的门槛视乎降低 到了不可思议的低，让web制作立马走进了千家万户，Dreamweaver的出现让web在量上的发展有了长足的进步，他为互联网的发展起到了不可小视 的历史推动，但在web标准的发展史上，因为Dreamweaver的无所不能、开发简快，渐渐的让HTML标准消失在了人们的视野中，将一代人带上了歧 途，惊醒过来的人们终于又意识到了web标准的存在（在这儿要感谢那些坚持不懈的各种浏览器的生产商）。有了一小群人开始鄙视那个多年不更新的IE6，开 始鄙视那些“Dreamweaver网页工程师”。

　　就像只会用Dreamweaver做页子的人一样，很多都不知道[DIV]与 [SPAN]之间的关系和区别，而只用jQuery写js的人会不会不知道 getElementById()和getElementsByName()之间的关系呢，jQuery巧妙的代码将兼容性问题很好的掩盖，无所不能的特 效、简快的开发方式，正开始让js标准渐渐淡出人们的视野。一切都太像了，有些不可思议，历史的轮回好像真的存在，我不知道jQuery会不会将一些人带 上歧途，但真的希望这一切不要真的发生。

做项目开发和做研究是两个概念，绝大部分的技术人员目的是为了开发，开发的目的是为了解决用户的需求，所以开发人员的根本是快速高质量的完成项目，这个是根本，不是带上歧途，是开发人员对复杂的js要透明（个人见解）。

　　这是一个痛苦的矛盾：“处理兼容性的代码只会让兼容性问题越来越严重”。css的处境也不太妙，不知哪位高人曾经说过：“csshack的滥用只会让css离标准越来越远”。

　　很多时候事情就是这么的无奈，你想的往往和你做的正好相反，你想兼容所有终端，但用户几 乎只用IE；你想模块化、想整体架构、想掌握技术核心，但你的工作得以效率为中心来开展；你想把事儿做到最完美，但那样做出来的好像并不值钱；好的想法为 什么总是得不到现实的支持呢，反过来想想答案就出来了，现有的需求不需要也不能支持那样的生产力呗。

　　回到一个让很多web标准坚持者黯然尴尬的问题：“web标准有什么好处？”。对于js 来说，这个问题要好点，因为DOM的标准已经成功进驻了各大语种的基库里，如果你会用js dom写应用的话，那你就可以在.net php java ……很多语言里游刃有余的使用DOM了，如果你还能玩转ECMAScript的话，恭喜你，你可以轻松转型到ECMAScript系的其他语言， 比如Actionscript…….. 坚持js的web标准还有另外一个好处，就是jQuery能做的js一定能做，而jQuery做不到的，js也许也能做，要知道jQuery就是js做 的…..

技术标准不只是 技术实现这样简单，很多时候是商业操作的结果，比如ie并不是兼容w3c，但是他是隐形的标准，而且标准在不同时间段内是不一样的，如果还有另外一家公司 做的比微软还好，使用率还高，那隐形标准也许又不是w3c和ie了，所以标准是有时间和空间的限制，技术在发展，商业变换是技术无法预测的，应该审时度 势，做符合大众的，不要一味的追求所谓的标准。

好吧，jQuery她的简单、快速开发是符合技术需求的，使用js + jQuery的方式开发项目会让人感到实用和愉快。但在接纳和使用她的时候，一定不能忘记web标准，不然会走很长很长的弯路………

邓爷爷说过：不管白猫黑猫，能抓住老鼠就是好猫，框架诞生的目的是为了降低开发的难度，提高开发的速度和质量，框架本无错，错就是错在作者在误导读者。有了汽车就不走路了吗？

您可能还关注的？

• Jquery1.4正式版发布了 JS库时代就是这样快
• 再谈float菜单局中
• border:none;与border:0;的区别
• 太NB了：Google Docs Ctrl + C 技术浅析
• 微软的jQuery国际化插件