jquery introducción

<div class="container">
            <h1>Página con jquery</h1>
            <p class="parrafo">Hola</p>
            <p class="parrafo">que</p>
            <p class="parrafo">tal</p>
            <div id="contenido">
                <h3>Contenido muy interesante</h3>
                <p>Bla bla blabla bláblala</p>
                <p>Bla bla blabla bláblala</p>
                <p>Bla bla blabla bláblala</p>
            </div>
            <input type="button" id="boton" value="Pinchamé">
        </div>
        <script src="js/codigo.js" type="text/javascript"></script>

$(function () {
    $("h1").after("<p>La página se ha cargado</p>");
    $(".parrafo").after("@@@");
    $('#boton').click(function () {
        $('#contenido').toggle();
    });
    $("#contenido p").on({
        mouseenter: function () {
            $(this).css("background-color", "lightgray");
        },
        mouseleave: function () {
            $(this).css("background-color", "lightblue");
        },
        click: function () {
            $(this).css("background-color", "yellow");
        }
    });

});