A while back I faced the daunting prospect of learning yet another language, jQuery. At the time I had a little to average knowledge of javascript, I would recommend you to stop reading if you do not have any prior knowledge of javascript or other similar programming languages.
As web sites march forward and us programmers look for ever more elaborate and space saving ways of delightfully cramming our pages with as much content as we can whilst also doing it within a respectable time frame, some life saving javascript libraries have emerged. Elaborate javascript effects have always been possible, but for clients not willing to pay that bit extra for the time it would normally take to build and utilise such features and for programmers not willing to spend the time on some projects, these features have sat very much in the dark corner of the room. Untill now! In relatively simple commands using jQuery you can achieve some actually very complex and cross browser compatible javascript functionality. Which not only looks really cool, but in use is very, very practical!
How to use jQuery
Using jQuery couldn’t be any simpler, head over to the jQuery website and simply download the library. This consists of only one file, which makes everything even more simple!
Upload this file to somewhere on your server and then include it to the head of the page you want to test something on, it should look something like this.
<!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" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My jQuery Test</title>
<script src="/path/to/your JQUERY filename/on/your/server"></script>
</head><body></body></html>
Im only going to touch on what you can do with jQuery in this topic as I want to focus on the main principles of switching from coding using your basic javascript mark up, to using jQuery. Alot of people refuse to make the move from javascript to jQuery or simply do not see the point. I think in alot of ways thats rather sad, especially when you consider the time it can save you and the simplicity in which otherwise complex javascript can be added to your pages. Yes like many other things it cannot do everything, but whats so great about it is that it can be mixed and matched with regular javascript.
The massive plus point for me using jQuery is its pretty much give or take cross browser compatible. At least the core of it is, this is a hugely important factor when choosing to use jQuery as we all know how javascript is rendered differently in every other browser. So leave the compatibility issues up to someone else and focus on your website, is what I say!
A Simple jQuery Example
Im simply going to show you the very core of any javascript or jQuery application. The selector! In regular javascript were all very used to using the following code to select an element from the dom (or page) by its id.
Add this div to the body of your test page:
<div id="specialdiv"></div>
Then add this code to the head of the page.
<script type="text/javascript">
//normal js selector code
var elem = document.getElementById("specialdiv");
//jquerys selector
var jqelem = $("#specialdiv");
</script>
This is a extremely simple example, but I think it demonstrates nicely what jQuery stands for, “do more and write less!”
One of the most important functions available to you when using jQuery is the following:
$(document).ready(function(){ });
As the name suggests this calls and runs whatever is inside the function when the document is ready ie when the page finishes loading. Try inserting the code below into the head of your test page.
<script type="text/javascript">
$(document).ready(function(){ alert("hi this is my function running"); });
</script>
Another very important thing to learn about jQuery is how it works, differently to normal. For instance say we have a button that we wanted to fire a javascript when it was clicked, jQuery provides ways to bind events to elements. Ie if you click my button I can bind an event to that button on page load and when you click it fire a function of my choice. Where as conventionally before you would have attached the event as an attribute to the element. For example a onclick=”alert(’clicked’)” on an element. Where as I could do the following with jQuery.
First add the button to your page
<input type="button" id="mybutton">
Then add the jQuery below to the head.
<script type="text/javascript">
$(document).ready(function(){
$("#mybutton").click(function(){ alert("You just clicked my button"); });
});
</script>
You will see an alert pop out with the text “You clicked my button”.
Selectors
Selectors are hugely important factor of selecting elements from the dom or the page to a non programmer. jQuery allows you to use numerous ways to select elements. Im only going to touch on a few of the most important ones, have a look at the following examples.
//# selects by the id of the element like so : $("#mybutton");
//. fullstop or a dot select by the class of the element like so : $(".mybutton");
//using a tree or selecting multiples elements by there element type
// selects all divs on the page $("div");
// selects all spans within a div on the page $("div span");
As you can see rather than using regular javascript to do the same its very very quick to code and works really well.
Im going to touch on one last subject in this small tutorial and thats binding of events to the same element. Earlier I showed you how to bind a click function to an element, but what jQuery rather uniquely does is enable you to continuously bind function after function to that element. So in the same function I could lets say add a click function and also a mouseover function with an action in it to change the color of the button. I’ll give a quick example below.
Using your button with the id of “mybutton” that you should have inserted into the body of your test page. Add the following code to the head of your page.
<script type="text/javascript">
//start with our document ready function
$(document).ready(function(){
//select the element by its id
$("#mybutton").click(function(){ alert("you clicked the button"); }).mouseover(function(){ $(this).css("background":"red"); });
});
</script>
In this one line of code I can now tell whether you moused over the button and then perform an action if you do and whether you clicked the button or not. Hopefully your starting the see the scope and speed of this scripting language. Thats it for now, check my jQuery category for other posts about jquery.
what also strikes me as funny is that id bet my cotton socks that its easier to develop for a mac than a windows system barring the fact its not been as widely done.