際際滷

際際滷Share a Scribd company logo

I tmozg js_school

Download as PPTX, PDF
ITmozg
ITmozg
1 of 35
Download to read offline
1 于亠亟亠仆亳亠 于 JavaScript
2 JavaScript 仂仂亳仗仆仂-仂亳亠仆亳仂于舒仆仆亶 从亳仗仂于亶 磶从 仗仂亞舒仄仄亳仂于舒仆亳 弌仂亰亟舒仆 于 1995 亞仂亟 仂仆仂于仆仂仄 亳仗仂仍亰亠 仆舒 舒亶舒 从舒从 从仍亳亠仆从仂亠 仗亳仍仂亢亠仆亳亠
3 仂弍亠仆仆仂亳 JS 亳仆舒仄亳亠从仂亠 亳仗亳亰亳仂于舒仆亳亠 仆仂于舒仆 仆舒 仂弍亠从舒 亠 磦仍磳 仂弍亠从仂仄 仍仂亢亠仆仆亠 仆从亳亳 Closure Run-time 亰舒于亳亳仄亶 仂亟亟亠亢亳于舒亠 舒仆仂仆亳仄仆亠 仆从亳亳
4 Hello world <script type="text/javascript"> alert(Hello world); </script>
5 个仆从亳亳 于 JS <script type="text/javascript"> var myFunction = function() { var count = 0; return function() { return ++count; }; }; myFunction(); </script>
6 丐亳仗 亟舒仆仆 于 JS JS Array JS Boolean JS Date JS Math JS Number JS String JS RegExp JS Global
7 Array 1. var myArray = []; 2. var myArray4 = {}; 3. var myArray2 = new Array(); myArray.push(new value);
8 Boolean 仗仂仍亰亠 亟仍 从仂仆于亠舒亳亳 仍ﾐ頴笑覚 亳仗舒 从 弍仍亠于仂仄 true/false
9 Date 仗仂仍亰亠 亟仍 舒弍仂 于亠仄亠仆亠仄 亳 亟舒仂亶 var d = new Date(); alert(d.getFullYear());
10 Math 仗仂仍亰亠 亟仍 舒亰仍亳仆 仄舒亠仄舒亳亠从亳 亰舒亟舒 var x = Math.PI; // 3.141592653589793 var y = Math.sqrt(16); // 4
11 String var txt = new String("仗亳于亠"); 亳仍亳 仗仂仂 var txt = "仗亳于亠"; var slice = text.substr(1,3); // "亳于"
12 RegExp 仗仂仍亰亠 亟仍 仂弍仂亰仆舒亠仆亳 仗仂仍亠亟仂于舒亠仍仆仂亳 亳仄于仂仍仂于 var patt = new RegExp(".*", "g"); 亳仍亳 仗仂仂 var patt = /.*/g; patt.exec("仂从舒");
13 Global 弌仂亟亠亢亳 亞仍仂弍舒仍仆亠 仆从亳亳 JavaScript 仆亠仄 于亠亞仂 13 仆从亳亶 亳 3 于仂亶于舒
14 DOM
15 亳弍仍亳仂亠从亳 JS jQuery DOJO Prototype MooTools YUI
16 jQuery $("p.neat").addClass("ohmy").show("slow");
17 DOJO require(["dojo/dom", "dojo/fx", "dojo/domReady!"], function(dom, fx){ var greeting = dom.byId("greeting"); greeting.innerHTML += " from Dojo!"; fx.slideTo({ top: 100, left: 200, node: greeting }).play(); });
18 Yahoo - YUI YUI().use('node', function (Y) { Y.all('p.neat').addClass('ohmy').transition({ duration: 1, // seconds opacity : 0 }); });
19 Prototype $$('p').addClassName('ohmy').show()
20 MooTools $$('p').set('class', 'ohmy').show();
21 jQuery 弌亠仍亠从仂 亳弍 丐舒于亠亳仆亞 舒仆亳仗仍亳 CSS 弌仂弍亳 亅亠从 AJAX 丕亳仍亳
22 jQuery 亠仍亠从仂 $('#documentId') $('div') $('p.text') $('input*name=total+); 亠于亟仂- 亠仍亠从仂, :button, :checkbox, :checked, :contai ns, :disabled, :enabled, :empty
23 jQuery 舒亳弍 $('p').addClass('super') $('div').eq(0).html('new content') $('p').toggleClass('super') $('input').removeProp('checked')
24 jQuery 舒于亠亳仆亞 $('p').children('span') $('div').closest('fieldset') $('div').parents('fieldset') $('input').not('.super') $('div').find('p').addClass('super') .end().addClass('great')
25 jQuery 仄舒仆亳仗仍亳亳 $('.inner').append('<p>Test</p>'); $('.inner').after('<p>Test</p>'); $('.hello').clone().appendTo('.goodbye'); $('.hello').remove(); $('div.inner').replaceWith('<h2>New heading</h2>'); $('.inner').wrap('<div class="new" />');
26 jQuery CSS $(this).css("background-color") $("p").height() $("p").position() $("p").scrollTop()
27 jQuery 仂弍亳 $('div').bind() $('div').live() $('div').delegate() $('div').on()
28 $.bind() $( "#members li a" ).bind( "click", function( e ) {} ); $( "#members li a" ).click( function( e ) {} ); 仂仂亶 仂-弍舒亰亠仆亶 亶, 亠仍亳 仗仂 #id 仍仂亟亳 仂弍亳 亠 舒弍仂舒亠 亟亳仆舒仄亳亠从亳仄亳 仍亠仄亠仆舒仄亳 丐礀亠仍亶 仆舒 弍仂仍亳 于弍仂从舒
29 $.live() $( "#members li a" ).live( "click", function( e ) {} ); 丐仂仍从仂 1 亠亟仍亠 仂弍亳亶 舒弍仂舒亠 亟亳仆舒仄亳亠从亳仄亳 仍亠仄亠仆舒仄亳 丕舒亠于亳亶 于亠亳亳 jQuery 1.7 弌亠仍亠从仂 仆亠 亳仗仂仍亰亠 event.stopPropagation() 仆亠 舒弍仂舒亠 仂弍仍亠仄 仗仂亳亰于仂亟亳亠仍仆仂
30 $.delegate() $( "#members" ).delegate( "li a", "click", function( e ) {} ); 舒从 $.live() 仂舒亰亟仂 弍亠亠 $.live() 亠仗亳于仆亶, 仗仂 舒于仆亠仆亳 $.bind() 亳 $.live()
31 $.on() 弍亳亶 亳仆亠亠亶 亟仍 仂弍亳亶 $( "#members li a" ).on( "click", function( e ) {} ); $( "#members li a" ).bind( "click", function( e ) {} ); $( document ).on( "click", "#members li a", function( e ) {} ); $( "#members li a" ).live( "click", function( e ) {} ); $( "#members" ).on( "click", "li a", function( e ) {} ); $( "#members" ).delegate( "li a", "click", function( e ) {} );
32 jQuery 亠从 $('#book').animate({ opacity: 0.25, left: '+=50', height: 'toggle' }, 5000, function() { // Animation complete. });
33 jQuery AJAX $.ajax({ url: "http://fiddle.jshell.net/favicon.png", beforeSend: function ( xhr ) { xhr.overrideMimeType("text/plain; charset=x-user-defined"); } }).done(function ( data ) { if( console && console.log ) { console.log("Sample of data:", data.slice(0, 100)); } });
34 jQuery 亳仍亳 $.browser() $.trim() $.data() $.each() $.type()
35 仂仗仂? 舒于仍ﾑ从仂于 舒仆亳亳仍 d.pavluchkov@itmozg.ru

More Related Content

I tmozg js_school

  • 1. 1 于亠亟亠仆亳亠 于 JavaScript
  • 2. 2 JavaScript 仂仂亳仗仆仂-仂亳亠仆亳仂于舒仆仆亶 从亳仗仂于亶 磶从 仗仂亞舒仄仄亳仂于舒仆亳 弌仂亰亟舒仆 于 1995 亞仂亟 仂仆仂于仆仂仄 亳仗仂仍亰亠 仆舒 舒亶舒 从舒从 从仍亳亠仆从仂亠 仗亳仍仂亢亠仆亳亠
  • 3. 3 仂弍亠仆仆仂亳 JS 亳仆舒仄亳亠从仂亠 亳仗亳亰亳仂于舒仆亳亠 仆仂于舒仆 仆舒 仂弍亠从舒 亠 磦仍磳 仂弍亠从仂仄 仍仂亢亠仆仆亠 仆从亳亳 Closure Run-time 亰舒于亳亳仄亶 仂亟亟亠亢亳于舒亠 舒仆仂仆亳仄仆亠 仆从亳亳
  • 4. 4 Hello world <script type="text/javascript"> alert(Hello world); </script>
  • 5. 5 个仆从亳亳 于 JS <script type="text/javascript"> var myFunction = function() { var count = 0; return function() { return ++count; }; }; myFunction(); </script>
  • 6. 6 丐亳仗 亟舒仆仆 于 JS JS Array JS Boolean JS Date JS Math JS Number JS String JS RegExp JS Global
  • 7. 7 Array 1. var myArray = []; 2. var myArray4 = {}; 3. var myArray2 = new Array(); myArray.push(new value);
  • 8. 8 Boolean 仗仂仍亰亠 亟仍 从仂仆于亠舒亳亳 仍ﾐ頴笑覚 亳仗舒 从 弍仍亠于仂仄 true/false
  • 9. 9 Date 仗仂仍亰亠 亟仍 舒弍仂 于亠仄亠仆亠仄 亳 亟舒仂亶 var d = new Date(); alert(d.getFullYear());
  • 10. 10 Math 仗仂仍亰亠 亟仍 舒亰仍亳仆 仄舒亠仄舒亳亠从亳 亰舒亟舒 var x = Math.PI; // 3.141592653589793 var y = Math.sqrt(16); // 4
  • 11. 11 String var txt = new String("仗亳于亠"); 亳仍亳 仗仂仂 var txt = "仗亳于亠"; var slice = text.substr(1,3); // "亳于"
  • 12. 12 RegExp 仗仂仍亰亠 亟仍 仂弍仂亰仆舒亠仆亳 仗仂仍亠亟仂于舒亠仍仆仂亳 亳仄于仂仍仂于 var patt = new RegExp(".*", "g"); 亳仍亳 仗仂仂 var patt = /.*/g; patt.exec("仂从舒");
  • 13. 13 Global 弌仂亟亠亢亳 亞仍仂弍舒仍仆亠 仆从亳亳 JavaScript 仆亠仄 于亠亞仂 13 仆从亳亶 亳 3 于仂亶于舒
  • 14. 14 DOM
  • 15. 15 亳弍仍亳仂亠从亳 JS jQuery DOJO Prototype MooTools YUI
  • 16. 16 jQuery $("p.neat").addClass("ohmy").show("slow");
  • 17. 17 DOJO require(["dojo/dom", "dojo/fx", "dojo/domReady!"], function(dom, fx){ var greeting = dom.byId("greeting"); greeting.innerHTML += " from Dojo!"; fx.slideTo({ top: 100, left: 200, node: greeting }).play(); });
  • 18. 18 Yahoo - YUI YUI().use('node', function (Y) { Y.all('p.neat').addClass('ohmy').transition({ duration: 1, // seconds opacity : 0 }); });
  • 19. 19 Prototype $$('p').addClassName('ohmy').show()
  • 20. 20 MooTools $$('p').set('class', 'ohmy').show();
  • 21. 21 jQuery 弌亠仍亠从仂 亳弍 丐舒于亠亳仆亞 舒仆亳仗仍亳 CSS 弌仂弍亳 亅亠从 AJAX 丕亳仍亳
  • 22. 22 jQuery 亠仍亠从仂 $('#documentId') $('div') $('p.text') $('input*name=total+); 亠于亟仂- 亠仍亠从仂, :button, :checkbox, :checked, :contai ns, :disabled, :enabled, :empty
  • 23. 23 jQuery 舒亳弍 $('p').addClass('super') $('div').eq(0).html('new content') $('p').toggleClass('super') $('input').removeProp('checked')
  • 24. 24 jQuery 舒于亠亳仆亞 $('p').children('span') $('div').closest('fieldset') $('div').parents('fieldset') $('input').not('.super') $('div').find('p').addClass('super') .end().addClass('great')
  • 25. 25 jQuery 仄舒仆亳仗仍亳亳 $('.inner').append('<p>Test</p>'); $('.inner').after('<p>Test</p>'); $('.hello').clone().appendTo('.goodbye'); $('.hello').remove(); $('div.inner').replaceWith('<h2>New heading</h2>'); $('.inner').wrap('<div class="new" />');
  • 26. 26 jQuery CSS $(this).css("background-color") $("p").height() $("p").position() $("p").scrollTop()
  • 27. 27 jQuery 仂弍亳 $('div').bind() $('div').live() $('div').delegate() $('div').on()
  • 28. 28 $.bind() $( "#members li a" ).bind( "click", function( e ) {} ); $( "#members li a" ).click( function( e ) {} ); 仂仂亶 仂-弍舒亰亠仆亶 亶, 亠仍亳 仗仂 #id 仍仂亟亳 仂弍亳 亠 舒弍仂舒亠 亟亳仆舒仄亳亠从亳仄亳 仍亠仄亠仆舒仄亳 丐礀亠仍亶 仆舒 弍仂仍亳 于弍仂从舒
  • 29. 29 $.live() $( "#members li a" ).live( "click", function( e ) {} ); 丐仂仍从仂 1 亠亟仍亠 仂弍亳亶 舒弍仂舒亠 亟亳仆舒仄亳亠从亳仄亳 仍亠仄亠仆舒仄亳 丕舒亠于亳亶 于亠亳亳 jQuery 1.7 弌亠仍亠从仂 仆亠 亳仗仂仍亰亠 event.stopPropagation() 仆亠 舒弍仂舒亠 仂弍仍亠仄 仗仂亳亰于仂亟亳亠仍仆仂
  • 30. 30 $.delegate() $( "#members" ).delegate( "li a", "click", function( e ) {} ); 舒从 $.live() 仂舒亰亟仂 弍亠亠 $.live() 亠仗亳于仆亶, 仗仂 舒于仆亠仆亳 $.bind() 亳 $.live()
  • 31. 31 $.on() 弍亳亶 亳仆亠亠亶 亟仍 仂弍亳亶 $( "#members li a" ).on( "click", function( e ) {} ); $( "#members li a" ).bind( "click", function( e ) {} ); $( document ).on( "click", "#members li a", function( e ) {} ); $( "#members li a" ).live( "click", function( e ) {} ); $( "#members" ).on( "click", "li a", function( e ) {} ); $( "#members" ).delegate( "li a", "click", function( e ) {} );
  • 32. 32 jQuery 亠从 $('#book').animate({ opacity: 0.25, left: '+=50', height: 'toggle' }, 5000, function() { // Animation complete. });
  • 33. 33 jQuery AJAX $.ajax({ url: "http://fiddle.jshell.net/favicon.png", beforeSend: function ( xhr ) { xhr.overrideMimeType("text/plain; charset=x-user-defined"); } }).done(function ( data ) { if( console && console.log ) { console.log("Sample of data:", data.slice(0, 100)); } });
  • 34. 34 jQuery 亳仍亳 $.browser() $.trim() $.data() $.each() $.type()
  • 35. 35 仂仗仂? 舒于仍ﾑ从仂于 舒仆亳亳仍 d.pavluchkov@itmozg.ru