<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>By Myself &#187; mootools</title>
	<atom:link href="http://www.warpdesign.fr/blog/tag/mootools/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.warpdesign.fr/blog</link>
	<description>All by Myself</description>
	<lastBuildDate>Sat, 21 Jan 2012 00:18:25 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>jQuery 1.3.1: toujours mieux&#8230;</title>
		<link>http://www.warpdesign.fr/blog/2009/01/28/jquery-131-toujours-mieux/</link>
		<comments>http://www.warpdesign.fr/blog/2009/01/28/jquery-131-toujours-mieux/#comments</comments>
		<pubDate>Wed, 28 Jan 2009 16:16:12 +0000</pubDate>
		<dc:creator>leo</dc:creator>
				<category><![CDATA[Techno]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[dom]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[jquery1.3]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[mootools]]></category>
		<category><![CDATA[nouveautes]]></category>
		<category><![CDATA[plugin]]></category>
		<category><![CDATA[prototype]]></category>
		<category><![CDATA[selector]]></category>
		<category><![CDATA[sizzle]]></category>

		<guid isPermaLink="false">http://www.warpdesign.fr/blog/?p=203</guid>
		<description><![CDATA[jQuery est passé en version 1.3 puis rapidement en version 1.3.1. Cette version apporte le lot habituel de changements (optimisations, nouvelles fonctionnalités, réécritures, etc&#8230;) mais aussi, et surtout, casse la compatibilité avec les versions précédentes. Comme je me suis cassé les dents dessus, sans le savoir, j&#8217;ai pensé qu&#8217;il serait bon de faire un petit [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.warpdesign.fr/blog/images/jquery.png" alt="jquery" style="float: left; margin-right: 10px;"><b>jQuery</b> est passé en version 1.3 puis rapidement en version 1.3.1. Cette version apporte le lot habituel de changements (optimisations, nouvelles fonctionnalités, réécritures, etc&#8230;) mais aussi, et surtout, casse la compatibilité avec les versions précédentes. Comme je me suis cassé les dents dessus, sans le savoir, j&#8217;ai pensé qu&#8217;il serait bon de faire un <b>petit tour de quelques unes des nouveautés et incompatibilités introduites dans cette version</b>&#8230;
</p>
<p><span id="more-203"></span></p>
<p>
<b>Nouveautés</b><br />
Comme à chaque version majeure (et on peut se demander comment ils font), les développeurs de ce framework ont de nouveau augmenté les performances de jQuery:<br />
<img src="http://www.warpdesign.fr/blog/images/jquery_chart.jpg" alt="performances de jquery" style="float:left;margin:16px auto;" /></p>
<ul style="clear:left;">
<li>Réécriture de l&#8217;injection HTML: <b>6x</b> plus rapide!</li>
<li>Utilisation d&#8217;un nouveau sélecteur, <b>plus rapide:</b> <i>sizzle</i></li>
<li>Ajout des live events dans le core de jQuery</li>
<li>Nouvel objet Event</li>
<li>Réécriture de la méthode offset(), beaucoup plus rapide</li>
<li>Et bien plus&#8230;</li>
</ul>
<p><b>Incompatibilités</b><br />
Malheureusement, certaines fonctionnalités dépréciées depuis un moment ont été retirées de cette version. Les modifications à effectuer pour rendre son code compatible sont plutôt mineures, quand on sait où chercher <img src='http://www.warpdesign.fr/blog/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /><br />
<br />
<b>1. suppression de @ dans [@attr]</b><br />
Le plus gros changement est la suppression de @. Une sélection comme:</p>
<pre>
<code>$<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'input[@name=toto]'</span><span style="color: #66cc66;">&#41;</span>...</code>
</pre>
<p>deviendra:</p>
<pre>
<code>$<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'input[name=toto]'</span><span style="color: #66cc66;">&#41;</span>...</code>
</pre>
<p>
<b>2. changements dans la méthode ready()</b><br />
Auparavant la méthode attendait le chargement de toutes les feuilles de styles. Comme ce n&#8217;est plus le cas, tous les fichiers CSS doivent être inclus avant les scripts dans la page.<br />
<br />
<b>3. Ordre des sélecteurs &laquo;&nbsp;a, b, c&nbsp;&raquo;</b><br />
L&#8217;ordre des sélecteurs peut varier. Les navigateurs supportant querySelectorAll (Safari, Firefox 3.1+, Opera 10+, IE8+) retourneront les éléments dans l&#8217;ordre du document alors que les autres navigateurs les retourneront (pour l&#8217;instant) dans l&#8217;ordre spécifié. Dans une prochaine version 1.3.x tous les sélecteurs séparés par des virgules seront retournés dans l&#8217;ordre du document.<br />
Concrètement, cela signifie que dans l&#8217;exemple suivant:<br />
<b>DOM</b></p>
<pre>
<code><span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div</span></a> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;c&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
	Div c
  <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span>
&nbsp;
  <span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div</span></a> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;b&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
	Div b
  <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span>
&nbsp;
  <span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div</span></a> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;a&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
	Div a
  <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span></code>
</pre>
<p>
<b>Code</b></p>
<pre>
<code>$<span style="color: #66cc66;">&#40;</span>document<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">ready</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>
<span style="color: #66cc66;">&#123;</span>
    $<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'#a, #b, #c'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">each</span><span style="color: #66cc66;">&#40;</span>
      <span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
         <span style="color: #000066;">alert</span><span style="color: #66cc66;">&#40;</span> $<span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">attr</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'id'</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#41;</span>; 
      <span style="color: #66cc66;">&#125;</span>
   <span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;</code>
</pre>
<p>Les navigateurs supportant querySelectorAll (cf. au dessus), renverront les éléments dans l&#8217;ordre du DOM, à savoir:</p>
<pre>
<code>c b a</code>
</pre>
<p>Alors que les autres renverront les éléments dans l&#8217;ordre spécifié dans le sélecteur, c&#8217;est à dire:</p>
<pre>
<code>a b c</code>
</pre>
<p>Attention à ne pas se baser sur cet ordre donc !<br />
<br />
<b>Nouveautés</b><br />
Cette nouvelle version de jQuery vient comme d&#8217;habitude avec son lot de nouveautés bien pratiques, parmi lesquelles:<br />
<br />
<b>1. nouvelle méthode closest( expr )</b><br />
Cette méthode renvoie le plus proche parent correspondant à l&#8217;expression, l&#8217;élément de départ compris. Exemple:<br />
<br />
<b>DOM</b></p>
<pre>
<code><span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div</span></a> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">&quot;superParent&quot;</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;main&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
     <span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div&gt;</span></a></span>
        <span style="color: #009900;"><a href="http://december.com/html/4/element/ul.html"><span style="color: #000000; font-weight: bold;">&lt;ul</span></a> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;maListe&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
			<span style="color: #009900;"><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">&lt;li</span></a> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;15&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
				<span style="color: #009900;"><a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">&lt;a&gt;</span></a></span>clique !<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a&gt;</span></span>
			<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/li&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/ul&gt;</span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span>
  <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span></code>
</pre>
<p>
<b>Code</b></p>
<pre>
<code>$<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'a'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">click</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
  <span style="color: #000066;">alert</span><span style="color: #66cc66;">&#40;</span>$<span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">closest</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'li'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">attr</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'id'</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
  <span style="color: #000066;">alert</span><span style="color: #66cc66;">&#40;</span>$<span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">closest</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'div.superParent'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">attr</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'id'</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;</code>
</pre>
<p>L&#8217;exécution du code ci-dessus donnera le résultat suivant:</p>
<pre>
<code>15
main</code>
</pre>
<p>
<b>2. live events</b><br />
Auparavant, les événements n&#8217;étaient pas mis à jour en temps réel sans passer par un plugin comme <a href="http://docs.jquery.com/Plugins/livequery" target="_blank">livequery</a> et un appel comme celui là:</p>
<pre>
<code>$<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'a'</span><span style="color: #66cc66;">&#41;</span> 
    .<span style="color: #006600;">livequery</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'click'</span>, <span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>event<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span> 
        <span style="color: #000066;">alert</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'clique !'</span><span style="color: #66cc66;">&#41;</span>; 
        <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span>; 
    <span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;</code>
</pre>
<p>sera tout simplement remplacé par:</p>
<pre>
<code>$<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'a'</span><span style="color: #66cc66;">&#41;</span> 
    .<span style="color: #006600;">live</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'click'</span>, <span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>event<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span> 
        <span style="color: #000066;">alert</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'clique !'</span><span style="color: #66cc66;">&#41;</span>; 
        <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span>; 
    <span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;</code>
</pre>
<p><b>3. La méthode is() et selecteur not() supportent maintenant des expressions complexes, comme:</b></p>
<pre>
<code>$<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'a:not(.selected, .highlighted)'</span><span style="color: #66cc66;">&#41;</span>...</code>
</pre>
<p>
<b>Quelques liens</b><br />
Pour finir, et pour en savoir plus, voici quelques liens sur jQuery:</p>
<ul>
<li>changelog complet: <a target="_blank" href="http://docs.jquery.com/Release:jQuery_1.3" title="changelog jQuery 1.3">changelog jQuery 1.3</a></li>
<li>Introduction à <a target="_blank" href="/blog/2007/06/11/jquery/" title="Introduction à jQuery">jQuery</a></li>
<li>Documentation officielle: <a target="_blank" href="http://docs.jquery.com/" title="Documentation jQuery">docs.jquery.com</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.warpdesign.fr/blog/2009/01/28/jquery-131-toujours-mieux/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

