Introduction à Jquery

Voici quelque instruction pour débuter avec l'utilisation de Jquery

Il y a trois façon d'accéder aux éléments d'une page avec Jquery

1. $('h1') : Avec la balise web directement, plusieurs résultats possibles, exemple <h1>
2. $('.h1') : Avec le nom de la classe d'un élément, plusieurs résultats possible, exemple <div class='h1'>
3. $('#h1') : avec le id d'un élément, un résultat possible, exemple <div id='h1'>

Voici 5 façon de récupérer de l'information dans la page avec Jquery

1. .html()
2. .text()
3. .attr()
4. .val()
5. .each()

L'option text resemble à html mais ne retourne pas du code html, pas de balise html juste le texte.

L'option val sert pour les champs dans un formulaire.

L'option attr sert a trouver la valeur d'un attribut par exemmple pour une image alt, title, src et on a aussi la possibilité d'inventer des attributs et d'y accéder via Jquery par contre l'utilisation d'attribut personalisé n'est pas valide avec le W3C.

L'option each() sert a parcourir un par un les élément de la page par exemple $('a').each va parcourir un a un tout les lien de la page.

Code source exemple

<script>
    // attendre chargement du DOM avant de faire le js Jquery
    $(function() {
       

    var info1 = $('h1').html();
    var info2 = $('h1').text();
    var info3 = $('#id').attr('info_extra');
    var info4 = $('.class').attr('href');
    var info5 = $('#hidden').val();
    var info6 = $('p:first').text();
   
    var info7 = '';
    $( "p" ).each(function( index )
    {
        info7 = info7 + $(this).text() + ' --- ';
       
    });
   
    alert('info1 = ' + info1 + '\ninfo2 = ' + info2 + '\ninfo3 = ' + info3
                + '\ninfo4 = ' + info4 + '\ninfo5 = ' + info5 + '\ninfo6 = ' + info6
                + '\ninfo7 = ' + info7  );
   

    $('h1').html('Nouveau titre');
    $('.class').attr('href','#nouveau_lien');
    $('#hidden').val('valeur modifier via JQUERY');
    $('p:first').text('nouveau text pour le paragraphe');
   
    var num = 1;
    $( "p" ).each(function( index )
    {
        $(this).html('<h1>paragraphe #' + num + '</h1><ul><li>liste ajouter</li></ul>Avec code HTML');
        num++;
    });   
   
   
    });
    </script>

<h1><strong>jQuery</strong> trouver info</h1>

<a href="#lien" id="id" class="class" info_extra='attribu ajouter'>Lien test</a>

<input type="hidden" name="cacher" id="hidden" value="valeur test" />

<p>Paragraphe 1</p>
<p>Paragraphe 2</p>