Uploaded byMatt Gifford
Let jQuery Rock Your World
The document is a personal reflection by Matt Gifford on building and coding, showcasing various jQuery techniques and best practices. It emphasizes the importance of performance optimization, proper code structure, and utilizing developer tools for efficient coding. Additionally, Gifford encourages creativity and shared inspiration in the tech community.
More Related Content
Similar to Let jQuery Rock Your World
![5G Explained! A High Level Overview [Introduction]](https://cdn.slidesharecdn.com/ss_thumbnails/5gexplainedahighleveloverview-260119165306-cc137a3e-thumbnail.jpg?width=640&height=640&fit=bounds)
Let jQuery Rock Your World
- 1.
- 2. I build stuff andI write about building stuff, too
- 3.
- 5. Today is justanother day Today I’m going to create something amazing
- 6. PIONEERS & INSPIRATION
- 18.
- 23.
- 24. This Easy! $(document).ready(function() { /* Write your kick ass code here */ });
- 26.
- 27.
- 28.
- 29. (function( $ ){ $.fn.myPlugin = function() { /* Fill your boots with custom plugin code */ }; })( jQuery );
- 30.
- 31.
- 32.
- 34.
- 39. DOM Manipulation Good... var myList = $('#list'); var myListItems = '<ul>'; for (i = 0; i < 1000; i++) { myListItems.append('<li>Item number ' + i + '</li>'); } myListItems += '</ul>'; myList.html(myListItems); Better... var myList = $('#list'); var myListItems = '<ul>'; for (i = 0; i < 1000; i++) { myListItems += '<li>Item number ' + i + '</li>'; } myListItems += '</ul>'; myList.html(myListItems);
- 40.
- 41.
- 42. Class Selectors Good... $(".className") Better... $("div.className") or... $(".className", "#myDiv")
- 44. Animation http://www.flickr.com/photos/waltimo/3816059877/
- 45. $('#button').click(function() { $('#myElement').animate({ opacity: 0.75, left: '50', }, 2000, function() { // Animation complete }); }); http://www.flickr.com/photos/waltimo/3816059877/
- 46.
- 47. Text http://www.flickr.com/photos/druclimb/879511557/
- 48. Look! Moving thingshere... yay! Content down here
- 49. Core Mode http://www.flickr.com/photos/xtnsgo/5934924558/
- 50. Core Mode jQuery... $('HTML').addClass('JS'); CSS... .JS #myDiv{display:none;}
- 51. It’s all about... timing
- 52. MAKE IT FAST http://www.flickr.com/photos/ujh/4307773392/
- 53.
- 55.
- 56.
- 57. Cache Variables Good... $('#item').css('color', '#ffff00'); $('#item').html('monkeh lovin is good lovin'); $('#item').css('background-‐color', '#ffffff'); Better... var item = $('#item'); item.css('color', '#ffff00'); item.html('monkeh lovin is good lovin'); item.css('background-‐color', '#ffffff');
- 58.
- 59. Chaining From this... var item = $('#item'); item.css('color', '#ffff00'); item.html('monkeh lovin is good lovin'); item.css('background-‐color', '#ffffff'); To this... var item = $('#item'); item.css('color', '#ffff00') .html('monkeh lovin is good lovin') .css('background-‐color', '#ffffff');
- 60. Good things still comein small packages http://www.flickr.com/photos/thunderchild5/6201699610/
- 61.
- 62. What would wedo without... Opera DragonFly Firebug / FireQuery Chrome Developer Tools Companion JS
- 63.
- 64.
- 65. Unit Testing QUnit JSUnit FireUnit
- 68. Beautiful Code -Style Guides Idiomatic.js jQuery Core Style Guide Google Javascript Style Guide
- 69. CHEATING is ok
- 71. rocks my world maybeit can rock your world too
- 72.
- 73. Today is justanother day Today I’m going to create something amazing (again)
- 74.