Getting Started with jQuery: Tutorial and Example

Before you start working with jQuery, it’s best you first understand Javascript and the difference with it and plain HTML and CSS.

The first thing I would like to advise is to start by learning basic Javascript and doing calculations in it. This will also help you experience the differences between browsers. But don’t worry, jQuery solves a lot of these problems. In the next section I’ll explain what to do before starting to write your own script.

Other useful jQuery posts:

jQuery Syntax

Basic syntax is: $(selector).action()

  • Starting dollar sign to define jQuery
  • Selector to find HTML elements
  • jQuery function action() to be performed on the elements

Before Writing Script

It is important that you give the right classes and ids to the elements, this will benefit in the jQuery development process.

Once you’ve got an overall idea of what you want to achieve and which elements you want to adjust, you can start to create a layout in HTML and CSS.

Basic Example

Now that you have the layout ready and have a basic idea of what you want, you can start to map out everything the script will do to your page. I’ll give an example of a very basic script.

<!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>Basic Example of jQuery - Hide / Show content</title>

<script type="text/javascript" src="jquery-1.6.2.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#hide").click(function(){

$("p").hide();

});

$("#show").click(function(){

$("p").show();

});

});

</script>

</head>

<body>

<p>Click on the 'Hide' / 'Show' button for disappearance / apperance of the content.</p>

<button id="hide">Hide</button>

<button id="show">Show</button>

</body>

</html>

Description of the Example

Now, lets go over the above code step by step.

Step 1: The first and most important thing is to include jQuery library as:

<script type="text/javascript" src="jquery-1.6.2.js"></script>

If you are using the above tag as it is , you need to save the “jquery-1.6.2.js” in the same folder in which you saved your html page. You can also save it in another folder but in that case you need to provide the relative path.

Step 2: Be sure the <script> tag should be inside the page <head> section.

<script type="text/javascript" src="jquery-1.6.2.js"></script>
<head>

<script type="text/javascript" src="jquery-1.6.2.js"></script>

</head>

Step 3: We enclose all of our code to be executed inside of the $document.ready() function.

$(document).ready(function(){

  $("#hide").click(function(){

    $("p").hide();

  });

  $("#show").click(function(){

    $("p").show();

  });

});

Step 4: I will be showing you a simple effect that you can do using jQuery; showing or hiding something, or a group of things, on the page. The two functions that do this are show() and hide().

$("p").hide();

$("p").show();

Step 5: That’s it! When the user clicks on the button Hide/Show, the context paragraph will be disappears/appears over the course of half of a second. Pretty painless waoo?

<p>Click on the 'Hide' / 'Show' button for disappearance / apperance of the content.</p>

<button id="hide">Hide</button>

<button id="show">Show</button>

I hope that this brief description of the example has sparked your interest in the wonderful library.

Conclusion

I hope you learnt something today, and that now you know basic syntax and functions you can get to grips with this brilliant library.

In Closing

Stay tuned for more jQuery tutorials, tricks, and tips. If you have any questions, comments, or suggestions, please let me know in the comments section below!

One thought

Comments are closed.