11/8/2009

JQUERY, PART 1

Fall 2009

CSCI 3110 Advanced Topics in Web Development

jQuery
What is it?
JavaScript library with DOM-like and BOM-like functions. Offers effects (visual, animation)

Using
Download (or link to external) jQuery script. http://jquery.com/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

11/8/2009

$
Within jQuery the $ is used as a factory function for creating and referencing page elements. $ is frequently used in JavaScript extensions. To avoid name collision:
Load the other libraries first in your code. Load jQuery. Execute the script statement jQuery.noConflict() In lieu of $() use jQuery() in jQuery-related code.

Running jQuery code

jQuery provides a custom mechanism for running code upon document complete load: $(document).ready(function() { place code here });

The above illustrates a common jQuery design patternuse of an anonymous callback function as a parameter.
Watch symbol ordering at end of sequence!

11/8/2009

jQuery custom selectors

$(selector) 3 alternate uses:
$(a)selects all anchors in the document $(#myid)selects the single item identified by the id myid $(.myclass)selects all the items identified by the class myclass Any CSS selector or tag name can be used and will return 1 or more elements as appropriate.

When an operation is applied to a collection, jQuery automatically iterates over the entire collection.

add/removeClass
$(selector).addClass(cssClassName) $(selector).removeClass(cssClassName);
Adds/removes CSS class to the specified selector
http://einstein.etsu.edu/~pittares/CSCI3110/examples/11-0.htm

11/8/2009

jQuery selector extensions to CSS

jQuery defines several custom extensions that can be used as selectors: http://docs.jquery.com/Selectors
http://einstein.etsu.edu/~pittares/CSCI3110/examples/11-1.htm

Iteration is automatic
http://einstein.etsu.edu/~pittares/CSCI3110/examples/11-2.htm

jQuery event handling

Attach a function to events: blur, change, click, focus, mouseover, etc.
$(selector).click(function() { function body here });

Within an event handling function $(this) references the element the action occurred with.
http://einstein.etsu.edu/~pittares/CSCI3110/examples/11-3.htm

Function effect not removed when event concludes:

http://einstein.etsu.edu/~pittares/CSCI3110/examples/11-3a.htm

11/8/2009

Toggle
toggle: takes in 2 functions and does function 1 on first click, function 2 on second click, then back to function 1, etc.

$('hh').toggle(function() { function body here }, function() { function body here });

http://einstein.etsu.edu/~pittares/CSCI3110/examples/11-4.htm

hover: same pattern, just change function name

http://einstein.etsu.edu/~pittares/CSCI3110/examples/11-4a.htm

toggleClass
Adds and removes classes alternately with event. (If class present, removes; if not present, adds.)
http://einstein.etsu.edu/~pittares/CSCI3110/examples/11-5.htm http://einstein.etsu.edu/~pittares/CSCI3110/examples/11-6.htm

11/8/2009

Reading and manipulating CSS properties

Find CSS value:
$(selector).css(propertyName) The above returns the property value as a string.

Set CSS value:

Just set one CSS property:
$(selector).css(property, value)

Set multiple CSS properties:

$(selector).css({property1:value1, property2:value2});
http://einstein.etsu.edu/~pittares/CSCI3110/examples/11-7.htm

Animating transitions
.show(speed) or .hide(speed) can be applied to individual elements to animate their appearance and disappearance.
Speed can be slow, normal, fast, or a number of milliseconds
http://einstein.etsu.edu/~pittares/CSCI3110/examples/11-8.htm

.fadeIn(speed) and .fadeOut(speed) are also available

http://einstein.etsu.edu/~pittares/CSCI3110/examples/11-9.htm

11/8/2009

Manipulating elements
So far weve seen addClass(), removeClass(), toggleClass(), and css(). There also exists:
$(selector).attr(attribute)retrieves the attribute value from selector $(selector).attr(attribute, value); $(selector).attr({attribute: value, attr: val}); --sets attribute/value pairs on selector
http://einstein.etsu.edu/~pittares/CSCI3110/examples/11-10.htm

Controlling event bubbling

If we have an event that could be handled by more than 1 specific event handler, the progression will be from the more specific to the more general. To stop event bubbling, capture the event in the handling function and use event.stopPropagation()
$(sel).click(function(event) { other code here; event.stopPropagation(); });
http://einstein.etsu.edu/~pittares/CSCI3110/examples/11-11.htm

11/8/2009

Another use of $
$(<p>This is a new paragraph</p>)
When HTML code is placed within $, that element is created automatically. The item is not automatically added to the page.

To add, use
$(elem).insertBefore(sel) $(elem).insertAfter(sel), $(sel).append(elem) $(sel).prepend(elem)
http://einstein.etsu.edu/~pittares/CSCI3110/examples/11-12.htm

Summary
$(sel)to choose parts of a document.
Dont forget # if an ID!

$(html)to create a new document element Event handling: $(sel).eventType(function() { });

$(sel).eventType(function(event) { }); $(this) event.stopPropagation();

11/8/2009

Summary
Class manipulation
$(sel).addClass(class); $(sel).removeClass(class) $(sel).toggleClass(class)

CSS manipulation
$(sel).css(propertyName) $(sel).css(property, value) $(sel).css({property1:value1, property2: value2,});

Summary
Attribute manipulation
$(sel).attr(attribute) $(sel).attr(attribute, value); $(sel).attr({attribute: value, attr: val,}); $(sel).removeAttr(attribute)

11/8/2009

Creating new page elements

$(html) $(elem).insertBefore(sel) $(elem).insertAfter(sel), $(sel).append(elem) $(sel).prepend(elem)

10