introduction to jquery
DESCRIPTION
Presentation at Denver Open Source Users\' Group and the Colorado Springs Open Source User\'s Group on JQueryTRANSCRIPT
![Page 2: Introduction to JQuery](https://reader033.vdocuments.us/reader033/viewer/2022052823/5552f5adb4c90587048b4d96/html5/thumbnails/2.jpg)
Agenda
Web Development IntroductionJQuery IntroductionSelectorsModifiersEventsAnimationAjaxPlugins
![Page 3: Introduction to JQuery](https://reader033.vdocuments.us/reader033/viewer/2022052823/5552f5adb4c90587048b4d96/html5/thumbnails/3.jpg)
Best Practices
Separation of Concerns HTML – Layout CSS – Look and Feel JavaScript – Event Handling and Dynamic Behavior Ajax – Remote access and dynamic data
![Page 4: Introduction to JQuery](https://reader033.vdocuments.us/reader033/viewer/2022052823/5552f5adb4c90587048b4d96/html5/thumbnails/4.jpg)
Why JQuery
Captures standard pattern Select ,add or filter, manipulate, repeat Unobtrusive JavaScript
Table Striping Example
![Page 5: Introduction to JQuery](https://reader033.vdocuments.us/reader033/viewer/2022052823/5552f5adb4c90587048b4d96/html5/thumbnails/5.jpg)
Table Striping (Dom Code)
var tables = document.getElementsByTagName("table");
for ( var t = 0; t < tables.length; t++ ) { var rows =
tables[t].getElementsByTagName("tr"); for ( var i = 1; i < rows.length; i += 2 ) if ( !/(^|s)odd(s|$)/.test( rows[i].className ) ) rows[i].className += " odd";
}
![Page 6: Introduction to JQuery](https://reader033.vdocuments.us/reader033/viewer/2022052823/5552f5adb4c90587048b4d96/html5/thumbnails/6.jpg)
Table Striping (Prototype)
$$("table").each(function(table){ Selector.findChildElements(table,
["tr"]) .findAll(function(row,i){ return i % 2 == 1;
}) .invoke("addClassName", "odd"); });
![Page 7: Introduction to JQuery](https://reader033.vdocuments.us/reader033/viewer/2022052823/5552f5adb4c90587048b4d96/html5/thumbnails/7.jpg)
Table Striping (jQuery)
$("tr:nth-child(odd)").addClass("odd");
![Page 8: Introduction to JQuery](https://reader033.vdocuments.us/reader033/viewer/2022052823/5552f5adb4c90587048b4d96/html5/thumbnails/8.jpg)
JQuery Wrapper
$(selector) or jQuery(selector)Returns an array of Dom elementsIncludes many methods
Example $(“div.fademeout”).fadeOut();
Can be chained and always return a new array of elements
Supports CSS selectors and custom selectors
![Page 9: Introduction to JQuery](https://reader033.vdocuments.us/reader033/viewer/2022052823/5552f5adb4c90587048b4d96/html5/thumbnails/9.jpg)
Document Ready Handler
$(document).ready(function(){});$(function(){});
Runs when DOM is loaded Cross Browser Don’t need to wait for resources
![Page 10: Introduction to JQuery](https://reader033.vdocuments.us/reader033/viewer/2022052823/5552f5adb4c90587048b4d96/html5/thumbnails/10.jpg)
Extending JQuery
$.fn.samplefunc = function(){Return this.each(function(){code goes here});}
$(‘#sample’).samplefunc().addClass(‘NewClass’);
![Page 11: Introduction to JQuery](https://reader033.vdocuments.us/reader033/viewer/2022052823/5552f5adb4c90587048b4d96/html5/thumbnails/11.jpg)
Other Libraries
jQuery.noConflict();
![Page 12: Introduction to JQuery](https://reader033.vdocuments.us/reader033/viewer/2022052823/5552f5adb4c90587048b4d96/html5/thumbnails/12.jpg)
Select
![Page 13: Introduction to JQuery](https://reader033.vdocuments.us/reader033/viewer/2022052823/5552f5adb4c90587048b4d96/html5/thumbnails/13.jpg)
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
![Page 14: Introduction to JQuery](https://reader033.vdocuments.us/reader033/viewer/2022052823/5552f5adb4c90587048b4d96/html5/thumbnails/14.jpg)
Positional Selectors
:first:last:first-child:last-child:only-child:nth-child(2):nth-child(even)
![Page 15: Introduction to JQuery](https://reader033.vdocuments.us/reader033/viewer/2022052823/5552f5adb4c90587048b4d96/html5/thumbnails/15.jpg)
Special Selectors
:button:checkbox:checked:contains(text string):enabled:disabled:input:hidden
:submit:selected:text:visible
![Page 16: Introduction to JQuery](https://reader033.vdocuments.us/reader033/viewer/2022052823/5552f5adb4c90587048b4d96/html5/thumbnails/16.jpg)
Managing the Wrapped Set
sizeget(x)index(element)add(expression)not(expression)filter(expression)Slice(begin, end)
![Page 17: Introduction to JQuery](https://reader033.vdocuments.us/reader033/viewer/2022052823/5552f5adb4c90587048b4d96/html5/thumbnails/17.jpg)
Selection Demo
$(‘#hibiscus’)$(‘img[alt],img[title]’)$('img[alt]').add('img[title]')$('li > a')$('li > a:first')$("#aTextField").attr("value","test")$(‘input[type=text]’)$(‘a[href$=.pdf]’)$(‘div[title^=my]’)
![Page 18: Introduction to JQuery](https://reader033.vdocuments.us/reader033/viewer/2022052823/5552f5adb4c90587048b4d96/html5/thumbnails/18.jpg)
More Sample Selectors
$(‘li:has(a)’);$(‘li a’);
![Page 19: Introduction to JQuery](https://reader033.vdocuments.us/reader033/viewer/2022052823/5552f5adb4c90587048b4d96/html5/thumbnails/19.jpg)
Create/Filter/Manipulate
![Page 20: Introduction to JQuery](https://reader033.vdocuments.us/reader033/viewer/2022052823/5552f5adb4c90587048b4d96/html5/thumbnails/20.jpg)
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”);
![Page 21: Introduction to JQuery](https://reader033.vdocuments.us/reader033/viewer/2022052823/5552f5adb4c90587048b4d96/html5/thumbnails/21.jpg)
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”);
![Page 22: Introduction to JQuery](https://reader033.vdocuments.us/reader033/viewer/2022052823/5552f5adb4c90587048b4d96/html5/thumbnails/22.jpg)
More Manipulation
addClassremoveClasstoggleClasscss(name,value)width,height, csshasClass,
getClassNameshtml, html(data)text , text(data)
append, appendToprepend, prependTobefore,insertBeforeafter, insertAfterwrap,
wrapAll,wrapInnerremoveemptyreplaceWith
(after.remove)
![Page 23: Introduction to JQuery](https://reader033.vdocuments.us/reader033/viewer/2022052823/5552f5adb4c90587048b4d96/html5/thumbnails/23.jpg)
Replacing Elements
$(‘#divToReplace’).replaceWith(‘<p>This is new Data</p>’).remove();
![Page 24: Introduction to JQuery](https://reader033.vdocuments.us/reader033/viewer/2022052823/5552f5adb4c90587048b4d96/html5/thumbnails/24.jpg)
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 ModelPropagation (Bubble and Capture)
![Page 25: Introduction to JQuery](https://reader033.vdocuments.us/reader033/viewer/2022052823/5552f5adb4c90587048b4d96/html5/thumbnails/25.jpg)
JQuery Event Model
Unified Event ModelUnified Event ObjectSupports Model 2 SemanticsPropagation
Cascade Bubble
![Page 26: Introduction to JQuery](https://reader033.vdocuments.us/reader033/viewer/2022052823/5552f5adb4c90587048b4d96/html5/thumbnails/26.jpg)
Event Semantics
bind(eventType,data,listener)eventTypeName(listener)one(eventType, data,listener)unbind(eventType, listener)unbind(event)trigger(eventType)toggle(oddListener,evenListener)
![Page 27: Introduction to JQuery](https://reader033.vdocuments.us/reader033/viewer/2022052823/5552f5adb4c90587048b4d96/html5/thumbnails/27.jpg)
Simple Bind
$(function(){$(‘#sample’).bind(‘click’,clickOne).bind(‘click’,clickTwo).bind(‘click’,clickThree).bind(‘mouseover’,mouse);
![Page 28: Introduction to JQuery](https://reader033.vdocuments.us/reader033/viewer/2022052823/5552f5adb4c90587048b4d96/html5/thumbnails/28.jpg)
Event Sample (Toggle/Inline)
$(function(){ $(‘#sample’).toggle( function(event){ $(event.target).css(‘opacity’0.4);}, function(event){ $(event.target).css(‘opacity”,1.0;} );});
![Page 29: Introduction to JQuery](https://reader033.vdocuments.us/reader033/viewer/2022052823/5552f5adb4c90587048b4d96/html5/thumbnails/29.jpg)
Event Sample (Hover/External)
$(‘#sample’) .bind(‘mouseover’ , report) .bind(‘mouseout’ , report);
function report (event) {
$(‘#output’).append(‘<div>’+event.type+’</div>’);
}
$(‘#sample’).hover(report , report);
![Page 30: Introduction to JQuery](https://reader033.vdocuments.us/reader033/viewer/2022052823/5552f5adb4c90587048b4d96/html5/thumbnails/30.jpg)
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, fadeToslideDown, slideUp, slideToggleCustom animations
![Page 31: Introduction to JQuery](https://reader033.vdocuments.us/reader033/viewer/2022052823/5552f5adb4c90587048b4d96/html5/thumbnails/31.jpg)
JQuery Utility Functions
browser, box model, float style flagstrimeachgrepinArray, makeArray, unique, extendgetScript
![Page 32: Introduction to JQuery](https://reader033.vdocuments.us/reader033/viewer/2022052823/5552f5adb4c90587048b4d96/html5/thumbnails/32.jpg)
Plugins
Complex extensionsShould be developed to work with other
librariesCustom Utility functionsCustom wrapped methodsForm, Dimensions, Live Query, UI, MarkitUpBeware of the $ but not too timidNaming jquery.pluginname.jsParameter Tricks
![Page 33: Introduction to JQuery](https://reader033.vdocuments.us/reader033/viewer/2022052823/5552f5adb4c90587048b4d96/html5/thumbnails/33.jpg)
Ajax
load (url, parameters, callback)serialize, serializeArraygetgetJSONpostajax