How to Add jQuery to a Page

After you have jQuery downloaded or know where to find the CDN-hosted version, you need to reference it in your page. jQuery is just like any external JavaScript file.

Add local jQuery to a page

Download jQuery and place it in the web server's document root. If you don't remember the filename, locate it in your document root. It'll be named like jquery-1.8.1.min.js.(Note that the version number will almost certainly be different by the time you read this.)

Adding jQuery to a page means adding an external script reference, like this:

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

That reference is usually added in the <head> portion of a page. This listing shows a page with the jQuery script referenced in the <head> section.

<!doctype html>
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" 
      src="jquery-1.8.1.min.js"></script>
</head>
<body>
<h1>Adding jQuery</h1>
</body>
</html>

That's all there is to adding jQuery.

Add CDN jQuery to a page

Loading CDN-hosted jQuery is just like loading it locally, minus the part where you have jQuery stored on your hard drive, of course. Other than that detail, you simply add jQuery like any other external JavaScript file. Here's an example:

<script type="text/javascript" 
src=" http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js">
</script>

But how do you find out the secret location where jQuery is hosted for public use? Go to jQuery's website and you can find a CDN-hosted jQuery.

Within the Download page, you see a section for CDN-hosted jQuery. When you find one you want to use, right-click and select the Copy Link Location option or similar from the context menu in your browser. That will copy the URL to your clipboard for later use.

A full page example with CDN-hosted jQuery looks strikingly similar to the page for the locally hosted copy, only the src attribute has changed. This listing shows the HTML and JavaScript; note specifically the <script> tag in the <head> section.

<!doctype html>
<html>
<head>
<title>jQuery</title>
<script type="text/javascript"
   src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js">
</script>
</head>
<body>
<h1>Adding jQuery</h1>
</body>
</html>
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com