Some basics of jQuery

Well, I guess our website is now a 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 lets start adding some professional features to it! For example, lets try to add some names or some more content to the page or lets 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 recommened one. Don’t like to read and do all that stuff? Its 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>

But for those of you, who don’t like to add unknown stuff to their websites, you can download the file attached below in this post 🙂 You will read alot there, but please note that this method isn’t preferred. First or second would be great.

Lets begin the coding

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

Understanding the methods

Now lets start understand 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 lets 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! Its a round-off for the hide/show methods. You can also use the speed for the process in milliseconds. Forexample if you write 1000 in the paranthesis 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.

Advertisements

One thought on “Some basics of jQuery

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s