Some Basics of jQuery

Well, I guess our website is now good to go for uploading and deleting the files from the server. But that doesn’t look that much cool, is it? 

Adding Some Pro Features

So let's start adding some professional features to it! For example, let's try to add some names or some more content to the page or let's just add some cool styles to the page like showing the form or hiding the form. Should we? Okay then...

First Step

First step we will do will be to go to this site: http://jquery.com/ and download the latest version of jQuery or even download the recommend one. Don’t like to read and do all that stuff? It's ok! Try to add this link in the head section of your website:

<script href="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Let's Begin the Coding

Ok, so I guess you are now having your website connected to the powerful JavaScript Library jQuery. Try to understand, that jQuery itself is a JS. It is not something else, it in the code behind the scenes that makes use of the pure JS and lets you easily handle the events on the browser.

Understanding the Methods

Now let's start understanding how we can handle the events on an elements using jQuery. 

In basic js, you wrote the stuff as:

<element onclick="functionname"></element>
// such as
<button onclick="submitform"></button>

Now to handle the event, you did something like:

<script>
  function submitform() {
    // remember functions are methods so you must use
    // (). You can pass parameters through this too. 
    // and here you submitted the form or validated it 
  }
</script>

But jQuery makes it simpler and easier. How? Look for yourself:

<script>
   // now lets use the input of text as the name
   // and the submit as the button to execute the change
   $('#submit').click(function () {
     var name = $('#name').val(); // val is a method; thus ()
     alert(name); // alert the name for the user..
   });
</script>

<!-- body elements are as under -->

<input type="text" name="name" id="name" />
<input type="submit" value="Submit" id="submit" />

The above code will first take the user’s input for the name and then it will show the name as an alert when the user will click submit. You can see the code working by the usage of the id (#). 

Now let's understand what other stuff jQuery can do for us.

Hiding and Showing the Content

If we want to hide the content, or show a content sometime when we want it to be visible to the user such as a popup; customized one. Then we can make a use of jQuery and toggle it using:

<button></button>

// jQuery for this will be
$('button').hide();
$('button').show();
$('button').toggle();

Now, you might want to ask what is toggle? Toggle means if the element is hidden, it will show it, if it is visible it will hide it! It's a round-off for the hide/show methods. You can also use the speed for the process in milliseconds. For example, if you write 1000 in the parenthesis, then the process will take 1 second and will hide or show in a perfect manner for the user to understand that something is coming up for me to fill in or view.

Changing CSS Properties for Elements

There are some other uses of jQuery too, such as changing the CSS for the current element. We can do that using...

$('element').css({
  // write the properties here such as
  "width": "100px",
  "height": "50px"
});

...and so on. jQuery is an endless library of JS. You will find each and everything and will be able to edit and customize the page effects using just jQuery.

Good luck!