//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
    

$(document).ready() permet de définir les instructions javascript à exécuter dès que le html et le script qui contient l’appel à $(document).ready() est chargé.
Cette fonction n’attend pas la fin du chargement de tous les éléments de la page (css, images, autres js…)

    
        $( document ).ready(function() {
            // Handler for .ready() called.
        });
    

On peut également déclarer le document ready de cette manière :

    
        $(function() {
            // Handler for .ready() called.
        });
    

Si on utilise plusieurs bibliothèques javascript sur la même page, le raccourci $ est souvent utiliser par ces bibliothèques.
il peut être nécessaire de créer un allias de jQuery dans la fonction document ready.

    
        jQuery(document).ready(function( $ ) {
            // Code using $ as usual goes here.
        });
    

$(document).load() permet de définir les instructions javascript à exécuter dès que tous les éléments de la page sont chargés : html, css, javascript, images.

    
        $(window).load(function() {
            // Run code
        });
    

jQuery permet de sélectionner les éléments du DOM. Il permet la sélection d'élément via leur balise, ID, classe...

    
        $('.classe'); // sélectionne les éléments dont la classe est "classe"
        $('#id'); // sélectionne l'élément dont l'id est "id"
        $('a'); // sélectionne tous les liens
        $('a.classe'); // sélectionne tous les liens qui ont la classe "classe"
    

jQuery permet aussi la manipulation du DOM avec des fonctions simples.

    
        $('a').addClass('classe') // ajoute la classe "classe" à tous les liens
        $('a').removeClass('classe') // retire la classe "classe" à tous les liens
        $('a').toggleClass('classe') // retire/ajoute la classe "classe" à tous les liens
        $('#monBloc').hide() // masque le bloc 'monBloc"
        $('#monBloc').show() // affiche le bloc 'monBloc"
        $('#monBloc').css('background',red) // modifie le style en ligne de "monBloc"
        $('#monBloc').remove() // supprime "monBloc" du DOM
        $('#monBloc').html() // recupère le contenu HTML de "monBloc", avec du code HTML en paramètre, il modifie le code HTML du bloc
        $('#monBloc').texte() // recupère le contenu texte de "monBloc", avec du texte en paramètre, il modifie le texte du bloc
        $('#monBloc').attr() // permet de modifier/recupérer des attributs de "monBloc"
        $('#monBloc').removeAttr() // permet de supprimer un attribut de "monBloc"
        $('#monBloc').parent() // retourne l'élément parent de "monBloc"
        $('#monBloc').closest('div') // retourne le premier parent de "monBloc" de type "div"
        $('#monBloc').children() // retourne les enfants de "monBloc"
        $('#monBloc').fadeIn() // mets "monBloc" en "display:block", avec un timer en paramètres, il ajoute un effet sur l'opacité
        $('#monBloc').fadeOut() // mets "monBloc" en "display:none", avec un timer en paramètres, il ajoute un effet sur l'opacité