jQuery is a javascript library that simplifies code writing and takes most of the hassle out of cross browser issues. It uses the css style commands and DOM elements that we are familiar with.

Starting with the basics - Stone age coding

sticks

Update to 2010 - coding element opacity


css style for "#img1"Works with
opacity: 0.5Firefox, Safari(WebKit), Opera
-ms-filter: "alpha(opacity=50)"IE 8 in "standards" mode
filter: alpha(opacity=50)IE 6-7 (set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and 6)
(a) -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
followed by,
(b) filter: alpha(opacity=50)
IE8 in IE7 mode

That was easy!! - NOT --- How about this:

$('#img1').css('opacity', 0.5);

And that works for all browsers.






What about dynamic effects?

That was:

$('#img1').fadeOut(3000);






More dynamic effects

Suppose you want to reveal a new div on the page by clicking a button. You can do this with css but suppose we would like to fade it in gradually, also construct it from several pieces that come together, and include both text and graphics.

Show

Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.



Click the button above to see the effect.

Here is the code for that effect:







jQuery basics

LIBRARY
In order to use jQuery you need to have the jQuery library available.

(1) Link to Google by adding this to your head section:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
,or,
(2) Download a copy from jQuery and place on your server.

The "minified version" ~24K is OK for most usages.


ITS STILL JAVASCRIPT
So you surround the code blocks with:

< script type = "text/javascript" > ........... < /script >



READY FUNCTION
You are probably familiar with the "onload=run-some javascript" construct used to make sure that the page is loaded before running any code.

jQuery has the equivalent that ensures that the DOM (not necessarily the page), is loaded before running code.

jquery(document).ready(function() {
// do something here
});

or, just put the jQuery code at the END of your body element.


JQUERY ALIAS
The "$" is a short form alias for "jquery". So

"$('#img1').fadeOut(3000);"
is equivalent to
"jquery('#img1').fadeOut(3000);"


COMMAND ANATOMY

jquery or $ -- invoke the jQuery library.
('#img1') -- find an element with the id="img1".
.fadeOut() -- built-in command, fade the "img1" element.
(3000) -- optional millisecond duration.
; -- the command termination semicolon.


SELECTION POWER
Any element can be selected for css style or animation manipulation, not just those with an id.
i.e.
'p' for all p elements
'.myclass' for all class="myclass' elements
Note that if you select an element with multiple occurences like a "p" element, jQuery will index them in order. So ('p:eq(0)') is the first "p" element in the DOM.



ACTION POWER
A common usage is to create a clickable element to cause some action to trigger. The css way is to use anchor (a) elements. Some browsers support pseudo anchor elements but, of course, IE does not. With jQuery ANY element can be a clickable trigger, and it works with all browsers.

Here is the code from my fadeout example:

$('#img1').click(function() {
$('#img1').fadeOut(3000);
});

So the command items were:

$ -- invoke jQuery
('#img1') -- select element with id="img1"
.click(function(){ -- add the click action to that element
$('#img1').fadeOut(3000); -- run the fadeout command on the element "img1"
}); -- complete the function closing brackets

I set the click trigger to the element itself - "img1", but I could have used anything. In fact I faded the element back in again using a table as a trigger!

$('table').click(function() {
$('#img1').fadeIn(3000);
});

Of course that would make ANY and ALL tables act as click activators - so be careful what you ask for!






4 Line Slideshow - [click me]

We have seen simple animation effects with one line of code. Here is a slideshow using only a few more lines.


Well OK that's 4 and a half lines but who's counting.




Fancier Slideshow - [click me]

Lets add some stuff

FancySimpleSlideShow

We added stop and start buttons, some timing numbers for the fades, and some text to display along with the slides. It is still only 14 lines of code (even if you count those "half lines"!). Note that jQuery is using it's indexing to automatically increment through the page 'img' and 'p' elements. I did not need to add any numbers or identifiers, just make a list of the images and text.


Well, I had to mess with it some more so I added a background color change when the slideshow is running. So this is added to the "start" code section:

$('body').addClass('bg');

My class "bg" had a background color set to a dark gray.

To remove the custom background when the slide display is stopped I added this to the "stop" code section:

$('body').removeClass('bg');


So here is the complete code for the above slideshow:

<script  type="text/javascript">

$(function(){	
	$('.fadein img:gt(0)').hide();	 		//set img/p to zero	
	$('#info p:gt(0)').hide();
				     
             $('#start').click(function(){		//start slideshow
             
	     var slide = setInterval(function(){	//collect as variable
	     	$('body').addClass('bg');		//change bg color
      	     	$('.fadein :first-child').fadeOut(1000)
             	.next('img').fadeIn(1000)    
             	.end().appendTo('.fadein');}, 3000);	//append img to div
         
	     var text =  setInterval(function(){	//collect as variable
             	$('#info :first-child').hide()
             	.next('p').fadeIn(1000)
             	.end().appendTo('#info');}, 3000);	//append p to div
         
        		$('#stop').click(function(){	//stop slideshow     
			$('body').removeClass('bg');	//reinstate bg color      
			clearInterval(slide);
			clearInterval(text);
				   	  	  });   
					});                
	    });

</script>






jQ Widgets

jQuery has several preformed "widgets" available in its "UI" library. This is an additional library that you can download and reference in your web page. It provides both the widgets and a way to style them.

Widgets include "Accordion", "Datepicker", "Dialog", "Progressbar", and "Slider".
Here is the Datepicker widget:

Datepicker widget

Date:










The datepicker is tied to a standard form input field. In this case an input with an id = "dateselect". Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.

The code for this:

$(function() { $("#dateselect").datepicker(); });








Experimentation Time!

OK -- YOU -- try out some basic commands on this page.Online, go to:

here