Your SlideShare is downloading. ×
jQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

jQuery

2,575
views

Published on

Published in: Technology

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,575
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
141
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Demo
  • Demo
  • Demo
  • Demo
  • Demo
  • Demo
  • Demo
  • Demo
  • Transcript

    • 1. jQuery
      Jon Erickson
      @jonerickson
      http://jonerickson.me/
      http://jonerickson.me/jquery/
    • 2. What is jQuery?
      JavaScript framework that makes your life easier
      Selectors & Chaining
      DOM Traversing
      DOM Manipulation
      Event Handling
      Animations/Effects
      AJAX
      Built-in Utilities
      Extensible
      Tons of plug-ins built by the community for our use
    • 3. Why jQuery?
      I’m not an expert at JavaScript
      The people who created jQuery are!
      Do not need to worry about cross-browser issues (all abstracted)
      Light Weight (19 kb compressed)
      DRY – Simple plug-in model allows for code reuse
      Animations/Effects are simple
      Community support is growing rapidly
      Microsoft adoption (included in MVC template)
      Tutorials, plug-ins, etc.
      Client-side scripting is fun with jQuery and breathes some new life into your applications
      Focus more on the code that solves your problem
      Amazon, BBC, Dell, Google, IBM, NBC, Netflix, Twitter
    • 4. Sample jQuery
      Our DOM
      Include jQuery
      The ‘ready event’ – Binds a function to be executed whenever the DOM is ready
      Select the ‘toggleContent’ DOM element and bind a click event handler to it.
      Select the ‘content’ DOM element and set the text to ‘Hello World!’
      Prevent the default behavior of the anchor tag by returning false
    • 5. Dollar Function $();
      JavaScript identifiers can start with $
      The jQuery framework automatically assigns ‘$’ to the ‘jQuery’ function
      $ === jQuerytrue
      $(selector) is same as jQuery(selector)
      Can use utility function to unassign $
      $.noConflict();
      $ === jQuery; false
      Can reassign jQuery to another variable
      $j = $.noConflict();
      $j === jQuery; true
      $j === $; false
      $ === jQuery; false
    • 6. Document Ready Event
      $(document).ready(fn);
      The bound function will be called the instant the DOM is ready to be read and manipulated.
      As many as you want on the page.
      Executed in the order they were added.
      There is a shortcut: $(fn);
    • 7. Selectors
      CSS3 Selectors
    • 8. Filters
      $(‘div:empty’), $(‘:empty’), $(‘div:not(:empty)’)
      Custom Filter Used
    • 9. Chaining
      Most jQuery methods return another jQuery object (usually the same collection), which means you can chain method calls together with a fluent like syntax
      Some methods that stop a chain, these methods return a value from the jQuery object
      .css(name), .text(), .html(), .val(), .height(), .width(), .is(‘:visible’)
      Some methods will return a different jQuery collection, you can revert to the previous collection by calling .end();
    • 10. Attributes & Classes
      Getters & Setters for attr, html, text, val
      Getter (returns String – breaks chain)
      var text = $(‘#myDiv’).text();
      Setter (returns jQuery)
      $(‘#myDiv’).text(‘Hello World!’);
      text() escapes html()
      val() used with inputs
      attr() can take JSON
      Add, Remove for Attributes & Classes
      .removeAttr(‘someAttr’);
      .addClass(‘someClass’);
      .removeClass(‘someClass’);
      .toggleClass(‘someClass’);
    • 11. Traversing
      Family
      parent, parents, siblings, children
      Proximity
      closest, next, prev, nextAll, prevAll
      Searching
      find
    • 12. Events
      .bind(type, data, fn)
      • Binds a handler to an event on all matched elements
      .one(type, data, fn)
      • Binds a handler to be executed only once for each matched element
      .trigger(event, data)
      • Trigger an event to occur on all matched elements
      .unbind(type, fn)
      • Removes event handlers from all matched elements
      .live(type, fn)
      • Binds a handler to an event on all currently matched and future matched elements.
      .die(type, fn)
      • Removes a bound live event.
      .hover(fnOver, fnOut)
      • Interaction helper that will handle mouseover and mouseout
      .toggle(fn1, fn2, fn3, fnN, …)
      • Interaction helper that will toggle among two or more function calls every other click.
    • Event Helpers
      blur, change, click, dblclick, error, focus, keydown, keypress, keyup, load, mousedown, mouseenter, mouseleave, mousemove, mouseup, resize, scroll, select, submit, unload
    • 13. Manipulation
      Inserting Inside
      append, prepend
      appendTo, prependTo
      Inserting Outside
      after, before
      insertAfter, insertBefore
      Inserting Around
      wrapInner
      wrap
      wrapAll
      Replacing
      replaceWith, replaceAll
      Removing
      empty, remove
      Copying
      clone
    • 14. Effects
      Basics
      show, hide, toggle
      Sliding
      slideUp, slideDown, slideToggle
      Fading
      fadeIn, fadeOut, fadeTo (opacity 0-1)
      Custom
      animate, stop
    • 15. Plug-ins
      Extremely Simple – Promotes code reuse and DRY principle
      $.fn.MyPlugin = function(params) {};
      Return a jQuery object to prevent from “breaking the chain”
      Unless you are returning a specific value
      Best Practice is to wrap the plug-in declaration within an anonymous JavaScript function in order to prevent collisions with the use of $
      Within the plug-in ‘this’ refers to the jQuery object
    • 16. AJAX
      Helpers
      load, get, getJSON, getScript, post (all use $.ajax behind the scenes)
      $.ajaxSetup(options) can be used to globally set the default options for all AJAX request. You can still override these within each AJAX request object.
      Local Events – subscribed to within AJAX request object
      Global Events – broadcast to all elements in the DOM
      Can be disabled within the AJAX request object’s ‘global’ property
      .bind(‘ajaxStart’, fn) or .ajaxStart(fn)
      G | ajaxStart
      L | beforeSend
      G | ajaxSend
      L | success
      G | ajaxSuccess
      L | error
      G | ajaxError
      L | complete
      G | ajaxComplete
      G | ajaxStop
    • 17. Utility Functions
      Array and Object Operations
      $.each(object, callback) – Callback function will run for each item in the object. The each method is meant to be an immutable iterator and returns the original array.
      $.map(array, callback) – Callback function will run for each item in the array. The map method can be used as an iterator, but is designed to be used for manipulation of the supplied array and returns a new array.
      $.merge(first, second) – Merges the second array into the first array.
      $.unique(array) – Removes duplicate elements (only works on arrays of DOM elements).
      $.extend(object) – Add functions into the jQuery namespace.
      $.extend(deep, target, object1, objectN) – Merge values from objects 1 to N into target object. Deep is an optional boolean that if true, tells jQuery to do a deep copy.
      $.grep(array, callback, invert) – Iterates through array, and returns a new array with values from the original array that satisfy the criteria specified in the callback.
      $.inArray(value, array) – Gets the index of the value in the array (-1 if not found).
      String Operations
      $.trim(str) – Removes whitespace from the given string.
      Test Operations
      $.isArray(obj) – Determines if the object is an array.
      $.isFunction(obj) – Determines if the object is a function.
    • 18. jQuery Data
      Can store data on one or more jQuery elements
      .data(name, value)
      value is an object
      Retrieves data from the first element in the jQuery object
      .data(name)
    • 19. Resources
      jQuery Main
      http://jquery.com
      http://docs.jquery.com/Downloading_jQuery
      jQuery API Documentation
      http://api.jquery.com
      http://docs.jquery.com
      jQuery UI
      http://jqueryui.com
      http://jqueryui.com/themeroller/
      jQuery Blog
      http://blog.jquery.com/
      Around The Web
      http://stackoverflow.com
      http://www.nettuts.com
      http://www.smashingmagazine.com
      Tools
      Visual Studio JavaScript Intellisense Support (KB958502)
      http://getfirebug.com/ (Firebug Firefox Plug-in)
      http://jsbin.com/ (JS Bin - Collaborative JavaScript Debugging)
      Twitter
      @jquery, @jqueryui, @jresig, @rem, @codylindley , @reybango, @elijahmanor, @jamespadolsey, @brandonaaron, @malsup, @pbakaus, @rworth

    ×