12th October, 2014


What is it?

  • 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.
  • jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

Features it offers:

  • HTML/DOM manipulation
  • CSS manipulation
  • HTML event methods
  • Effects and animations
  • AJAX
  • Utilities

jQuery installation

  • Download the jQuery library from jQuery.com
  • Include jQuery as a script in your head section from a CDN, like Google

Let's try out both!

First method - download

  • Go to jquery.com/download
  • Production version - this is for your live website because it has been minified and compressed
  • Development version - this is for testing and development (uncompressed and readable code)
  • Download the Development version
  • Place the downloaded file in the current working directory or in the "js" directory
  • Ready to go!

Include in your html page

<script src="jquery-1.11.1.min.js"></script>
  • If you don't want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network).

  • Both Google and Microsoft host jQuery.

Second method - plug in

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

jQuery Syntax

The jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s).

Basic syntax is: $(selector).action()

  • A $ sign to define/access jQuery
  • A (selector) to "query (or find)" HTML elements
  • A jQuery action() to be performed on the element(s)


  • $(this).hide() - hides the current element.

  • $("p").hide() - hides all <p> elements.

  • $(".test").hide() - hides all elements with class="test".

  • $("#test").hide() - hides the element with id="test".

The Document ready event


   // jQuery methods go here...


Selectors, revisited!

  • The element Selector


  • The #id Selector

  • The .class Selector


jQuery events

//mouseEnter methods
  alert("You entered p1!");



By Abhiram Ravikumar


  • 1,133
Loading comments...

More from Abhiram Ravikumar