Have been intrigued by jquery for a while but have been wary of learning another computer language. Particularly one that looks so different (at least on first inspection) to JavaScript.Decided to take the plunge at the weekend and it turns out it’s not so bad!
The introductory tutorial on the jquery site is actually pretty bad. w3schools is a much better starting point.
It turns out you can combine jquery with existing javascript in a page. Where jquery comes into it’s own is adding graphical effects to a page.
The syntax is along the lines of:
$(page element).event behaviour
I wanted to add a sliding menu to my itunes style navigation menus. Found this tutorial and amended to toggle between expand and contract sub menus
<html>
<head>
<script src='scripts/jquery-1.4.2.min.js'></script>
<script>
// Run this code when the page is ready
$(document).ready(function(){
// Hide all dd lists apart from the first
$("dd:not(:first)").hide();
// Attach this behaviour to the click event of all a elements inside dt tags
$("dt a").click(function(){
// show / hide the next element in the page (ie. the list!)
$(this).parent().next().slideToggle("fast"); // mine
return false;
});
});
</script>
</head>
<body>
<dl>
<dt><a href="#">Header 1</a></dt>
<dd>
<ul>
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
</ul>
</dd>
<dt><a href="#">Header 2</a></dt>
<dd>
<ul>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
</ul>
</dd>
</dl>
</body></html>
You can then style the list in any way you like