JQuery Basics – For Beginners

jquery beginners


JQuery vs Custom JavaScript

  •  jQueryis completely written in JavaScript, so you could replicate any of its functionalities yourself directly in JavaScript.
    • So why should we redo an existing implemented functionality?
    • jQuery is tested and used by thousands of web sites so it is reliable.
    • jQuery is optimized for performance by JavaScript experts.
  •  jQueryis also designed to avoid cross-browser compatibility problems, such as:
    • Events not fired in some browsers:
    • Adding event listeners (addEventListener standard way vs attachEvent)
    • Getting the cursor position (e.pageX and e.pageY vs e.clientX and e.clientY)
    • Changing the CSS float ( vs
    • So much to remember. . .
  •  The jQuery team works to provide a consistent interface for maximal functionality across different browsers.
  • jQuerysupports the following browsers:
    • – Firefox 2.0+
    • Internet Explorer 6+
    • Safari 3+
    • Opera 10.6+
    • Chrome 8+


Where to Start?

  •  It’s very easy to start with jquery, all you need is to follow these three simple steps
    • Access the jQuery library and include it in your page.
    • Make sure the page is ready.
    • Execute some jQuery code!

Where to Get from?

Download JQuery library from the official site of JQuery, unzip it, place it on your own server and reference it from your web page e.g.



<title>My jQuery page</title>

<script type=”text/javascript” src=”jquery-1.6.4-min.js”></script> v1

<script type=”text/javascript” src=”myscript.js”></script> v2




As an alternate you can also use Google Content Deliver Network (CDN) to reference JQuery library



<title>My jQuery page</title>

<script type=”text/javascript”

src=””></script>  – v1

<script type=”text/javascript”

src=”myscript.js”></script> 2




JQuery Function Object

Loading the jQuery library creates a single function object named jQuery or $, through which all jquery functionality is available e.g.



jQuery(’li’).css(’background-color’, ’black’);


$(’li’).css(’background-color’, ’black’);



Many other JavaScript libraries, such as Prototype, also use $ as a function or variable name. If you need to use one of the libraries in conjunction with jQuery, you can have jQuery relinquish the $ alias by executing: jQuery.noConflict();


Is The Document Ready?

JQuery code should be placed in the <script> element of your document. But sometimes jquery code executes before the page DOM is complete. In order to avoid this problem jquery provides a ready event that solve this problem and the event will fire only when the DOM is complete.


$(document).ready(function() {

// Your JQuery code comes here




Categories: Uncategorized

Leave a Reply

You must be logged in to post a comment.