An Intro to the JQuery JavaScript Framework by Scott Damon Ryan of the Denver Open Source Users Group (DOSUG)

1. JQuery
SCOTT RYAN
MAY 2008
SCOTT@THERYANSPLACE.COM

2. Agenda
 Web Development Introduction
 JQuery Introduction
 Selectors
 Modifiers
 Events
 Animation
 Ajax
 Plugins

3. Best Practices
 Separation of Concerns
 HTML – Layout
 CSS – Look and Feel
 JavaScript – Event Handling and Dynamic Behavior
 Ajax – Remote access and dynamic data

4. Why JQuery
 Captures standard pattern
 Select ,add or filter, manipulate, repeat
 Unobtrusive JavaScript
 Table Striping Example

5. Table Striping (Dom Code)
var tables =
document.getElementsByTagName(quot;tablequot;);
for ( var t = 0; t < tables.length; t++ )
{
var rows = tables[t].getElementsByTagName(quot;trquot;);
for ( var i = 1; i < rows.length; i += 2 ) if ( !/(^|
s)odd(s|$)/.test( rows[i].className ) )
rows[i].className += quot; oddquot;;
}

6. Table Striping (Prototype)
$$(quot;tablequot;).each(function(table)
{
Selector.findChildElements(table,
[quot;trquot;]) .findAll(function(row,i){ return i % 2 == 1;
}) .invoke(quot;addClassNamequot;, quot;oddquot;);
});

7. Table Striping (jQuery)
 $(quot;tr:nth-child(odd)quot;).addClass(quot;oddquot;);

8. JQuery Wrapper
 $(selector) or jQuery(selector)
 Returns an array of Dom elements
 Includes many methods
 Example
 $(“div.fademeout”).fadeOut();
 Can be chained and always return a new array of
elements
 Supports CSS selectors and custom selectors

9. Document Ready Handler
 $(document).ready(function(){});
 $(function(){});
 Runs when DOM is loaded
 Cross Browser
 Don’t need to wait for resources

10. Extending JQuery
 $.fn.samplefunc = function()
{
Return
this.each(
function(){code goes here});
}
 $(‘#sample’).samplefunc().addClass(‘NewClass’);

11. Other Libraries
 jQuery.noConflict();

12. Select

13. Selectors
 Generic
 Element Name (a, p, img, tr, etc)
 ID (#theId)
 Class (.theclassname)
 a#theId.theclassname
 p a.theclassname
 Parent – Child
 ul.myList > li > a

14. Positional Selectors
 :first
 :last
 :first-child
 :last-child
 :only-child
 :nth-child(2)
 :nth-child(even)

15. Special Selectors
 :button  :submit
 :checkbox  :selected
 :checked  :text
 :contains(text string)  :visible
 :enabled
 :disabled
 :input
 :hidden

16. Managing the Wrapped Set
 size
 get(x)
 index(element)
 add(expression)
 not(expression)
 filter(expression)
 Slice(begin, end)

17. Selection Demo
 $(‘#hibiscus’)
 $(‘img[alt],img[title]’)
 $('img[alt]').add('img[title]')
 $('li > a')
 $('li > a:first')
 $(quot;#aTextFieldquot;).attr(quot;valuequot;,quot;testquot;)
 $(‘input[type=text]’)
 $(‘a[href$=.pdf]’)
 $(‘div[title^=my]’)

18. More Sample Selectors
 $(‘li:has(a)’);
 $(‘li a’);

19. Create/Filter/Manipulate

20. Creating HTML
 $(“<div>Hello</div>”) or $(“<div>”)
 $(“<div class=‘foo’>I have Foo</div><div>I Don’t</
div>”)
 .filter(“.foo”)
 .click(function(){alert (‘I am Foo’);})
 .end()
 .appendTo(“#somedivoutthere”);

21. DOM Manipulation
 Each accesses every element in the wrapped set
 Attr get and set values
 Can use json syntax
 Attr(title:’test’, value:’yes’)
 removeAttr
 $(“a[href^http://]”).attr(“target”,”_blank”);

22. More Manipulation
 addClass  append, appendTo
 removeClass  prepend, prependTo
 toggleClass  before,insertBefore
 css(name,value)  after, insertAfter
 width,height, css  wrap, wrapAll,wrapInner
 hasClass, getClassNames  remove
 html, html(data)  empty
 text , text(data)  replaceWith
(after.remove)

23. Replacing Elements
 $(‘#divToReplace’)
 .replaceWith(‘<p>This is new Data</p>’)
 .remove();

24. Events and Event Model
 Dom Level 0 Event Model
 Single Events
 Event Class (Proprietary)
 Dom Level 2 Event Model
 Multi Event
 Event Class
 Non IE
 IE Event Model
 Propagation (Bubble and Capture)

25. JQuery Event Model
 Unified Event Model
 Unified Event Object
 Supports Model 2 Semantics
 Propagation
 Cascade
 Bubble

26. Event Semantics
 bind(eventType,data,listener)
 eventTypeName(listener)
 one(eventType, data,listener)
 unbind(eventType, listener)
 unbind(event)
 trigger(eventType)
 toggle(oddListener,evenListener)

27. Simple Bind
 $(function(){
$(‘#sample’)
.bind(‘click’,clickOne)
.bind(‘click’,clickTwo)
.bind(‘click’,clickThree)
.bind(‘mouseover’,mouse);

28. Event Sample (Toggle/Inline)
$(function(){
$(‘#sample’).toggle(
function(event){
$(event.target).css(‘opacity’0.4);},
function(event){
$(event.target).css(‘opacity”,1.0;}
);
});

29. Event Sample (Hover/External)
$(‘#sample’)
.bind(‘mouseover’ , report)
.bind(‘mouseout’ , report);
function report (event) {
$(‘#output’).append(‘<div>’+event.type+’</div>’);
}
$(‘#sample’).hover(report , report);

30. Animation and Effects
 show (speed, callback)
 hide(speed, callback)
 toggle(speed, callback)
 Callback is a function that is passed a reference to this as the
calling element.
 fadeIn, fadeOut, fadeTo
 slideDown, slideUp, slideToggle
 Custom animations

31. JQuery Utility Functions
 browser, box model, float style flags
 trim
 each
 grep
 inArray, makeArray, unique, extend
 getScript

32. Plugins
 Complex extensions
 Should be developed to work with other libraries
 Custom Utility functions
 Custom wrapped methods
 Form, Dimensions, Live Query, UI, MarkitUp
 Beware of the $ but not too timid
 Naming jquery.pluginname.js
 Parameter Tricks

33. Ajax
 load (url, parameters, callback)
 serialize, serializeArray
 get
 getJSON
 post
 ajax