Tech Junkie Blog - Real World Tutorials, Happy Coding!: JQuery: Using JQuery CDN Set Up

Wednesday, March 25, 2015

JQuery: Using JQuery CDN Set Up

In this blog I will go over how to set up jQuery for your web pages.  There are two methods to using jQuery.  The first is the use the CDN URLs that are hosted by jQuery, Google, and Microsoft just to name a few.  In this tutorial we will set the CDN from Google.  The process should be the same for jQuery and Microsoft CDNs.

Here are the URL for Google's jQuery Library:


1.x snippet: https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js

2.x snippet: https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js

You might be wondering why there are two versions of jQuery 1.x and 2.x, they both use the same APIs and they pretty much mirror each other on a release basis.  The only difference is that the 2.x versions does not support IE 6,7, or 8.  Just to be on the safe side I always use the 1.x versions.

So here are the steps to using jQuery in your web page:

1.  First create an HTML5 page markup

   <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        
    </body>
</html>
Now add the following script tag to the head element
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

To test if jQuery is working write a simple alert message using the $ sign, which is short hand the jQuery object.
<script>     
     $(document).ready(alert("jquery is   
      working"));
</script>

You should see an alert message that says "jquery is working" when you load the page.

jquery javascript test alert message









Here is the complete markup code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script>
   $(document).ready(alert("jquery is working"));
  </script>
    </head>
    <body> 
    </body>
</html>


Previous: JQuery: Infinite Loop Button Click
Next: JQuery Basics: Selectors

1 comment:

Subscribe to: Post Comments (Atom)

Search This Blog