Learn Basic jQuery Fundamentals: Some Cool Stuffs

What is jQuery

jQuery is not a language but it is a well written JavaScript code. It is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

Licensing: It is free, open source software Dual-licensed under the MIT License and the GNU General Public License. Microsoft has integrated jQuery officially into its IDE Visual Studio 2010 and jQuery intellisense is available in Visual Studio 2010 now.

Why jQuery

jQuery is very compact and well written JavaScript code that increases the productivity of the developer by enabling them to achieve critical UI functionality by writing very less amount of code.

It helps to:

• Improve the performance of the application

• Develop most browser compatible web page

• Implement UI related critical functionality without writing hundreds of lines of codes

• Fast

• Extensible – jQuery can be extended to implement customized behavior

Other advantages of jQuery are:

• No need to learn fresh new syntaxes to use jQuery, knowing simple JavaScript syntax is enough

• Simple and Cleaner code, no need to write several lines of codes to achieve complex functionality.

Where to download jQuery from

jQuery javascript file can be downloaded from jQuery Official website http://www.jquery.com/

How to use jQuery

jQuery usually comes as a single JavaScript file containing everything comes out of the box with jQuery. It can be included within a web page using the following mark-up:

To load local jQuery file

Ideally this markup is kept in under <head></head> tag of your web page, however you are free to keep anywhere you want.

Do I need to refer jQuery file both in Master page/base page/template page and content page

No, master page/base page/ template page basically helps to create consistent layout for the page in the application. In case you have referred the jQuery file in master page/base page/ template page that cause rendering the file in the browser, you do not need to refer jQuery file the content page again.

In summary, there should not be more than one <script> tag with jQuery file reference in the source code of the rendered web page in the browser.

What is the difference between jQuery-x.x.x.js and jQuery.x.x.x-min.js

In terms of functionality, there is no difference between the jQuery-x.x.x.js and jQuery-x.x.x-min.js (also called minified version). However this can play a vital role in the performance of the web page.

How it affects the performance?

jQuery-1.4.4.js file size is 178 KB as against its minified version jQuery-1.4.4-min.js that is only 76.7 KB in size. So when your page loads in the client’s browser if you are not using minified version, it loads 178 KB file that takes more time to load than 76.7 KB.

Which version of jQuery file should be used

In most of the recent releases so far, the core functionality of jQuery remains same however some cooler and better features are added. Ideally you should use the latest jQuery files available on the jQuery.com website. By doing this you ensure that your earlier functionality will still work and you can use new features available as part of the new release.

jQuery is also available from the two leading CDNs (Content Delivery Network)

jQuery is also available from the two leading CDNs

An HTML example of jQuery

Try the following example which will give you a first hand experience of jQuery

An HTML example of jQuery

jQuery Syntax

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

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

• A dollar sign to define jQuery

• A (selector) to “query (or find)” HTML elements

• A jQuery action() to be performed on the element(s)

jQuery html examples 1

Some cool examples of jQuery

jQuery html examples 2

This entry was posted in Latest Technologies, Tutorials. Bookmark the permalink.

Leave a Reply

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

*

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>