Jquery overview 2013

352 views

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
352
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Jquery overview 2013

  1. 1. jQuery overview
  2. 2. Functions • DOM Selector and manipulation • Events • Effect • Ajax • Deferred • Utilities and Plugins
  3. 3. DOM Selector • $(‘#id’) • $(‘.class’) • $(‘element’) • $(‘[attr=”value”]’) • $(‘parent descendant’) • $(‘multiple, multiple, multiple’) • #.parent(), #.children() • #.next(), #.prev() • #.eq(index), #.not(selector) • #.find(selector) • #.filter(selector)
  4. 4. DOM manipulation • #.each(function (index) {}) • #.before(obj), #.prepend(obj), #.append(obj), #.after(obj) • #.attr(k,v), #.css(k,v) • #.addClass(c), #.removeClass(c), #.toggleClass(c) • #.html(s), #.text(s), #.val(v) • #.width(w), #.height(h) • #.remove() • #.clone() • #.data(k,v)
  5. 5. Events • #.on(event, func), #.off(event, func), #.bind(event, func) • #.click(func) • #.focus(func), #.blur(func), #.hover(func) • #.submit(func), #.change(func) • #.trigger(event) • #.ready(func), #.load(func) • #.resize(func), #.scroll(func) • $.proxy(func,context)
  6. 6. Effects • #.animate(props,time,func) • #.show(), #.hide(), #.toggle() • #.fadeIn(time), #.fadeOut(time) • #.slideDown(time), #.slideUp(time) • #.delay(time) • #.stop(), #.finish() • $.fx.interval • $.fx.off
  7. 7. Ajax • $.ajax(url,props) • $.get(url, func), $.post(url, data, func) • $.getJSON(url, func) • $.param(data) • #.serialize(), #.serializeArray() • #.done(func), #.fail(func), #.always(func)
  8. 8. Deferred • $.Deferred • #.promise() • #.resolve(data), #.reject(data) • #.state() • #.done(func), #.fail(func), #.always(func) • #.progress(func), #.notify(data) • #.then(func, func, func) • $.when(func, func, func, ...)
  9. 9. Utilities and Plugins • $.support • $.each(collection, func) • $.extend(target, object) • $.contains(container, target) • $.parseJSON(s), $.parseXML(s) • $.fx.jquery • $.your_plugin = function (params() {} • $.fx.your_plugin = function (params) {} • $.fx.extend(plugins)

×