alert('Oh shit !!!! Javascript is disabled!!!! ');


Blog Archive

The Basics of JQuery

20:15 | Posted by Unknown |

jQuery: The Basics

This is a basic tutorial, designed to help you get started using jQuery. If you don't have a test page set up yet, start by creating a new HTML page with the following contents: 

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
  </head>
  <body>
    <a href="http://jquery.com/">jQuery</a>
    <script src="jquery.js"></script>
    <script>
      
    </script>
  </body>
</html>

What is jQuery?

jQuery aims to make JavaScript more accessible for the less ‘hardcore’ developer. For example, there are many cross browser issues with regular JavaScript that jQuery deals with – it does a lot of work behind the scenes to make sure your experience is much more simple and enjoyable. Instead of spending time on the monotonous, boring cross-browser code, you can get straight to work with your cool effects, safe in the knowledge that jQuery is sorting everything out for you.

In Today’s Lesson

Today we’ll start at the very beginning. First we’ll look at how to add jQuery to your pages so you can use it. We will then look at how we select and interact with elements on the page, and then for kicks we will make an element slide across your page. Each week will add a new layer on top of the last, so I suggest you do follow this through. Remember, if you have any questions, please leave them in the comments and I’ll answer them in next week’s edition. So, with no further ado, let’s get started! You can also take a look on what we are going to create today

Including jQuery

Before we can start using jQuery’s functions we need to include the source, that is the file containing the code which makes jQuery tick. You can do this in two ways. Firstly, you can download a copy from jQuery and include it like so:

Before we can start using jQuery’s functions we need to include the source, that is the file containing the code which makes jQuery tick. You can do this in two ways. Firstly, you can download a copy from jQuery and include it like so:

<script type="text/javascript" src="path/to/jquery.min.js">

If you do it this way, be sure to download the minified version, as it reduces the strain on your server.
The second, and prefered way, is to include it from Google’s Content Delivery Network, or CDN for short. There are two main benefits to doing it this way. Firstly, we can make sure we are always using the most recent version of the library, and secondly it means your server does not have to load the file and it takes up less bandwidth. To include it from the CDN we use similar code to above:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
Labels: