The jQuery programming library has dramatically changed the way we work online. Web developers are able to prototype animations and backend effects much quicker with fewer lines of code. This brings to the table a profound collection of functions which you can read about here. It doesn’t take long to figure out jQuery syntax, especially if you are fairly well versed using JavaScript.
But if you are new to the language it shouldn’t take long to get started. I’ve added a collection of great tips below for newbie programmers. If you are interested in coding frontend web applications then I highly recommend playing around in jQuery. Even understanding the most basic terminology can push you towards a much greater understanding of DOM manipulation and effects.
Setting Up your Documents
The first thing you’ll want to do is include the most recent version of jQuery. This is a no brainer as it’ll pull the source library into all your pages. Head over to jquery.com and check what their most recent version is. You have the option of downloading the file directly and packaging it with your web app. Or alternatively Google hosts all of the jQuery versions live via their servers.
If you include an external document from Google this saves you time on each pageload. Granted it won’t be much, but there are many advantages to this technique. Now we should start by checking if the document has loaded properly. This could be done in JavaScript, but jQuery offers advanced selectors so we can achieve this much quicker. Below is some example code:
$(document).ready(function() {
//do stuff
});
The above block is using the jQuery $() selector syntax. Whatever object you place inside the parentheses becomes a focal point for all the functional code written afterwards. In this case we’re targeting our webpage document object. Inside the core function we could include any number of methods to preform directly on page load.
Creating Functionality
If you are struggling to understand how constructors are used to target elements, spend a bit of time browsing the jQuery tutorials section. Your selector is the most important part to any jQuery call, and you’ll be working with them in nearly every script.
But if we would like to create some basic functionality let’s build a small alert box upon clicking a link. This can be done in a few ways, and it really depends on your requirements. We could give the link a class or ID which can then become a target in jQuery. Remember that IDs are unique throughout any webpage and begin with a hash symbol(#) while classes can be used multiple times and are preceded with a period(.)
Below is some crude HTML and jQuery code to display our alert box. It’s worth noting that we are using two script tags altogether. The first is added within our heading to include the most recent jQuery library code. The second scripting tag will be written in the HTML to make things easier.
<body>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function(e) {
e.preventDefault();
alert("hey there!");
});
});
</script>
You can see I’ve added the code directly after our opening body tag. This isn’t required, as jQuery scripting is actually loaded before the full document. This is why when our code begins we’re selecting the entire document and passing the ready() function to check if it is finished loading. This structure is very basic for jQuery programming, so get used to this template.
Breaking Down the Code
This is a simple block, so we can expand fairly quickly. After our document has finished loading we call a new selector. This attaches a click event handler onto all the a links in your page. It doesn’t matter what their href value is set to, either way the code inside your function will be executed.
But if you do have links which lead externally the first bit of code prevents such behavior. Passing in a variable to your function (in this case we chose e) can store the event taken from any object. In this scenario we’re storing the click event from any hyperlink on your page. But the preventDefault() method will stop any link from loading further… very handy to save in your code snippets for later on.
Finally we call our alert() function with a small greeting. To test this out simply add a new link into your HTML document. Make sure you’ve also added the JavaScript code above and attached the latest jQuery library from Google Code APIs. Now this example is fairly practical as the code is reusable for other click events, too. Below we will delve into one more sector of programming in jQuery.
Creating Fade-ins and Fade-outs
The jQuery scripting library is best known for so many things. Document manipulation, DOM programming, applying text effects, and especially dynamic animations. Some of the simplest effects to understand are fades. These can reduce or increase the opacity of any given HTML element on your page.
Below I’ve worked out a simple fading effect which applies to specific types of paragraphs. These include some fancy styling to help them stand apart from the rest of your page. Of course, these are only implemented for this tutorial, so you should change the classes to suit your website.
<style type="text/css">
p.fading { font-family: Arial, Helvetica, sans-serif; background: #ccc; padding: 3px 7px; }
</style>
You can add this style anywhere or even include them into a separate .css file. We will be targeting paragraph elements with the class “fading”. I’ve just set the font to Arial, added some padding, and updated the background color to a light gray. We could also set opacity from here, but it’s easier to stick all that in our new jQuery code.
If you remember before we opened a $(document).ready() event for our link alert box. It’s a simple matter to add in some new code within this call, still inside our ready() function. I know this can be a bit confusing. Thus instead of including just the new code, I’ve added the whole block so you can see what changes have been applied.
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function(e) {
e.preventDefault();
alert("hey there!");
});
/* set opacity 30% */
$("p.fading").css("opacity","0.3");
$("p.fading").hover(function() {
$(this).stop().animate({
opacity: 1.0
}, "slow");
}, function () {
$(this).stop().animate({
opacity: 0.3
}, "slow");
});
});
</script>
So right after our click event handler I’ve added two separate bits of code. The first sets all paragraphs with the class of “fading” to 30% opacity. This number can be changed in accordance to the decimal values, such as 0.5 for 50%.
Afterwards I’ve set a similar method to the .click() handler which is hover(). Anytime you hover over a paragraph element with the class of fading our function will be called. What’s special about jQuery hover is that we can provide actions for both on hover and on release. This is why we have two defined functions, one setting full opacity and the other resetting back to 30%.
Try adding the code above into your same document from before. Be sure to add in a small paragraph with the class “fading”, and add some filler text. It’s absolutely amazing the amount of functionality which can be built in jQuery, all in a matter of just a few minutes.
Conclusion
This has been a brief introduction into some of the methods and syntax behind jQuery. This powerful programming language has changed the way we use the Internet and design modern websites. User interfaces can be drafted in just a few hours with full animations and wonderful effects.
The other great piece of jQuery is full extensibility. Developers have created and released a lot of plugins for free, all powered on the jQuery library. Check out a few to see if any can fill a requirement for your websites. Functionality is key, but without proper design and user support your website will become bloated and fall apart. Use jQuery sparingly in your code and with the right balance you can start building incredible interfaces at the drop of a hat.