JQuery 1.4:15 nouvelles fonctionnalités et améliorations d’optimisation

JQuery 1.4A récemment publié un。 Au-delà des attentes de chacun, cette fois, c’est ne pas un simple rafistolage, 1.4 contientBeaucoupNouvelles fonctionnalités, améliorations et des améliorations de performances ! Cet article vous présente ces nouvelles fonctionnalités et améliorations d’optimisation qui peuvent être utiles pour vous.

Vous pouvez télécharger le jQuery 1.4 essai tout de suite :Http://code.jQuery.com/jQuery-1.4.js

1. passez à jQuery (...)

Auparavant, jQuery peut passerAttrMéthode définit les propriétés d’un élément, le nom et la valeur de la propriété, ou l’objet qui contient plusieurs séries de paires nom / valeur de propriété spécifique. JQuery 1.4, vous pouvez passer un objet parameter comme deuxième argument à la fonction jQuery lui-même, tout en créant un élément HTML.

Par exemple, vous souhaitez créer un élément d’ancrage (un) avec plusieurs de ses propriétés. Au point 1.4, tout est si simple :

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

Comme vous pouvez probablement le deviner, cet élément ancre n’a pas une propriété text qui appelle la méthode privée de jQuery. ». () De texte», Définir le texte de l’élément à » aller à Google ! "

Pour cela, voici quelques exemples plus utiles :

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

ID est une propriété générique qui est ajoutée directement, tout en CSS, puis cliquez sur Excite la méthode jQuery correspondante. Jusqu'à 1,4, le code ci-dessus doit être écrit comme ceci :

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

En savoir plus sur jQuery (...)

2. jusqu'à ce que je t’ai rencontré...

Encore 3 nouvelles méthodes ont été ajoutées à la 1.4 Kit traversée de DOM :NextUntil, PrevUntilEtParentsUntil。 Ces méthodes parcourent le DOM dans une direction précise jusqu'à ce qu’un élément qui répond de que la sélection spécifiée est rencontrée. Par exemple, maintenant nous avons une liste de noms de fruits :

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

Nous voulons repérer toutes les inscriptions devant Apple après la poire. Le code est simple :

JQuery (' ul li : contient (Apple) »). nextUntil (': contient (poire) ') ;
La banane a été choisi, raisin, fraise

En savoir plus sur :PrevUntil,NextUntil,ParentsUntil

3. lier plusieurs événements processeurs

Il n’est donc plus nécessaire de « chaîne » les diverses méthodes de liaison d’événement, et maintenant vous est pouvez de grouper les dans un tas, comme suit :

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

Cet usage s’applique également à la »Un ()".

En savoir plus sur. lier (...)

4. indiquer l’effet d’accélération selon l’attribut

Auparavant, vous pouvez spécifier uniquement un effet lent pour une animation (assouplissement, qui est la loi de changement de vitesse au cours de l’animation. Natif de JQuery prend en charge deux types d’effets d’accélération, le swing (par défaut) et linéaire. Pour utiliser d’autres effets, vous devezTélécharger séparément。 ), Vous pouvez maintenant spécifier différents effets accélération pour chaque paramètre de propriété de l’animation :

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

Cliquez ici pour voir l’effet réel

Vous pouvez également définir une série de paires nom / valeur pour secialEasing dans un objet d’option Animation facultatif pour achever les travaux ci-dessus :

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

NDLR : notre auteur, James Padolsey, reste humble, et ce point caractéristique est qu’il est venu avec !

En savoir plus sur contenu du Per-propriété-assouplissement

5. mise à jour des événements en direct !

JQuery 1.4 ajoutés à l’affectationEnvoyer,Il,Mise au pointEtFlouLe soutien pour l’événement. En jQuery, nous profitons de la »(Vivants)« Méthode d’attribuer des événements. Cela est utile lorsque vous souhaitez enregistrer les processeurs de l’événement pour plusieurs éléments. Et même si les éléments qui satisfont le sélecteur font leur apparition, ces événements continueront d’être valides (à l’aide de la(Vivants)Économisez plus de temps que de répéter sans cesse les liaisons).

Mais, attention !Lors de l’inscription pour les événements de focus et de flou, vous devrez utiliser leFocusinEtFocusOutComme le nom de l’événement.

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

6. fonction contexte de commande

JQuery 1.4 fournit une nouvelle marqueProxyFonction, située sous l’espace de noms de jQuery. Cette fonction accepte deux paramètres, une est portée ou le nom d’une méthode, et l’autre est une fonction ou une cible portée (la portée envisagée).

Comme nous le savons, JavaScript ce mot-clé est une chose difficile à saisir. Parfois, vous ne voulez pas qu’elle représente un élément, mais vous le voulez pour représenter un objet que vous avez créé plus tôt.

Ici, par exemple, nous avons créé unAppObjet qui a deux propriétés et l’autre estClickHandlerMéthode et l’autre est l’objet qui est responsable de la configuration des paramètres.

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

Celui-làClickHandlerMéthode, quelleApp.clickHandler ()Lorsqu’elle est appelée de cette façon,AppEst son contexte, ce qui signifie queCeciLe mot clé pointe vers leApp。 Si vous avez besoin seulement de l’appeler tout simplement, il n’y a rien de mal à écrire ces lignes :

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

Mais si vous penser que c’est un processeur de l’événement :

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

Quand on clique sur ce point d’ancrage, il n’atteint pas l’effet désiré (nothing alerte sort). C’est parce que jQuery (et les modèles d’événement plus sensibles), par défaut, spécifie le contexte du processeur comme l’élément cible lui-même. Autres motsCela représente exactement le lien sur lequel vous cliquez. Et ce que nous pensons est,thisDevrait continuer à représenterapp。 JQuery 1.4, c’est un objectif simple :

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

Maintenant, cliquez sur tous les points d’ancrage et le « salut ! » apparaîtra. A

La fonction proxy encapsule votre fonction dans un cercle tout en mettant à l’intérieur de la fonctionCeciDéfinir ce que vous voulez. Fonctions de proxy peuvent également être utiles dans d’autres scénarios de contexte, par exemple en passant des fonctions de rappel d’autres méthodes de jQuery ou plug-ins.

Informez-vousJQuery.proxy

7. animation file d’attente latence

Vous pouvez maintenant ajouter un retard à la file d’attente de l’animation. Bien que cette fonctionnalité peut être implémentée dans une file d’attente, la possibilité plus courante consiste à retarder la file d’attente « FX » (« FX » file d’attente, file d’attente de l’animation jquery par défaut). Il vous permet de faire une pause entre deux comportements d’animation sans faire appel à une fonction de rappel etSetTimeoutQuelque chose comme ça.. () De retardLe premier paramètre est le nombre de millisecondes de latence que vous devez définir :

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

Si vous voulez retarder une file d’attente autre que le FX, passez le nom de la file d’attente comme second paramètre. () Retard sera bien。

En savoir plus sur. Retard (...)

8. détecter si l’élément contient un contenu spécifique

JQuery 1.4 permet de détecter si un élément (ou collection) contient)A-t-il ()) Quelque chose est plus facile. Le mécanisme derrière elle et la sélection des filtres: A ()Est le même. Cette méthode sélectionne les éléments de la collection actuelle qui satisfont à un des critères spécifiés arbitraires.

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

Cette déclaration distingue ceux qui contiennent des éléments UL dans tous les éléments DIV. Cette situation peut être utilisée avec un filtre de sélection: A ()Très bien, mais quand vous allez filtrer la sélection définie plus par programme,A-t-il ()Méthode est très utile.

JQuery 1.4 ajoute également une nouvelle sous l’espace de noms de jQueryContientFonction. Il s’agit d’une comparaison entre les fonctions sous-jacentes, acceptant deux nœuds DOM en tant que paramètres. Retourne une valeur Boolean indiquant si le deuxième élément est contenu dans le premier élément. Par exemple :

JQuery.contains (document.documentElement, document.body) ;
Retour vrai-la liste n’est en effet incluse dans le

Compréhension du message :A-t-il (...),JQuery.contains (...)

9. les éléments de la peau !

Il y a longtemps jQuery a été en mesure d’utiliser. Envelopper ()Envelopper d’une couche de peau pour l’yuan. Maintenant, a ajouté de jQuery 1.4. Déroulez ()Méthode pour l’épluchage. Regardez la structure DOM ci-dessous :

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

Pour enlever une couche de peau (div) en dehors de l’élément P :

jQuery('p').unwrap();

Le DOM devient :

<p>Foo</p>

En résumé, cette méthode supprime l’élément parent de n’importe quel élément.

En savoir plus sur. Déballer les (...)

10. Retirez l’élément sans supprimer les données

Il y avait autrefois un. Supprimer ()Méthode consiste à éplucher les éléments et jetez-les. Tout neuf.. Détacher ()Méthode vous permet d’éplucher un élément dans le DOM sans perdre de données. L’objet jQuery qui contient l’élément conserve l’élément une fois l’opération terminée. Données peuvent être transmises à travers le. () DonnéesOu n’importe quel traitement de l’événement dans le système d’événements de jQuery est passée dans l’objet jQuery.

Cette fonction peut être utile lorsque vous devez supprimer un élément du DOM et de réintroduire ensuite dans un scénario futur. Le handle d’événement et toutes les autres données de l’élément sont conservées.

Var foo = jQuery (« #foo ») ;
 
Lier un processeur événement important
Foo.Click (function () {}
Alert (« Foo ! ») ;
});
 
Foo.detach () ; Suppression du DOM
... Faire des choses
 
Foo.appendTo (« body ») ; Rejoindre à DOM
 
Foo.Click () ; Pop-up message d’alerte : « Foo ! »

En savoir plus sur. Détacher (...)

Fonctionnalités améliorées d’index (...)

JQuery 1.4 est que vous pouvez utiliser. () De l’IndexDeux nouvelles méthodes sont fournis. Auparavant, vous deviez lui passer l’élément comme paramètre et puis obtenir une valeur retournée qui représente l’index de l’élément dans la collection actuelle. Maintenant, si le paramètre n’est pas passé, la valeur retournée représente un élément qui rangs quel âge sont à ses pairs. Par exemple, le DOM suivant :

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

Vous voulez savoir qu’après avoir cliqué sur une entrée, c’est le premier dans la liste, et le code mis en place est très simple :

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

JQuery 1.4 vous permet également d’utiliser des sélecteurs comme. () De l’IndexLe premier paramètre de la. Cela retourne la valeur d’index de l’élément actuel dans la collection d’éléments que le sélecteur que vous spécifiez correspond.

C’est aussi à rappeler que cette méthode retourne une valeur numérique qui renvoie une valeur de 1 si l’élément de la condition spécifiée est introuvable dans le document.

En savoir plus sur. Index (...)

La manipulation du DOM peut recevoir des fonctions de rappel

Plupart des méthodes de manipulation DOM prennent désormais en charge l’attribution de fonctions comme un paramètre unique (. () CSSEt. (Attr)Passé comme second paramètre.) Cette fonction s’exécute tous les éléments dans le jeu de sélection, ce qui fournit une valeur plus « personnalisée » pour la méthode correspondante de la manipulation.

Les méthodes suivantes prennent en charge cette fonctionnalité :

• Après
• Avant
• Ajouter
• Faire précéder
• AddClass
• ToggleClass
• RemoveClass
• Wrap
• WrapAll
• WrapInner
• Val
• Texte
• ReplaceWith
• CSS
• Attr
• HTML

Avec la fonction de rappel, vous pouvez l’utiliser dans votre choix de concentration.CeciMot clé pour accéder à l’élément actuel, utilisez le premier paramètre de la fonction de rappel pour demander sa valeur d’index.

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

Aussi, certaines des méthodes ci-dessus fournissent également un deuxième paramètre pour vous de profiter de. Si vous appelez une méthode d’entraînement (tels que. () HTMLEt. Attr (' href)), Vous pouvez également obtenir la valeur actuelle. Par exemple :

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

Comme vous pouvez le voir, pour. () CSSEt. (Attr)Méthode, la fonction est passée comme second paramètre, car le premier paramètre doit spécifier la propriété que nous devons modifier :

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

13. déterminer le type d’objet

JQuery 1.4 ajoute deux nouvelles fonctions auxiliaires (directement sous l’espace de noms jQuery) qui peuvent vous aider à identifient ce que vous manipulez des objets.

La première fonction estIsEmptyObject, Il retourne une valeur booléenne qui détermine si l’objet est (vide). Le second estIsPlainObject, La valeur booléenne retournée représente un objet simple (simple objet) qui passe devant les paramètres pour JavaScript, qui est, avec la{} Ounew Object()L’objet qui a été créé.

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

En savoir plus sur :IsPlainObject (...),IsEmptyObject (...)

Améliorations plus proche de (...)

De JQuery. () Plus proche de vousMéthode peut désormais accepter une série de sélecteurs en tant que paramètres. Lorsque vous avez besoin parcourir tous les supérieurs d’un élément, trouverPlus d’unCette fonctionnalité peut être utile lorsque vous rencontrez les éléments plus récents d’une fonctionnalité particulière.

En outre, elle peut accepter maintenant le contexte comme second paramètre, ce qui signifie que vous pouvez contrôler la profondeur ou la distance de la traversée de DOM. Bien qu’il soit rare que vous pouvez utiliser ces deux nouveautés, une fois que l’effet est incroyable !

Informez-vous. Plus proche de vous (...)

15. nouveaux événements ! FocusIn et focusOut

Comme mentionné précédemment, lorsque vous déployez la mise au point et le flou des événements maintenant, vous devez utiliser Focusin et focusout pour ces deux nouveaux événements. Ces deux événements permettent de prendre des mesures lorsqu’un élément particulier ou un élément enfant de l’élément obtient/perd le focus.

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

Il est à noter que ces deux événements ne se propagera pas (ce qu’on appelle « bulles »), ils seront capturés. Autrement dit, l’élément externe (parent) est déclenché avant l’élément de « cible » de l’iniquité (éléments de cause à effet « objet »).

En savoir plus surFocusInEtFocusOutLe contenu de l’événement.

Tomber en amour avec jQuery 1.4 ! Le plus gentil en histoire, le plus polyvalent, meilleures performances jQuery !

Voilà... J’ai abordé certaines des nouvelles fonctionnalités, qui selon moi, ont eu le plus d’impact sur vous.

Si vous ne le savez pas encore, prendre un rapide coup d’oeil. »Jours de jQuery« Événement, un événement extraordinaire en ligne pour fêter la sortie de jQuery 1.4 et quatre de jQuery anniversaire. Montrer la fierté que vous avez écrit avec jQuery et gagner le droit d’utiliser l’ordinateur central pour une année MediaTemple !

D’ailleurs, ne le laissez pas aller et jetez un oeil à la nouvelle marque.Documentation de l’API!

Auteur original :James Padolsey

Adresse d’origine :Http://net.Tutsplus.com/tutorials/Javascript-Ajax/jQuery-1-4-released-the-15-new-features-you-must-know/

Réimpression doit retenir à la source.