Jquery introduce
Download as PPTX, PDF0 likes245 views
The document discusses fundamental jQuery concepts including selectors, arrays/objects, event handling, custom events, and deferred/promised objects. It provides examples of how jQuery simplifies DOM manipulation and event handling compared to native JavaScript. Key points covered include how jQuery supports CSS selectors, methods for iterating arrays and objects, the capturing and bubbling phases of event handling, custom events, and how jQuery handles asynchronous programming through deferred and promised objects.
Jquery introduce
- 1. Fundamental of jQuery Zhouquan.yezq Senior Web Developer
- 2. Agenda • Selector • Array/Object • Event handing • Custom event • Deferred/promised
- 3. What find something, then jQuery do some action does?
- 4. Selector Native DOM Support jQuery Support getElementById $(‘#id’) getElementByTagName $(‘div’) element getElementsByName $(‘input*name=“myinput”+’) $(‘*’)… div.class1 div .class1 div > .class1 http://www.w3.org/TR/CSS21/selector.html
- 6. Event Handing • Capturing • Bubbling http://www.quirksmode.org/js/events_order.h tml
- 7. W3C Model element1.addEventListener('click',doSomething2,true) jQuery ‘s delegate method and Backbone view Event use the bubble phase.
- 8. Custom Event $.trigger $(‘li’).on(‘mycustomevent’,function(){ //todo }) $(‘li’).trigger(‘mycustomevent’); Our pub/sub method idea come from here
- 9. Deferred/Promised 01: challenges with the Async programming http://blogs.msdn.com/b/ie/archive/2011/09/11/asynchronous-programming-in-javascript-with-promises.aspx 02: 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