Mijn eigen jQuery tutorials

Posted at October 25, 2011

Ik heb de laatste tijd al een aantal keer vragen over jQuery gekregen. Om hier meer duidelijkheid over te verschaffen ga ik een serie screencasts (video‚Äôs) opnemen waarin ik uitleg hoe een aantal basis dingen werken.

In mijn eerste tutorial ga ik in op hoe je met een snelle pageload in gedachte javascript kan koppelen aan een webpagina:

In de video komt de volgende code aan bod:

html

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery demo 1 - askmike</title>
        <link rel="stylesheet" href="style.css" type="text/css" />
    </head>
    <body>
        <h1>Hello world</h1>
        <p>This is a test page.</p>
        <p>This is the end of the html content.</p>
        <script src="https://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script src="script.js"></script>
    </body>
</html>

css

body {
    width:660px;
    margin:auto;
    background-color:#c2c2c2;
    font-family:sans-serif;
}

h1 {
    color:blue;
    padding:10px 0;
}

jQuery

$(document).ready(function(){
    var html = '<p class="dynamic">this content is automatically inserted using javascript.</p>';
    $('body').append(html);
});

In de de tweede tutorial laat ik zien hoe je smooth pagina transities kan maken met jQuery.

Posted at October 25, 2011, under jQuery.