How to: Use JQuery – The Basics
JQuery Basics
This post will show you some of the basics of JQuery. It is not an in depth tutorial but will give you some pointers to get you started with JQuery.
OK, the first piece of code you need to use JQuery is a link to the JQuery JS library. First, download the latest JQuery Library from the following link….
http://docs.jquery.com/Downloading_jQuery
Then link to it like any other javascript file (like so)…
<script src="./js/jquery-1.4.1.js"></script>
Obviously choosing the correct path for your version web server file system setup.
The next step after linking the JQuery library is to use it! Look at the following piece of code.
<script src="./js/jquery-1.4.1.js"></script> <script> $(document).ready(function() { // here is some code }); </script>
This is essentially the same as calling a standard Javascript Window.OnLoad event handler, except it’s the JQuery way.
We are saying… when the document is ready (loaded) run some code.
This is your basic first step to using JQuery. You can also use other event handlers to launch your code, or even call the functions directly, but often when using JQuery, especially for styling/design features, you will want to run the code and so this is the easiest way.
At the moment this code is not very useful, as it doesn’t do anything, so let’s add a little more.
Let’s create a very basic html page.
<html> <head> <title>JQuery Basics</title> </head> <body> <a id="link1" class="myLink" href="#">Link 1</a> <a id="link2" class="myLink" href="#">Link 2</a> <a id="link3" class="myLink" href="#">Link 3</a> </body> </html>
Ok now let’s add some JQuery….
<html>
<head>
<title>JQuery Basics</title>
<script src="./js/jquery-1.4.1.js"></script>
<script>
$(document).ready(function() {
$('a').click(function() {
alert("This is JQuery in action!");
});
});
</script>
</head>
<body>
<a id="link1" class="myLink" href="#">Link 1</a>
<a id="link2" class="myLink" href="#">Link 2</a>
<a id="link3" class="myLink" href="#">Link 3</a>
</body>
</html>Now save the file and open it in a web browser. When you click a link you should find you get a popup.
Let’s examine this code a little further.
$('a').click(function() { alert("This is JQuery in action!"); });
The first part
$('a')
is a selector, the same as in CSS. Here we are saying apply to all of the A (anchor) tags in the document.
Next we’re saying
.click(function() {
This means for all of those A tags use the click event handler.
Finally we’re saying when that click event is found on an A tag
alert("This is JQuery in action!");
This generates the popup.
In this example we chose to use
$('a')
as our selector, but there are many other ways we can select elements.
$('#link1').click(function() {
This is the same as the getElementByID function that is commonly used in JavaScript. Here we are selecting the element with the ID “link1”.
We could also use
$('.myLink').click(function() {
to select all elements with the class name “myLink”.
In our examples we have used the click event handler to launch the code when the link is clicked. We don’t have to add an event handler here if we don’t want to.
Let’s look at another example.
<html>
<head>
<title>JQuery Basics</title>
<script src="./js/jquery-1.4.1.js"></script>
<script>
$(document).ready(function() {
$('a').addClass("red");
});
</script>
</head>
<body>
<a id="link1" class="myLink" href="#">Link 1</a>
<a id="link2" class="myLink" href="#">Link 2</a>
<a id="link3" class="myLink" href="#">Link 3</a>
</body>
</html>This sets all A tags in documents to have the class “red”.
This is a basic class which is built into the JQuery library, but you could just as easily add your own class.
<html>
<head>
<title>JQuery Basics</title>
<script src="./js/jquery-1.4.1.js"></script>
<script>
$(document).ready(function() {
$('a').addClass("myClass");
});
</script>
<style>
.myClass {
color:blue;
text-decoration:underline;
}
</style>
</head>
<body>
<a id="link1" href="#">Link 1</a>
<a id="link2" href="#">Link 2</a>
<a id="link3" href="#">Link 3</a>
</body>
</html>You could also use first, last, parent and child selectors just like in CSS. For example
$('a:first').addClass("myClass");
to select the first of the link tags and apply the class “myClass” just to that first link.
These are just a few very basic examples of how you can start using JQuery, look out for more posts in the future where we will show you some of the many other exciting features of JQuery.