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

Czym jest jQuery?

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

Witaj, świecie 4.<script type="text/javascript 5.src=" $(document).ready(function() { 8.$('button').click(function() { 9.alert('Witaj, świecie!'); }); 10.}); Kliknij 'Witaj, świecie!'

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

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

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

jQuery slideDown $(document).ready(function(){ 7. $("#flip").click(function(){ 8. $("#panel").slideDown("slow"); 9. }); 10.}); #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. } Kliknij! 29. Panel został rozsunięty!

jQuery slideUp $(document).ready(function(){ 7. $("#flip").click(function(){ 8. $("#panel").slideUp("slow"); 9. }); 10.}); #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. } Kliknij! 29. Panel został rozsunięty!

jQuery slideToggle $(document).ready(function(){ 7. $("#flip").click(function(){ 8. $("#panel"). slideToggle("slow"); 9. }); 10.}); #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. } Kliknij! 29. Panel został rozsunięty!

$(document).ready(function(){ 7. $("button").click(function(){ 8. $("#div1").fadeIn(); 9. $("#div2").fadeIn("slow"); 10. $("#div3").fadeIn(3000); 11. }); 12.}); Kliknij! jQuery FadeIn

$(document).ready(function(){ 7. $("button").click(function(){ 8. $("#div1").fadeOut(); 9. $("#div2").fadeOut("slow"); 10. $("#div3").fadeOut(3000); 11. }); 12.}); Kliknij! jQuery FadeOut

$(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.}); Kliknij! jQuery fadeToggle

$(document).ready(function(){ 7. $("button").click(function(){ 8. $("#div1"). fadeToggle(); 9. $("#div2"). fadeToggle("slow"); 10. $("#div3"). fadeToggle(3000); 11. }); 12.}); Kliknij! jQuery fadeToggle

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