JQuery is a JavaScript Framework intends to decrease the time it takes to code the user enhancements; a website should always be able to work without JavaScript. JavaScript is just to improve the user experience.
Key Advantages of jQuery
- Very easy to learn and code. If you are familiar with basic JavaScript and CSS you should be able to pick it up quickly.
- A wide range of plugins available thanks to its large development community.
- Its cross browser compatibility is great. The same code will be able to work in Firefox, Chrome, Opera, Safari or even IE6.
- JQuery has fantastic documentation, which has a Firefox search engine plugin.
Unfortunately there is one disadvantage with jQuery. If a developer incorrectly utilizes it, the page loading times will drastically increase. This is mostly down to a developer adding lots of plugins without considering the total bandwidth required to send the data.
Below are some simple examples of jQuery in action.
JQuery “Shell” HTML
This code sample shows how to include jQuery into a page. In some cases it’s better to place JavaScript at the bottom of the page as it decreases rendering time, as the JavaScript will be pulled once the page is already rendered instead of waiting for the file to load then continuing to render.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery Shell</title> </head> <body> <!-- Put your content here --> <script type="text/javascript" src="http://js.fullondesign.co.uk/jquery-1.3.2.min.js"></script> <!-- Include the jQuery Engine/Libary --> <!-- Add any jQuery plugins here --> <script type="text/javascript"> //<![CDATA[ // Put your jQuery Here //]]> </script> </body> </html>
Changing the Class on an Object
In this example, you will see how jQuery changes a class on an Object with the ID object. To select the object we (like in CSS) use the variable “#object”. Likewise if you wanted to select something by class, you would just use “.class_name_here”. In this example, we will use the addClass & removeClass attributes.
<div id="object" class="empty"></div>
<script type="text/javascript" src="http://js.fullondesign.co.uk/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$("#object").removeClass('empty');
$("#object").addClass('full');
//]]>
</script>
Changing the InnerHTML of an object
The code in this example is similar code to the last example. But this time using the html attribute.
<div id="object" class="empty"></div>
<script type="text/javascript" src="http://js.fullondesign.co.uk/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$("#object").html('This is the jQuery InnerHTML in action');
//]]>
</script>
This is quite a simplified introduction to jQuery, if you want to learn a little more about jQuery take a look at how jQuery Works.
Just Posted: An introduction to jQuery | http://tinyurl.com/p4q2rf
I really like your blog and i respect your work. I’ll be a frequent visitor.