jquery应用开发中的四点：选择器、属性操作、事件、延迟对象

1. jQuery$用
TS @C5chevion

2. jQuery
一、选择器
二、属性操作
三、事件
四、延迟对象

3. V=A

4. #W0H4X
$( .category :radio )
$( .category input:radio )
$( .category input[type=radio] )

5. HTMLOAPI
• getElementById
• getElementsByName
• getElementsByTagName
• querySelector€IE8+
• querySelectorAll€IE8+
• getElementsByClassName€IE9+
/
_3

6. jQuery=A
• $(document)
• $( #myId )
• $( div.myClass )
• $( input[name=first] )
• $( div div + p ~ a )
• $( input:hidden )

7. SizzleBR
• = 1.3
• W
• 4KB
• /
• O)}GitHub

8. Sizzle - EN
$( div#container p + .demo input[type=checkbox] )
• id containerdiv
• @;Kp
token)A
• class demorjK
• JKinput‚:hH/type checkbox

9. -(BRUL:

10. +*NCSS=AX
div p a em {
…
}
1miEu

11. =A7/
• ID?bf Tag?bf class?bf querySelector $
• ?bfvEu‚1mi‚sSF8`y
• 'g?bf07

12. [
• FRt‚find}filter#
• classFtag
http://jsperf.com/~/
_3
http://learn.jquery.com/performance/optimize-selectors/ ~jQueryO!XI

13. 46K
$( #container div.text )
$( div.text, #container )
$( #container ) .find( div.text )

14. 46K
$( div.data .gonzalez )
$( .data td.gonzalez )

15. 46K
$( .data table.attendees td.gonzalez )
$( .data td.gonzalez )

16. 46K
$( .buttons * )
$( .buttons ) .children( )

17. 46K
$( .category :radio )
$( .category input:radio )
$( .category input[type=radio] )

18. F3
$( #container ).css( background, red ).show( );
$( #container ).find( li ).show( ).end( ).hide( );
preObject

19. $.fn.grandparent = function(){
return this.parent().parent();
}
$( A ).grandparent( ).end( )

20. pushStack
$.fn.grandparent = function(){
var elem = this.parent( ).parent( );
return this.pushStack( elem.get( ) );
}

21. for ( i = 0; i 10000; i++ ) {
var a = $( .aaron );
a.append( i );
}

22. M;
var a = $( .aaron );
for ( i = 0; i 10000; i++ ) {
a.append( i );
}

23. var $mylist = $( #mylist );
for ( var i=0; i 1000; i++ ) {
$mylist.append( li + i + /li );
}

24. @!D
var $mylist = $( #mylist ),
htmlStr = [];
for ( var i=0; i 1000; i++ ) {
htmlStr.push( li + i + /li );
}
$mylist.append( htmlStr.join() );

25. V.D

26. #W8
X
input id=demo type=checkbox checked=checked /
$( #demo ).attr( checked )
$( #demo ).prop( checked )

28. input type=radio name=sex value=2

29. checked=checked
input type=radio name=sex value=

30. Demo

31. attr data
$( #input ).attr( hello, 1 )
$( #input ).data( hello, 2 )
document.getElementById( input ).dataset.hello = “3
$.cache[index].data

32. V

34. click
blur
change
focus
select
submit
error
ready
……
addEventlistener
attachEvent

35. z+xT LaxT klxT

36. .event
bind / unbind
live / die
delegate / undelegate
one
on / off
on / off

37. element.on(click, p, function(){})
jQuery.fn.on
jQuery.event.add
jQuery.event.dispatch
jQuery.event.fix
jQuery.event.handlers
p6B-|G

39. 7/
• Event Delegation
• sSFlive
• @;Fon / off

40. #WG2'
,oN4AA*B‚.w9 qCdPY$

41. %VJI

42. Deffered
• = 1.5
• Q|GX}{IEV!n
• (CommonJSPromises/A;=‚Z,

43. Deffered - Api
• deferred = $.Deferred( )
• deferred.done(Fun)
• deferred.fail(Fun)
• deferred.then(Fun, Fun)
• deferred.always(Fun)
• deferred.resolve( )
• deferred.reject( )
• deferred.promise( )
• $.when(deferred)
Demo1
Demo2

44. $.ajax
$.ajax()
return defferredc
Demo

45. $.Deferred1,
• $.Deferred;5MG
• demo

46. $(elem).promise
• = 1.6
• 5-D'%(action)]^
• wU

47. Promise
• Defferede

48. $(elem).promise
$(div).each(function( i ) {
$( this ).fadeIn().fadeOut( 1000 * (i+1) );
});
$( div ).promise().done(function() {
$( p ).append( Finished! );
});
Demo

49. $(elem).promise
var effect = function() {
return $(div).fadeIn(800).delay(1200).fadeOut();
};
$.when( effect() ).done(function() {
$(p).append( Finished! );
});

50. P
• 7

51. FF 31+VChrome 33+VSafari 8+VAndroid Browser 4.4.4+
• Q
• when
• WinJS
• RSVP.js
• ES6-Promise (subset of rsvp.js)

52. 19Q?
• How browsers workƒ
• jQuery Api
• Promise/A
• JavaScript Promise

53. Thx QA