jquery introduction

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. Event is the term here generalized for user actions on the page like load, scroll, type in, click, hover, etc.

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>  

CSS

With jQuery, you can manipulate css of any element you like and set it to be triggered on some event.

CSS property of this paragraph will change once you click the change CSS button.

Change CSS

Since, we can't toggle css properties with jQuery, its better to toggle class rather than attempting to change the CSS which you will learn in latter lessons.

---

0 Like 0 Dislike 0 Comment Share Tweet