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>

Comments

Post a Comment

Popular posts from this blog

Installing AdventureWorks Sample Databases from Microsoft

Image
1. Type in the following URL into your browser's address bar       http://msftdbprodsamples.codeplex.com/ 2.  Click on the "Download" button on page 3.  Click on the recommended download link 4.  Unizp the file you just downloaded 5.  Open the SQL Server Management Studio, then right click on "Databases" and then select "Restore Database" 6.  Select "Device" under "Source" 7.  Click on the "..." button, and the "Select" backup devices will appear, select "File" for "Backup media type" 8.  Click on the "Add" button, and select the "AdventureWorks2014.bak" file, then click "OK" 8.  Click "OK" on the "Select backup devices" screen 9.  Click "OK" on "Restore Database" window 10.  A message will pop up that says you have successfully restored the AdventureWorks2014 database 11.  The "AdventureWorks2014" database is now
Read more

SQL: GROUP BY And HAVING

Image
SQL GROUPING allows you to segregate data into groups so that you can work on it separately from the rest of the table records. Let's say you want to get the number of products in a category in the Northwind database Products table. You would write the following query: SELECT COUNT(*) NumberOfProductsByCategory FROM Products GROUP BY CategoryID The query above gives you the following results: The query gives you the number of products in each category, however it's not very useful. You don't really know what category the count is for in each record. You might want to try to change the query into something like this: SELECT CategoryID,COUNT(*) NumberOfProductsByCategory FROM Products GROUP BY CategoryID The above query is more useful the preceding one, however it only gives you the CategoryID number not the CategoryName in the Categories table. Being the perfectionist that you are you say to yourself, I can do better. "Yes, I can". I think that was a ca
Read more

ASP.NET : Create an Empty Web Application Project in Visual Studio 2012

Image
The purpose of this blog is to show you the bare bones of ASP.NET.  Often times when you search for a tutorial on the web you see that the tutorials are way too complex or an overkill of what you are trying to do at that moment.  So the in this blog series I want to cut through all the fat and just show you how to get things done quickly. The best way to start an ASP.NET web application is to create an empty project.  In this tutorial I will show you how to create an empty web application project in Visual Studio 2012. You can download Visual Studio 2012 at http://www.microsoft.com/visualstudio/eng/downloads#d-2012-editions   you can get a 90 trial by registering with microsoft.com.  Another alternative is to download the free Visual Studio Express version at http://www.microsoft.com/visualstudio/eng/downloads#d-2012-express   Here are the steps to create an empty web application project in Visual Studio 2012 1. Open Visual Studio 2012 2. Click on "File", then  select "N
Read more