BTK-FH Logo

Theorie

jQuery Basics

jQuery is one of the most popular javascript libraries at the moment.  It takes some getting used to but it’s quite powerful and quite a few fancy interactions are possible with just a little bit of code.  Here’s a quick demo to get you started.  Clicking the button will slide the DIV in and out of visibility.

<!DOCTYPE html>
<html>
<head>
<title>magic with jQuery</title>

<style>
 #stuff {
 background-color: #0000FF;
 color: #FFFFFF;
 border: 1px solid #FF8800;
 width: 400px;
 margin-top: 10px;
 padding: 5px;
 }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

 <script>
 $(function() {

 $("#button").click(function () {
 $("#stuff").slideToggle("slow");
 });
 
 });
 </script>

</head>
<body>

 <button id="button">Bang!</button>
 
 <div id="stuff">Your sweet voice is like the snap of a bra strap upon a sun burnt back. Your sweet voice is like the snap of a bra strap upon a sun burnt back.
 Your sweet voice is like the snap of a bra strap upon a sun burnt back.
 Your sweet voice is like the snap of a bra strap upon a sun burnt back.
 Your sweet voice is like the snap of a bra strap upon a sun burnt back.
 
 </div>



</body>
</html>

If you get stuck, take a look at the excellent documentation for jQuery and jQuery.UI.

speak up

Add your comment below, or trackback from your own site.

Subscribe to these comments.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*Required Fields