JQuery Hello World in Web Browser Console

// Shorthand for $( document ).ready()
$(function() {
    console.log("JQUERY IS READY!");
});

Testing to See If It Works

You need a web browser console window open that supports the console object for this example. In that console window when you load or refresh the page you will see the messages JQUERY IS READY!…

This validates JQuery is loaded and ready to use. If you do not see the message the issues could be your are not connect to the Internet or you have an error in your code syntax.

Sample Console Output

JQuery Local Versus CDN

You can use a downloaded JQuery file or hot link to a CDN (Content Delivery Network). Advantage of a CDN reducing the work of your web server. This can be helpful for high volume sites. However a fallback to a local JQuery file technique is used in case the CDN becomes unaccessible. That technique is not covered in this course.

If you are loading your file from the local hard drive, you will need to download and use the JQuery file from your local hard drive as well. Web browser security settings may prevent use of a CDN when a file is loaded from the local hard drive.

If you can put your file on a web server then you can use a CDN

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

in the head section.

If you are testing your web pages without a web server then you may need to prefix the src with http://:

 <script src="http://code.jquery.com/jquery-1.11.0.min.js"><script>"

This is ok also for a web server where you do not have any secure links to your web pages. They would be prefixed with https://. These pages would need https:// prefixed in the src. All this translates to it is a good idea to build and test web pages on a web server and to install one on your local computer to make it convenient.

Downloading JQuery Minified Source

You can also downloaded JQuery minified file. The JQuery version at the time of creating the file is 1.11.0.

http://code.jquery.com/jquery-1.11.0.min.js

If you click this link, the JQuery file will open in your web browser. Then you can save the file in your webpage folders and instead load without the CDN as follows:

 <script src="jquery-1.11.0.min.js"><script>"

If you store the file in a folder then prefix the src with the path to the folder. For example if you have a child folder named javascript then:

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

JQuery is Javascript code. We call it a library. Instead of the minified version, you can also see the source before it is minified. You just drop the .min from the file name as follows:

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

JQuery Un-Minified Source

This un-minified version is used to some Javascript debugging activities where the error is suspected to be in JQuery. It is unlikely you will run into that need.

The un-minified version is also a learning opportunity for Javascript programming dealing with the DOM (Document Object Model) and AJAX (Asynchronous JavaScript and XML). You can explore the code in a “how did they do this mode” For example investigating how does the ready method work. However you will find the code employs the best coding techniques of top programmers. So keep in mind it is not necessarily easy to follow for a beginner Javascript programmer.

JQuery – Documentation

JQuery is a widely used and well documented Javascript library. You must know how to use it to be a Web Developer.

Link to JQuery Site

JQuery is a widely used and well documented Javascript library. You must know how to use it to be a Web Developer. They have a learning center that can be helpful/

Link to JQuery Documentation

JQuery – The $(selector)

JQuery is a single function that has you supply a CSS type of selector. This can include id, class and tag selectors. As well there are DOM objects it will accept. An example of a DOM object is document which indicates the web page document.

Following the JQuery function is one or more methods preceded by a period or if you like a dot. Those methods do the work. The ready method is the first example.