久久99亚洲综合精品首页,亚洲黄色中文字幕,久久精品国产亚洲AV麻豆～

高�� jQuery

CONAN — Tue, 08 Sep 2009 07:41:00 GMT

摘要: ��?�q�个关于 jQuery 的系列文章帮助您提高了创建基�?JavaScript �?Web 应用�E�序的能力。即使您在阅读这些文章之前从未听说过 jQuery�Q�但是您应该已经具备了��?jQuery 构徏良好�?Web 应用�E�序所需的语�a�技能和背景知识。但是，有时候良好的应用�E�序�q�不能满��需求，�q�时您将需要一个强大的 Web 应用�E�序。这��需要通过几个步骤修改现有的应用程序，让它能够�?.. 阅读全文

CONAN 2009-09-08 15:41 发表评论

中�� jQuery

CONAN — Tue, 08 Sep 2009 07:31:00 GMT

��?/span>

本文的写作灵感源自读者关于先前一��文章的电子邮�g反馈�Q�该邮�g�q�样写道 “jQuery 在简单的��面上无可挑剔，但在复杂的页面上性能极其低下。在解决性能问题之前�Q�您必须对复杂页面��用常规的 JavaScript�?#8221; �q�立卌��我想�? “jQuery �?JavaScript 之间的性能比较会是什么样的？”事实上，我很��看到将 jQuery 库与 JavaScript 或其�? JavaScript 库进行比较的文章。我可能像大多数��Z��P��仅看到用 jQuery �~�写客户端代码的��易，而忽略了可能的性能问题。在我看来，在易用性和性能之间�q�行折衷是值得的。但是，存在�q�样一�U�折衷吗�Q�jQuery 是不是比 “一�?#8221; �?JavaScript 慢？jQuery 是不是比其他库慢�Q�本文将��试解答�q�些问题�?

度量 JavaScript 性能要考虑的最重要问题是执�?JavaScript 的环境。因��Z��码是�q�行在客��L��上的�Q�所以它的执行依赖于客户端计��机�Q�这使得客户端机器成为媄响性能的最重要因素。很明显�Q�运�?4 �?CPU 的新服务器执行代码的速度肯定要比 400 MHz 老式处理器快。这是毫无疑问的。不�q�，�׃��您不能控�?Web 应用�E�序用户用于讉K��您的站点的机器，所以在度量性能时要考虑关于��g的许多因素�?/p>

JavaScript 性能的另一个重要方面是用于�q�行 JavaScript 的浏览器�Q�JavaScript 新手可能不容易发觉这个媄响因素。每个浏览器内部都包含一�? JavaScript 引擎�Q�即用于解析和执�?JavaScript 代码�q�处�?Web 应用�E�序��面的本��Z��码。因此，JavaScript 的性能严重依赖于客��L��使用的浏览器�Q��ƈ且在某些情况下，�?em>可以控制用户使用的浏览器。本文提供一些关�?JavaScript 性能的指导原则，�q�解释不同浏览器�Ҏ��能的媄响�?/p>

最后，在�ȝ�� JavaScript�Q�尤其是 jQuery 的性能之后�Q�我��确定一些能够改�q?jQuery 代码性能的最佛_��践，充分利用�q�行得最快的代码部分�Q�而尽量避免运行得最慢的代码部分。在您阅��d��本文之后�Q?#8220;jQuery 的性能好吗” �q�个问题��得到解�{�，�q�且�l�我发送那��电子邮件的��Z��知道他的断�a�是否正确�?/p>

创徏性能��试

�? 于性能��试的第一步是创徏一个合适的性能��试。jQuery 以及其他 JavaScript 库在代码中扮演的最重要角色��是使用选择查找特定��面元素。我在最初的性能��试中就以这斚w��为重炏V��一个良好的性能��试应该真正地发�? JavaScript 库的全部力量�Q�用包含数千个页面元素的��面��试它。应该运行所有选择�Ҏ��Q�让我看到哪个选择�Ҏ��最快，哪个最慢。测试应该事先知道正��的�{�案�Q�从而确�? JavaScript 库是否正��地执行选择�Ҏ��。最后，应该昄��所有结果，�q��带所用的�q�行旉��Q�让我能够在所有库之间�q�行比较�?/p>

我差点忽略了性能��试的最重要斚w��Q�它应该是免费的。毕竟这个系列文章的不成文规则就是相互利用彼此的成果�Q�因此我�l�箋发扬�q�种�_��Q�在此��用一个现成的 JavaScript 库性能��试。这个测试称�?SlickSpeed Selectors Test�Q�见参考资�?/a>�Q�，它非帔R��合我的需求。它��?jQuery 1.2.6�Q�撰写本文时的最新版本）与其�?4 个流行的 JavaScript 库（MooTools、Prototype、YUI �?Dojo�Q�进行比较。然后，它��用带有数千个��面元素的页面运�?40 个选择��试。换句话��_��q�是我所希望的最��x��能��试。我��在�W�一个性能��试分析中��用该��试�?/p>

�Ҏ�� JavaScript 库的性能

对于�W�一个性能��试�Q�我使用的运行环境是 2.2 GHz 处理器�? GB RAM �?Firefox 3.0.3�Q�非帔R��要）。我在该配置下运�?5 �ơ测试，�?1 昄��?5 �ơ运行的�q�_��l�果�?/p>
�?1. 性能��试 1 的结�?/strong>

从第一�ơ测试能够得��Z��么结论？现在我们仅关注��M��l�果�Q�而不是每�ơ测试。在获得一些��M��l�论之后�Q�我��稍后在本文中关注每个测试�?/p>

�l�论 1�Q�YUI 慢到了极点！
对，与其他库相比�Q�YUI 真的很慢。仔�l�查看每个测试，扑և��Z��么这个库在选择元素�l�（例如 “p, a”�Q�时非常慢。对于要求具有很好性能的页面而言�Q�这个库是最差的选择�?/li>
�l�论 2�Q�Mootools、jQuery �?Dojo 的运行时间几乎一栗��?
与其他两个库相比�Q�这 3 个库是非常快的，�q�且 Dojo 是它们当中最快的�Q��?jQuery 是最慢的。但是从全局考虑�Q�它们之间的速度是很接近的�?/li>
�l�论 3�Q�这些库之间的相对差别还是比较明昄��?br /> 度量最快时�?最慢时间以��定速度的相对差别，您可以看到相对差别�ؓ 332%。这个差别是比较大的�Q�这表明使用 Firefox 旉��择不同�?JavaScript 库会�Ҏ��能有媄响�?/li>

但是要记住，�q�些�l�论仅基于一个浏览器的结果。这是基�?Firefox 3.0.3 得出的结论。现在我们进入下一��节�Q�我��在不同的浏览器上运行该��试�?/p>
在不同浏览器上的 JavaScript 性能

�? 对不同浏览器�q�行 JavaScript 会得出的不同�l�果�Q�性能和时间都不同�Q�，许多初�� Web �E�序员觉得不可思议。尽��这对初�U?Web �E�序员而言是个挫折�Q�他们担心要�~�写额外的代码来处理不同的浏览器�Q�，但是有经验的 Web �E�序员在 Netscape �?Internet Explorer 的早期就知道如何处理该问题。这也是使用 JavaScript 库的一个亮点，因�ؓ它们都�}慎处理许多或大部分浏览器差异�?

JavaScript 速度差异的主要原因是每个��览器都使用自己�?JavaScript 引擎。JavaScript 引擎是用于解�?JavaScript �q�根�? Web 应用�E�序执行它的本机代码。因此，JavaScript 的执行速度与底层引擎直接相兟뀂在最�q�几个月�Q�许多浏览器公司��来��关注他们的��览器的性能�Q�这是有原因的。随着某些��面�?JavaScript 变得日益复杂�Q�JavaScript 引擎的快慢能够媄�?Web 应用�E�序的响应速度。因此，�?Google �?Firefox �{�公司谈论它们的 JavaScript 引擎�Ӟ��它们��׃��谈及下一代引擎的速度要快 10 倍。这�?Web 应用�E�序而言是很重要的，因�ؓ底层 JavaScript 引擎的速度直接��D��更复杂的 Web 应用�E�序的出现�?/p>
现在�Q�您知道 JavaScript 引擎�? JavaScript 执行速度的一个因素，那么让我们在不同的浏览器上运行刚才在 Firefox 上运行的��试�Q��ƈ��试扑և�不同的引擎对 JavaScript 性能的媄响。记住，�q�个��试与我前面�?Firefox 上运行的��试是一��L��Q�因此除�?JavaScript 引擎以外�Q�其他所有东襉K��是相同的。图 2 昄��了测试结果�?/p>
�?2. 性能��试 2 的结�?/strong>

�? 完这些测试结果之后，您首先注意到的是在这些浏览器中运行得到的旉��差很大。在 Chrome 1.0 上运�?jQuery 需�?168 毫秒�Q�而在 IE6 上运行需�?1728 �U�。这是难以置信的旉��差！jQuery 选择�Ҏ��?IE6 上运行比�?Chrome 上运行慢 10 倍！现在�Q�您知道��Z��?Google 喜欢夸耀它的 JavaScript 引擎�Q�以及�ؓ什么某些浏览器很少介绍自己�?JavaScript 引擎。这些差别还是比较大的�?/p>
您应该注意到�Q�jQuery �?Firefox 或一些其他浏览器上运行时速度排在�W?3 位，而在另一些浏览器上排在第 1 位。事实上�Q�这些结果表明，�Ҏ��性能�q�行分类的话�Q�这些库可以分�ؓ两组�Q�而不��用什么浏览器。Mootools、Dojo �?jQuery 通常属于一个组别，�?Prototype �?YUI 属于另一个组别，前一�l�要比后一�l�快得多�?/p>
性能��试�l�论

我觉得所有这些结论都需要专门花一个小节进行阐�q�ͼ�因�ؓ它们�?JavaScript 开发�h员非帔R��要。我仍然��试�ȝ��上面的性能�l�果�Q��ƈ且没有忘记本文是�?jQuery ��Z��题的�?/p>
�l�论 1�Q�Mootools、jQuery �?Dojo 在性能斚w��不分上下�?/strong>
查看它们在所�?5 个浏览器上进行的��试�Q�在求取�q�_��g��后，您可以看到这 3 个库的性能几乎是一��L��。（理想情况下，我们应该调查每个��览器的市场份额。但是调整这些数字很难，因�ؓ使用 JavaScript 库的站点不一定由 “�q�_��用户” 讉K��Q��?/p>
�?3. ��试�l�果的��^均��|��Mootools、jQuery �?Dojo�Q?/strong>

�l�论 2�Q�Prototype �?YUI 的性能很慢�?/strong>
看看�q�两个库�?5 个浏览器中的��试�l�果�?jQuery 的对比。在求取它们的��^均��g��后，您可以发现这两个库的性能差别有多大。它们在��L��览器中�q�_��?jQuery �?300%�?/p>
�?4. ��试�l�果的��^均��|��jQuery、Prototype �?YUI�Q?/strong>

�l�论 3�Q�如果对性能要求比较高时�Q�选择 Mootools、jQuery �?Dojo 之一获得的性能几乎一栗��?/strong>
�Ҏ��以上的��^均��|��选择�q?3 个库之一比选择另外两个库之一能够获得更多的性能优势。从在所有浏览器上运行得出的�q�_��值看�Q�它们的性能是相当的。因此，当您选择 JavaScript 库时�Q�选择�q?3 个库之一是不会错的�?/p>
�l�论 4�Q�如果对性能要求比较高时�Q�不要选择 Prototype �?YUI�?/strong>
如果要求 JavaScript 库具有较高的性能�Q�或者打��创��Z��个大型的 JavaScript ��目�Q�那么就不应该选择�q�两个库之一。这两个库的性能要比其他库逊色得多�?

�l�论 5�Q�浏览器�Ҏ��能的媄响是 JavaScript 库的 9 倍�?/strong>
�? 认�ؓ�q�是本文所有结��Z��最重要的结论。您可以在特定情况下讨论哪个 JavaScript 库最快，但它最�l�的影响却是很小的！对于性能而言�Q�浏览器的媄响比库本�w�要大得多。回��一下图 3 和图 4 的��^均��|��您可以看�?3 个最快的库中�Q�最慢那个（Dojo�Q�仅比最快那个（jQuery�Q�慢 15%。只�?15%�Q�然而，您看�?jQuery 在最快的��览器（Chrome 1.0�Q�和最慢的��览器（IE6�Q�上�q�行的速度差别�Q�这个差别竟然达�?1000%�Q�从�q�两个数字看�Q?5% �? 1000% 而言是微不��道的。至此，关于 3 个较快的库中哪个是最快的争论可以停止了，因�ؓ它们�Ҏ��l�结果的影响是微乎其微的�?

�l�论 6�Q�如�?JavaScript 性能�?Web 应用�E�序很重要，�q�且您可以控刉��择什么浏览器�Q�那么就选择最快的��览器！
�? 某些情况下，您可以控制��用什么浏览器讉K��站点。如果能够控制��用什么浏览器�Q�那么您��是很幸�q�的。我��q��到这样幸�q�的��目。在�q�种情况下，如果您拥有一个复杂的 JavaScript 应用�E�序�Q�或者您认�ؓ性能很重要，那么您就应该控制用户用于讉K�� Web 应用�E�序的浏览器。这些测试已�l�清楚地昄��了浏览器的媄响。如果您�?JavaScript 应用�E�序的访问量很大�Q�那么您可以告诉用户�Q�他�?em>必须使用 Chrome�?/p>
�l�论 7�Q�如果您不能控制用户使用的浏览器�Q�那么要首先考虑�?IE6 上的性能�?/strong>
�? 是，在大部分情况下，我们都无法控制用户��用什么浏览器讉K��我们的站炏V��不�q�，很大一部分用户都��?IE 6 ��览�|�页。到目前为止的测试中�Q�这个浏览器�?JavaScript 引擎是最慢的。但是由于仍然有大量用户使用它，�q�且良好�?Web 设计需�? “适应最�p�糕的情�?#8221;�Q�这意味着您可以考虑�Ҏ�� IE6 设计您的 JavaScript 应用�E�序�?/p>
jQuery 性能调优

�? 文的�W�二部分��讨论如何改�q?jQuery 代码的性能。前一部分表明选择 jQuery 作�ؓ JavaScript 库指向了正确的性能方向。如果您正在阅读本文�Q�您可能已经使用�? jQuery。但是底层库速度快�ƈ不意味着您编写的所有代码都是高质量的。如果您没有回过头来��x��应该怎么做，使用 jQuery 仍然会编写出非常慢的代码�?/p>
�q�个部分介绍一些性能调优知识�Q�以及改�q?jQuery 代码速度的最佛_��跉|��巧�?

技�?#1 - ��可能多地通过 ID �q�行搜烦�Q�而不�?CLASS
�?jQuery 代码中两�U�常见的搜烦技术是通过元素�?ID �q�行搜烦和通过元素�?CLASS �q�行搜烦。在使用常规 JavaScript �?JavaScript 库之前，通过 ID 查找��面元素�q�是相当��单的。可以��?getElementById() �Ҏ��快速找到元素。但是如果没�?JavaScript 库，要查�?CLASS 会更加困难，在必要情况下�Q�我们还通过在其 ID 中进行编码帮助查找。��?jQuery �Ӟ��搜烦 CLASS ��像搜烦��面上的 ID 一��L��单，因此�q�两个搜索似乎是可互换的。然而实际情况�ƈ非如此。通过 ID 搜烦比通过 CLASS 搜烦要快得多。当通过 ID �q�行搜烦�Ӟ��jQuery 实际上仅使用内置�?getElementById() �Ҏ��Q�但通过 CLASS �q�行搜烦时必��遍历页面上的所有元素，以查扑֌�配项。很明显�Q�当��面��大�q�且��复杂时�Q�通过 CLASS �q�行搜烦会导致响应非常慢�Q�而通过 ID �q�行搜烦不会随着��面变大而变慢�?/p>
前面�q�行�?jQuery 性能��试�l�果支持�q�一数据。让我们查看每个��试�Q�看看需要注�?jQuery 代码的什么地斏V��在�q�个例子中，分别看看通过 ID �?CLASS �q�行搜烦时的��试�l�果�Q�图 5�Q��?/p>
�?5. ID 搜烦�?CLASS 搜烦�Ҏ��

�q? 些测试是不同的，但它们得出的数据表明通过 ID �q�行搜烦比通过 CLASS �q�行搜烦快得多。这如何影响�?jQuery 代码�Q�在�~�写搜烦�Ӟ��您要��C��q�些技巧：如果既可选择 CLASS 又可选择 ID�Q�那么通常要选择 ID。如果需要在您的代码中搜索某些元素，一定要�l�它们分�?ID�?/p>
清单 1 昄��了一个实际的 jQuery ��试�Q�您可以在您的机器上�q�行它对此进行验证：

清单 1. CLASS �?ID

1 $(document).ready(function() {
2
3   console.info("Start Test");
4   var d = new Date();
5   console.info(d.getSeconds() + " " + d.getMilliseconds());
6
7   var testBody = "";
8   for (var i=0; i<1000; i++)
9   {
10      testBody += ""+i+"'>";
11   }
12   $("body").append(testBody);
13   for (var i=0; i<1000; i++)
14   {
15     $(".testable"+i);
16   }
17
18   var d = new Date();
19   console.info(d.getSeconds() + " " + d.getMilliseconds());
20   console.time("Start ID Test");
21
22   testBody = "";
23   for (var i=0; i<1000; i++)
24   {
25     testBody += ""+i+"'>";
26   }
27   $("body").append(testBody);
28   for (var i=0; i<1000; i++)
29   {
30     $("#testable"+i);
31   }
32   var d = new Date();
33   console.info(d.getSeconds() + " " + d.getMilliseconds());
34   console.info("End Test");
35   });

ID ��试耗时 218 毫秒�Q��?CLASS ��试耗时 19.9 �U�！甚至在专门�ؓ该测试构建的��单页面上�Q�ID 搜烦也要�?CLASS 搜烦�?100 倍！

技�?#2 - 提供��可能多的搜索信�?/strong>
jQuery 提供如此多的��面元素搜烦�Ҏ��Q�有时您难以指出哪种�Ҏ��是最好的。有一条经验是不会错的�Q�即为搜索参数提供尽可能多的信息。因此，假如您正在搜索带�?“clickable” CLASS 的所有页面元素，如果您提前知道仅�?DIV 附带�?CLASS�Q�那么就能提高搜索性能。所以，搜烦 “div.clickable” 会更加快。图 6 昄��了支持该技巧的�l�果�?/p>
�?6. ��可能多地提供信�?/strong>

考虑到底�?JavaScript 代码之后�Q�这��׃��ؓ奇了。通过提供元素标记�Q�与 CLASS 参数匚w��的搜索元素数量将大大减少�Q�从而将搜烦性能提升至与本例中的 ID 搜烦相当�?

开发�h员在�~�写 jQuery 选择�Ҏ��时不能偷懒，��管 jQuery 的简单让��Z�生偷懒的�Ʋ望。简单让您放松了警惕。搜索机制变得如此简单，让我们們֐�于仅输入一条信息。然而，您应该��L��可能多地输入信息，��其是已知信息。清�?2 昄��了一个很好的例子�?

清单 2. 提供充��的信�?br />

1 // Assume there are 50 of these in some giant form, and you need to validate
2 // these fields before they are submitted, and there are hundreds of other
3 // elements on the page as well
4 <input type=text class="notBlank">
5
6 // the "bad" way to validate these fields
7 $(".notBlank").each(function(){
8    if ($(this).val()=="")
9       $(this).addClass("error");
10 });
11
12 // the "good" way to validate these fields
13 $("input.notBlank").each(function(){
14    if ($(this).val()=="")
15       $(this).addClass("error");
16 });
17
18 // the "best" way to validate these fields
19 $("input:text.notBlank").each(function(){
20    if ($(this).val()=="")
21       $(this).addClass("error");
22       });

技�?#3 - �~�存选择�?/strong>
最后一个性能技巧利用了几乎所�?jQuery 选择器都�q�回 jQuery 对象�q�个�Ҏ��。这意味着在理想的情况下，您仅需要运行选择器一�ơ，�q�且能够��L��地将所有函数连接在一��P��或缓存结果供以后使用。您也不要担心缓存，因�ؓ�? ��M��可用内存相比�Q�返回的对象是很��的�?

清单 3 �l�出了一些关于如何利用缓存的例子�?/p>
清单 3. �~�存

1 // Imagine a function that hides all the div's with a class of "hideable"
2 // when a button is pressed.  These DIV's might reappear later when
3 // working with the page,  so the button can be pressed any number of
4 // times, and the DIV's that have reappeared
5 // will again be made to be hidden.
6
7 $("#ourHideButton").click(function(){
8    $(".hideable").hide();
9 });
10
11 // As you saw in the CLASS versus ID example, though, a search for
12 // CLASS is very inefficient
13 // If this button is pressed often, it could lead to a slow response
14 // Instead of the above example, you should write your code like this
15
16 var hideable;
17
18 $("#ourHideButton").click(function(){
19    if (hideable)
20        hideable.hide();
21    else
22        hideable = $(".hideable").hide();
23 });
24
25 // You can cache your search in a JavaScript variable and reuse it every time
26 // the button is pressed.  Because jQuery almost always returns the
27 // jQuery object, you can save it the first time it is called for future use
28

在我的最后一个关于性能的示例代码中�Q�将查看我在本系列的�W�一��文章中提到的小部�g�Q�见参考资�?/a>�Q�。这个小部�g是在表的左上角上的复选框�Q�它允许您选择或取消选择该列上的所有复选框。这个小部�g在电子邮件应用程序中非常常见�Q�用于选择或取消选择所有消息�?

清单 4. 性能改进

1 // Here is the code as I originally presented it in that article.  Let's see
2 // if we can improve the performance in any way from the things we learned here
3
4 function selectAll()
5 {
6     var checked = $("#selectall").attr("checked");
7     $(".selectable").each(function(){
8        var subChecked = $(this).attr("checked");
9        if (subChecked != checked)
10              $(this).click();
11     });
12 }
13
14 // Here's the improved function.  The search for the ID of "selectall" is
15 // OK as-is, because we saw how fast the ID search is.
16 // The search for the CLASS of "selectable" was not well-designed though,
17 // because we saw a search by CLASS is very inefficient.
18 // First step was improving the search by supplying as much information as we know.
19 // We narrowed the search to only checkboxes with the CLASS of selectable.
20 // This should improve our search
21 // Further, we can cache this search because we will only need to perform it once
22 // Finally, we can perform this search before the selectall checkbox is even
23 // checked (when the page is finished loading), so that the search is completed
24 // and cached before the user even uses it.
25 // These 3 simple performance steps gave me a 200% increase in speed when tested
26 // on a page with 200 rows of data.
27
28 var selectable = $(":checkbox.selectable");
29 function selectAll()
30 {
31     var checked = $("#selectall").attr("checked");
32     selectable.each(function(){
33        var subChecked = $(this).attr("checked");
34        if (subChecked != checked)
35              $(this).click();
36     });
37 }
38

关于性能的要�?/span>

�? �?JavaScript �Ӟ��速度和性能�l�对不是��问题。在现实中，创徏 jQuery 的开发�h员和处理��览器内�|?JavaScript 引擎的开发�h员都非常��x��性能问题。事实上�Q�在最�q?6 个月以来�Q�浏览器开发的最重要问题��是 JavaScript 引擎的速度。浏览器开发者都致力于在下一�q�迅速提�?JavaScript 的执行性能�Q�从而大大提�?jQuery 代码�?JavaScript 引擎的速度。来自这�?“速度之战” 的消息表明，提升 JavaScript 性能是大势所��。领�?jQuery ��目�?John Resig 一直都在谈��Z��的最�?“Sizzle” 选择引擎。他从头�~�写了一个选择引擎�Q��ƈ声称初步�l�果表明它比 Firefox 要快 4 倍。这是巨大的速度提升�Q�在我撰写本文的最后部分时�Q�jQuery 1.3 已经发布�Q��ƈ且包含了 Sizzle 选择引擎。jQuery 声称�Q�在所有浏览器上运行的��M��l�果表明选择引擎�?1.3 版本�?1.2.6 版本的快 49%。此外，1.3 发布版在 HTML 注入�Q�向 DOM ��d��新的元素�Q�上改进�?6 倍，在函数定位上改进�?3 倍。在我完成本文时�Q�很多�h都更新到了最新的 jQuery 发布版，�q�是非常令�h�Ȁ动的�Q?/p>
影响 JavaScript 性能的另一个因素是��览器，如前所�q�ͼ�它的影响是所选的库的 9 倍。Firefox �?Chrome �?“最�?JavaScript 引擎” 之战中各有胜负，�?Safari 的参与让竞争更加�Ȁ烈。从我们上面的测试中�Q�可以看�?Chrome �?JavaScript 引擎性能斚w��q�远��过 Firefox�Q�但�? Firefox 3.1 ��包含新�?Tracemonkey JavaScript 引擎�Q�届时其速度��比当前�?JavaScript 引擎 3.0 �?20 �?40 倍（�q�是他们声称的，不是我的观点�Q�，真不可思议�Q?

在未来一两年内，您将看到底层 JavaScript 引擎�?JavaScript 库的速度得到巨大改进�Q�从而导致��?JavaScript �?Web 应用�E�序��变得更加复杂�?/p>
�? 果您正在军_��是��?JavaScript 库还是自��q��?JavaScript�Q�那么需要考虑的另一件事情是处理和调�?JavaScript 库所需的全部工作。最�q�几�q�以来，有数百位用户一直在�l�护库中的每一个函数。您可能要忙到深夜，甚至�{�疲力尽地编写自��q��函数。您更相信谁呢？另外�Q�即�? 您能�~�写出比 jQuery 库更快的代码�Q�您是否惌��使用 jQuery 库能够获得更多的优势�Q�您是否��Z��辛苦地编写自��q��代码而放弃��用非�怾�利的 jQuery 及其函数库？自己�~�写代码不仅需要大量时��_��q�且�q�会产生更多 bug�Q�因此我�q�是��使用现成�?jQuery 库�?

我最后讨论的要点可能会让一些�h沮��Q�但是我们必��考虑�~�写�q�些 jQuery 库的�E�序员。他们当中的一些是最��的�Q��ƈ且他们编写的��优秀的代码（一般�h不能�~�写�q�样��的代码）都收入到�q�些库中。我承认自己�q�远不如�~�写 jQuery 库的�E�序员。因此，��Z��不利用他们的智慧�Q?

�l�束�?/span>

�? 文从��M��上讨��Z�� jQuery �?JavaScript 库的性能。通过寚w��择�Ҏ��q�行大量的测试，您看到这些库之间的速度存在巨大的差距，�q�且 jQuery 是最快的库之一。不�q�，即��您选择了最快的 JavaScript 库，�q�是不能解决 Web 应用�E�序的性能问题�Q�因为浏览器�Ҏ��能的媄响比库强 9 倍。如果您能够控制用户使用特定�?Web ��览器，那么��p��他们使用最快的��览器。找到能够最快地�q�行您的 Web 应用�E�序的浏览器�Q��ƈ让用户通过使用它从中受益。理��x��况下�Q�让最慢的 JavaScript ��览器消失意味着出现更快�?Web 应用�E�序�?/p>
我还提供了关�?jQuery 性能�?3 个技巧。尽��有好几个站炚w��提供了关�?jQuery 性能的技巧，但是�q?3 个技巧是最有效的�? 个技巧肯定比 50 个技巧容易记住，但其他技巧也是很好的�Q�我��在参考资�?/a> 部分指出另外一些技巧。不�q�，如果您在�~�写代码时记住了�q?3 个技巧，��会获得巨大的性能提升。应该永�q�记住的 3 �?jQuery 技巧是�Q�通过 ID 搜烦比通过 CLASS 搜烦�?100 倍，��可能多地提供搜索信息，以及��量�~�存选择�?/p>
最后，我们快速查看了 jQuery 和浏览器�?JavaScript 引擎卛_��推出的改�q�。在我撰写本文的�l�尾部分�Ӟ��jQuery 1.3 已经发布了，它承诺在选择和代码的其他斚w��实现跌��式性能改进。此外，Firefox �q�承诺它的下一�?JavaScript 引擎会快 20 �? 40 倍！�q�些�q�象表明�Q�在未来的一两年内，JavaScript 环境会在性能上取得重大突破。在不久的将来，复杂�?Web 应用�E�序会日益流行，因�ؓ快速运行这些程序的条�g已经成熟�?/p>
在本文结束时�Q�我们应该回�q�头来重新检验这句话 “jQuery 在简单的��面上无可挑剔，但在复杂的页面上性能极其低下。在解决性能问题之前�Q�您必须对复杂页面��用常规的 JavaScript�?#8221;�Ҏ��我的�l�验�Q�jQuery �?“性能问题” 一样出现在 “常规�?JavaScript” 中。事实上�Q�真正媄响性能的不�?jQuery �?JavaScript�Q�而是��览器。因此我同意�q�样的观点：使用设计不良�?jQuery 代码的复杂页面运行在 IE6 上时会导致糟�p�的性能。不�q�，我希望您已经了解我要阐述的思想�Q�只要拥有良好的 jQuery 代码、运�?3 个最重要的技巧�ƈ选择最快的��览器，那么即�ɘq�行最复杂的页面也不会出现明显的性能问题�?/p>

CONAN 2009-09-08 15:31 发表评论

CONAN — Wed, 09 Jul 2008 11:10:00 GMT

jQuery��实是一个挺好的轻量�U�的JS框架�Q�能帮助我们快速的开发JS应用�Q��ƈ在一定程度上改变了我们写JavaScript代码的习惯�?/p>
废话��说�Q�直接进入正题，我们先来看一些简单的�Ҏ��Q�这些方法都是对jQuery.ajax()�q�行��装以方便我们��用的�Ҏ��Q�当�Ӟ��如果要处理复杂的逻辑�Q�还是需要用到jQuery.ajax()�?�q�个后面会说�?.

1. load( url, [data], [callback] ) �Q�蝲入远�E?HTML 文�g代码�q�插入至 DOM 中�?/font>

url (String) : ��h��的HTML��늚�URL地址�?/p>
data (Map) : (可选参�? 发送至服务器的 key/value 数据�?/p>
callback (Callback) : (可选参�? ��h��完成�?不需要是success�?/font>)的回调函数�?/p>
�q�个�Ҏ��默认使用 GET 方式来传递的�Q�如果[data]参数有传递数据进去，��׃��自动转换为POST方式的。jQuery 1.2 中，可以指定选择�W�，来筛选蝲入的 HTML 文档�Q�DOM 中将仅插入筛选出�?HTML 代码。语法�Ş�?"url #some > selector"�?/p>
�q�个�Ҏ��可以很方便的动态加载一些HTML文�g�Q�例如表单�?/p>
�C�Z��代码�Q?/p>
$(".ajax.load").load("http://www.cnblogs.com/QLeelulu/archive/2008/03/30/1130270.html .post", function (responseText, textStatus, XMLHttpRequest){ this;//在这里this指向的是当前的DOM对象�Q�即$(".ajax.load")[0] //alert(responseText);//��h��q�回的内�?/span> //alert(textStatus);//��h��状态：success�Q�error //alert(XMLHttpRequest);//XMLHttpRequest对象 });

�q�里��显�C�结果�?/div>

注：不知道�ؓ什么URL写绝对�\径在FF下会出错�Q�知道的�ȝ��告诉下。下面的get()和post()�C�Z��使用的是�l�对路径�Q�所以在FF下你��会出错�q�不会看到返回结果�?font color="#ff00ff">�q�有get()和post()�C�Z��都是跨域调用的，发现传上来后没办法获取结果，所以把�q�行按钮��L��了�?/font>

2. jQuery.get( url, [data], [callback] )�Q��用GET方式来进行异步请�?/font>

参数�Q?/p>
url (String) : 发送请求的URL地址.

data (Map) : (可�? 要发送给服务器的数据�Q�以 Key/value 的键值对形式表示�Q�会做�ؓQueryString附加到请求URL中�?/p>
callback (Function) : (可�? 载入成功时回调函�?只有当Response的返回状态是success才是调用该方�?�?/p>

�q�是一个简单的 GET ��h��功能以取代复�?$.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函敎ͼ�请��?$.ajax。示例代码：

$.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){ //�q�回�?data 可以�?xmlDoc, jsonObj, html, text, �{�等. this; // 在这里this指向的是Ajax��h��的选项配置信息�Q�请参考下�?/span> alert(data); //alert(textStatus);//��h��状态：success�Q�error�{�等�? 当然�q�里捕捉不到error�Q�因为error的时候根本不会运行该回调函数 //alert(this); });

点击发送请求：

jQuery.get()回调函数里面�?this �Q�指向的是Ajax��h��的选项配置信息�Q?/p>

3. jQuery.post( url, [data], [callback], [type] ) �Q��用POST方式来进行异步请�?/font>

参数�Q?/p>
url (String) : 发送请求的URL地址.

data (Map) : (可�? 要发送给服务器的数据�Q�以 Key/value 的键值对形式表示�?/p>
callback (Function) : (可�? 载入成功时回调函�?只有当Response的返回状态是success才是调用该方�?�?/p>
type (String) : (可�?官方的说明是�Q�Type of data to be sent。其实应该�ؓ客户端请求的�c�d��(JSON,XML,�{�等)

�q�是一个简单的 POST ��h��功能以取代复�?$.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函敎ͼ�请��?$.ajax。示例代码：

Ajax.aspx�Q?/p>
Response.ContentType = "application/json"; Response.Write("{result: '" + Request["Name"] + ",你好�Q?�q�消息来自服务器)'}");

jQuery 代码�Q?

$.post("Ajax.aspx", { Action: "post", Name: "lulu" }, function (data, textStatus){ // data 可以�?xmlDoc, jsonObj, html, text, �{�等. //this; // �q�个Ajax��h��的选项配置信息�Q�请参考jQuery.get()说到的this alert(data.result); }, "json");

点击提交�Q?/p>
�q�里讄��了请求的格式�?json"�Q?/p>

如果你设�|�了��h��的格式�ؓ"json"�Q�此时你没有讄��Response回来的ContentType 为：Response.ContentType = "application/json"; 那么你将无法捕捉到返回的数据�?/p>
注意一下，alert(data.result); �׃��讄��了Accept报头�?#8220;json”�Q�这里返回的data��是一个对象，�q�不需要用eval()来�{换�ؓ对象�?/p>

4. jQuery.getScript( url, [callback] ) : 通过 GET 方式��h��载入�q�执行一�?JavaScript 文�g�?/font>

参数

url (String) : 待蝲�?JS 文�g地址�?/p>
callback (Function) : (可�? 成功载入后回调函数�?/p>

jQuery 1.2 版本之前�Q�getScript 只能调用同域 JS 文�g�?1.2中，您可以跨域调�?JavaScript 文�g。注意：Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本�Q�请加入延时函数�?/p>
�q�个�Ҏ��可以用在例如当只有编辑器focus()的时候才��d��载编辑器需要的JS文�g.下面看一些示例代码：

加蝲�q�执�?test.js�?

jQuery 代码:

$.getScript("test.js");

加蝲�q�执�?AjaxEvent.js �Q�成功后昄��信息�?/p>
jQuery 代码:

$.getScript("AjaxEvent.js", function(){ alert("AjaxEvent.js 加蝲完成�q�执行完�?你再点击上面的Get或Post按钮看看有什么不同？"); });

加蝲完后请重新点��M��下上面的 Load ��h��看看有什么不同�?/p>
jQuery Ajax 事�g

Ajax��h��会��生若�q�不同的事�g�Q�我们可以订阅这些事件�ƈ在其中处理我们的逻辑。在jQuery�q�里有两�U�Ajax事�g�Q�局部事�?�?全局事�g�?/p>
局部事�?/strong>��是在每�ơ的Ajax��h��时在�Ҏ��内定义的�Q�例如：

$.ajax({ beforeSend: function(){ // Handle the beforeSend event }, complete: function(){ // Handle the complete event } // ... });

全局事�g是每�ơ的Ajax��h��都会触发的，它会向DOM中的所有元素广播，在上�?getScript() �C�Z��中加载的脚本��是全局Ajax事�g。全局事�g可以如下定义�Q?/p>
$("#loading").bind("ajaxSend", function(){ $(this).show(); }).bind("ajaxComplete", function(){ $(this).hide(); });

或者：

$("#loading").ajaxStart(function(){ $(this).show(); });

我们可以在特定的��h��全局事�g��用�Q�只要设�|�下 global 选项��可以了�Q?/p>
$.ajax({ url: "test.html", global: false,// ��用全局Ajax事�g. // ... });

下面是jQuery官方�l�出的完整的Ajax事�g列表�Q?/p>
ajaxStart (Global Event) This event is broadcast if an Ajax request is started and no other Ajax requests are currently running.

beforeSend (Local Event) This event, which is triggered before an Ajax request is started, allows you to modify the XMLHttpRequest object (setting additional headers, if need be.)
ajaxSend (Global Event) This global event is also triggered before the request is run.
success (Local Event) This event is only called if the request was successful (no errors from the server, no errors with the data).
ajaxSuccess (Global Event) This event is also only called if the request was successful.
error (Local Event) This event is only called if an error occurred with the request (you can never have both an error and a success callback with a request).
ajaxError (Global Event) This global event behaves the same as the local error event.
complete (Local Event) This event is called regardless of if the request was successful, or not. You will always receive a complete callback, even for synchronous requests.
ajaxComplete (Global Event) This event behaves the same as the complete event and will be triggered every time an Ajax request finishes.

ajaxStop (Global Event) This global event is triggered if there are no more Ajax requests being processed.
具体的全局事�g请参考API文档。好了，下面开始说jQuery里面功能最强的Ajax��h��Ҏ�� $.ajax();

jQuery.ajax( options ) : 通过 HTTP ��h��加蝲�q�程数据

�q�个是jQuery 的底�?AJAX 实现。简单易用的高层实现�?$.get, $.post �{��?/p>
$.ajax() �q�回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象，但特�D�情况下可用于手动终止请求�?/p>
注意�Q?/strong> 如果你指定了 dataType 选项�Q�请��保服务器返回正��的 MIME 信息�Q?�?xml �q�回 "text/xml")。错误的 MIME �c�d��可能��D��不可预知的错误。见 Specifying the Data Type for AJAX Requests 。当讄�� datatype �c�d��?'script' 的时候，所有的�q�程(不在同一个域�?POST��h��都回转换为GET方式�?/p>
$.ajax() 只有一个参敎ͼ�参数 key/value 对象�Q�包含各配置及回调函��C��息。详�l�参数选项见下�?/p>
jQuery 1.2 中，您可以跨域加�?JSON 数据�Q��用时需��数据类型设�|��ؓ JSONP。��?JSONP 形式调用函数�Ӟ��?"myurl?callback=?" jQuery ��自动替�?? 为正��的函数名，以执行回调函数。数据类型设�|��ؓ "jsonp" �Ӟ��jQuery ��自动调用回调函数�?�q�个我不是很�?

参数列表�Q?/p>

参数�?/font> �c�d�� 描述

url String (默认: 当前��地址) 发送请求的地址�?/td>

type String (默认: "GET") ��h��方式 ("POST" �?"GET")�Q?默认�?"GET"。注意：其它 HTTP ��h��Ҏ��Q�如 PUT �?DELETE 也可以��用，但仅部分��览器支持�?/td>

timeout Number 讄��h��时旉��Q�毫�U�）。此讄��覆盖全局讄��?/td>

async Boolean (默认: true) 默认讄��下，所有请求均为异步请求。如果需要发送同步请求，请将此选项讄��?false。注意，同步��h��锁住浏览器�Q�用户其它操作必��ȝ��待请求完成才可以执行�?/td>

beforeSend Function 发送请求前可修�?XMLHttpRequest 对象的函敎ͼ�如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数�?
function (XMLHttpRequest) { this; // the options for this ajax request }

cache Boolean (默认: true) jQuery 1.2 新功能，讄��?false ��不会从��览器缓存中加蝲��h��信息�?/td>

complete Function ��h��完成后回调函�?(��h��成功或失败时均调�?。参敎ͼ� XMLHttpRequest 对象�Q�成功信息字�W�串�?
function (XMLHttpRequest, textStatus) { this; // the options for this ajax request }

contentType String (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容�~�码�c�d��。默认值适合大多数应用场合�?/td>

data Object, String 发送到服务器的数据。将自动转换��求字�W�串格式。GET ��h��中将附加�?URL 后。查�?processData 选项说明以禁止此自动转换。必��Mؓ Key/Value 格式。如果�ؓ数组�Q�jQuery ��自动�ؓ不同值对应同一个名�U�。如 {foo:["bar1", "bar2"]} 转换�?'&foo=bar1&foo=bar2'�?/td>

dataType String
预期服务器返回的数据�c�d��。如果不指定�Q�jQuery ��自动根�?HTTP �?MIME 信息�q�回 responseXML �?responseText�Q��ƈ作�ؓ回调函数参数传递，可用�?

"xml": �q�回 XML 文档�Q�可�?jQuery 处理�?/p>
"html": �q�回�U�文�?HTML 信息�Q�包�?script 元素�?/p>
"script": �q�回�U�文�?JavaScript 代码。不会自动缓存结果�?/p>
"json": �q�回 JSON 数据 �?/p>
"jsonp": JSONP 格式。��?JSONP 形式调用函数�Ӟ��?"myurl?callback=?" jQuery ��自动替�?? 为正��的函数名，以执行回调函数�?/p>

error Function (默认: 自动判断 (xml �?html)) ��h��p�|时将调用此方法。这个方法有三个参数�Q�XMLHttpRequest 对象�Q�错误信息，�Q�可能）捕获的错误对象�?
function (XMLHttpRequest, textStatus, errorThrown) { // 通常情况下textStatus和errorThown只有其中一个有�? this; // the options for this ajax request }

global Boolean (默认: true) 是否触发全局 AJAX 事�g。设�|��ؓ false ��不会触发全局 AJAX 事�g�Q�如 ajaxStart �?ajaxStop 。可用于控制不同的Ajax事�g

ifModified Boolean (默认: false) 仅在服务器数据改变时获取新数据。��?HTTP �?Last-Modified 头信息判断�?/td>

processData Boolean (默认: true) 默认情况下，发送的数据��被转换为对�?技术上讲�ƈ非字�W�串) 以配合默认内容类�?"application/x-www-form-urlencoded"。如果要发�?DOM 树信息或其它不希望�{换的信息�Q�请讄��?false�?/td>

success Function ��h��成功后回调函数。这个方法有两个参数�Q�服务器�q�回数据�Q�返回状�?
function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request }

�q�里有几个Ajax事�g参数�Q?strong>beforeSend �Q?strong>success �Q?strong>complete �Q�error �?/strong>我们可以定义�q�些事�g来很好的处理我们的每一�ơ的Ajax��h��。注意一下，�q�些Ajax事�g里面�?this 都是指向Ajax��h��的选项信息�?请参考说 get() �Ҏ��时的this的图�?。请认真阅读上面的参数列表，如果你要用jQuery来进行Ajax开发，那么�q�些参数你都必需熟知的�?/p>
�C�Z��代码�Q�获取博客园首页的文章题目：

$.ajax({ type: "get", url: "http://www.cnblogs.com/rss", beforeSend: function(XMLHttpRequest){ //ShowLoading(); }, success: function(data, textStatus){ $(".ajax.ajaxResult").html(""); $("item",data).each(function(i, domEle){ $(".ajax.ajaxResult").append("
"+$(domEle).children("title").text()+"
"); }); }, complete: function(XMLHttpRequest, textStatus){ //HideLoading(); }, error: function(){ //��h��出错处理 } });

�q�里��显�C�首��|��章列表�?/p>

其他

jQuery.ajaxSetup( options ) : 讄��全局 AJAX 默认选项�?/font>

讄�� AJAX ��h��默认地址�?"/xmlhttp/"�Q�禁止触发全局 AJAX 事�g�Q�用 POST 代替默认 GET �Ҏ��。其后的 AJAX ��h��不再讄��M��选项参数�?/p>
jQuery 代码:

$.ajaxSetup({ url: "/xmlhttp/", global: false, type: "POST" }); $.ajax({ data: myData });

serialize() �?serializeArray()

serialize() : 序列表表格内容�ؓ字符丌Ӏ?/p>
serializeArray() : 序列化表格元�?(�c�M�� '.serialize()' �Ҏ��) �q�回 JSON 数据�l�构数据�?/p>
�C�Z��Q?/p>
HTML代码�Q?/p>
<p id="results"><b>Results: b> p> <form> <select name="single"> <option>Singleoption> <option>Single2option> select> <select name="multiple" multiple="multiple"> <option selected="selected">Multipleoption> <option>Multiple2option> <option selected="selected">Multiple3option> select><br/> <input type="checkbox" name="check" value="check1"/> check1 <input type="checkbox" name="check" value="check2" checked="checked"/> check2 <input type="radio" name="radio" value="radio1" checked="checked"/> radio1 <input type="radio" name="radio" value="radio2"/> radio2 form>

serializeArray() �l�果为：

一些资�?/font>

一个jQuery的Ajax Form表单插�g�Q?a style="background-color: rgb(255,255,245)" fade="329209619" jquery1209889101078="27">http://www.malsup.com/jquery/form/

一个专门生成Loading囄��的站点：http://ajaxload.info/   大家觉得那些Loading比较炫的可以在这里跟帖晒一下，方便大家取用�Q�嘎�?/p>

CONAN 2008-07-09 19:10 发表评论

jquery和prototype冲突解决

CONAN — Sun, 06 Jul 2008 07:04:00 GMT

问题背景: 想用 jQuery �?AJAX 处理, 用基�?Prototype �?EasyValidation 做表单验�? 但是二者不能共�? 因�ؓ都用了同一个方法名: $().
解决:
jquery和prototype冲突解决, �|�上��传的一��文�?我这里测试结果是错误�? http://ajaxbbs.net/blog/post/71/
另一�U�方式是:

参�? http://www.d5s.cn/archives/6, 但我�q�里��试也有问题!
本�h��试通过的方�?
1、将jquery.js攑ֈ�prototype.js前面�Q�这个是必须�?�Q��?br /> 2、在jquery.js后面��?变量重命名�?br /> �Ҏ��如下�Q?






     *密码:

    *密码(重复):





CONAN 2008-07-06 15:04 发表评论

jQuery应用(�?--jQuery技巧�ȝ��

CONAN — Fri, 20 Jun 2008 15:00:00 GMT
语法�ȝ��和注意事��?/strong>
1、关于页面元素的引用

通过jquery�?()引用元素包括通过id、class、元素名以及元素的层�U�关�p�d��dom或者xpath条�g�{�方法，且返回的对象为jquery对象�Q�集合对象）�Q�不能直接调用dom定义的方法�?/p>
2、jQuery对象与dom对象的�{�?/strong>

只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用�Ҏ��时要注意操作的是dom对象�q�是jquery对象�?br /> 普通的dom对象一般可以通过$()转换成jquery对象�?br /> 如：$(document.getElementById("msg"))则�ؓjquery对象�Q�可以��用jquery的方法�?br /> �׃��jquery对象本��n是一个集合。所以如果jquery对象要�{换�ؓdom对象则必��d��出其中的某一��，一般可通过索引取出�?br /> 如：$("#msg")[0]�Q?("div").eq(1)[0]�Q?("div").get()[1]�Q?("td")[5]�q�些都是dom对象�Q�可以��用dom中的�Ҏ��Q�但不能再��用Jquery的方法�?br /> 以下几种写法都是正确的：

$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;

3、如何获取jQuery集合的某一��?/strong>

对于获取的元素集合，获取其中的某一��（通过索引指定�Q�可以��用eq或get(n)�Ҏ��或者烦引号获取�Q�要注意�Q�eq�q�回的是jquery对象�Q�而get(n)和烦引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取�W�三�?lt;div>元素的内宏V��有如下两种�Ҏ��Q?/p>
$("div").eq(2).html();              //调用jquery对象的方�?br /> $("div").get(2).innerHTML;       //调用dom的方法属�?/span>

4、同一函数实现set和get

Jquery中的很多�Ҏ��都是如此�Q�主要包括如下几个：

$("#msg").html();              //�q�回id为msg的元素节点的html内容�?br /> $("#msg").html("new content");
//��?#8220;new content” 作�ؓhtml串写入id为msg的元素节点内容中,��面昄��_�体的new content

$("#msg").text();              //�q�回id为msg的元素节点的文本内容�?br /> $("#msg").text("new content");
//��?#8220;new content” 作�ؓ普通文本串写入id为msg的元素节点内容中,��面昄��new content

$("#msg").height();              //�q�回id为msg的元素的高度
$("#msg").height("300");       //��id为msg的元素的高度设�ؓ300
$("#msg").width();              //�q�回id为msg的元素的宽度
$("#msg").width("300");       //��id为msg的元素的宽度设�ؓ300

$("input").val(");       //�q�回表单输入框的value�?br /> $("input").val("test");       //��表单输入框的value��D��为test

$("#msg").click();       //触发id为msg的元素的单击事�g
$("#msg").click(fn);       //为id为msg的元素单��M��件添加函�?/p>

同样blur,focus,select,submit事�g都可以有�q�两�U�调用方�?/p>
5、集合处理功�?/strong>

对于jquery�q�回的集合内�Ҏ��需我们自己循环遍历�q�对每个对象分别做处理，jquery已经为我们提供的很方便的�Ҏ��q�行集合的处理�?br /> 包括两种形式�Q?/p>

6、扩展我们需要的功能

$.extend({
       min: function(a, b){return a < b?a:b; },
       max: function(a, b){return a > b?a:b; }
});       //为jquery扩展了min,max两个�Ҏ��

使用扩展的方法（通过“$.�Ҏ��?#8221;调用�Q�：

alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));

7、支持方法的�q�写
所谓连写，卛_��以对一个jquery对象�q�箋调用各种不同的方法�?/p>
例如�Q?/p>
$("p").click(function(){alert($(this).html())})
.mouseover(function(){alert('mouse over event')})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][i]});

8、操作元素的样式

主要包括以下几种方式�Q?/p>
$("#msg").css("background");              //�q�回元素的背景颜�?br /> $("#msg").css("background","#ccc")       //讑֮�元素背景为灰�?br /> $("#msg").height(300); $("#msg").width("200");       //讑֮�宽高
$("#msg").css({ color: "red", background: "blue" });//以名值对的�Ş式设定样�?br /> $("#msg").addClass("select");       //为元素增加名�U�Cؓselect的class
$("#msg").removeClass("select");       //删除元素名称为select的class
$("#msg").toggleClass("select");       //如果存在�Q�不存在�Q�就删除�Q�添加）名称为select的class

9、完善的事�g处理功能

Jquery已经为我们提供了各种事�g处理�Ҏ��Q�我们无需在html元素上直接写事�g�Q�而可以直接�ؓ通过jquery获取的对象添加事件�?br /> 如：
$("#msg").click(function(){alert("good")})    //为元素添加了单击事�g
$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]})   //��Z��个不同的p元素单击事�g分别讑֮�不同的处�?/span>

jQuery中几个自定义的事�Ӟ��

�Q?�Q�hover(fn1,fn2)�Q�一个模仿悬停事�Ӟ��鼠标�U�d��C��个对象上面及�U�d��q�个对象�Q�的�Ҏ��。当鼠标�U�d��C��个匹配的元素上面�Ӟ��会触发指定的�W�一个函数。当鼠标�U�d��q�个元素�Ӟ��会触发指定的�W�二个函数�?/p>
//当鼠标放在表格的某行上时��class�|��ؓover�Q�离开时置为out�?br /> $("tr").hover(function(){
$(this).addClass("over");
},
       function(){
       $(this).addClass("out");
});

�Q?�Q�ready(fn):当DOM载入��q�A可以查询及操�U�|��l�定一个要执行的函数�?/p>
$(document).ready(function(){alert("Load Success")})
//��面加蝲完毕提示“Load Success”,不同于onload事�g�Q�onload需要页面内容加载完毕（囄��{�）�Q�而ready只要��面html代码下蝲完毕卌��发。与$(fn)�{��h

�Q?�Q�toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点��M��一个匹配的元素�Q�则触发指定的第一个函敎ͼ�当再�ơ点��d��一元素�Ӟ��则触发指定的�W�二个函数。随后的每次点击都重复对�q�两个函数的轮番调用�?/p>
       //每次点击时轮换添加和删除名�ؓselected的class�?br />        $("p").toggle(function(){
              $(this).addClass("selected");
       },function(){
              $(this).removeClass("selected");
       });

�Q?�Q�trigger(eventtype): 在每一个匹配的元素上触发某�c�M��件�?br /> 例如�Q?br />        $("p").trigger("click");       //触发所有p元素的click事�g

�Q?�Q�bind(eventtype,fn)�Q�unbind(eventtype): 事�g的绑定与反绑�?br /> 从每一个匹配的元素中（��d��Q�删除绑定的事�g�?br /> 例如�Q?br /> $("p").bind("click", function(){alert($(this).text());});
//为每个p元素��d��单击事�g
$("p").unbind();       //删除所有p元素上的所有事�?br /> $("p").unbind("click")       //删除所有p元素上的单击事�g

10、几个实用特效功�?/strong>

其中toggle()和slidetoggle()�Ҏ��提供了状态切换功能�?br /> 如toggle()�Ҏ��包括了hide()和show()�Ҏ��?br /> slideToggle()�Ҏ��包括了slideDown()和slideUp�Ҏ��?/p>
11、几个有用的jQuery�Ҏ��

$.browser.��览器类型：��浏览器�c�d��。有效参敎ͼ�safari, opera, msie, mozilla。如��是否ie�Q?.browser.isie�Q�是ie��览器则�q�回true�?br /> $.each(obj, fn)�Q�通用的�P代函数。可用于�q�似地�P代对象和数组�Q�代替��@环）�?br /> �?br /> $.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });

�{��h于：
var tempArr=[0,1,2];
for(var i=0;i        alert("Item #"+i+": "+tempArr[i]);
}

也可以处理json数据�Q�如
$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });

�l�果为：
Name:name, Value:John
Name:lang, Value:JS
$.extend(target,prop1,propN)�Q�用一个或多个其他对象来扩展一个对象，�q�回�q�个被扩展的对象。这是jquery实现的��承方式�?br /> 如：
$.extend(settings, options);
//合�ƈsettings和options�Q��ƈ��合�q�结果返回settings中，相当于options�l�承setting�q�将�l�承�l�果保存在setting中�?br /> var settings = $.extend({}, defaults, options);
//合�ƈdefaults和options�Q��ƈ��合�q�结果返回到setting中而不覆盖default内容�?br /> 可以有多个参敎ͼ�合�ƈ多项�q�返回）

$.map(array, fn)�Q�数�l�映��。把一个数�l�中的项�?处理转换�?保存到到另一个新数组中，�q�返回生成的新数�l��?br /> 如：
var tempArr=$.map( [0,1,2], function(i){ return i + 4; });
tempArr内容为：[4,5,6]
var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
tempArr内容为：[2,3]
$.merge(arr1,arr2):合�ƈ两个数组�q�删除其中重复的��目�?br /> 如：
$.merge( [0,1,2], [2,3,4] )       //�q�回[0,1,2,3,4]

$.trim(str)�Q�删除字�W�串两端的空白字�W��?
如：
$.trim(" hello, how are you?   ");    //�q�回"hello,how are you? "

12、解册��定义�Ҏ��或其他类库与jQuery的冲�H?/strong>

很多时候我们自己定义了$(id)�Ҏ��来获取一个元素，或者其他的一些js�c�d��如prototype也都定义�?�Ҏ��Q�如果同时把�q�些内容攑֜�一起就会引起变量方法定义冲�H�，Jquery�Ҏ��专门提供了方法用于解��x��问题�?br /> 使用jquery中的jQuery.noConflict();�Ҏ��卛_��把变�?的控制权让渡�l�第一个实现它的那个库或之前自定义�?�Ҏ��。之后应用Jquery的时候只要将所有的$换成jQuery卛_��Q�如原来引用对象�Ҏ��$("#msg")改�ؓjQuery("#msg")�?br /> 如：

jQuery.noConflict();
// 开始��用jQuery
jQuery("div   p").hide();
// 使用其他库的 $()
$("content").style.display = 'none';

$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
//为烦引分别�ؓ0�Q?�Q?的p元素分别讑֮�不同的字体颜艌Ӏ?/p>
$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//实现表格的隔行换色效�?/p>
$("p").click(function(){alert($(this).html())})
//为每个p元素增加了click事�g�Q�单��L��个p元素则弹出其内容

CONAN 2008-06-20 23:00 发表评论

jQuery应用(�?--jQuery让Ajax变得异常��?

CONAN — Fri, 20 Jun 2008 14:59:00 GMT

jQuery让Ajax变得异常��?/p>
使用jQuery,Ajax恐怕不能变得再��单了. jQuery有一�p�d��的函�?可以使简单的事情变得真正��?让复杂的事情也能变得��可�?br /> 的简�?

Ajax的一个一般用法就是加载一�D�html代码到页面上的某一区域. 要实现这�?你只要简单的选中�q�个元素,然后使用load()函数.
下面是个例子,用来更新一些统计信�?

$('#stats').load('stats.html');通常,你可能需要向服务器端的页面传递一些参�? 你可能猜��C��, 使用jQuery来实现的话会十分��?你可以选择使用$.post()或�?.get(), 当然要根据你的具体需�? 如果需�? 你可以传递一个可选的数据对象和一个回调函�?Listing4是一个发送数据以及��用回调函数的��单例�?

[url=]Listing 4. Sending data to a page with Ajax[/url]

$.post('save.cgi', ...{
    text: 'my string',
    number: 23
}, function() ...{
    alert('Your data has been saved.');
});

如果你真的想要一些复杂的Ajax代码,那就是用$.ajax()函数. 你可以指定数据类型�ؓxml, html, script或者json, jQuery 会�ؓ你自动准备好�l�果一遍你的回调函数能够立即��用这些数�? 你还可以讑֮� beforeSend,                        error, success, 以及                        complete 回调函数来给用户一些ajax体验的更多提�C�Z��? 另外,�q�有一些参�?可以让你讄��ajax��h��的超时时�?或者一个页面的"最后更�?状�? Listing5展示了一个获取xml文档�q��用我上面提到的一些参数的��单例�?

[url=]Listing 5. Complex Ajax made simple with $.ajax()[/url]

$.ajax(...{
    url: 'document.xml',
    type: 'GET',
    dataType: 'xml',
    timeout: 1000,
    error: function()...{
        alert('Error loading XML document');
    },
    success: function(xml)...{
        // do something with xml
    }
});

当你成功的获得xml反馈的时�? 你可以��用jQuery来遍历xml文档,��像你操作html的方式一�?�q��操作一个xml文�g以及整合内容到页面上变得十分的简�? Listing6 扩展了success函数,�Ҏ��xml文档里的每个在页面上增加一个了list(列表)条目.

[url=]Listing 6. Working with XML using jQuery[/url]

success: function(xml)...{
    $(xml).find('item').each(function()...{
        var item_text = $(this).text();

        $('
')
            .html(item_text)
            .appendTo('ol');
    });
}

CONAN 2008-06-20 22:59 发表评论

jQuery应用(一)--基本操作

CONAN — Fri, 20 Jun 2008 14:59:00 GMT

前言�Q?/strong>

      jQuery是一个不错的javascript产品�Q�我曄��x�ȝ��一些javascript的一些常用功能，以备自己调用�Q�然而看了jQuery�Q�发��C��做的太强了，不得不向他学习�?#8220;永远学习��?#8221;�Q�但是也告诫自己�Q�不要被它们�l�住了双手，否则你的创造性就会被扼杀�Q�我��当工具��用，不必死计其语法，否则自己��?#8220;�?#8221;了。我希望有更多有创造性的产品出现�?/p>
      获取jQuery最新版本：http://jquery.com/src/

一、基本操作：

1、当文档�Q�dom�Q�加载完毕后�Q�立��x��行内容：

$(document).ready(function() ...{
    // do stuff when DOM is ready
});

2、�ؓ所有的A标记��d��一个事件�?�Q�）当然也可以是其它的，��L��发挥吧�?/font>

$("a").click(function() ...{
        alert("Hello world!");
    });

3、��?font color="#ff6600">选择�?/font>�?font color="#ff6600">事�g
    jQuery中提供了两种�Ҏ��来选择HTML元素�Q�第一�U�是用CSS和Xpath选择器联合�v来�Ş成一个字�W�串来传送到jQuery的构造器�Q�如�Q?("div > ul a")�Q�；�W�二�U�是用jQuery对象的几个methods(�Ҏ��)。这两种方式�q�可以联合�v来�؜合��用�?/p>

//在一个菜单应用中�Q�将其子菜单中的A标记加样�?/span>
    $(document).ready(function() ...{

        $("#Menu ul a").hover(function()...{
            $(this).addClass("blue");
        },function()...{
            $(this).removeClass("blue");
        });

注：id选择�?号前�~��Q�其下��标记用空格隔开�?font color="#808080">�Q�）是不是很�Ҏ��?br />         hover为其事�g�Q�其它事件有click,mouseover,mouseout,change...�{�。可参�?http://visualjquery.com

4、用�q�些选择器和事�g你已�l�可以做很多的事情了�Q�但�q�里有一个更强的好东东！

$(document).ready(function() ...{
    $("#orderedlist").find("li").each(function(i) ...{
        $(this).html( $(this).html() + " BAM! " + i );
    });
});

注：find() 让你在已�l�选择的element中作条�g查找,因此 $("#orderedlist).find("li") ��像 $("#orderedlist li")一栗��each()�Ҏ��q�代了所有的li�Q��ƈ可以在此基础上作更多的处理�?大部分的�Ҏ��,如addClass(), 都可以用它们自己�?each() 。在�q�个例子�? html()用来获取每个li的html文本, �q�加一些文字，�q�将之设�|��ؓli的html文本�?/p>
5、不希望某些特定的元素被选择。jQuery 提供了filter() 和not() �Ҏ��来解册��个问�?/p>

$(document).ready(function() ...{
    $("li").not("[ul]").css("border", "1px solid black");
});

注：�q�个代码选择了所有的li元素�Q�然后去除了没有ul子元素的li元素。注意体会方便之极的css()�Ҏ��Q��ƈ再次提醒请务必实际测试观察效果，比方说换个CSS样式呢？再加一个CSS样式呢？像这��P��$("li").not("[ul]").css("border", "1px solid black").css("color","red")�?/p>
6、可以在子元素和属�?elements and attributes)上用作过滤器�Q�比如你可能想选择所有的带有name属性的链接:

$(document).ready(function() ...{
    $("a[@name]").background("#eee");
});

注：�q�个代码�l�所有带有name属性的链接加了一个背景色�?/p>
6.1常见的情冉|��以name来选择链接�Q�你可能需要选择一个有特点href属性的链接�Q�这在不同的��览器下对href的理解可能会不一��_��所以我们的部分匚w��("*=")的方式来代替完全匚w��("=")�Q?/p>

$(document).ready(function() ...{
    $("a[@href*=/content/gallery]").click(function() ...{
        // do something with all links that point somewhere to /content/gallery
    });
});

��示例，比如一个FAQ的页面，�{�案首先会隐藏，当问题点��L��Q�答案显�C�出来，jQuery代码如下�Q?/p>

$(document).ready(function() ...{
    $('#faq').find('dd').hide().end().find('dt').click(function() ...{
         var answer = $(this).next();
         if (answer.is(':visible')) ...{
             answer.slideUp();
         } else ...{
             answer.slideDown();
         }
     });
});

注：在点��M��件中的，我们�?$(this).next() 来找到dt下面紧接的一个dd元素�Q�这让我们可以快速地选择在被点击问题下面的答案�?/p>
7、除了选择同��别的元素外，你也可以选择父��的元素。可能你惛_��用户鼠标�U�d��文章某段的某个链接时�Q�它的父�U�元�?-也就是文章的�q�一�D늪�出显�C�，试试�q�个�Q?/p>

$(document).ready(function() ...{
    $("a").hover(function() ...{
        $(this).parents("p").addClass("highlight");
    }, function() ...{
        $(this).parents("p").removeClass("highlight");
    });
});

8、在我们�l�箋之前我们先来看看�q�一步： jQuery会让代码变得更短从而更�Ҏ��理解和维护，下面�?/p>

$(document).ready(callback)的羃写法�Q?br />
$(function() ...{
    // code to execute when the DOM is ready
});

应用到我们的Hello world例子中，可以�q�样:

$(function() ...{
    $("a").click(function() ...{
        alert("Hello world!");
    });
});

�Q�）是不是很�Ҏ��呀�Q�多亏了jQuery团队的努力呀�Q?/p>

CONAN 2008-06-20 22:59 发表评论

参数�?/font>	�c�d��	描述
url	String	(默认: 当前��地址) 发送请求的地址�?/td>
type	String	(默认: "GET") ��h��方式 ("POST" �?"GET")�Q?默认�?"GET"。注意：其它 HTTP ��h��Ҏ��Q�如 PUT �?DELETE 也可以��用，但仅部分��览器支持�?/td>
timeout	Number	讄��h��时旉��Q�毫�U�）。此讄��覆盖全局讄��?/td>
async	Boolean	(默认: true) 默认讄��下，所有请求均为异步请求。如果需要发送同步请求，请将此选项讄��?false。注意，同步��h��锁住浏览器�Q�用户其它操作必��ȝ��待请求完成才可以执行�?/td>
beforeSend	Function	发送请求前可修�?XMLHttpRequest 对象的函敎ͼ�如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数�? function (XMLHttpRequest) { this; // the options for this ajax request }
cache	Boolean	(默认: true) jQuery 1.2 新功能，讄��?false ��不会从��览器缓存中加蝲��h��信息�?/td>
complete	Function	��h��完成后回调函�?(��h��成功或失败时均调�?。参敎ͼ� XMLHttpRequest 对象�Q�成功信息字�W�串�? function (XMLHttpRequest, textStatus) { this; // the options for this ajax request }
contentType	String	(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容�~�码�c�d��。默认值适合大多数应用场合�?/td>
data	Object, String	发送到服务器的数据。将自动转换��求字�W�串格式。GET ��h��中将附加�?URL 后。查�?processData 选项说明以禁止此自动转换。必��Mؓ Key/Value 格式。如果�ؓ数组�Q�jQuery ��自动�ؓ不同值对应同一个名�U�。如 {foo:["bar1", "bar2"]} 转换�?'&foo=bar1&foo=bar2'�?/td>
dataType	String	预期服务器返回的数据�c�d��。如果不指定�Q�jQuery ��自动根�?HTTP �?MIME 信息�q�回 responseXML �?responseText�Q��ƈ作�ؓ回调函数参数传递，可用�? "xml": �q�回 XML 文档�Q�可�?jQuery 处理�?/p> "html": �q�回�U�文�?HTML 信息�Q�包�?script 元素�?/p> "script": �q�回�U�文�?JavaScript 代码。不会自动缓存结果�?/p> "json": �q�回 JSON 数据 �?/p> "jsonp": JSONP 格式。��?JSONP 形式调用函数�Ӟ��?"myurl?callback=?" jQuery ��自动替�?? 为正��的函数名，以执行回调函数�?/p>
error	Function	(默认: 自动判断 (xml �?html)) ��h��p�\|时将调用此方法。这个方法有三个参数�Q�XMLHttpRequest 对象�Q�错误信息，�Q�可能）捕获的错误对象�? function (XMLHttpRequest, textStatus, errorThrown) { // 通常情况下textStatus和errorThown只有其中一个有�? this; // the options for this ajax request }
global	Boolean	(默认: true) 是否触发全局 AJAX 事�g。设�\|��ؓ false ��不会触发全局 AJAX 事�g�Q�如 ajaxStart �?ajaxStop 。可用于控制不同的Ajax事�g
ifModified	Boolean	(默认: false) 仅在服务器数据改变时获取新数据。��?HTTP �?Last-Modified 头信息判断�?/td>
processData	Boolean	(默认: true) 默认情况下，发送的数据��被转换为对�?技术上讲�ƈ非字�W�串) 以配合默认内容类�?"application/x-www-form-urlencoded"。如果要发�?DOM 树信息或其它不希望�{换的信息�Q�请讄��?false�?/td>
success	Function	��h��成功后回调函数。这个方法有两个参数�Q�服务器�q�回数据�Q�返回状�? function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request }

久久99亚洲综合精品首页,亚洲黄色中文字幕,久久精品国产亚洲AV麻豆～

高�� jQuery

中�� jQuery

参数

�C�Z��代码�Q�获取博客园首页的文章题目：

jquery和prototype冲突解决

jQuery应用(�?--jQuery技巧�ȝ��

jQuery应用(�?--jQuery让Ajax变得异常����?

jQuery应用(一)--基本操作

jQuery应用(�?--jQuery让Ajax变得异常��?