12 exemples d'utilisation de la librairie jQuery 1.4.2

L'utilisation de jQuery permet de simplifier et d'accélérer le développement en Javascript. Le framework jQuery permet d'accéder et de mettre à jour le contenu d'une page. Comme la librairie est Open Source, on peut créer ou modifier des nouveaux modules Javascript.

Voici quelques trucs pour devenir un meilleur développeur Javascript (jQuery).

Vérifier si un élément contient une certaine classe

$("input").has(".adresse").addClass("icon_adresse"); 

Ajouter ou enlever une classe

Méthode standard

a.hasClass('actif') ? a.removeClass('actif') : a.addClass('actif');  

Méthode utilisant toggleClass

a.toggleClass('actif');  

Utilisation d'une fonction spécifique à Internet Explorer

if ($.browser.msie) { //Ajouter votre code ici }  

Lier une fonction à un événement

$('#bEnvoyer').bind('click', function() {  
	alert('Le bouton envoyer a été appuyé.');  
});  

Ajouter du contenu à un élément HTML

$('#divTexte').append('Texte à ajouter');  

Préchargement d'images

jQuery.preloadImages = function() { for(var i = 0; i').attr('src', arguments[i]); } };  

// Utilisation
$.preloadImages('/images/image1.jpg', '/images/image2.jpg', '/images/image3.jpg');  

Valider si un option est sélectionné

$('#radioList').find('option:selected');  

Cacher un élément HTML

$("#div").hide();  

Détection de navigateur avec jQuery

//Détection de Internet Explorer 6 et +
if ($.browser.msie && $.browser.version > 6)
{ votre code ici.. }

//Détection de Internet Explorer 6 et -
if ($.browser.msie && $.browser.version <= 6)
{ votre code ici.. }
  
//Détection de FireFox 2.0 et +
if ($.browser.mozilla && $.browser.version >= '1.8')
{ votre code ici.. }

//Détection de Safari
if( $.browser.safari) 
{ votre code ici.. }

Valider si un élément existe

if ($('#div').length) { //Élément existant }  

Cacher ou fermer automatiquement un élément après un certain temps

$("#div").delay(3000).hide('blind', {}, 300);  

Obtenir l'élément parent le plus près

$('#divBox').closest('div');   

Grâce aux exemples ci-haut, vous avez pu voir l'utilisation de la librairie jQuery 1.4.2.

Utilisation de jQuery pour consommer un Webservice ASP.NET JSON

Qu'est ce que JSON ?

JSON (Javascript Object Notation) est un format d'échange de données simple, rapide, facile à lire et à écrire pour l'humain ou la machine. L'utilisation d'un fichier JSON sert principalement à échanger des valeurs avec le serveur. Ainsi, le format d'échange de données JSON vous offre une alternative simple, rapide et efficace.

JSON est construit en deux structures :

  • Collection de nom / pair de valeur (enregistrement, objet, dictionnaire, ..)
  • Liste de valeurs (Liste, vecteur une séquence de valeur)
  • Exemple JSON:

    var jsonPersonne = { Personne: { Nom: "Billy Pépin", Genre: "Masculin", Age: 29 } };
    

    Personne : Objet avec propriété Nom, Genre et Age. jsonPersonne = Objet JSON

    Exemple Array (séquence):

    var jsonCouleur = ["Rouge", "Bleu", "Jaune", "Noir"];
    

    Exemple simple ASP.NET - JQuery

    Dans l'exemple suivant, nous allons voir comment il est simple de consommer un web service JSON à l'aide de ASP.NET.

    Premièrement, créer une nouvelle application ASP.NET 4.0 à l'aide de Visual Studio 2010 (Ou version antérieure).

    Création d'une classe simple

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    
    namespace ASP.NET4_JSON
    {
        public class Employe
        {
            public string Prenom;
            public string Nom;
            public int Age;
            public string Genre;
            public string Pays;
        }
    }
    

    Dans cet exemple, j'utilise une classe "Employe". La classe permet d'afficher une liste de personne à l'aide d'un Web Service JSON.

    Création du Web Service JSON

    using System;
    using System.Web;
    using System.Web.Services;
    using System.Web.Services.Protocols;
    using System.Web.Script.Services;
    using System.Collections.Generic;
    using System.Linq;
    using ASP.NET4_JSON;
    
    /// 
    /// Summary description for CarService
    /// 
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [ScriptService]
    public class EmployeService : WebService
    {
        List Employes = new List
        {
            new Employe{ Prenom = "Prénom 1", Nom = "Nom 1", Age = 20, Genre = "Masculin", Pays = "Canada" },
            new Employe{ Prenom = "Prénom 2", Nom = "Nom 2", Age = 22, Genre = "Féminin", Pays = "USA" },
            new Employe{ Prenom = "Prénom 3", Nom = "Nom 3", Age = 21, Genre = "Masculin", Pays = "Canada" },
            new Employe{ Prenom = "Prénom 4", Nom = "Nom 4", Age = 30, Genre = "Féminin", Pays = "USA" },
            new Employe{ Prenom = "Prénom 5", Nom = "Nom 5", Age = 24, Genre = "Masculin", Pays = "Canada" },
            new Employe{ Prenom = "Prénom 6", Nom = "Nom 6", Age = 22, Genre = "Masculin", Pays = "France" },
            new Employe{ Prenom = "Prénom 7", Nom = "Nom 7", Age = 50, Genre = "Féminin", Pays = "Mexique" },
            new Employe{ Prenom = "Prénom 8", Nom = "Nom 8", Age = 28, Genre = "Masculin", Pays = "France" },
            new Employe{ Prenom = "Prénom 9", Nom = "Nom 9", Age = 31, Genre = "Masculin", Pays = "Chine" },
            new Employe{ Prenom = "Prénom 10", Nom = "Nom 10", Age = 39, Genre = "Féminin", Pays = "France" },
            new Employe{ Prenom = "Prénom 11", Nom = "Nom 11", Age = 35, Genre = "Masculin", Pays = "Canada" }
        };
    
        [WebMethod]
        public List ListerTous()
        {
            return Employes;
        }
    
        [WebMethod]
        public List ListerParPays(string pays)
        {
            var employes = from e in Employes
                        where e.Pays.ToLower() == pays.ToLower()
                        select e;
    
            return employes.ToList();
        }
    }
    

    Il sera possible de questonner le Web Service selon 2 méthodes.

    • Liste de tous les employés
    • Liste des employés par pays

    Code Javascript

        <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    
        <script type="text/javascript">
            $(function () 
            {
                $('#Button1').click(AfficherEmployes);
            });
    
            $(function () {
                $('#Button2').click(AfficherEmployesParPays);
            });
    
            function AfficherEmployes() {
                $.ajax({
                    type: "POST",
                    url: "WebService1.asmx/ListerTous",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        var employes = response.d;
                        $('#contenu1').empty();
                        $.each(employes, function (index, employe) {
                            $('#contenu1').append('<p><strong>' + employe.Prenom + ' ' +
                                        employe.Nom + '</strong><br /> Age: ' +
                                        employe.Age + '<br />Genre: ' +
                                        employe.Genre + '<br />Pays: ' +
                                        employe.Pays + '</p>');
                        });
                    },
                    failure: function (msg) {
                        $('#contenu1').text(msg);
                    }
                });
            }
    
            function AfficherEmployesParPays() {
                $.ajax({
                    type: "POST",
                    url: "WebService1.asmx/ListerParPays",
                    data: "{pays: '" + $('#<%= tbPays.ClientID %>').val() + "' }",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        var employes = response.d;
                        $('#contenu2').empty();
                        $.each(employes, function (index, employe) {
                            $('#contenu2').append('<p><strong>' + employe.Prenom + ' ' +
                                        employe.Nom + '</strong><br /> Age: ' +
                                        employe.Age + '<br />Genre: ' +
                                        employe.Genre + '<br />Pays: ' +
                                        employe.Pays + '</p>');
                        });
                    },
                    failure: function (msg) {
                        $('#contenu2').text(msg);
                    }
                });
            }
        </script>
    

    Code HTML

        <h2>Utilisation JQuery et JSON</h2>
    
        <div style="float:left; width:300px;">
            <h2>Afficher les employés</h2>
            <input type="button" id="Button1" value="Afficher" />
            <div id="contenu1"></div>
        </div>
    
        <div style="float:left; width:300px;">
            <h2>Afficher les employés par pays</h2>
            <asp:TextBox runat="server" ID="tbPays"></asp:TextBox>
            <input type="button" id="Button2" value="Afficher" />
            <div id="contenu2"></div>
        </div>
    


    Télécharger l'exemple ci-haut (Visual Studio 2010 - ASP.NET 4.0).

    ASP.NET4-JSON.zip (76,51 kb)

     

    À propos

    Je suis un développeur web. Je m'intéresse également à l'optimisation de site pour les moteurs de recherche (SEO). Sur ce site, vous trouverez des trucs, conseils, tutoriels pour vous aider à développer  des applications web à l'aide de : ASP.NET, ASP.NET MVC, jQuery, Javascript et plus. De plus, je vous tiendrai au courant des nouveautés sur le web.

    Pages