jQuery Basics

Basic structure, selecting elements, animation

Transcript

1. jQuery($) write less, do more Wednesday, July 31, 13
2. What is it? • JavaScript framework, by John Resig • Good for: • DOM handling and traversal • Events • Animation • Ajax Wednesday, July 31, 13
3. Script reference • https://developers.google.com/speed/ libraries/devguide#jquery • URL: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> • Listed without the http protocol, you may need to add it if it doesn’t work for you Wednesday, July 31, 13
4. Document ready wrapper • Make sure to wrap all your functions inside a document ready wrapper • Prevents errors that can occur when elements have not yet loaded into the browser • $(document).ready(function() { • //insert function here • }); Wednesday, July 31, 13
5. DOM handling • DOM - document object model • makes ‘walking the dom’ a breeze • older methods: • getElementById • getElementsByTagName • advanced ways to select elements • easy to update html content Wednesday, July 31, 13
6. DOM example • <div id=”modal”> </div> • $(‘#modal’).html(‘Success! Your form has been sent.’).addClass(‘success’); • $(‘#modal’).html(‘<p>Oops!Something went wrong. Try again.</ p>’).removeClass().addClass(‘error’); Wednesday, July 31, 13
7. Dom selections • So many ways to target elements in the DOM: (multiple selections return an array) • #id, element, .classname, * • ancestor descendant (.class1 .class2) • parent > child • prev + next • prev ~ siblings Wednesday, July 31, 13
8. Dom Selection Filters • You can also apply these filters to your selections: • :first, :last, :not(selector), :even, :odd, :eq(index), :gt(index), :lt(index), :header, :animated, :focus • $(‘:header:not(h2)’).css({ color: red }); Wednesday, July 31, 13
9. Dom content filters • :contains(Text) - $(‘div:contains(hello)’) • :empty - no child elements, including text • :has(Selector) - contains descendant element • :parent - all parent elements (they have child elements) Wednesday, July 31, 13
10. Dom Visibility Filters • :visible • :hidden Wednesday, July 31, 13
11. Dom Child Filters • :nth-child(index,odd,even) - index starts at 1, where arrays start at 0 • :first-child • :last-child • :only-child Wednesday, July 31, 13
12. Dom attribute filters • [attribute] • [attribute=value] • [attribute!=value] • [attribute^=value] (begins) • [attribute$=value] (ends) • [attribute*=value] (anywhere) • [attribute~=value] (word) • [attribute|=value] (hyphen) Wednesday, July 31, 13
13. Form filters • Elements • :button, :checkbox, :file, :image, :input, :password, :radio, :reset, :submit, :text • States • :checked, :disabled, :enabled, :focus, :selected Wednesday, July 31, 13
14. Straight-up Filtering • filter • $(" span"). filter(".yes").css(" background", "gray"); • is • if ($(this).is(":first-child")) { alert(" First child"); } Wednesday, July 31, 13
15. Events • JavaScript is an event based language. • For every user action, there is an applicable event you can reference to respond. • Good idea to clear your events also. Wednesday, July 31, 13
16. Events example • <button id=”btnSend”>Send</button> • $(‘btnSend’).on(‘click’, function() { • console.log(this); • }); • same as: • $(‘btnSend’).click(function() { }); Wednesday, July 31, 13
17. Class methods • 4 useful class methods: • no ‘.’ required, it already knows its a class • hasClass(‘classname’) • addClass(‘classname’) • removeClass(‘classname’) • toggleClass(‘classname’) Wednesday, July 31, 13
18. Changing attributes • Can use jQuery to ‘get’ or ‘set’ any HTML attribute • $(obj).attr(‘src’) - getter • $(obj).attr(‘src’,‘http://image.jpg’) - setter • $(obj).attr({ src: ‘http://image.jpg’ }) - setter, key/value pairs Wednesday, July 31, 13
19. More attribute info • < script type =" text/ javascript" > • $( output); • function output(){ • $("# info"). html( $(" img:first"). attr(" src")); • } </ script > </ head > < body > • < div id =" info" > </ div > • < img src =" images/ i1. jpg"/ > < br/ > • < img src =" images/ i2. jpg"/ > • </ body ></ html > • What will be displayed in the #info container? Wednesday, July 31, 13
20. off and on events • Good for memory management • $(obj).on(event, function() { } ); • $(obj).off(event); • simple setup: • $(obj).off().on(‘click’,function() { }); Wednesday, July 31, 13
21. Effects • Hide • $(obj).hide(); • Show • $(obj).show(); • Toggle - alternates between the states • $(obj).toggle(); Wednesday, July 31, 13
22. Animation • Fade In • $(obj).fadeIn(); • Fade Out • $(obj).fadeOut(); • Durations • $(obj).fadeIn(1600); (ms) • $(obj).fadeIn(‘slow’); (string: slow,normal, or fast) Wednesday, July 31, 13
23. Timing Parameters • Accepted parameters are: • ‘slow’ • ‘normal’ • ‘fast’ • 1000 (number in ms, no quotes) Wednesday, July 31, 13
24. Animation... • toggle - alternates between show and hide • $(obj).toggle(); • $(obj).toggle(2000); • $(obj).toggle(‘slow’); Wednesday, July 31, 13
25. Animation... • show/hide - can be animated as well • $(obj).show(); • $(obj).show(2000); • $(obj).show(‘slow’); • mimics the toggle animation Wednesday, July 31, 13
26. • Sliding - blinds, wipe up/down • $(obj).slideUp(); • $(obj).slideDown(); • $(obj).slideToggle(); • handles same parameters as the previous Animation... Wednesday, July 31, 13
27. Queueing • Can fire off events after other events complete • $(obj).slideToggle(1000, function() { • $(obj).toggle(‘slow’); • }); Wednesday, July 31, 13
28. Chaining • Can chain your jQuery commands • Reduces the need for selecting elements repeatedly • For long lines, break -before- the period Wednesday, July 31, 13
29. Chaining, example $(document).ready(function() { $('#btn').on('click', function(e) { $('.toggler').slideToggle(2000, function() { $('.toggler').toggle('slow') .addClass('toggled') .css('width',600) .css(‘height’,800); }); }); }); Wednesday, July 31, 13
30. Condensing attributes • .css() can handle keys and values • { key: value } • .css( { • width: 600, • height: 800 • }); Wednesday, July 31, 13
31. AJAX • AJAX - Asynchronous JavaScript and XML • Asynchronous - not synchronized, async • means the browser can still function while posts and callbacks are performed Wednesday, July 31, 13
32. Data() • return value from the AJAX callback • typically in these formats: • JSON • XML • JSONP Wednesday, July 31, 13
33. XML • Extensible Markup Language • node based, similar to HTML • can be slow, as it does its own ‘dom’ parsing Wednesday, July 31, 13
34. JSON • JavaScript Object Notation • fast, lightweight • key/value pairs • key is a string, an identifier • value can be any data type Wednesday, July 31, 13
35. Data Types • object - key/value { } • array - [] indexes • string - “ ” • number - 0, digits • boolean - true/false • null Wednesday, July 31, 13
36. jQuery UI • Interactions • Widgets • Effects • Utilities • relies on jQuery Wednesday, July 31, 13
37. Interactions • Draggable • Droppable • Resizable • Selectable • Sortable Wednesday, July 31, 13
38. Widgets • Accordion • Autocomplete • Button • Datepicker • Dialog • Menu • Progressbar • Slider • Spinner • Tabs • Tooltip Wednesday, July 31, 13
39. Effects • Add Class • Color Animation • Effects library • Remove Class • Show,hide,toggle Wednesday, July 31, 13
40. Utilities • Position • Widget Factory - create your own jQuery interactions Wednesday, July 31, 13