Quelques astuces pour jQuery...

Tags : Astuces, Javascript, Jquery

http://www.maraumax.fr/medias/Billets/jquery.png jQuery est une superbe bibliothèque Javascript permettant de simplifier la manipulation des vos éléments html, css et bien plus encore.

Voici quelque-une de ses fonctionnalités :
- Parcours et modification du DOM (éléments html)
- Evènements (Clics, Clavier)
- Effets et animations sympathiques
- Ajax très simplifié (Notamment avec json)
- Un nombre incroyable de plugins...

Si vous hésitez encore à l'utiliser je vous invite vraiment à franchir le pas ! De plus de nombreux exemple sont fournis dans la documentation officiel, et traduit en français à cette adresse.

Je ne suis pas la pour vous décrire toute la bibliothèque mais pour vous filer quelques exemples de codes simple et pratique à utiliser au quotidien, passons aux choses sérieuses !

Faire une redirection
Pour rediriger votre page vers une autre utilisez simplement le bout de code suivant : 

// Le second paramètre est la destination
$(location).attr('href', 'http://www.example.com')

Sélectionner le premier index d'un select
Pratique pour effectuer un "reset" d'un formulaire et donc sélectionner la première valeur de votre select. 

// #select correspond évidement au select
$('#select').get(0).selectedIndex = 0;

Récupérer l'option sélectionné d'un select
Toujours dans la balise select si vous souhaitez récupérer la valeur actuellement sélectionnez utiliser le morceau de code suivant : 

// #select correspond toujours au select
$('#select option:selected').val();

Vous pouvez aussi utiliser la fonction "text" si vous souhaitez récupérer le texte que vos visiteurs lisent.

Tester si une checkbox est sélectionné ou non
Très simple à utiliser vous avez juste à utiliser la fonction "is". Exemple : 

if($('#macheckbox').is(':checked'))
{
	alert('Coché !');
}
else
{
	alert('Non coché !!');
}

Au passage si vous souhaitez effectuer une action lors du changement du statut de la checkbox utilisez la fonction change. 

$('#macheckbox').change(function() {
	// Test si coché ou non et traitement
});

Nombre d'éléments dans la sélection
jQuery à l'énorme avantage de pouvoir effecter des actions par lot, prenez l'exemple suivant : 

<p>Bonjour !</p>
<p class="gris">Comment ca va ?</p>
<p class="gris">Super et toi ?</p>

Lorsque vous utiliser le sélecteur avec la balise p, vous pouvez effectuer des actions sur les trois paragraphe. Pour connaitre le nombre de balises sélectionné utiliser la propriété length : 

$('p').length; // 3
$('p.gris').length; // 2

Activer ou désactiver un champ / bouton
Pratique si vous souhaitez autoriser un champ en fonction d'une liste déroulante ou d'une checkbox par exemple voici comment désactiver ou activer un élement de formulaire : 

// On le désactive
$('.monchamp').attr('disabled', 'disabled');
 
// On l'active (avant jQuery 1.6.4)
$('.monchamp').attr('disabled', '');
 
// Depuis jQuery 1.6.4
$('.monchamp').removeAttr('disabled');

En espérant vous avoir donné un petit coup de pouce, n'hésitez pas si vous avez des remarques / questions / codes à ajouter !

Commentaires (3) | 16/02/2012 12:11

Billets relatifs

3 Commentaire(s)

  1. Commenté par aio le Wednesday 19 December à 23:09

    $('.monchamp').attr('disabled', '');
    maintient la désactication.

    Pour la supprimer :
    $('.monchamp').removeAttr('disabled');

  2. Commenté par aio le Wednesday 19 December à 23:12

    suite du commentaire précédent, valable à partir de JQuery 1.6.4.

    http://blog.onbebop.net/post/2012/01/16/Jquery-1.6.4-et-attribut-disabled.

  3. Réponse

    En effet bien vu ! Je vais modifier le billet.

Ajouter un commentaire





Les commentaires sont validés manuellement afin d'éviter le spam.