JQuery Basics – For Beginners
jquery
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: http://quirksmode.org/dom/events/index.html
- 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 (element.style.styleFloat vs element.style.cssFloat)
- 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 http://jquery.com/, unzip it, place it on your own server and reference it from your web page e.g.
|
<head> <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 </head>
|
As an alternate you can also use Google Content Deliver Network (CDN) to reference JQuery library
|
<head> <title>My jQuery page</title> <script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js”></script> – v1 <script type=”text/javascript” src=”myscript.js”></script> 2 </head>
|
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’); or $(’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 });
|
