Getting started with jQuery for SharePoint: reference to the jQuery library

After my last few posts about JQuery, I had some remarks from readers asking me what I meant with “reference to the jquery file”. So I think it will be useful to write this post on how to start with SharePoint customization with Jquery.

What is Jquery ?
JQuery is a JavaScript library, created to simplify the way event handling, animating, ajax interacting etc.
It is a new language that you can use on html pages. So why do you want a language next to the default html? Well, html is a language to describe stuff: you can create links, add pictures and so on. What html cannot do is handle events: if I click on this button, then I want something to happen here.

So how do you start with jquery ?

Grab the library file first. You can get the newest version here: http://jquery.com/
Next, we need this library file (.js file) to be accessible. If we are going to write code in jquery, we need the jquery file because our translated code (from jquery to javascript) is in there.

There are 2 ways to do this:
– You make a reference to google CDN (Google Libraries API content distribution network for popular open-source JavaScript libraries)
– You add the .js file to a document library (personally, I like the Site assets library if you have publishing enabled) on your SharePoint environment. I suggest you put it in a central location where everyone has access to. Alternatively, you can also choose to give every site their own .js file.it is just a question of governance: both ways have their pro’s and con’s.

Ok, let us get down to business.
Google CDN reference:

<script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

Your own location:

<script src="http://yourlocation/jquery.min.js"></script>

That is the reference you need for jquery code to work. Just add that line on top of your page, somewhere in the head or body. Now your jquery can reference to that file.

Hello world
To end my post, I am giving you a “hello world” example:

<script src="http://yourlocation/jquery.min.js"></script>
<script>
     $(document).ready(function(){
         alert("Hello world");
     });
</script>

This small script just gives you a popup window with the “hello world” text. Just add this code to an existing html page.
Easy right ?
So if you see some jquery code somewhere on the internet and you want to use it, don’t forget the reference:

<script src="http://yourlocation/jquery.min.js"></script> ”