jQuery 1.4.3 est disponible
Découvrez les nouveautés du framework JavaScript le plus populaire
Le 2010-10-12 00:10:01, par danielhagnoul, Rédacteur
Il s'agit d'une version de maintenance, elle corrige les bugs principaux de la version 1.4.3 et y ajoute quelques améliorations.
Téléchargement : http://code.jquery.com/jquery-1.4.4.min.js
Liste des nouvelles fonctionnalités et des modifications : jQuery API 1.4.4.
En vrac :
Le chantier 1.5 va débuter, sortie prévue "début" 2011 ! (Sans doute faut-il comprendre le premier trimestre 2011)
Source : http://blog.jquery.com/
--------------------------------------------
jQuery 1.4.3 est disponible
Le code jQuery a été divisé en module.
Le module CSS a été profondément modifié pour le rendre extensible par des plug-ins. Exemple : le plug-in jQuery Rotate de Louis-Rémi Babé.
Le code du module CSS est maintenant divisé en deux branches distinctes :
Ce qui a permis une nette amélioration des performances pour obtenir (getter) le style d'un élément.
-------
Le module Data a été remanié pour prendre en charge les attributs data-XYZ du HTML5
Notez que les chaînes sont laissées intactes alors que les valeurs JavaScript sont converties (ce qui inclut les booléens, les nombres, objets, tableaux, et null).
Un certain nombre de modifications ont été apportées lorsque data() est utilisée sur des objets JavaScript (ou, plus exactement, tout ce qui n'est pas un nœud DOM). Quand vous ajoutez des données sur un objet JavaScript, les données sont fixées directement sur l'objet. Les événements qui sont attachés aux objets sont liés à une nouvelle fonction : __events__.
Ces modifications permettent au ramasse-miettes (garbage collected) et aux sérialiseurs JSON (JSON serializer) de travailler correctement. Ces changements devraient rendre l'usage des données jQuery (data) et des événements jQuery (event) beaucoup plus utile sur les objets JavaScript.
Ajout de l’évènement changeData, qui est déclenché lorsqu'une donnée (data) est modifiée. Exemple:
------
La performance des principales méthodes qui permettent de parcourir le DOM a été considérablement améliorée : closest(), filter(), is(), et find().
Ces améliorations sont en grande partie dues à l'utilisation accrue des méthodes "querySelectorAll" et "matchesSelector" lorsqu'elles existent sur le navigateur.
------
Et encore :
Documentation : http://api.jquery.com/category/version/1.4.3/
Téléchargement : http://code.jquery.com/jquery-1.4.3.min.js
Source : http://blog.jquery.com/
Téléchargement : http://code.jquery.com/jquery-1.4.4.min.js
Liste des nouvelles fonctionnalités et des modifications : jQuery API 1.4.4.
En vrac :
- fadeToggle()
- data() sans arguments inclus maintenant les data-XYZ du HTML5
- width() et height() fonctionnent pour les éléments cachés
Le chantier 1.5 va débuter, sortie prévue "début" 2011 ! (Sans doute faut-il comprendre le premier trimestre 2011)
Source : http://blog.jquery.com/
--------------------------------------------
jQuery 1.4.3 est disponible
Le code jQuery a été divisé en module.
Le module CSS a été profondément modifié pour le rendre extensible par des plug-ins. Exemple : le plug-in jQuery Rotate de Louis-Rémi Babé.
| Code : |
1 2 | $('#myDiv').css('rotate', '90deg');
$('#myDiv').animate({rotate: '180deg'}); |
- obtenir et modifier (getter et setter) le style d'un élément du DOM par l'intermédiaire d'une propriété (ex: height() et height("200px"
) - obtenir et modifier les styles par la méthode css().
Ce qui a permis une nette amélioration des performances pour obtenir (getter) le style d'un élément.
-------
Le module Data a été remanié pour prendre en charge les attributs data-XYZ du HTML5
| Code : |
1 2 3 4 5 | <div data-role="page" data-hidden="true" data-options='{"name":"John"}'></div>
$("div").data("role") === "page";
$("div").data("hidden") === true;
$("div").data("options").name === "John"; |
Un certain nombre de modifications ont été apportées lorsque data() est utilisée sur des objets JavaScript (ou, plus exactement, tout ce qui n'est pas un nœud DOM). Quand vous ajoutez des données sur un objet JavaScript, les données sont fixées directement sur l'objet. Les événements qui sont attachés aux objets sont liés à une nouvelle fonction : __events__.
Ces modifications permettent au ramasse-miettes (garbage collected) et aux sérialiseurs JSON (JSON serializer) de travailler correctement. Ces changements devraient rendre l'usage des données jQuery (data) et des événements jQuery (event) beaucoup plus utile sur les objets JavaScript.
Ajout de l’évènement changeData, qui est déclenché lorsqu'une donnée (data) est modifiée. Exemple:
| Code : |
1 2 3 4 5 | var user = new User();
$(user).bind("changeData", function( event, name, value ) {
$("#user").find("#" + name).val( value );
}); |
La performance des principales méthodes qui permettent de parcourir le DOM a été considérablement améliorée : closest(), filter(), is(), et find().
Ces améliorations sont en grande partie dues à l'utilisation accrue des méthodes "querySelectorAll" et "matchesSelector" lorsqu'elles existent sur le navigateur.
------
Et encore :
- jQuery.isWindow
- jQuery.type
- jQuery.fx.interval
- event.namespace
- Toutes les méthodes d'animations prennent en charge le plug-in easing.
- Toutes les méthodes évenements acceptent un paramètre eventData.
Documentation : http://api.jquery.com/category/version/1.4.3/
Téléchargement : http://code.jquery.com/jquery-1.4.3.min.js
Source : http://blog.jquery.com/
-
gtraxxMembre confirméSuper ça, la migration de jquery 1.4.2 vers 1.4.3 est-elle fastidieuse ou c'est juste de nouvelles méthodes de travail ?.
J'ai hâte de lire cette nouvelle documentation pour faire des plugins encore plus performant (une syntaxe de plus en plus riche).
Merci daniel, comme d'habitude tu nous éclaires sur le sujet jQueryle 17/10/2010 à 22:13 -
Arnaud F.RédacteurLes évolutions majeures sont surtout une amélioration des performances.
Ainsi, les méthodes de recherches (find / closest / ...) se sont vues améliorées et les tests réalisés prouve qu'elle sont 4x plus rapide qu'auparavant ...
Certaines nouvelles méthodes ont été rajoutées dans $.ajax
Création de $.type qui permet de retourner plus de type que simplement "Object".
Exemple :Possibilité de lier des évènements à false directement, ce qui stoppe la propagation de l'évènement.Code : 1
2
3
4
5
6
7jQuery.type(true) === "boolean" jQuery.type(3) === "number" jQuery.type("test") === "string" jQuery.type(function(){}) === "function" jQuery.type([]) === "array" jQuery.type(new Date()) === "date" jQuery.type(/test/) === "regexp"
Avant :
Après :Code : 1
2
3$("#me").bind("click", function() { return false; }); $("#me").click(function() { return false; });
La possibilité d'écrire ses propres propriétés CSS et les faire appliquer avec .css().Code : 1
2
3$("#me").bind("click", false); $("#me").click(false);
Et quelques autres joyeusetésle 17/10/2010 à 23:36 -
danielhagnoulRédacteurle 18/10/2010 à 10:49
-
danielhagnoulRédacteurBonjour
La version 1.4.3 apporte son lot de changements. Pour moi, la grande nouveauté, elle bouleversera peut-être la manière d'écrire du jQuery, c'est le remaniement du module Data pour prendre en charge les attributs data-XYZ du HTML5 et l'utilisation combinée de "jQuery Template" et de "jQuery Data Link" (http://www.developpez.net/forums/d98...ins-officiels/)
Voici deux exemples fonctionnels à copier-coller et à afficher dans votre navigateur :Code : 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134<!doctype html> <html lang="fr"> <head> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta charset="utf-8"> <meta name="Author" content="Daniel Hagnoul"> <base href="http://danielhagnoul.developpez.com/"> <title>Forum jQuery</title> <link rel="stylesheet" type="text/css" href="styles/dvjhBase.css"> <style> </style> <!--[if lt IE 9]> <script charset="utf-8" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <script charset="utf-8" src="lib/excanvas.js"></script> <![endif]--> </head> <body> <!-- Exemple à copier-coller et à afficher dans votre navigateur --> <section id="conteneur"> <header> <h1>Forum jQuery</h1> </header> <aside> <div id="badgeDVP"> <div class="badgeLogo"> <span class="badgeName"> <a href="http://www.developpez.net/forums/member.php?u=285162" alt="Mon profil" title="Mon profil">Daniel Hagnoul</a> </span> <span class="badgePhoto" alt="Avatar de Daniel Hagnoul" title="Avatar de Daniel Hagnoul"></span> <span class="badgeCorps"> <p style="font-weight:bold;"> Rédacteur / Modérateur </p> <p> <a target="_blank" href="http://danielhagnoul.developpez.com"> <img src="http://www.developpez.net/forums/images/buttons/rss2.png" alt="Mon cahier d’exercices sur jQuery" title="Mon cahier d’exercices sur jQuery"/> </a> <a target="_blank" href="http://www.developpez.net/forums/profile.php?do=addlist&userlist=friend&u=285162"> <img src="http://www.developpez.com/public/images/devenir-ami.png" alt="Devenir mon ami sur Developpez.com" title="Devenir mon ami sur Developpez.com"/> </a> <a target="_blank" href="http://www.developpez.net/forums/private.php?do=newpm&u=285162"> <img src="http://www.developpez.com/public/images/message.png" alt="Envoyer un courriel privé sur Developpez.com" title="Envoyer un courriel privé sur Developpez.com"/> </a> </p> <p style="text-align:left;"> <a target="_blank" href="http://www.developpez.net/forums/f1188/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/" alt="Retrouvez-moi sur le forum jQuery" title="Retrouvez-moi sur le forum jQuery"> Forum jQuery </a> </p> <p style="text-align:left;"> <a target="_blank" href="http://www.developpez.net/forums/search.php?do=finduser&u=285162" alt="Retrouvez toutes mes interventions sur Developpez.com" title="Retrouvez toutes mes interventions sur Developpez.com"> Mes interventions </a> </p> </span> <span class="badgeDvp"> <a target="_blank" href="http://www.developpez.com" alt="Club des professionnels de l'informatique" title="Club des professionnels de l'informatique">www.developpez.com</a> </span> </div> </div> <div id="texte"> <h1>Tutoriels</h1> <p> <a href="tutoriels/javascript/outils-pour-construire-code-jquery-evolutif/">Outils pour construire un code jQuery évolutif</a> </p> <p> <a href="tutoriels/javascript/outil-poopj-et-sa-methode-utilisation/">Programmation orientée objet par prototype avec jQuery</a> </p> <h1>Site web</h1> <p> <a href="index.php">Mon cahier d’exercices sur jQuery & Co</a> </p> <h1>Règles</h1> <p> <a href="http://www.developpez.net/forums/d846412/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/devez-lu-derniere-version-message-dutiliser-forum/">Vous devez avoir lu la dernière version (2010-01-06) de ce message avant d'utiliser le forum jQuery</a> </p> </div> </aside> <article> <h1>Listes</h1> <ul id="movieList"></ul> </article> <article> <h1>Code jQuery</h1> <pre> <script id="movieTemplate" type="text/x-jquery-tmpl"> <li> Title: ${Name}. {{if Languages}} (Alternative languages: ${Languages}). {{else Subtitles}} (Original language only. Subtitles in ${Subtitles}). {{else}} (Original version only, without subtitles). {{/if}} </li> </script> <script> $(function(){ $("#movieTemplate").tmpl(movies).appendTo("#movieList"); }); var movies = [ { Name: "Meet Joe Black", Languages: "French", Subtitles: "English" }, { Name: "The Mighty", Subtitles: "French and Spanish" }, { Name: "The Mighty" }, { Name: "City Hunter", Languages: "Mandarin and Cantonese" } ]; </script> </pre> </article> <footer> <p>Daniel Hagnoul 2010-10-18</p> </footer> </section> <script charset="utf-8" src="lib/jqueryui/js/jquery-1.4.3.min.js"></script> <script charset="utf-8" src="lib/jquery-jquery-tmpl-c33c694/jquery.tmpl.js"></script> <script id="movieTemplate" type="text/x-jquery-tmpl"> <li> Title: ${Name}. {{if Languages}} (Alternative languages: ${Languages}). {{else Subtitles}} (Original language only. Subtitles in ${Subtitles}). {{else}} (Original version only, without subtitles). {{/if}} </li> </script> <script> $(function(){ $("#movieTemplate").tmpl(movies).appendTo("#movieList"); }); var movies = [ { Name: "Meet Joe Black", Languages: "French", Subtitles: "English" }, { Name: "The Mighty", Subtitles: "French and Spanish" }, { Name: "The Mighty" }, { Name: "City Hunter", Languages: "Mandarin and Cantonese" } ]; </script> </body> </html>Code : 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176<!doctype html> <html lang="fr"> <head> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta charset="utf-8"> <meta name="Author" content="Daniel Hagnoul"> <base href="http://danielhagnoul.developpez.com/"> <title>Forum jQuery</title> <link rel="stylesheet" type="text/css" href="styles/dvjhBase.css"> <style> table { border-collapse:collapse; border:2px solid blue; margin:5px; background-color:#f8f8f8; } table tr { border:1px solid blue; } table td { padding:2px; } .title { border-bottom:none; } .title span { font-family:monospace; } .detail { border-top:none; } </style> <!--[if lt IE 9]> <script charset="utf-8" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <script charset="utf-8" src="lib/excanvas.js"></script> <![endif]--> </head> <body> <section id="conteneur"> <header> <h1>Forum jQuery</h1> </header> <aside> <div id="badgeDVP"> <div class="badgeLogo"> <span class="badgeName"> <a href="http://www.developpez.net/forums/member.php?u=285162" alt="Mon profil" title="Mon profil">Daniel Hagnoul</a> </span> <span class="badgePhoto" alt="Avatar de Daniel Hagnoul" title="Avatar de Daniel Hagnoul"></span> <span class="badgeCorps"> <p style="font-weight:bold;"> Rédacteur / Modérateur </p> <p> <a target="_blank" href="http://danielhagnoul.developpez.com"> <img src="http://www.developpez.net/forums/images/buttons/rss2.png" alt="Mon cahier d’exercices sur jQuery" title="Mon cahier d’exercices sur jQuery"/> </a> <a target="_blank" href="http://www.developpez.net/forums/profile.php?do=addlist&userlist=friend&u=285162"> <img src="http://www.developpez.com/public/images/devenir-ami.png" alt="Devenir mon ami sur Developpez.com" title="Devenir mon ami sur Developpez.com"/> </a> <a target="_blank" href="http://www.developpez.net/forums/private.php?do=newpm&u=285162"> <img src="http://www.developpez.com/public/images/message.png" alt="Envoyer un courriel privé sur Developpez.com" title="Envoyer un courriel privé sur Developpez.com"/> </a> </p> <p style="text-align:left;"> <a target="_blank" href="http://www.developpez.net/forums/f1188/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/" alt="Retrouvez-moi sur le forum jQuery" title="Retrouvez-moi sur le forum jQuery"> Forum jQuery </a> </p> <p style="text-align:left;"> <a target="_blank" href="http://www.developpez.net/forums/search.php?do=finduser&u=285162" alt="Retrouvez toutes mes interventions sur Developpez.com" title="Retrouvez toutes mes interventions sur Developpez.com"> Mes interventions </a> </p> </span> <span class="badgeDvp"> <a target="_blank" href="http://www.developpez.com" alt="Club des professionnels de l'informatique" title="Club des professionnels de l'informatique">www.developpez.com</a> </span> </div> </div> <div id="texte"> <h1>Tutoriels</h1> <p> <a href="tutoriels/javascript/outils-pour-construire-code-jquery-evolutif/">Outils pour construire un code jQuery évolutif</a> </p> <p> <a href="tutoriels/javascript/outil-poopj-et-sa-methode-utilisation/">Programmation orientée objet par prototype avec jQuery</a> </p> <h1>Site web</h1> <p> <a href="index.php">Mon cahier d’exercices sur jQuery & Co</a> </p> <h1>Règles</h1> <p> <a href="http://www.developpez.net/forums/d846412/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/devez-lu-derniere-version-message-dutiliser-forum/">Vous devez avoir lu la dernière version (2010-01-06) de ce message avant d'utiliser le forum jQuery</a> </p> </div> </aside> <article> <table> <tbody id="movieList"></tbody> </table> <ul id="clients"></ul> </article> <article> <h1>Code jQuery</h1> <pre> <script id="movieTemplate" type="text/x-jquery-tmpl"> {{tmpl "#titleTemplate"}} <tr class="detail"><td>Directeur : ${Director}</td></tr> </script> <script id="titleTemplate" type="text/x-jquery-tmpl"> <tr class="title"><td>${Name} <span>(${ReleaseYear})</span></td></tr> </script> <script id="clientTemplate" type="text/x-jquery-tmpl"> <li> <p> <a href="clients-${id}">${name} - Age: ${age}</a> </p> {{tmpl($data) "#phoneTemplate"}} </li> </script> <script id="phoneTemplate" type="text/x-jquery-tmpl"> <ul> {{each phone}} <li>${$value}</li> {{/each}} </ul> </script> <script> // un array contenant des objets anonymes, écriture JSON var movies = [ { Name: "The Red Violin", ReleaseYear: "1998", Director: "François Girard" }, { Name: "Eyes Wide Shut", ReleaseYear: "1999", Director: "Stanley Kubrick" }, { Name: "The Inheritance", ReleaseYear: "1976", Director: "Mauro Bolognini" } ]; var clientData = [ { name: "Rey Bango", age: 42, id: 1, phone: [ "954-600-1234", "954-355-5555" ] }, { name: "Mark Goldberg", age: 51, id: 2, phone: ["954-600-1234", "954-355-5555"] }, { name: "Jen Statford", age: 25, id: 3, phone: ["954-600-1234", "954-355-5555"] } ]; $(function(){ $("#movieTemplate").tmpl(movies).appendTo("#movieList"); $("#clientTemplate").tmpl(clientData).appendTo("#clients"); }); </script> </pre> </article> <footer> <p>Daniel Hagnoul 2010-10-01</p> </footer> </section> <script charset="utf-8" src="lib/jqueryui/js/jquery-1.4.3.min.js"></script> <script charset="utf-8" src="lib/jquery-jquery-datalink-06f116d/jquery.datalink.js"></script> <script charset="utf-8" src="lib/jquery-jquery-tmpl-c33c694/jquery.tmpl.js"></script> <script charset="utf-8" src="lib/jquery-easing-1.3.js"></script> <script id="movieTemplate" type="text/x-jquery-tmpl"> {{tmpl "#titleTemplate"}} <tr class="detail"><td>Directeur : ${Director}</td></tr> </script> <script id="titleTemplate" type="text/x-jquery-tmpl"> <tr class="title"><td>${Name} <span>(${ReleaseYear})</span></td></tr> </script> <script id="clientTemplate" type="text/x-jquery-tmpl"> <li> <p> <a href="clients-${id}">${name} - Age: ${age}</a> </p> {{tmpl($data) "#phoneTemplate"}} </li> </script> <script id="phoneTemplate" type="text/x-jquery-tmpl"> <ul> {{each phone}} <li>${$value}</li> {{/each}} </ul> </script> <script> // un array contenant des objets anonymes, écriture JSON var movies = [ { Name: "The Red Violin", ReleaseYear: "1998", Director: "François Girard" }, { Name: "Eyes Wide Shut", ReleaseYear: "1999", Director: "Stanley Kubrick" }, { Name: "The Inheritance", ReleaseYear: "1976", Director: "Mauro Bolognini" } ]; var clientData = [ { name: "Rey Bango", age: 42, id: 1, phone: [ "954-600-1234", "954-355-5555" ] }, { name: "Mark Goldberg", age: 51, id: 2, phone: ["954-600-1234", "954-355-5555"] }, { name: "Jen Statford", age: 25, id: 3, phone: ["954-600-1234", "954-355-5555"] } ]; $(function(){ $("#movieTemplate").tmpl(movies).appendTo("#movieList"); $("#clientTemplate").tmpl(clientData).appendTo("#clients"); }); </script> </body> </html>le 18/10/2010 à 12:05 -
Arnaud F.RédacteurTiré du changelog :Events
.bind("click", false) and .unbind("click", false)
A convenient shortcut for binding a function that does nothing but return false (preventing the default action and stopping the event bubbling).le 18/10/2010 à 19:52 -
gtraxxMembre confirméSuper toutes ses améliorations, j'avoue que je ne connais pas trop les deux plugins "jQuery Template" et de "jQuery Data Link".
Je doit lire la documentation pour comprendre comment ils fonctionnent, à quoi ils servent conjointement et séparément
Je suis assez septique sur le html5 qui ne sera pas pris en charge avant un bon moment, ils restent trop de problème avec les normes w3c et le html5 si je ne m'abuse (je dois me renseigner d'avantage)
J'ai entrevu de nouvelle méthode pour $.ajax dans le fil de la discussion, que sont elles exactement ?le 18/10/2010 à 23:16 -
danielhagnoulRédacteurjQuery 1.4.4 et jQuery UI 1.8.6 sortiront début novembre
jQuery 1.4.4 corrigera les principaux bugs détectés depuis la sortie de la version 1.4.3 et améliorera la stabilité du noyau jQuery
jQuery 1.8.6 corrigera les principaux bugs détectés depuis la sortie de la version 1.8.5
Source : http://blog.jquery.com/le 25/10/2010 à 19:35 -
danielhagnoulRédacteurIl s'agit d'une version de maintenance, elle corrige les bugs principaux de la version 1.4.3 et y ajoute quelques améliorations.
Téléchargement : http://code.jquery.com/jquery-1.4.4.min.js
Liste des nouvelles fonctionnalités et des modifications : jQuery API 1.4.4.
En vrac :
- fadeToggle()
- data() sans arguments inclus maintenant les data-XYZ du HTML5
- width() et height() fonctionnent pour les éléments cachés
Le chantier 1.5 va débuter, sortie prévue "début" 2011 ! (Sans doute faut-il comprendre le premier trimestre 2011)
Source : http://blog.jquery.com/le 12/11/2010 à 10:05