JQuery-A Easy to use javascript framework

JQuery is a JavaScript library used to create Rich Internet Applications (RIA) quickly and efficiently.Rich Internet applications (RIAs) are web applications that have the features and functionality of traditional desktop applications with th e help of a combination of CSS/JavaScript/Ajax.
JQuery neatly encapsulates an extraordinary range of common functionality, and provides a clever plugin API for any functionality not included by default.
There are numerous options available on a normal HTML page. Jquery helps to select the elements you wish to work with on the page quickly and efficiently. jQuery provides powerful selection methods that allow you to find and select objects on the page. jQuery has created its own syntax for selection, and it is quite easy to learn.

jquery

$() function
The most powerful function in jQuery. Mostly, you use this function to select elements from the document. In this example, the function is passed a string containing some Cascading Style Sheets (CSS) syntax, and jQuery finds the elements as efficiently as possible.The $() function returns a jQuery object containing all the elements that match the CSS selector. A jQuery object is something like an array but comes with a ton of special jQuery functions.
For Eg:

view plaincopy to clipboardprint?

1. $('#links a').click(function() {
2. return confirm('You are going to visit: ' + this.href);
3. });

$('#links a').click(function() { return confirm('You are going to visit: ' + this.href); }); 

#links looks for the element with an id of links. A space followed by a tells jQuery to look for all the elements inside the external_links element.

NameSpace
jQuery introduces just one symbol to the global namespace: the jQuery function/object. Everything else is either a directy property of jQuery or a method of the object returned by calls to the jQuery function.
Do not put jQuery code in a JavaScript code section if it’s not in a function.
ability to select certain elements on a page and manipulate them

Chaining
Jquery’s is able to put together a series of functions in order to improve readability and ease coding. Almost every jQuery function returns a jQuery object, meaning you can simply call additional functions on it over and over again to chain together a complete jQuery command.
This Example may help you to unserstand the chainability
test2

view plaincopy to clipboardprint?

1. script type="text/javascript">
2. $(document).ready(function() {
3. $('#cmclick').click(function() {
4. alert('Hello Codemator ');
5. });
6. $('#testclick').click(function() {
7. $('#div1').html( 'clicked' );
8. });
9. 
   
10. });
11. 
    

script type="text/javascript"> $(document).ready(function() { $('#cmclick').click(function() { alert('Hello Codemator '); }); $('#testclick').click(function() { $('#div1').html( 'clicked' ); });  });  

Cross Compatibility
When working with two or more libraries, the variable “$” is used by more than one library, meaning the engine won’t know which library should be referenced with a “$”.if you need your old $ function back (if you are already using code based on Prototype, for example) you can call jQuery.noConflict() to revert to the old $ function.

view plaincopy to clipboardprint?

1. j$ = jQuery.noConflict();
2. j$("div").addClass("a");"more-105">

j$ = jQuery.noConflict(); j$("div").addClass("a"); 

Examples

This will show every

tag in the page. Note that it will show every

, not the first matching, or the last matching.
$(”div”).show();

This will give a red background to every

tag in the page.
$(”p”).css(”background”, “#ff0000″);

This will set the innerHTML of a span element with the id of “sampleText” to “Hi”. Note the initial “#” in the command. This is the syntax used by jQuery to search for IDs, and must be included.
$(”#sampleText”).html(”Hi”);

This will create a red background on every element on the page with a CLASS of “redBack”.
$(”.redBack”).css(”background”, “#ff0000″);

This is a paragraph

This is a big div

Sample table

This will hide every

, , or

.
$(”p, span, div”).hide();

All divs with class=“panel”
jQuery(’div.panel’)

The paragraph with id=“intro”
jQuery(’p#intro’)

All visible links inside the div with id=“content”
jQuery(’div#content a:visible’)

All input fields with name=“email”
jQuery(’input[@name=email]‘)

“odd” numbered rows in a table with class “orders”
jQuery(’table.orders tr:odd’)

All external links (links that start with http://)
jQuery(’a[@href^="http://"]‘)

All paragraphs that contain one or more links
jQuery(’p[a]‘)

Set the width of div id=“primary” to 300 px.
jQuery(’div#primary’).width(300);

Apply a line-height of 1.8em to all paragraphs.
jQuery(’p').css(’line-height’, ‘1.8em’);

Apply two CSS rules to every other list item; note that the css() function can take an object instead of two strings.
jQuery(’li:odd’).css({color: ‘white’, backgroundColor: ‘black’});

Add a class of “external” to all external links (those beginning with http://), then add target=“_blank” for good measure. This makes use of chaining, described below.
jQuery(’a[@href^="http://"]‘).addClass(’external’).attr(’target’, ‘_blank’);

Iterate over every blockquote on the page, and alert its textual content (excluding HTML tags).
jQuery(’blockquote’).each(function(el) { alert(jQuery(this).text()) });

Sending data to a page with Ajax
$.post(’save.cgi’, {
text: ‘my string’,
number: 23
}, function() {
alert(’Your data has been saved.’);
});