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
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
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
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.
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
6. Show your Output
And Showing the output toward html is as simple like this
Fiddle Created for This Demo
1. Console Output –
2. HTML Output –