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.
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 meThis is a demo that has two differrent jquery commands pointed to. One to hide the content while another to display it instead of toggle.
<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>