First Steps in Jquery Get Started with Jquery

Reading Time: 2 minutes

If you want to get started with jquery you need to consider your first steps in jquery first. After you have included your jquery reference in your script, perhaps easiest way to start with jquery is to hide an element, with the click on the button. Example code is as follows



<script src=”js/jquery-2.1.1.min.js”></script>









<h2>Here is the title<h2>
<p>Here is one line of the text</p>
<p id=”target1″>Here is another line of the text.</p>
<button>Click me</button>



Inside initial block of code for utilizing jquery function there should be element that will have jquery code implemented stated first, in upper example $(‘button’), then there is event stated in upper example .click(function(){
After that, there is command to hide all paragraphs: $(‘p’).hide(500); Opposite command is .show(). Hiding particular element is possible with id: <p id=”target1″>Here is another line of the text.</p>. Command for hiding control with particular id is (‘#target1’).hide(100);

Another useful function is hiding/showing elements is .toggle(100); This function will show given elements if there are hidden and hide given elements if there are shown. Useful functions for hiding/showing elements are also fadeIn(‘slow’); fadeOut(‘fast’); fadeToggle(300);

So, basic functions in jquery for hiding/showing elements are:

  • .show()
  • .hide()
  • .toggle()
  • .fadeIn()
  • .fadeOut()
  • .fadeToggle()

Those methods can be called without arguments or with following arguments:

  • 500 (number in milliseconds without quotes)
  • ‘fast’
  • ‘slow’

Above mentioned methods are attached to particular control with dot (paragraph, div, button and so forth), and called from jquery code in particular event such as:

  • .click(function(){})
  • .mouseover(function(){})
  • .mouseleave(function(){})

External links:


Getting started with Jquery on Tutorialspoint
Getting started with Jquery on Createbrilliance
Getting started with Jquery on jquery-steps

Leave a Reply

Your email address will not be published. Required fields are marked *