2
0
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://cod...y-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://blo...og.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é.
1 2
$('#myDiv').css('rotate', '90deg');
$('#myDiv').animate({rotate: '180deg'});
Le code du module CSS est maintenant divisé en deux branches distinctes :
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
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";
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:
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 :
Documentation :
http://api...version/1.4.3/ Téléchargement :
http://cod...y-1.4.3.min.js Source :
http://blo...og.jquery.com/
Les mieux notés
Les plus récents
Ordre chronologique
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 jQuery
le 17/10/2010 à 22:13
0
0
Les é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 :
1 2 3 4 5 6 7
jQuery.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"
Possibilité de lier des évènements à false directement, ce qui stoppe la propagation de l'évènement.
Avant :
1 2 3
$("#me").bind("click", function() { return false; });
$("#me").click(function() { return false; });
Après :
1 2 3
$("#me").bind("click", false);
$("#me").click(false);
La possibilité d'écrire ses propres propriétés CSS et les faire appliquer avec .css().
Et quelques autres joyeusetés
le 17/10/2010 à 23:36
0
0
Bonjour
Envoyé par
Arnaud F.
Après :
1 2 3
$("#me").bind("click", false);
$("#me").click(false);
$("#me").trigger("click", false);
le 18/10/2010 à 10:49
0
0
Bonjour
Envoyé par
gtraxx
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 jQuery
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...ins-officiels/ )
Voici deux exemples fonctionnels à copier-coller et à afficher dans votre navigateur :
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>
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
0
0
Envoyé par
danielhagnoul
Bonjour
$("#me").trigger("click", false);
Tiré 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
0
0
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
0
0
jQuery 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://blo...og.jquery.com/
le 25/10/2010 à 19:35
0
0
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://cod...y-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://blo...og.jquery.com/
le 12/11/2010 à 10:05
0
0