Documentos de Académico
Documentos de Profesional
Documentos de Cultura
JQUERY, PART 1
Fall 2009
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.
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
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
Iteration is automatic
http://einstein.etsu.edu/~pittares/CSCI3110/examples/11-2.htm
Within an event handling function $(this) references the element the action occurred with.
http://einstein.etsu.edu/~pittares/CSCI3110/examples/11-3.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.
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
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
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
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!
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
10