Apprentice jQuery.js

Get started with jQuery.js quickly.

Posted by Rishi Raj Gujadhur 1/30/2016

Table of content

 

Prerequisites


Basic knowledge of:
  • HTML
  • CSS
  • JavaScript
 

A. What is jQuery?




JQuery is a JavaScript library which makes it easier to use JavaScript on a website as the library takes common tasks that requires multiple lines of JavaScript code to achieve, and wraps them into methods that can be called with a line of code.

Of Course, jQuery is one of the countless JavaScript libraries but! its the most popular one. A Library, you asked? Indeed, however we call it a code library in programming. Code libraries are beyond the scope of this tutorial but feel free to try this magical portal: https://msdn.microsoft.com/en-us/library/kews042w(v=vs.71).aspx 

Or jump to this one to see examples of website which are using jQuery: http://www.awwwards.com/websites/jquery/

B. Getting Started



To implement jQuery to your website.

1. Copy and paste the following code snipet and paste it just before the end of your body tag in your HTML document. 

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
 
<script ----> the script tag is used to add JavaScript code references to HTML documents.

src="url" ---->the src (source) attribute is used to contain the file path of your JavaScript file.

https://code.jquery.com/jquery-1.12.0.min.js ----> The jQuery file that we are using is stored on a CDN contend delivery network (the internet). :) 
 

C. Document Ready


The Document.Ready function ensures that all the jQuery actions that we want to perform on HTML elements are done only once the HTML document has fully loaded. 

Otherwise the jQuery actions that you applied may not work since the elements on which these actions were supposed to occur, may not even have been fully created until the document has fully loaded.

Quick tip: With jQuery, we can select the HTML elements on which we want to perform an action.

1. Reference the jQuery library at just before the end of the body tag, by typing:

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>

2. Right after the your jQuery reference code but just before end this tag: </body>, type:

​<script>

$(document).Ready(function)
{
  alert("Watson, look at the sky and tell me what see.");  
}

</script>
 
$(document).Ready ----> Once the HTML document has fully loaded.

alert("..."); ----> (JavaScript function) Shows a dialog box with a message

"" ----> Message to be shown using the alert function needs to be quoted; "My Message".

; ----> Semicolon required to tell the system that its the end of the alert function.  

D. jQuery Advantages

  • Cross browser compatibility.
  • Easier to use than raw JavaScript
  • jQuery has rich ajax support
  • jQuery has a large development communities support 
  • jQuery is extensible
  • jQuery have countless free plugins such as the autocomplete plugin
  • There is a excellent documentation for jQuery on its website.

E. jQuery 1.x VS jQuery 2.x

  • 1.x supports older web browsers whereas 2.x does not.