64

What is the procedure for installing jQuery for someone new to it?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Hariharbalaji
  • 2,498
  • 8
  • 36
  • 51
  • 17
    This is obviously a beginner question, but I understand why it's being asked. The links on the "installation" page (if you can call it that) take you directly to the text file, displaying the file in the browser (as opposed to downloading it). There are no instructions to save the text as an actual file on your web server, and while experienced programmers may fill the blanks themselves, surely the whole point of documentation is to cater for dummy! With the exception of Roland (who provides an actual download link), all responses in this thread seem to overlook this point. – cartbeforehorse Jun 05 '12 at 16:10
  • I think the JQuery 'documentation' is designed to be as obtuse as possible. It's anybody's guess why. – Neutrino Oct 13 '22 at 15:09

13 Answers13

116

Get jQuery up and running in a minute or less:

Insert this into your HTML (most commonly in the head, but you can throw it before the end body tag too):

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

Then place a script element after your jQuery one. This would alert 'hello' after the DOM is ready.

<script>$(function() { alert('hello') });</script>

Read the documentation.

Using jQuery locally:

After you get a feel, try downloading jQuery locally to your computer, and link it from your script file. The structure is like so:

C:/web/index.html
C:/web/js/jquery.js

index.html:

    <head>
        <script src="js/jquery.js"></script>
        <script>$(function() { alert('hi') })</script>
    </head>

You have the advantage of relying on your saved version offline if you don't have the Internet/Wi-Fi. You can also make custom edits to the jQuery source and modify it at will.

Study the jQuery source [advanced]

Download the uncompressed version from:

http://code.jquery.com/jquery-latest.js

After you've gained a bit of JavaScript/DOM knowledge try to take it apart step by step.

Lucio
  • 4,753
  • 3
  • 48
  • 77
meder omuraliev
  • 183,342
  • 71
  • 393
  • 434
13

There is no installation per se.

You download jQuery and include it in your html files like this:

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

Of course, modify the filename so that it's the same as the downloaded script file.

Done!

Christian Davén
  • 16,713
  • 12
  • 64
  • 77
  • 18
    Disagree. Local means they have to download jQuery when they visit your site. Chances are very high they already have the google version cached. – womp Sep 22 '09 at 06:19
7

The following steps can be followed

1) Download Jquery by clicking on this link DOWNLOAD

2) Copy the js file into your root web directory eg. www.test.com/jquery-1.3.2.min.js

3) In your index.php or index.html between the head tags include the following code, and then JQuery will be installed.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
Elitmiar
  • 35,072
  • 73
  • 180
  • 229
  • 1
    If you want to download a specific version, all versions of jQuery are located [here on the jQuery site](https://code.jquery.com/jquery/) – LandedGently Sep 24 '14 at 16:56
3

There is none. Use script tags to link to google's version (or download it yourself and link to your copy if you really want to).

If you don't know how to do that, learn HTML and Javascript first before attempting to learn jQuery.

Macha
  • 14,366
  • 14
  • 57
  • 69
3

The best way is to link to the jQuery core via google, because of:

  1. Decreased latency
  2. Increased parallelism
  3. Better caching
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    Your code here...
});
</script>
Chris
  • 1,206
  • 2
  • 15
  • 35
adardesign
  • 33,973
  • 15
  • 62
  • 84
  • 3
    What about if it is an in house business app used by employees on the intranet who still have access to the internet. Would it be better to store it on a local server or still have it linked to google. – eaglei22 Feb 10 '16 at 13:26
2

There is no installation required. Just add jQuery to your application folder and give a reference to the js file.

<script type="text/javascript" src="jQuery.js"></script>

if jQuery is in the same folder of your referenced file.

rahul
  • 184,426
  • 49
  • 232
  • 263
1

Install JQuery with only JavaScript. This is not a very good solution if you are developing a website but it's great if you want JQuery in the JavaScript console of a random website that does not use JQuery already.

function loadScript(url, callback)
{
    // adding the script tag to the head as suggested before
   var head = document.getElementsByTagName('head')[0];
   var script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = url;

   // then bind the event to the callback function 
   // there are several events for cross browser compatibility
   script.onreadystatechange = callback;
   script.onload = callback;

   // fire the loading
   head.appendChild(script);
}
loadScript("http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js")

loadScript function thanks to e-satis's answer to Include JavaScript file inside JavaScript file?

Community
  • 1
  • 1
Nate
  • 12,963
  • 4
  • 59
  • 80
  • 1
    I had to sign in to tell you that this by far the most convoluted way I've ever seen someone include jQuery. Props. – DrewRobertson93 Apr 22 '15 at 19:36
  • I use this when I want to use JQuery in the console of a random webpage to see how things work or whatever. It will work no matter what the website. I guess it's not very practical when developing a website. – Nate Apr 23 '15 at 14:37
1

There are two different ways you can utilize jQuery on your website. To start off, you need to have access to your website source, whether it be straight HTML or generated HTML from a programming language. Then you need to insert a <script> tag that will render in the final output to the web browser.

Because you are new to jQuery, I highly suggest you start reading How jQuery works.

As others have mentioned, there are Content Distribution Networks (CDNs) that host JQuery -- all you need to do is point your script tag src to a specific URI. Google and Microsoft both have CDNs that are free for personal and commercial use.

Alternatively, you can download jQuery and host it on your own website.

You can also leverage both of these methods together. In the event that the Google or Microsoft CDN is down or blocked in the end user's country/firewall/proxy, you can fallback to your locally hosted copy of jQuery.

Community
  • 1
  • 1
cowgod
  • 8,626
  • 5
  • 40
  • 57
0

As pointed out, you don't need to. Use the Google AJAX Libraries API, and you get CDN hosting of jQuery for free, as depending on your site assets, jQuery can be one of the larger downloads for users.

Marc Bollinger
  • 3,109
  • 2
  • 27
  • 32
0

jQuery is just a JavaScript library (simply put, a JavaScript file). All you have to do is put it into your website directory and reference it in your HTML to use it.

For example, in the head tag of your webpage

<script type="text/javascript" src="../Js/jquery.js"></script>

You can download the current jQuery release from Downloading jQuery.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Scott
  • 1,208
  • 9
  • 28
0

There are two ways to load jQuery in your application:

1) Add jQuery from your own site.

For this, you need to add jQuery reference in <Head> section of your page with correct src path:

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

But this create an additional load to your server for download a file to client

2) ther other way to load jQuery from any other server like Google, Microsoft or jQuery itself.

As stated here:

it provides several advantages.

  1. You always use the latest jQuery framework.
  2. It reduces the load from your server.
  3. It saves bandwidth. jQuery framework will load faster from these CDN.
  4. The most important benefit is it will be cached, if the user has visited any site which is using jQuery framework from any of these CDN.

Here is the link by which you can load jQuery from Microsoft. Follow this url, it may be helpful.

http://www.asp.net/ajaxlibrary/cdn.ashx

Brad Larson
  • 170,088
  • 45
  • 397
  • 571
mayank
  • 2,615
  • 2
  • 23
  • 18
  • Note that link-only answers are discouraged here on SO. Please consider [editing your answer](http://meta.stackexchange.com/a/8259/186599) and adding a synopsis here. – Nazik Jul 16 '13 at 06:58
  • If you do copy the wording from another site, please be sure to enclose it in block quotes to make it very clear that these are not your original words. I've done this in the above answer. – Brad Larson Jul 16 '13 at 15:43
0

Well, as most of the answers pointed out, you can include the jQuery file locally as well as use Google's CDN/Microsoft CDN servers. On choosing Google vs. Microsoft CDN go Google_CDN vs. Microsoft_CDN depending on your requirement.

Generally for intranet applications include jQuery file locally and never use the CDN method since for intranet, the LAN is 10x times faster than Internet. For Internet and public facing applications use a hybrid approach as suggested by cowgod elsewhere. Also don't forget to use the nice tool JS_Compressor to compress the extra JavaScript code you add to your jQuery library. It makes JavaScript really fast.

Community
  • 1
  • 1
A_Var
  • 1,056
  • 1
  • 13
  • 23
0

If you want to use a package manager,

You can use bower:

bower install jquery-ui
XoXo
  • 1,560
  • 1
  • 16
  • 35