What is the purpose of this code:

<script>window.jQuery || document.write('<script src="jquery-1.11.3.min.js"><\/script>')</script>

as opposed to:

<script src="jquery-1.11.3.min.js"></script>

..when linking jquery to my html file.

This might be a stupid question. I'm new to web development. My jquery won't work when I use the first code. When I cut it down to the second code, it loads but it is glitchy. I have this code just before </body>. Any help is greatly appreciated.

What is the purpose of this code:

<script>window.jQuery || document.write('<script src="jquery-1.11.3.min.js"><\/script>')</script>

as opposed to:

<script src="jquery-1.11.3.min.js"></script>

..when linking jquery to my html file.

This might be a stupid question. I'm new to web development. My jquery won't work when I use the first code. When I cut it down to the second code, it loads but it is glitchy. I have this code just before </body>. Any help is greatly appreciated.

• javascript
• jquery

• The second version is fine for most "normal" web pages. What do you mean "glitchy"? Please be more specific. You mention having the code just before </body>, but where is your code that actually uses jQuery? – nnnnnn Commented May 17, 2015 at 4:43
• I'm using aptana 3. When I preview, the page doesn't ever stop loading, but the jquery function i've written works. It makes aptana run slower as well. I have the code that loads jquery just above the code that links to my jquery file. I believe that is the right order. – Jason Carrick Commented May 17, 2015 at 4:52

3 Answers 3

That line of code is usually used when you load jquery from a CDN, like

<script src="//code.jquery./jquery-1.11.3.min.js"></script>

<script>window.jQuery || document.write('<script src="jquery-1.11.3.min.js"><\/script>')</script>

The second script tag will check if window.jQuery is defined (which means the script was successfully loaded from the CDN). If not load a locally stored version.

The purpose of the first code piece is it checks if jQuery has been loaded or not. That is what

window.jQuery || ....

is saying. Either window.jQuery exists OR do something else.

If window.jQuery is undefined, it will

document.write('<script src="jquery-1.11.3.min.js"><\/script>')

to load jQuery.

This can be useful when you dynamically load HTML content and you do not always need jQuery. If the order of events does not dictate exactly when you will need jQuery, you can explicilty load it when it is needed.

Traditionally Javascript events were attached to a document using an “onload” attribute in the tag of the page. Forget this practice. Wipe it from your mind. jQuery provides us with a special utility on the document object, called “ready”, allowing us to execute code ONLY after the DOM has pletely finished loading. This is the key to unobtrusive DOM scripting, as it allows us to pletely separate our Javascript code from our markup. Using $(document).ready(), we can queue up a series of events and have them execute after the DOM is initialized. This means that we can create entire effects for our pages without changing the markup for the elements in question.