1 Podstawy jQuery w aplikacjach ASP.NET Web Forms Łukasz Małek, Jakub Maćkiewicz

2 Czym jest jQuery?

3 Główne przyczyny rozwoju jQuery. Źródło: Rafał Jońca - Kurs jQuery

4 1. 2. 3. Witaj, świecie 4. 6. 7.$(document).ready(function() { 8.$('button').click(function() { 9.alert('Witaj, świecie!'); }); 10.}); 11. 12. 13. 14. Kliknij 15. 16. 'Witaj, świecie!' { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.pl/1/808010/slides/slide_4.jpg", "name": "1. 2. 3.", "description": "Witaj, świecie 4. 6. 7.$(document).ready(function() { 8.$( button ).click(function() { 9.alert( Witaj, świecie! ); }); 10.}); 11. 12. 13. 14. Kliknij 15. 16. Witaj, świecie! .", "width": "800" } 5 $( document ).ready(function(){ $("button").click(function(){ $("p").hide(); }); This is a heading This is a paragraph. This is another paragraph. Click me Ukrycie tekstu

6 Ukrycie tekstu II $(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); This is a heading This is a paragraph. This is another paragraph. Click me

7 Ukrycie tekstu III $(document).ready(function(){ $("button").click(function(){ $(this).hide(); }); This is a heading This is a paragraph. This is another paragraph. Click me

8 jQuery slideDown 1. 2. 3. 4. 5. 6.$(document).ready(function(){ 7. $("#flip").click(function(){ 8. $("#panel").slideDown("slow"); 9. }); 10.}); 11. 12. 13.#panel,#flip 14. { 15.padding:5px; 16.text-align:center; 17.background-color:#e5eecc; 18.border:solid 1px #c3c3c3; 19. } 20.#panel 21. { 22.padding:50px; 23.display:none; 24. } 25. 26. 27. 28. Kliknij! 29. Panel został rozsunięty! 30. 31.

9 jQuery slideUp 1. 2. 3. 4. 5. 6.$(document).ready(function(){ 7. $("#flip").click(function(){ 8. $("#panel").slideUp("slow"); 9. }); 10.}); 11. 12. 13.#panel,#flip 14. { 15.padding:5px; 16.text-align:center; 17.background-color:#e5eecc; 18.border:solid 1px #c3c3c3; 19. } 20.#panel 21. { 22.padding:50px; 23.display:yes; 24. } 25. 26. 27. 28. Kliknij! 29. Panel został rozsunięty! 30. 31.

10 jQuery slideToggle 1. 2. 3. 4. 5. 6.$(document).ready(function(){ 7. $("#flip").click(function(){ 8. $("#panel"). slideToggle("slow"); 9. }); 10.}); 11. 12. 13.#panel,#flip 14. { 15.padding:5px; 16.text-align:center; 17.background-color:#e5eecc; 18.border:solid 1px #c3c3c3; 19. } 20.#panel 21. { 22.padding:50px; 23.display:none; 24. } 25. 26. 27. 28. Kliknij! 29. Panel został rozsunięty! 30. 31.

11 1. 2. 3. 4. 5. 6.$(document).ready(function(){ 7. $("button").click(function(){ 8. $("#div1").fadeIn(); 9. $("#div2").fadeIn("slow"); 10. $("#div3").fadeIn(3000); 11. }); 12.}); 13. 14. 15. 16. Kliknij! 17. 18. 19. 20. 21. 22. jQuery FadeIn

12 1. 2. 3. 4. 5. 6.$(document).ready(function(){ 7. $("button").click(function(){ 8. $("#div1").fadeOut(); 9. $("#div2").fadeOut("slow"); 10. $("#div3").fadeOut(3000); 11. }); 12.}); 13. 14. 15. 16. Kliknij! 17. 18. 19. 20. 21. 22. jQuery FadeOut

13 1. 2. 3. 4. 5. 6.$(document).ready(function(){ 7. $("button").click(function(){ 8. $("#div1").fadeTo("slow",0.05); 9. $("#div2").fadeTo("slow",0.4); 10. $("#div3").fadeTo("slow",0.9); }); 11.}); 12. 13. 14. 15. Kliknij! 16. 17. 18. 19. 20. 21. jQuery fadeToggle

14 1. 2. 3. 4. 5. 6.$(document).ready(function(){ 7. $("button").click(function(){ 8. $("#div1"). fadeToggle(); 9. $("#div2"). fadeToggle("slow"); 10. $("#div3"). fadeToggle(3000); 11. }); 12.}); 13. 14. 15. 16. Kliknij! 17. 18. 19. 20. 21. 22. jQuery fadeToggle

15 Główne zalety korzystania z jQuery Źródło: Rafał Jońca - Kurs jQuery