Jquery introduce

219 views
177 views

Published on

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

  • Be the first to like this

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

No notes for slide

Jquery introduce

  1. 1. Fundamental ofjQueryZhouquan.yezqSenior Web Developer
  2. 2. Agenda• Selector• Array/Object• Event handing• Custom event• Deferred/promised
  3. 3. What find something, thenjQuery do some action does?
  4. 4. SelectorNative DOM Support jQuery SupportgetElementById $(‘#id’)getElementByTagName $(‘div’) elementgetElementsByName $(‘input*name=“myinput”+’) $(‘*’)…div.class1div .class1div > .class1http://www.w3.org/TR/CSS21/selector.html
  5. 5. Array/Object$.Each$.Map$.slice
  6. 6. Event Handing• Capturing• Bubblinghttp://www.quirksmode.org/js/events_order.html
  7. 7. W3C Model element1.addEventListener(click,doSomething2,true)jQuery ‘s delegate method and Backbone view Event use the bubble phase.
  8. 8. Custom Event$.trigger$(‘li’).on(‘mycustomevent’,function(){ //todo})$(‘li’).trigger(‘mycustomevent’);Our pub/sub method idea come from here
  9. 9. Deferred/Promised01: challenges with the Async programminghttp://blogs.msdn.com/b/ie/archive/2011/09/11/asynchronous-programming-in-javascript-with-promises.aspx02: jQuery$.ajax({ url: http://search.twitter.com/search.json, dataType: jsonp, data: { q: #IE10, rpp: 100 } }).success(function (data) { /* handle data */ }).error(function (error) { /* handle error */});03: How to make promised function

×