In order for jQuery to work, you must link to the jQuery library files from the <head> section of your web page. You can download jQuery files from:

https://jquery.com/download

At this web site, right click on the version you wish to download and select "Save As". Save the file to your own computer. Then upload the files from your computer to your site's own folders on your web hosting server. An alternative method is to link to jQuery files from Google Developers' Library or another reliable source.

There are library files for jQuery core, jQuery mobile and jQuery UI. You must have the jQuery core files, the other two versions are optional, but must be linked to if you are using the functionality created by those versions. You must load the basic version of jQuery BEFORE loading the UI or mobile files in the <head> section of your document.

The best files for using on your website are the compressed versions. The compressed versions will take up less space in your file structure and will load faster for when someone accesses your web site. The compressed versions will normally include "min" in the name of the file. The uncompressed versions of jQuery are for developers that need to refer to the source code. 

Do not link to more that one release of any of the jQuery core files. There can be conflicting code between releases.

 

Link to jQuery files in the <head> of your document

Place the <script>...</script> code into the <head>...</head> section of your HTML document.


For linking to files from Google's libraries

You can find link samples at Google Hosted Libraries. Using this method will assure that the file is available, it is a stable and high-speed way to access the files. Below is one possible example for linking to their files. Visit Google Developers' Library for other snippets and links to other scripting language library files.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Note: that in the src="" portion of the line shown above, there is no http: or https: protocol. If you are testing jQuery files on your own local computer, you may need to add the http: to the src="" or the jQuery files may not load and the <script> wont run. If the file is loaded on a remote server that is linked to the internet, you may choose to remove the http: protocol. Not having this can illiminate any issues with SSL protected or non-SSL protected servers.

It is often recommended to use Google Hosted Libraries for your jQuery files because:

  • Google's servers are likely faster than your hosting company servers
  • Google has a CDN, Content Delivery Network, that has servers located all over the world for faster access
  • Your browser caches files that it has used recently. It is likely that the visitor's browser already cached these jQuery files from Google, and will not need to take the time to download them, thus speeding up your page load.

For linking to files within your site's own folder system

Set the path and filename within src="" to the correct location where you have placed the jQuery library file within your site's own folders.

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


For linking to files at code.jquery.com

Use the method shown below. You must place the correct filename within the src="" area. There are multiple releases of jQuery library files.

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>


Linking to jQuery UI files or jQuery mobile files

If you are going to take advantage of the additional functionality and coding provided in jQuery UI and/or jQuery Mobile files, you must download those files and link to them with a separate <script>...</script> line in your <head>...</head> section. These files can also be linked to from Google Developers' Library.

Three dot cartouche

JavaScript

jQuery is written in JavaScript. The syntax and logic is often very similar, though jQuery has many shortcuts and is targeted for cross-browser appearance and functionality.

It is best to have a solid understanding of JavaScript when working with jQuery. This section introduces the basic concepts, syntax and logic of JavaScript.

Basic jQuery Concepts

This section covers the underlying concepts of jQuery. A good understanding of what is happening as the code is run can save many hours of frustration.

When you get the basics down, there is so much more that you can do with the jQuery interface.

jQuery API Methods

JQuery API Methods are convenient shortcuts for manipulation of HTML objects. They can be combined for advanced functionality.

Each jQuery API has an explanation of their use, examples for a better understanding and snippets of code that you can cut and paste elsewhere.

jQuery UI

jQuery UI is a set of library files that create widgets, interactions and effects. These files aid web developers to do common tasks that use jQuery without having to rewrite lengthy code. Some of these widgets are: accordion menus, autocomplete for forms, sliders, spinners, tabs, etc. 

This section of our website displays some of the things that you can do using jQuery UI functionality.

Tutorials

Learning by example can be the most enlightening approach. The tutorials start with easy steps with just a few methods introduced in each. Later tutorials get into more complex code for the intermediate user.

You may find it useful to come back to the tutorials just to copy and paste some of the script for other projects.

Demos

The Demo section has a variety of demos using jQuery and JavaScript. This is to highlight what all can be done with jQuery for animations, forms, games, quizzes and a multitude of other applications

Dialog

The dialog section has articles about specific uses for jQuery, discusses common problems, clever applications, and other topics.

How to ...

The How To ... section has a list of articles on how to do some commonly needed functions with JavaScript and jQuery.

Resources

The resources section allows for quick reference to resources for jQuery files. Is also has numerous reference lists for JavaScript Operators, Regular Expressions, jQuery Selectors and other things.