How Cute the Jquery is ! With Basic Operation which is lovable – Story Version

1436582073000 jQuery

by Start Bootstrap


Hello, Guys.

We all know the importance of JQuery (though Angular rocks). I can say that JQuery is the step one should learn to have his things done.

Trust me, its simple like air / i can assure that you will love the way i explain you(might be little childish).

The simple step i would say is like this

1. Include the Library

2. Define the Input

3. Detect the Input Action – Trigger

4. Do some operation for Input 

5. Define the Output

6. Show your Output 

All the steps can be a single line or more

Let’s Begin

Step 1 : 

     Include the Library

Why include ?

Because you don’t want to write the basic function.

Do you want to do write your own ?

Then

<script>

Write all your Basic-Mid-Hard functions here

</script>

Else, Your want to be Smart enough ?

Then just include the Library in a single line

<script scr="library.js"></script>

The library.js is the file which is written by some good folks, It would have some hundreds of functions

You can include it directly by globally available CDN or download it from there ????

I too provide something http://www.sysaxiom.com/api/jquery.min.js

So, Inclusion of the library could be in a single line as i said

<script src="sysaxiom.com/api/jquery.min.js></script>

Step 2 :

     Define the Input

You can define the input / refer the input by some id or class

Define by id could be Something like

<input type="text" id="MyInput">

or

<div id="MyInput">

or

Option Select or Radio Button or Checkbox or Submit or anything you wish

Define by class could be Something like

<input type="text" class="MyInput">

or

<div class="MyInput">

or

Option Select or Radio Button or Checkbox or Submit or anything you wish

So, coming to the point. Defining the input it would be

<div id=''MyTrigger"></div>

Step 3 :

     Detect the Input Action – Trigger

You can detect the Input Action, Really many actions are there

Like Click, Change, Hover, MouseIn, MouseOut and loads

Let’s detect the input with the click action

<script>

$("#MyTrigger").click(function(){  //Here we can assure that that id with MyTrigger is clicked  })

</script>

Step 4 :

    Do some operation for Input 

What Operation shall we do at this time ???

Anything that you like

Basic – Do some 1+1 or simply smile

Mid – Do some ajax call

Exp – I really don’t know, it can be anything that you wish

Ahm, Let’s say what happened i.e., Input is received

It can be said by

Developer’s Way – Console or People’s Way – Towards the html page

Note : If we follow the first one, we don’t wan’t to define the output or show output as we are outputting the information in the place which is already defined.

It is not a big deal, just a single line as i said.

console.log("Boss !!! We got the Input");

5. Define the Output

If you are at this step then it is sure that you want to know/follow the People’s way

Here’s how we Define the Output Section

<div id="MyResult"></div>

6. Show your Output 

And Showing the output toward html is as simple like this

$("#MyResult").html("MyTrigger is Clicked");

Fiddle Created for This Demo

1. Console Output –

 

2. HTML Output –