Punjabi revolution tutorials JQUERY part 2

There are two ways to use JQuery in your code.

    1. Download the JQuery file from its official website. https://jquery.com/, you can use it in your code as
    2. Use some online URL from some CDN (content delivery network) like you can use the goolge URL for JQuery as below.

It is better to use  from online URL. The reason, we are not bound to update its version. The CDN will do it automatically.

Here is a sample code which uses JQuery.

Line 23: heading tag h1 with CSS class “myclass”. The class “myclass” is defined inside style tag and it making heading background as red.

Line: 24: an input tag of text field with id “x”.

Line 25: an input tag with id “btn”.

Line 3-4: is a Javascript code block for including JQuery file. It  is sytax requirement that we open and clode the script tag with src attribute of opening script tag pointing toward the online or local location of Jquery. We can not put any JavaScript code between opening and closing tags of script when they are using to include the Jquery file.

Line 7-13: it is a simple code snippet showing how to use Jquery.  It uses the concept of anonymous function. the anonymous functions are need based function, defined only where needed. There are not re-used anywhere else as they do not have any name. The are tighly bound with the elements which calls them. Let’s understand this piece of code bit by bit. first of all, we write the line


Here $ in Jquery is usually used to get the HTML element. By $(document) we get the reference to HTML whole document (all the contents between body tags). $(document).ready() is fired when the page is completed loaded or in other words, the page is ready. so after the page is ready, we start adding the interactive code. This makes our code more robust as it makes sure that processing will start only once the element is ready. now, we enclose an anonymous function as argument to ready function.  you can also consider it as call back anonymouse function as it would called only after the read() event of the $(document) is complete.

so we write enclose the ” function(){} ” inside ready();. and this function’s code is executed after the page is ready. so if we write alert(“I am ready”); inside the function. The alert would be shown only after the page has been completely loaded.

In line 9, $(“#btn”).click() we attach the click event with the element having ID “btn”. so when the click event would be complete it would call another anonymous function as call back strategy. (Note: the callback functions are called once the calling function is complete. so they make sure the synchronous function calls).

In this anonymous function, we Jquery function hide(); for the element having CSS class “myclass” and the element with tag name “input”. Here is one element <h1> with CSS class “myclass” and two elements with tag names as “input”. so all three elements would hide when the element with ID “btn” would be clicked.

Please note, for ID we add # symbol, for class, we add . symbol and for tag, we use just tag name with no symbol.

Try the code, Should you have any issue, write in the comments.