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.