menu
Ad goes here

Friday, 25 April 2014

Why jQuery and how to start?

jQueryjQuery is a JavaScript Library which is easy to learn and extremely powerful. You can use your JavaScript in simple way through this library. But before start using jQuery you should have a basic knowledge on HTML, CSS and JavaScript. You can make a quick solution through a single line of code of jquery instead of writing lots of code. So start learning jQuery and apply them on your up coming projects.

Installation:

First you have to download jQuery library to use it in your master page. Please download it from jQuery.com [http://jquery.com/download/] and use it inside the <head></head> tag.
<head>
<script src="jquery-1.11.0.min.js"></script>
</head>

Start to use basic action which needs frequently to make your work easy:

Please see below, how a basic syntax works:

$(use class name ID or html tag).action ()

The $ sign will access the jQuery library to perform the action, like hide, show and many more by selecting through class name, ID or html tags.

But it’s a best practice to use jQuery syntax inside a document ready event. The document ready event will help you to prevent functioning jQuery action before page loading. So use your code inside the document ready event to work it properly.

$(document).ready(function(){

   // Add your jQuery method here

});
There is a shorter way to use this event, which below here.
$(function(){

   // Add your jQuery method here

});

Let’s start hiding elements through jQuery method:


Hide Current element:

$(document).ready(function(){
  $("button").click(function(){
    $(this).hide();
  });
});
HTML:
<button>Click to hide this button</button>

Output:


Hide a particular element:

$(document).ready(function(){
  $("button").click(function(){
    $("#HideMe").hide();
  });
});
HTML:
<button>Click here</button>
<div id="HideMe">Click to hide this text</div>

Output:
Click to hide this box.


Show Hide/ Toggle a particular element:

$(document).ready(function(){
  $("button").click(function(){
    $("#ToggleMe").toggle();
  });
});
HTML:
<button>Show/ Hide</button>
<div id="HideMe">Click to hide this box</div>

Output:
Click to hide this box.


You will get more post on jQuery to learn it step by step in a simple way.
Please share this post and like our page to support us.

No comments:

Post a Comment

Books for you (Crafted with )