What is jQuery? What are features available? What is the Syntax of jQuery and examples?

In this article I will explain what is jQuery? What are features available? What is the Syntax of jQuery and examples?

The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery is not a language, The JQuery library is a single JavaScript file, containing all of its common DOM, event, effects, and Ajax functions. It can be included within a web page by linking to a local copy, or to one of the many copies available from public servers.

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.

The jQuery library contains the following features:

1.      HTML/DOM manipulation

2.      CSS manipulation

3.      HTML event methods

4.      Effects and animations

5.      AJAX

6.      Utilities

Where to Download jQuery from?

jQuery JavaScript file can be downloaded from jQuery Official website (http://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

<script type="text/javascript" src="jQuery-1.4.1-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()

             1.      A $ sign to define/access jQuery

             2.      A (selector) to "query (or find)" HTML elements

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

Examples:

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

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

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

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 causes rendering the file in the browser, you do not need to refer jQuery file in 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 does it affect 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.

Simple Jquery Example:

$( document ).ready(function() {

    $( "a" ).click(function( event ) {

        alert( "Thanks for visiting!" );

    });

});