Getting to know jQuery

Required Knowledge

Basic CSS & HTML knowledge is required. Basic JavaScript knowledge is recommended.

What is JQuery

JQuery is a JavaScript library. A library or a framework is not a finished program. It provides extensions for programming languages that help you achieving specific results and simplify your developing process. JQuery or any other library is a totality of cooperating methods that have a cohesive structure. When you work with a library/framework you don't have to worry about the inner logic. You have to know how to you use the individual methods and which values you can assign to them. That's how jQuery works.

What can you do with jQuery?

  • Finding Elements

    JQuery has several tools for finding HTML elements. You can select single or multiple elements. An advantage is that jQuery uses CSS selectors.

  • Manipulating elements

    You can manipulate several parts of a page, create elements and add/remove new classes, IDs, attributes and styles.

  • Inserting contents

    You can easily insert existing documents without having to reload the page.

  • Animating components of a page

    With jQuery you can easily create complex animations with simple methods. You can hide or view, fade-in or fade-out, open and close, highlight and move elements. That's a lot of interactive dynamics!

  • Event Handling

    Another important topic in jQuery is event-handling. An event is a user input, for example a mouse-click, that can trigger several actions in JavaScript/jQuery.

JQuery and its community

At the moment, jQuery is the most popular JavaScript library. Other, less popular JavaScript frameworks are Dojo, Ext JS, Prototype and JQuery is used by well-known companies like Google, Oracle, Amazon or Intel.

JQuery is basically a layer between a JavaScript program and the script-engine of a browser. That sounds more complicated than it is. JQuery is just a JavaScript file, which you include before your own scripts.

JS framework infographic

JQuery is so popular, because jQuery code is well-structured, clean and simple. JQuerys slogan is: "Write less, do more" - that's exactly what jQuery makes possible. Another Advantage of jQuery is its growing community. New jQuery extensions and snippets are published daily.

Including jQuery

There are two versions of jQuery, which you can download from - the minified version and the uncompressed version. It's recommendable to use the minified version, because it's compressed and loads faster. If you later want to look at the original jQuery code to find out how it works, you can use the uncompressed file.

There are different possibilities to include jQuery in your HTML files.

Including the downloaded jQuery file

You include jQuery as any other JavaScript file:

Using jQuery with a CDN (Content Delivery Network)

In this case you can include jQuery from a host-website. In the following example we use

You can also use other CDNs, for example Google.

An advantage of CDNs is that you don't have to worry about downloading the newest version. You only have to change the url in your code. A disadvantage is, that you have to rely on third party servers.

Where do we include jQuery?

The best practice is including jQuery in the <head>-tag after your CSS files and before your own JavaScript files.

Continue to part 2