Introduction à Jquery
Voici quelque instruction pour débuter avec l'utilisation de JqueryIl y a trois façon d'accéder aux éléments d'une page avec Jquery
- $('h1') : Avec la balise web directement, plusieurs résultats possibles, exemple <h1>
- $('.h1') : Avec le nom de la classe d'un élément, plusieurs résultats possible, exemple <div class='h1'>
- $('#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
- .html()
- .text()
- .attr()
- .val()
- .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>