It is jQuery Week here at Purpleurbia and we are excited! We have some exciting stuff up our sleeves for the next few days, however, today we need to get you started with the basics.
There are a lot of tutorials out there to get you started, here short synopsis on why you should learn it and then some links to the best tutorials out there to get the job done. And a tutorial on how to write your first bit of jQuery code. Hooray!
What is jQuery?
jQuery is a JavaScript library that allows faster development of JavaScript effects. It does a lot of what Flash can do, by interacting with the HTML and CSS and manipulating these properties. It makes your website more dynamic and frequently more visually exciting. It also doesn’t have any direct negative effects on SEO (those only happen if you do things like set default CSS to display: none but we aren’t covering that here).
What is it used for?
It is used to make your page respond to events, (clicks, rollovers, etc) or to animate, or to post notifications such as error warnings. With jQuery you can manipulate the DOM and make pretty nifty animations and effects.
Let’s write some jQuery
You are going to need to download the current version of jQuery for this tutorial and include it in your header.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>jQuery Week on Purpleurbia</title> <link rel="stylesheet" type="text/css" href="style.css" /> <script src="js/jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"> </script> </head>
Now we need to add some content to our HTML to manipulate:
<body> <div id="container"> <div id="header"> I made a jQuery! </div> <ul id="nav"> <li> <a href="#">Click me</a> </li> </ul> <div> </div> <h3>Hello everyone!</h3> <h3 style="display: none;"> Come back tomorrow for a more exciting tutorial! </h> </div> </body> </html>
* { margin: 0; padding: 0; }
body { font-size: 62.5%; font-family: Georgia, serif; }
.clear { clear: both; }
a { outline: none; text-decoration: none; color: white; font-size: 1.3em; }
h3 { font-size:18px; color: #4b0049;}
div#container { width: 300px; margin: 0 auto;}
#header { padding: 20px; font-size: 3.0em; background: #9b6999; color: #ffffff;}
ul#nav { list-style: none; width: 300px; margin: 10px auto; }
ul#nav li { float: left; padding: 10px; margin-right: 3px; width: 200px; background: #4b0049; }
Now we can write our jQuery. Put this in script tags (<script type=”text/javascript”></script>) in the header area of your document.
$(document).ready(function() {
$("li.button").click(function(){
$("h3").toggle();
});
});
The first line says to wait until the document is ready. The next line says that when there is a click on an li element with a class of button to toggle the h3 element.
Pretty nifty, eh? (You should get something that looks like this)
Some great tutorials to make sure you really get the basics:
jQuery's own tutorials. A little more technical than most of the others out there, but if you are a programmer type, this is the way to go.
ThemeForest's jQuery for Absolute Beginners series. This is a great video tutorial series that will get you on your way to learning jQuery.
Learningjquery.com's series on Working with Events. This series talks about the major difference between JavaScript and CSS
CSS Tricks' Video Series on Getting Started with jQuery. This is a great basic series on working with jQuery and CSS.
Check back tomorrow for some more advanced jQuery coding!
(the background from our header image is from BittBox's Free Texture Tuesday Series)
