jquery introduction

Share

jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.

SYNTAX

< script >
  $(document).ready(function(){

  });
< / script> 

This is the container to wrap up jquery commands. It prevents the jquery commands to operate before the webpage loads completely.

$('htmlelement').event({
  $('htmlement').action();
});

This is the jquery command that instructs the browser to perform specific actions with reference to specific events.

Toggle Dropdown Menu

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About us</a></li>
  <li><a href="javascript:void()" class="services">Services</a>
    <ul class="drop">
      <li><a href="#">Services 1</a></li>
      <li><a href="#">Services 2</a></li>
      <li><a href="#">Services 3</a></li>
    </ul>
  </li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">contact</a></li>
</ul>

<script>
  $(document).ready(function(){
    $('.services').click(function(){
    $('.drop').toggle();
    });
  });
</script>

This command asks the class drop to toggle when the mouse is clicked on class services.

Hide / Show

Hide me Show me

<a href="javascript:void()" class="btn btn-danger" id="hide">Hide me</a>
<a href="javascript:void()" class="btn btn-success" id="show">Show me</a>
<div class="demo">
  <p>This is a demo that has two differrent jquery commands pointed to. One to hide the content while another to display it instead of toggle.</p>
</div>

<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $(".demo").hide();
    });
    $("#show").click(function(){
        $(".demo").show();
    });
});
</script>

Fade

With jQuery you can fade an element in and out of visibility. jQuery fade methods are fadeIn(), fadeOut(), fadeToggle() and fadeTo(). The jQuery fadeTo() method allows fading to a given opacity (value between 0 and 1) that is specified behind the speed with a comma.

Syntax

$(selector).fadeIn(speed);

Fade me In Fade me Out

<img src="images/file.jpg" width="100" class="fading" style="display: none;">
<a href="javascript:void()" class="btn btn-success" id="fade">Fade me In</a>
<a href="javascript:void()" class="btn btn-success" id="fadeout">Fade me Out</a>

<script>
$(document).ready(function(){
    $("#fade").click(function(){
        $(".fading").fadeIn(5000);
    });
    $("#fadeout").click(function(){
        $(".fading").fadeOut(5000, 0);
    });
});
</script>

Slide

With jQuery you can create a sliding effect on elements. jQuery slide methods are slideDown(), slideUp() and slideToggle().

Syntax

$(selector).slideDown(speed);

<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>

<script> 
$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideToggle("slow");
    });
});
</script>