jQuery Basics with Examples

jQuery Basics

Basic Difference between jQuery and JavaScript:

The major difference between jQuery and JavaScript is that jQuery is a library, and JavaScript is a language. jQuery is not a standalone library it needs some includes whereas JavaScript is standalone language. JavaScript can be called as the base of jQuery.

We discussed Java-Script in some previous posts and if you have no knowledge of Java-Script or CSS and HTML you have to read them first and then start learning jQuery because it’s not a separate language it’s just a library of Java-Script so to understand jQuery you must have knowledge about Java-Script first.

As java-Script jQuery is also a client side scripting languages. jQuery is free and open source scripting language and it is widely used in animations and making static sites using Ajax. It’s a lightweight write less, do more scripting language which can handle a thing in just a few lines of code.

Many biggest companies over internet use jQuery like Google, Microsoft etc. It’s a cross browser independent language which makes it run similar in all browsers.

As we see in javascript we just need a <script> tag and then simply write all the code in between that tags but for using jQuery we need to download jQuery or include jQuery from some CDN.

To Download jQuery visit jQuery.com which is the official website of jQuery.

To include jQuery from CDN use Google or Microsoft provided CDN.

It’s better to use CDN instead of downloading jQuery so that its decreases the response time and web performance is much better.


The basic syntax of jQuery contains a selector and then action with.  Dot-separated.


$ Sign defines that the line is accessing jQuery.

A selector is used for selecting HTML elements, action() is the event that is performed on a selected element.



Almost all the jQuery code is written inside ready() which means that the code will not execute until the full page is loaded. It’s a good programming practice to wait for the whole document to load.

jQuery Selector:

As in CSS jQuery also use three type of selector

  • Class
  • Id
  • Tag

While using the class as a selector we write class name starting with a (.) dot.



The second option is id we write Id starting with (#).



And the last one is tag we simply write tag name as a selector.



We can also apply CSS selectors in jQuery like *, nth-child, last-child etc.

Events in jQuery:

Like Javascript jQuery also have many built-in events. And they have some event handler which executes when that event was called.

Events are like click(), dblclick(), mouseenter(), mouseleave(), keydown etc.

jQuery Click:

jQuery Double click:

jQuery Mouse over:

Hope you like the tutorial. In the next tutorial, you will learn about jQuery Effects. So stay tuned and stay blessed!