jQuery is Javascript

jQuery LogoSo where does jQuery fit in? jQuery is Javascript. It is a framework designed to make writing Javascript quicker and easier. A major problem with Javascript over the years has been its inconsistent syntax and support across different web browsers. A key part of jQuery success lies in its ability to hide all these cross browser issues from the developer so that they can concentrate on what really matters – developing stuff that works.

It is worth remembering that jQuery is Javascript. That is it is not going to be able to do some black magic that Javascript cannot do. jQuery is Javascipt but just easier to write.

It is operated as an Open Source project and is free to use. Other Frameworks are available!

jQuery is not the only Javascript framework that is available and was not first framework to be developed. Other frameworks include Prototype, script.aculo.us, Dojo and MooTools.

However, jQuery is a hugely popular choice and used by the likes of Google, WordPress, Mozilla, Microsoft, Adobe and Apple.

Tip: If required you can use multiple Javascript frameworks on a project. Read the framework documentation to ensure you follow the recommended naming conventions for multi-framework deployment.

Using the jQuery Library

To use jQuery on your web project you need to include the jQuery library in your web pages. The jQuery library is a Javascript file (JS) that effectively does all the ‘magic’.

You can include the jQuery library one of two ways.

Running jQuery Locally

Download the latest jQuery library from jquery.com. You can download the jQuery library as either an uncompressed or as a minified version. The uncompressed version is substantially larger but is easy to read if you choose to look at the jQuery code (there is no need to do so unless you want a higher level understanding of jQuery mechanics). In general the minified version is the recommended file to use.

Place this file on your web server – for example in a folder called scripts and then reference the file using the <script> tag from each HTML file that requires jQuery. The HTML code would be:

HTML

&lt;script src=&quot;scripts/jquery.min.js&quot;&gt;&lt;/script&gt;

You page is now ready to run jQuery.

Which version?

The jQuery v1.x family is currently the most commonly used. The jQuery v2.x family has the same set of command as v1.x but crucially does not offer support for Internet Explorer 6, 7 and 8. As a result the v2 file is smaller. However, be careful to think about your audience before deciding to use v2 as you may well have users out there still using the old school version of Internet Explorer.

Runing jQuery from a Third Party

Alternatively you could choose to use a copy of the jQuery library hosted on the servers of the likes of Google, Microsoft or the jQuery site itself. The following code references the jQuery library hosted by Google

HTML

&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js&quot;&gt;
&lt;/script&gt;

Although some developers may initially be reluctant to host, what can be project essential code on a third party site, there are clear benefits to this approach. Given that lots of other sites may be using the same copy of the jQuery library, there is a real possibility that the user has already visited one of these sites and that the jQuery library is therefore already is the user’s browser cache. The the minified version just 32kB.

Running jQuery – $(document).ready, Set, Go

Remember jQuery is Javascript. Therefore to start with jQuery we use the same HTML <script> tag you would with Javascript. Within the <script> tag we reference a jQuery event that does a very simple but very important job. The $(document).ready jQuery event checks to see if jQuery has loaded and ready to use. If jQuery has loaded a function is triggered. Any code that you want to run using jQuery therefore goes inside this function.

Ready to Go!

HTML

&lt;script&gt;
     $(document).ready(function(){
       // fire the code
     });
&lt;/script&gt;

Alternatively, as with ‘vanilla’ Javascript you could just place you code at the end of the document and this would remove the need for $(document).ready.

Testing with alert()

When developing you will often need to test that jQuery is running and reacting to events as you hope it too. One tool to use when testing is a Javascript function alert(). This takes a string or a variable as its parameter and results in an alert box been displayed in the page.

Hello From jQuery

The following example would produce a Javascript alert box indicating that jQuery was running successfully.

HTML

&lt;script&gt;
     $(document).ready(function(){
       alert('Hello from jQuery');
     });
&lt;/script&gt;

Leave a Comment