Création rapide d'élements

Une belle fonctionnalité pour créer un élément en déterminant son id, ses attributs CSS, et ses fonctions liées en une seule action.

jQuery(document).ready(function() {
 jQuery("#demo").click(function() {
  jQuery("<div/>",
   {
   id: "carre",
   css: {
   height: "50px",
   width: "50px",
   position: "absolute",
   left:"60%",
	 top:"100%",
   cursor:"pointer",
   color: "blue",
   backgroundColor: "#fff"
   },
   click: function() {
   $(this).css("backgroundColor", "yellow"); 
   },
   mouseover: function() {
   $(this).css("backgroundColor", "red"); 
   }
			    					
  }).appendTo("#line11");
 });
});

En cliquant sur le bouton "Démo", nous allons :

-Créer une div de forme carrée

-Déterminer ses attributs css initiaux (Couleur de fond, couleur de texte, dimensions, position, etc...)

-Lier plusieurs fonctions comme le "click" ou le "mouseover" pour modifier la couleur de fond par exemple.

-Le tout en un seul appel !

-Cliquez sur "Démo", survolez l'élément ou cliquez dessus et inspirez-vous...!

  

Liaison express d'évenements

Avec jQuery 1.4, vous pouvez lier plusieurs évenements à un élément du DOM en une seule action et naturellement précharger des fonctions sur un click, un mouseover ou autre.

Consultez le code ci-dessous :

jQuery(document).ready(function() {
 jQuery('#carreb').bind({  
 click: function() {  
 alert('Vous venez de cliquer sur le carré'); 
 },  
 mouseover: function() {  
 $(this).css("backgroundColor", "yellow");
 },  
 mouseout: function() {  
 $(this).css("backgroundColor", "white");
 }  
 });
});

Survolez le carré blanc et cliquez dessus

Avec delay(), retarder facilement l'exécution
de vos fonctions

Avec jQuery 1.4, vous pouvez désormais utiliser la fonction jQuery delay() qui fera office de timer dans une suite d'exécutions de fonctions. Bien pratique pour synchroniser une suite d'effets.

Consultez le code ci-dessous :

jQuery(document).ready(function() {
 jQuery("#demo2").click(function() {
      jQuery("#carreA").slideUp(300).delay(1000).fadeIn(400);
      jQuery("#carreB").slideUp(300).delay(2000).fadeIn(400);
    });
 });
});

Cliquez sur démo pour visualiser l'effet :








Vous avez pu constater que la fonction delay s'applique à l'effet fadeIn et que l'un des carrés réapparait une seconde avant l'autre.

Les fonctions focusIn() et focusOut

Avec jQuery 1.4, vous pouvez désormais utiliser les fonctions focusIn() et focusOut() pour déclencher l'exécution de fonction sur la prise ou perte de focus d'un élément.

Consultez le code ci-dessous :

jQuery(document).ready(function() {
 jQuery("#input1").focusin(function() {
  jQuery("#hi").css('display','inline').slideUp(300).delay(1000).fadeIn(400);
 });
		
 jQuery("#input2").focusout(function() {
  alert('Focus perdu !');
 });
});  	

Donnez le focus au champ ci-dessous :

Bonjour

Donnez le focus au champ ci-dessous et perdez-le à l'aide de la touche "tab" :

Vous l'avez déjà compris. Ces fonctions vont s'avérer très pratiques pour gérer et animer la saisie des formulaires de vos pages.

La fonction nextUntil()

Avec jQuery 1.4, vous pouvez utiliser la fonction nextUntil() pour effectuer des actions sur une série d'élements du DOM et les appliquer jusqu'à une position déterminé .

Consultez le code ci-dessous :

jQuery(document).ready(function() {
 jQuery("#demo3").click(function() {
  $("#Deux").nextUntil("dt").css("background-color", "blue")
 });	
});	  	

Cliquez tout d'abord sur "Démo" :

  

Partie 1

chapitre a

chapitre b

chapitre c

chapitre d

Partie 2

chapitre a

chapitre b

chapitre c

Partie 3

chapitre a

chapitre b

Il ne s'agit que d'une liste structurée dont nous avons voulu mettre une partie en valeur. Voyez aussi les fonctions prevUntil() et parentsUntil() qui fonctionnent dans le même esprit.

Les fonctions first() et last().

Comme leurs noms l'indiquent, ces méthodes permettent d'appliquer respectivement des actions sur le premier et et le dernier élément d'une série déterminée.

Consultez le code ci-dessous :

jQuery(document).ready(function() {
 jQuery("#demo4").click(function() {
  $("#stabilo1 span").first().addClass('stabilo');
  $("#stabilo2 span").last().addClass('stabilo');
 });	
});	  	

Cliquez tout d'abord sur "Démo" :

  

Ceci est la première partie de la phrase. La deuxième. La dernière.

Ceci est la première partie de la phrase. La deuxième. La dernière.

Rien de plus simple. A vous d'en faire bon usage !

Nouvelles fonctionnalités de index()

Une des principales nouveautés de la méthode index() est de ne lui passer aucun argument. Cela permet par exemple de récupérer la position d'un élément dans une liste.

Consultez le code ci-dessous :

jQuery(document).ready(function() {
 jQuery('#nIndex li').click(function(){ 
  alert("Vous avez cliqué sur l'élément n°" + (jQuery(this).index()+ 1) );  
 });
});	  	

Cliquez sur l'un des éléments de la liste.
Vous pouvez également passer un sélecteur et non plus seulement un élement du DOM en argument pour connaitre une position.

La fonction detach()

La fonction detach() est l'équivalent de remove() sauf qu'en version 1.4, cette nouvelle méthode supprime effectivement un élément mais conserve les attributs de celui-ci pour le cas où vous voudriez le réutiliser !

Consultez le code ci-dessous :

var italic;
jQuery(document).ready(function() {
 jQuery("#demo5").click(function(){
  if ( italic ) {
	 italic.appendTo("#detach");
	 italic = null;
	} else {
	 italic = jQuery("#detach i").detach();
	}
 });
});  

Cliquez plusieurs fois sur Démo :



Vous noterez en lisant le code que la variable "italic" est utilisée lors de l'appel à detach() et que nous nous servons à nouveau de celle-ci pour faire réapparaitre la phrase à l'aide d'un appendTo. Cette phrase a conservé tout ses attributs comme sa couleur par exemple. Je vous laisse méditer...!

Nouvelles fonctionnalités de offset()

Vous pouvez désormais passer en argument à cette fonction des coordonnées pour repositionner un élément.

Consultez le code ci-dessous correspondant au bouton "Déplacer" :

<input type="button" value="Déplacer" onclick="
var obj=jQuery('#toffset').offset();
jQuery('#toffset').offset({top: obj.top, left: obj.left + 20 });"/>

Cliquez plusieurs fois sur "Déplacer" ou "Replacer". La div se déplacera alors vers la gauche ou la droite.

  

Passage d'une fonction à la méthode text()

.text() peut désormais recevoir une fonction en argument

Consultez le code ci-dessous correspondant au bouton "Numéroter" :

<input type="button" value="Numéroter" onclick="
jQuery('#div-1 li a').text(function(i){return 'Chapitre' +  (i + 1) ;});"/>

Cliquez sur "Numéroter" puis "Oter la numérotation".

  

toArray() permet de récuperer tous éléments
contenus dans un autre

toArray() est un peu l'équivalent de get() mais il n'est pas nécessaire de lui passer un argument.

Consultez le code ci-dessous correspondant au bouton "Classer par ordre alphabétique" :

<input type="button" value="Trier par ordre alphabétique" onclick="
			function contenu(elem) {
      	var a = [];
      	for (var i = 0; i < elem.length; i++) {
        a.push(elem[i].innerHTML + '
');
      }
      	a.sort();
      	$('#alpha').append(a.join(''));
    	};
    
    	contenu($('#tri div').toArray());" />

Cliquez sur "Trier par ordre alphabétique".